@workday/canvas-kit-docs 17.0.0-alpha.0546-next.0 → 17.0.0-alpha.0559-next.0

package/dist/es6/lib/docs.js

@@ -44961,7 +44961,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "Divider",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
-    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)\n\nThe `space` prop will equally apply top and bottom margin styles.\nIn the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom",
+    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)\n\nThe `space` prop will equally apply margin styles to both ends of the `Divider`.\nIn the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom.",
     "declarations": [
       {
         "name": "Divider",
@@ -44969,7 +44969,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { Divider } from '@workday/canvas-kit-preview-react/divider';\n\n\n<Divider space={system.gap.xs} />\n\n```"
+      "example": "```tsx\nimport { Divider } from '@workday/canvas-kit-preview-react/divider';\n\n\n<Divider space={system.gap.xs} />\n\n// vertical\n<Divider orientation=\"vertical\" />\n\n```"
     },
     "type": {
       "kind": "enhancedComponent",
@@ -44984,7 +44984,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.\nE.g. `space=\"2rem\"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.",
+          "description": "Applies margin evenly to both ends of the `Divider`. It divides the provided value by two and applies half to each end.\nFor a `horizontal` `Divider` this is the top and bottom margin, and for a `vertical` `Divider` it is the left and right margin.\nE.g. `space=\"2rem\"` would apply `1rem` margin to each end.",
           "declarations": [
             {
               "name": "space",
@@ -45000,6 +45000,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "`system.gap.md` (1rem)"
           }
         },
+        {
+          "kind": "property",
+          "name": "orientation",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "horizontal"
+              },
+              {
+                "kind": "string",
+                "value": "vertical"
+              }
+            ]
+          },
+          "description": "Sets the orientation of the `Divider`.\n* `horizontal` - renders a horizontal rule to segment stacked content.\n* `vertical` - renders a vertical rule to segment content laid out in a row. The `Divider` stretches to fill\n  the height of its container, so it should be placed inside an element with a defined height (e.g. a flex or\n  grid container).",
+          "declarations": [
+            {
+              "name": "orientation",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
+            }
+          ],
+          "tags": {
+            "default": "'horizontal'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "horizontal"
+          }
+        },
         {
           "kind": "property",
           "name": "cs",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.0.7",
-    "@workday/canvas-kit-preview-react": "16.0.7",
-    "@workday/canvas-kit-react": "16.0.7",
-    "@workday/canvas-kit-react-fonts": "^16.0.7",
-    "@workday/canvas-kit-styling": "16.0.7",
+    "@workday/canvas-kit-labs-react": "16.0.10",
+    "@workday/canvas-kit-preview-react": "16.0.10",
+    "@workday/canvas-kit-react": "16.0.10",
+    "@workday/canvas-kit-react-fonts": "^16.0.10",
+    "@workday/canvas-kit-styling": "16.0.10",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.0.7",
-    "@workday/canvas-kit-preview-react": "16.0.7",
-    "@workday/canvas-kit-react": "16.0.7",
-    "@workday/canvas-kit-react-fonts": "^16.0.7",
-    "@workday/canvas-kit-styling": "16.0.7",
+    "@workday/canvas-kit-labs-react": "16.0.10",
+    "@workday/canvas-kit-preview-react": "16.0.10",
+    "@workday/canvas-kit-react": "16.0.10",
+    "@workday/canvas-kit-react-fonts": "^16.0.10",
+    "@workday/canvas-kit-styling": "16.0.10",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/preview-react/divider/Divider.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-d
 
 import * as Divider from './Divider.stories.ts';
 import Basic from './examples/Basic';
+import Vertical from './examples/Vertical';
 import CustomSpace from './examples/CustomSpace';
 
 
@@ -31,6 +32,10 @@ bottom margin.
 
 <ExampleCodeBlock code={Basic} />
 
+### Vertical Example
+
+<ExampleCodeBlock code={Vertical} />
+
 ### Custom Space
 
 You might also want to apply custom space to `Divider` where the top and bottom margin are not

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

@@ -28,40 +28,39 @@ const maintainerList = [
   {
     id: '44883293',
     name: 'Josh Bagwell',
-    bio: 'Software Development Engineer',
+    bio: 'Master of Cocktails and Fast Cars',
   },
   {
     id: '338257',
     name: 'Nicholas Boll',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Potato Engineer',
   },
   {
     id: '7966550',
     name: 'Manuel Carrera',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Rock Climber and Artist',
   },
   {
     id: '146020',
     name: 'James Fan',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Television Consultant',
   },
   {
     id: '48605821',
     name: 'Raisa Primerova',
-    bio: 'Software Development Engineer',
+    bio: 'Principal Borscht Connoisseur',
   },
   {
     id: '4818182',
     name: 'Alan Smith',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Pizza Tosser',
   },
 ];
 
 const profileCardStyles = createStyles({
-  display: 'grid',
-  gridGap: '0.5rem',
-  gridTemplateColumns: '5rem 1fr',
-  gridTemplateRows: '1fr 1fr',
+  display: 'flex',
+  gap: '0.5rem',
+  flexDirection: 'row',
 });
 
 const profileCardAvatarStyles = createStyles({
@@ -84,6 +83,12 @@ const profileCardBodyStyles = createStyles({
   margin: 0,
 });
 
+const profileCardContentStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.xs,
+});
+
 interface ProfileCardProps {
   id: string;
   name: string;
@@ -93,12 +98,14 @@ interface ProfileCardProps {
 const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
   <div className={profileCardStyles}>
     <Avatar
-      size="extraLarge"
+      size="large"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
       name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
-    <h3 className={profileCardHeadingStyles}>{name}</h3>
-    <p className={profileCardBodyStyles}>{bio}</p>
+    <div className={profileCardContentStyles}>
+      <h3 className={profileCardHeadingStyles}>{name}</h3>
+      <p className={profileCardBodyStyles}>{bio}</p>
+    </div>
   </div>
 );

package/dist/mdx/preview-react/divider/examples/Vertical.tsx

@@ -0,0 +1,50 @@
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  height: system.size.xxl,
+});
+
+const statStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.none,
+});
+
+const labelStyles = createStyles({
+  ...system.type.subtext.medium,
+  color: system.color.fg.default,
+  margin: 0,
+});
+
+const valueStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+export default () => {
+  const lastIndex = stats.length - 1;
+  return (
+    <div className={rowStyles}>
+      {stats.map((stat, index) => (
+        <>
+          <div className={statStyles}>
+            <p className={labelStyles}>{stat.label}</p>
+            <p className={valueStyles}>{stat.value}</p>
+          </div>
+          {index !== lastIndex && <Divider orientation="vertical" space={system.gap.md} />}
+        </>
+      ))}
+    </div>
+  );
+};
+
+const stats = [
+  {label: 'Components', value: '128'},
+  {label: 'Contributors', value: '64'},
+  {label: 'Releases', value: '512'},
+];

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import AIDisclosure from './examples/AIDisclosure';
 import CustomContent from './examples/CustomContent';
 import Default from './examples/Default';
 import DelayedTooltip from './examples/DelayedTooltip';
@@ -141,6 +142,15 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### AI Disclosure
+
+Use a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a
+tooltip near the content it describes so users understand how it was produced before they act on it.
+The tooltip labels the button, making the disclosure available to both sighted and screen reader
+users.
+
+<ExampleCodeBlock code={AIDisclosure} />
+
 ### Delayed Tooltip
 
 The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can

package/dist/mdx/react/tooltip/examples/AIDisclosure.tsx

@@ -0,0 +1,38 @@
+import {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoSparkleIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.xl,
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <Card>
+        <Card.Heading>
+          Giant Pacific Octopus
+          <Tooltip title="This content is generated by AI" variant="alt" placement="right-end">
+            <TertiaryButton
+              size="extraSmall"
+              icon={infoSparkleIcon}
+              aria-label="This functionality is powered by AI"
+            />
+          </Tooltip>
+        </Card.Heading>
+        <Card.Body>
+          The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant
+          octopus, is a large marine cephalopod belonging to the genus Enteroctopus and
+          Enteroctopodidae family. –{' '}
+          <ExternalHyperlink href="https://en.wikipedia.org/wiki/Giant_Pacific_octopus">
+            View Source
+          </ExternalHyperlink>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "17.0.0-alpha.0546-next.0",
+  "version": "17.0.0-alpha.0559-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0546-next.0",
-    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0546-next.0",
-    "@workday/canvas-kit-react": "^17.0.0-alpha.0546-next.0",
-    "@workday/canvas-kit-styling": "^17.0.0-alpha.0546-next.0",
+    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0559-next.0",
+    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0559-next.0",
+    "@workday/canvas-kit-react": "^17.0.0-alpha.0559-next.0",
+    "@workday/canvas-kit-styling": "^17.0.0-alpha.0559-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "6c40cc2093133da6a7f19d441f890edbb1da9f40"
+  "gitHead": "ed5e46bdaffc5b98a72fb4c0f7bbb84e54b2bb2a"
 }