feat(Tile): add slug prop to SelectableTile and ExpandableTile (#…

…15222) * docs(Tile): scaffold slug story, add demo styles * feat(Tile): add slug to SelectableTile, ExpandableTile * test(snapshot): update snapshots * feat(Tile): add slug prop to Tile * test(snapshot): update snapshots * feat(Tile): add new tokens, add hover, selected styles * test(snapshot): update snapshots * feat(Tile): add new prop for rounded corners * style(Tile): fix border-radius on pseudo elements
carbon-design-system · Nov 28, 2023 · 3dd58b6 · 3dd58b6
1 parent 397366a
commit 3dd58b6
Show file tree

Hide file tree

Showing 16 changed files with 686 additions and 29 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -277,9 +277,19 @@ Array [
   "slugBackground",
   "slugBackgroundHover",
   "slugCalloutAuraEnd",
+  "slugCalloutAuraEndHover01",
+  "slugCalloutAuraEndHover02",
+  "slugCalloutAuraEndSelected",
   "slugCalloutAuraStart",
+  "slugCalloutAuraStartHover01",
+  "slugCalloutAuraStartHover02",
+  "slugCalloutAuraStartSelected",
   "slugCalloutGradientBottom",
+  "slugCalloutGradientBottomHover",
+  "slugCalloutGradientBottomSelected",
   "slugCalloutGradientTop",
+  "slugCalloutGradientTopHover",
+  "slugCalloutGradientTopSelected",
   "slugGradient",
   "slugGradientHover",
   "slugHollowHover",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -584,6 +584,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "href": Object {
         "type": "string",
       },
@@ -3102,6 +3105,9 @@ Map {
       "expanded": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6670,6 +6676,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6689,6 +6698,9 @@ Map {
       "selected": Object {
         "type": "bool",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tabIndex": Object {
         "type": "number",
       },
@@ -8615,7 +8627,13 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "light": [Function],
+      "slug": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
@@ -23,7 +23,15 @@ import {
   TileBelowTheFoldContent,
 } from './';
 import TileGroup from '../TileGroup/TileGroup';
-import { Download } from '@carbon/icons-react';
+import { IconButton } from '../IconButton';
+import { Slug, SlugContent, SlugActions } from '../Slug';
+import {
+  Download,
+  View,
+  FolderOpen,
+  Folders,
+  ArrowRight,
+} from '@carbon/icons-react';
 
 export default {
   title: 'Components/Tile',
@@ -57,6 +65,159 @@ export const Default = () => {
   );
 };
 
+export const SlugTest = (args) => {
+  const slug = (
+    <Slug className="slug-container">
+      <SlugContent>
+        <div>
+          <p className="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p className="secondary bold">Confidence score</p>
+          <p className="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p className="secondary">Model type</p>
+          <p className="bold">Foundation model</p>
+        </div>
+        <SlugActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View literature</Button>
+        </SlugActions>
+      </SlugContent>
+    </Slug>
+  );
+
+  return (
+    <div className="slug-tile-container">
+      <Tile slug={slug} id="tile-1" {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </Tile>
+      <ClickableTile
+        href="https://www.carbondesignsystem.com/"
+        slug
+        id="tile-click"
+        renderIcon={ArrowRight}
+        {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </ClickableTile>
+      <SelectableTile
+        id="selectable-tile-1"
+        name="tiles"
+        value="selectable"
+        slug={slug}
+        {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </SelectableTile>
+      <ExpandableTile
+        id="expandable-tile-1"
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile"
+        slug={slug}
+        {...args}>
+        <TileAboveTheFoldContent>
+          <h4>Title</h4>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris gravida penatibus.
+          </p>
+          <div className="ai-data">
+            <div className="data-container">
+              <p>Data Quality</p>
+              <h3>85%</h3>
+            </div>
+            <div className="data-container">
+              <p>Label text</p>
+              <h3>16%</h3>
+            </div>
+          </div>
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <h6>Expanded Section</h6>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris.
+          </p>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+    </div>
+  );
+};
+
+SlugTest.argTypes = {
+  hasRoundedCorners: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  slug: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
 export const DefaultWithLayer = () => (
   <WithLayer>
     {(layer) => (