@workday/canvas-kit-docs 7.3.0-next.1 → 7.3.0

package/dist/commonjs/lib/specs.js

@@ -6172,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

@@ -6172,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/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.3.0-next.1+c96313b9",
+  "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.3.0-next.1+c96313b9"
+    "@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": "c96313b967a2e828d395426fd103f1ab2b9781f7"
+  "gitHead": "ea5edda9b7a9f66cf7238bfdc1de77ad822db7b2"
 }