@workday/canvas-kit-docs 9.1.14 → 9.1.15

package/dist/es6/lib/specs.js

@@ -3199,6 +3199,146 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "PillPreview.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Pill",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, Basic] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have two elements with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should be able to click on the first pill"
+              },
+              {
+                "type": "it",
+                "name": "should have the second pill disabled"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, With Avatar] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have two elements with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should be able to click on the first pill"
+              },
+              {
+                "type": "it",
+                "name": "should have the second pill disabled"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, With Count] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have two elements with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should be able to click on the first pill"
+              },
+              {
+                "type": "it",
+                "name": "should have the second pill disabled"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, With List] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have 11 elements with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should remove a pill from list if clicked"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, With Removable] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have 3 elements with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should be able to click on the first pill"
+              },
+              {
+                "type": "it",
+                "name": "should be able to click on the second pill"
+              },
+              {
+                "type": "it",
+                "name": "should have the third pill disabled"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Pill, With Read Only] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have 2 pills"
+              },
+              {
+                "type": "it",
+                "name": "should have tooltip on the second button"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Popup.spec.ts",

package/dist/mdx/preview-react/pill/examples/Basic.tsx

@@ -2,17 +2,24 @@ import React from 'react';
 
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {BodyText} from '@workday/canvas-kit-react/text';
 
-export default () => (
-  <Flex gap="xxs">
-    <Pill onClick={() => console.warn('clicked')}>
-      <Pill.Icon />
-      <Pill.Label>Regina Skeltor</Pill.Label>
-    </Pill>
-    <Pill onClick={() => console.warn('clicked')} disabled>
-      <Pill.Icon />
-      <Pill.Label>Regina Skeltor</Pill.Label>
-    </Pill>
-  </Flex>
-);
+export default () => {
+  const [text, setText] = React.useState('');
+  return (
+    <Box>
+      <Flex gap="xxs">
+        <Pill onClick={() => setText('The first pill is clicked!')}>
+          <Pill.Icon />
+          <Pill.Label>Regina Skeltor</Pill.Label>
+        </Pill>
+        <Pill onClick={() => setText('The second pill is clicked!')} disabled>
+          <Pill.Icon />
+          <Pill.Label>Regina Skeltor</Pill.Label>
+        </Pill>
+      </Flex>
+      <BodyText size="medium">{text}</BodyText>
+    </Box>
+  );
+};

package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx

@@ -3,19 +3,24 @@ import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => {
+  const [text, setText] = React.useState('');
   return (
-    <Flex gap="xxs">
-      <Pill onClick={() => console.warn('clicked')}>
-        <Pill.Avatar url={testAvatar} />
-        Regina Skeltor
-      </Pill>
-      <Pill onClick={() => console.warn('clicked')} disabled maxWidth={50}>
-        <Pill.Avatar url={testAvatar} />
-        Regina Skeltor
-      </Pill>
-    </Flex>
+    <Box>
+      <Flex gap="xxs">
+        <Pill onClick={() => setText('The first pill is clicked!')}>
+          <Pill.Avatar url={testAvatar} />
+          Regina Skeltor
+        </Pill>
+        <Pill onClick={() => setText('The second pill is clicked!')} disabled maxWidth={50}>
+          <Pill.Avatar url={testAvatar} />
+          Regina Skeltor
+        </Pill>
+      </Flex>
+      <BodyText size="medium">{text}</BodyText>
+    </Box>
   );
 };

package/dist/mdx/preview-react/pill/examples/WithCount.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {BodyText} from '@workday/canvas-kit-react/text';
 
-export default () => (
-  <Pill onClick={() => console.warn('clicked')}>
-    Shoes
-    <Pill.Count>30</Pill.Count>
-  </Pill>
-);
+export default () => {
+  const [text, setText] = React.useState('');
+  return (
+    <Box>
+      <Flex gap="xxs">
+        <Pill onClick={() => setText('The first pill is clicked!')}>
+          Shoes
+          <Pill.Count>30</Pill.Count>
+        </Pill>
+        <Pill onClick={() => setText('The second pill is clicked!')} disabled>
+          Shoes
+          <Pill.Count>30</Pill.Count>
+        </Pill>
+      </Flex>
+      <BodyText size="medium">{text}</BodyText>
+    </Box>
+  );
+};

package/dist/mdx/preview-react/pill/examples/WithList.tsx

@@ -17,15 +17,19 @@ const data = [
   'Jewelry',
 ];
 
-export default () => (
-  <Flex flexWrap="wrap">
-    {data.map((cat, index) => {
-      return (
-        <Pill key={index} variant="removable" marginBottom="xxs" marginInlineEnd="xxs">
-          <Pill.Label>{cat}</Pill.Label>
-          <Pill.IconButton onClick={() => console.log(`delete ${cat}`)} />
-        </Pill>
-      );
-    })}
-  </Flex>
-);
+export default () => {
+  const [items, setItems] = React.useState(data);
+
+  return (
+    <Flex flexWrap="wrap">
+      {items.map((cat, index) => {
+        return (
+          <Pill key={index} variant="removable" marginBottom="xxs" marginInlineEnd="xxs">
+            <Pill.Label>{cat}</Pill.Label>
+            <Pill.IconButton onClick={() => setItems(items.filter(i => i !== cat))} />
+          </Pill>
+        );
+      })}
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx

@@ -5,7 +5,7 @@ import {Pill} from '@workday/canvas-kit-preview-react/pill';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => (
-  <Flex gap="xxs">
+  <Flex gap="xxs" id="read-only-list">
     <Pill variant="readOnly">Read-only</Pill>
     <Pill variant="readOnly" maxWidth={250}>
       Read-only but with super long text in case you want to read a paragraph in a Pill which we

package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx

@@ -3,23 +3,29 @@ import React from 'react';
 import {Pill} from '@workday/canvas-kit-preview-react/pill';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {BodyText} from '@workday/canvas-kit-react/text';
 
-export default () => (
-  <Flex gap="xxs">
-    <Pill variant="removable">
-      Pink Shirts
-      <Pill.IconButton onClick={() => console.warn('clicked')} />
-    </Pill>
-    <Pill variant="removable">
-      <Pill.Avatar url={testAvatar} />
-      Carolyn Grimaldi
-      <Pill.IconButton onClick={() => console.warn('clicked')} />
-    </Pill>
-
-    <Pill variant="removable" disabled>
-      <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>
-      <Pill.IconButton />
-    </Pill>
-  </Flex>
-);
+export default () => {
+  const [text, setText] = React.useState('');
+  return (
+    <Box>
+      <Flex gap="xxs">
+        <Pill variant="removable">
+          Pink Shirts
+          <Pill.IconButton onClick={() => setText('The first pill is clicked!')} />
+        </Pill>
+        <Pill variant="removable">
+          <Pill.Avatar url={testAvatar} />
+          Carolyn Grimaldi
+          <Pill.IconButton onClick={() => setText('The second pill is clicked!')} />
+        </Pill>
+        <Pill variant="removable" disabled>
+          <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>
+          <Pill.IconButton />
+        </Pill>
+      </Flex>
+      <BodyText size="medium">{text}</BodyText>
+    </Box>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.1.14",
+  "version": "9.1.15",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.1.14",
-    "@workday/canvas-kit-preview-react": "^9.1.14",
-    "@workday/canvas-kit-react": "^9.1.14",
+    "@workday/canvas-kit-labs-react": "^9.1.15",
+    "@workday/canvas-kit-preview-react": "^9.1.15",
+    "@workday/canvas-kit-react": "^9.1.15",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "4d9d5ccccccea8f303ca6045ec3d1e3fe3e0572f"
+  "gitHead": "96aba3862f634bb72f4bba906eea86f9c0c85563"
 }