@workday/canvas-kit-docs 7.2.11 → 7.3.0

package/dist/commonjs/lib/specs.js

@@ -1225,6 +1225,68 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ExpandableContainer.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "ExpandableContainer",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Labs/Expandable/React, Long Title] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-expanded set to false"
+              },
+              {
+                "type": "it",
+                "name": "should not show expanded content"
+              },
+              {
+                "type": "describe",
+                "name": "when the container is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should show expanded content"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have an aria-controls attribute pointing to the id of content"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the container is clicked again",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide expanded content"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "FormField.spec.ts",
@@ -6110,6 +6172,102 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ToastLabs.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Toast",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the 'Basic' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Alert' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Dialog' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with no close icon or action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of status"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to polite"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with an alert",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of alert"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to assertive"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with a close button and action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of dialog"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-label set to notification"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-describedby"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Tooltip.spec.ts",

package/dist/es6/lib/specs.js

@@ -1225,6 +1225,68 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ExpandableContainer.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "ExpandableContainer",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Labs/Expandable/React, Long Title] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-expanded set to false"
+              },
+              {
+                "type": "it",
+                "name": "should not show expanded content"
+              },
+              {
+                "type": "describe",
+                "name": "when the container is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should show expanded content"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have an aria-controls attribute pointing to the id of content"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the container is clicked again",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide expanded content"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "FormField.spec.ts",
@@ -6110,6 +6172,102 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ToastLabs.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Toast",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the 'Basic' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Alert' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Dialog' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with no close icon or action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of status"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to polite"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with an alert",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of alert"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to assertive"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with a close button and action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of dialog"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-label set to notification"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-describedby"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Tooltip.spec.ts",

package/dist/mdx/labs-react/expandable/Expandable.mdx

@@ -0,0 +1,152 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+import StartIcon from './examples/StartIcon';
+import EndIcon from './examples/EndIcon';
+import Avatar from './examples/Avatar';
+import Depth from './examples/Depth';
+import RTL from './examples/RTL';
+import LongTitle from './examples/LongTitle';
+
+
+# Canvas Kit Expandable
+
+`Expandable` is a compound component that creates a header to expand or collapse related content.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Start Icon
+
+For a basic expandable container with a chevron icon before the title, place`Expandable.Icon`
+before `Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to
+`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon
+when collapsed and a down chevron icon when expanded.
+
+<ExampleCodeBlock code={StartIcon} />
+
+### End Icon
+
+For an expandable container with a chevron icon after the title, place `Expandable.Title`
+before `Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to
+`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon
+when collapsed and an up chevron icon when expanded.
+
+<ExampleCodeBlock code={EndIcon} />
+
+### With Avatar
+
+To include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and
+`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be
+passed to `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after
+`Expandable.Title`.
+
+<ExampleCodeBlock code={Avatar} />
+
+### Right to Left (RTL)
+
+Expandable container has bidirectional support and should function as expected with RTL languages
+as long as the content direction is set in your Canvas theme.
+
+<ExampleCodeBlock code={RTL} />
+
+### Depth
+
+The `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component
+using our depth tokens.
+
+<ExampleCodeBlock code={Depth} />
+
+### Title Wrap
+
+Long titles will wrap to the next line and increase the height of the container.
+
+<ExampleCodeBlock code={LongTitle} />
+
+## Components
+
+### Expandable
+
+#### Usage
+
+`Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
+`DisclosureModel` for its sub components. Alternatively, a model may be passed in using the hoisted
+model pattern.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable} /> -->
+
+### Expandable.Target
+
+#### Usage
+
+`Expandable.Target` creates a heading and a button. The heading is a semantic heading to describe
+the associated content. The button provides users the ability to toggle the associated content.
+
+As according to the
+[W3 disclosure specification](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure), the button
+has `aria-expanded` and `aria-controls` attributes set by default
+
+This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
+`Expandable.Title`.
+
+#### Props
+
+`headingLevel` is the only prop spread to the underlying heading. All other props are spread to the
+button.
+
+<!-- <ArgsTable of={Expandable.Target} /> -->
+
+### Expandable.Title
+
+#### Usage
+
+`Expandable.Title` styles the target text that describes the content.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Title} /> -->
+
+### Expandable.Icon
+
+#### Usage
+
+`Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
+`iconPosition` prop to determine which chevron icon to use.
+
+#### Props
+
+`iconPosition` takes a value of either `start` or `end`. If no value is provided, it will default to
+`start`. Given a value of `start` it will use a chevron that points down when the container is
+expanded and right when the container is collapsed. Given a value of `end`, it will use a chevron
+that points up when the container is expanded and down when the container is collapsed.
+
+<!-- <ArgsTable of={Expandable.Icon} /> -->
+
+### Expandable.Avatar
+
+#### Usage
+
+`Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative image.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Avatar} /> -->
+
+### Expandable.Content
+
+#### Usage
+
+`Expandable.Content` holds the content that will be conditionally expanded and collapsed. It has an
+`id` to ensure the `Expandable.Target` properly set it to the `aria-controls` attribute.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Content} /> -->

package/dist/mdx/labs-react/expandable/examples/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+
+export default () => (
+  <>
+    <Expandable>
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Icon iconPosition="start" />
+        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Title>Title</Expandable.Title>
+      </Expandable.Target>
+
+      <Expandable.Content>Content</Expandable.Content>
+    </Expandable>
+    <Expandable>
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Title>Title</Expandable.Title>
+        <Expandable.Icon iconPosition="end" />
+      </Expandable.Target>
+
+      <Expandable.Content>Content</Expandable.Content>
+    </Expandable>
+  </>
+);

package/dist/mdx/labs-react/expandable/examples/Depth.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  return (
+    <Expandable borderRadius="l" depth={3} margin="xxxs" padding="xs">
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Title>Additional Information</Expandable.Title>
+        <Expandable.Icon iconPosition="end" />
+      </Expandable.Target>
+
+      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>
+    </Expandable>
+  );
+};

package/dist/mdx/labs-react/expandable/examples/EndIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target headingLevel="h4">
+      <Expandable.Title>Title</Expandable.Title>
+      <Expandable.Icon iconPosition="end" />
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/dist/mdx/labs-react/expandable/examples/LongTitle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target aria-label="expand container" headingLevel="h4">
+      <Expandable.Icon iconPosition="start" />
+      <Expandable.Avatar url={testAvatar} />
+      <Expandable.Title>
+        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
+        onions, and oregano.
+      </Expandable.Title>
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/dist/mdx/labs-react/expandable/examples/RTL.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <Expandable>
+        <Expandable.Target headingLevel="h4">
+          <Expandable.Icon iconPosition="start" />
+          <Expandable.Avatar />
+          <Expandable.Title>Title</Expandable.Title>
+        </Expandable.Target>
+
+        <Expandable.Content>Content</Expandable.Content>
+      </Expandable>
+      <Expandable>
+        <Expandable.Target headingLevel="h4">
+          <Expandable.Avatar />
+          <Expandable.Title>Title</Expandable.Title>
+          <Expandable.Icon iconPosition="end" />
+        </Expandable.Target>
+
+        <Expandable.Content>Content</Expandable.Content>
+      </Expandable>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/expandable/examples/StartIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target headingLevel="h4">
+      <Expandable.Icon iconPosition="start" />
+      <Expandable.Title>Title</Expandable.Title>
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/dist/mdx/labs-react/toast/examples/Basic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  return (
+    <Toast>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      </Toast.Body>
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/RTL.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+      <Toast mode="dialog">
+        <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+        <Toast.Body>
+          <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        </Toast.Body>
+        <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+      </Toast>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/toast/examples/ToastAlert.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => (
+  <Toast mode="alert">
+    <Toast.Icon icon={exclamationCircleIcon} color={colors.cinnamon500} />
+    <Toast.Body>
+      <Toast.Message>There was an error with your workbook.</Toast.Message>
+    </Toast.Body>
+  </Toast>
+);

package/dist/mdx/labs-react/toast/examples/ToastDialog.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => (
+  <Toast mode="dialog">
+    <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+    <Toast.Body>
+      <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+    </Toast.Body>
+  </Toast>
+);

package/dist/mdx/labs-react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <Toast mode="dialog">
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        <Toast.Link href="#hyperlink">Custom Link</Toast.Link>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/WithCloseButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <Toast>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/WithPopper.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+import {Popper, SecondaryButton} from '@workday/canvas-kit-react';
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div ref={containerRef}>
+      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
+      <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
+        <Toast mode="dialog">
+          <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+          <Toast.Body>
+            <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+          </Toast.Body>
+          <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+        </Toast>
+      </Popper>
+    </div>
+  );
+};

package/dist/mdx/labs-react/toast/toast.mdx

@@ -0,0 +1,185 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import Basic from './examples/Basic';
+import ToastAlert from './examples/ToastAlert';
+import WithCloseButton from './examples/WithCloseButton';
+import ToastDialog from './examples/ToastDialog';
+import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
+import WithPopper from './examples/WithPopper';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Toast
+
+`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+that contains updates or messages about the status of an application's process.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,
+`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.
+
+`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode
+conveys a different purpose of the message and assigns the necessary ARIA attributes to support that
+purpose and provide an accessible experience.
+
+By default, `mode` is set to `status`, which indicates the message contains advisory information
+such as a successful action.
+
+<ExampleCodeBlock code={Basic} />
+
+A `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of
+`status`.
+
+Here's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is
+positioned using `Popper`.
+
+<ExampleCodeBlock code={WithPopper} />
+
+### Alert
+
+Set the `mode` prop to `alert` to convey urgent and important information such as an error.
+
+<ExampleCodeBlock code={ToastAlert} />
+
+An `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of
+`alert`.
+
+### Dialog
+
+Set the `mode` prop to `dialog` to convey the presence of a follow-up action.
+
+<ExampleCodeBlock code={ToastDialog} />
+
+The `Toast` will be given a role of `dialog` along with an `aria-label` to indicate that it's a
+notification.
+
+> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`
+> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to
+> provide a specific `id` for the `Toast.Message`:
+
+```tsx
+export const CustomIDToast = () => {
+  const model = useToastModel({
+    id: '12df5',
+    mode: 'dialog',
+  });
+  return (
+    <Toast model={model}>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        <Toast.Link href="#href">View More Details</Toast.Link>
+      </Toast.Body>
+    </Toast>
+  );
+};
+```
+
+### Close Icon Button
+
+Include the `Toast.CloseIcon` subcomponent to display a close button within the Toast.
+
+<ExampleCodeBlock code={WithCloseButton} />
+
+`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action
+link and a close button.
+
+<ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
+
+### Right-to-Left (RTL)
+
+`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+## Components
+
+### Toast
+
+#### Usage
+
+`Toast` defines a container for all `Toast` subcomponents. `Toast` will render with the appropriate
+ARIA attributes based on which `mode` is selected. It also accepts a `model` if you wish to provide
+a specific `id`.
+
+`Toast` renders a `Popup.Card` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast} />
+
+### Toast.Body
+
+#### Usage
+
+`Toast.Body` defines a container for the contents of the `Toast`, including `Toast.Message` and
+`Toast.Link`.
+
+`Toast.Body` renders a `Popup.Body` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Body} />
+
+### Toast.Icon
+
+#### Usage
+
+`Toast.Icon` renders a decorative icon for the `Toast`. When using `Toast.Icon`, be sure to set a
+complementary `mode` to the `Toast`. For example, if the icon conveys an error, set the `mode` to
+`alert`.
+
+`Toast.Icon` renders a `SystemIcon` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Icon} />
+
+### Toast.Message
+
+#### Usage
+
+`Toast.Message` defines a container for the message of the `Toast`. It accepts any `React.ReactNode`
+as its children. `Toast.Message` is assigned a unique `id` so that it may be read aloud by screen
+readers when the `Toast` `mode` is set to `dialog`.
+
+`Toast.Message` renders a `Box` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Message} />
+
+### Toast.Link
+
+#### Usage
+
+Use `Toast.Link` to provide an action in the `Toast`. `Toast.Link` should always be used in
+conjunction with `dialog` `mode` to provide an accessible experience.
+
+`Toast.Link` renders a `Hyperlink` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Link} />
+
+### Toast.CloseIcon
+
+#### Usage
+
+Use `Toast.CloseIcon` to provide a close button to dismiss the `Toast`.
+
+`Toast.Link` renders a `Popup.CloseIcon` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.CloseIcon} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.2.11",
+  "version": "7.3.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.2.11"
+    "@workday/canvas-kit-react": "^7.3.0"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "359ab1ae25e3397a5293f11d40b3abf517919db4"
+  "gitHead": "ea5edda9b7a9f66cf7238bfdc1de77ad822db7b2"
 }