@workday/canvas-kit-react 9.0.0-alpha.359-next.4 → 9.0.0-alpha.362-next.2

package/dist/es6/toast/lib/ToastMessage.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { useToastModel } from './hooks/useToastModel';
+import { Subtext } from '@workday/canvas-kit-react/text';
+export var ToastMessage = createSubcomponent('p')({
+    modelHook: useToastModel,
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(Subtext, __assign({ size: "large", wordBreak: "break-word", marginY: "zero", id: model.state.id, as: Element }, elemProps), children));
+});

package/dist/es6/toast/lib/hooks/useToastModel.d.ts

@@ -0,0 +1,75 @@
+export declare type AriaRoleMode = 'dialog' | 'status' | 'alert';
+export declare const useToastModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: string;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: string;
+}, {}, {
+    id: string;
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useToastModel.d.ts.map

package/dist/es6/toast/lib/hooks/useToastModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastModel.d.ts","sourceRoot":"","sources":["../../../../../toast/lib/hooks/useToastModel.tsx"],"names":[],"mappings":"AACA,oBAAY,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,eAAO,MAAM,aAAa;IAEtB;;;;;;;;OAQG;;IAEH;;OAEG;;;;;QAZH;;;;;;;;WAQG;;;;;IARH;;;;;;;;OAQG;;IAEH;;OAEG;;;;IAZH;;;;;;;;OAQG;;;;;QARH;;;;;;;;WAQG;;;;EAeL,CAAC"}

package/dist/es6/toast/lib/hooks/useToastModel.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
+export var useToastModel = createModelHook({
+    defaultConfig: {
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: 'status',
+        /**
+         * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+         */
+        id: '',
+    },
+})(function (config) {
+    var id = useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
+    return { state: state, events: {} };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.0-alpha.359-next.4+6d2e2650",
+  "version": "9.0.0-alpha.362-next.2+ea2fe722",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.359-next.4+6d2e2650",
+    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.362-next.2+ea2fe722",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "6d2e2650a991da4f2e1b0f60bba9643fe8f483b1"
+  "gitHead": "ea2fe722d1176835120f765c4b9b88dcd5234fe5"
 }

package/popup/lib/PopupCloseIcon.tsx

@@ -1,30 +1,29 @@
 import React from 'react';
 
 import {xIcon} from '@workday/canvas-system-icons-web';
-import {
-  styled,
-  createSubcomponent,
-  StyledType,
-  ExtractProps,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {usePopupCloseButton, usePopupModel} from './hooks';
 
-const closeIconSpacing = 4;
-
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
-const StyledCloseIcon = styled(TertiaryButton)<StyledType & PopupCloseIconProps>({
-  position: 'absolute',
-  right: closeIconSpacing,
-  top: closeIconSpacing,
-});
-
 export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
   modelHook: usePopupModel,
   elemPropsHook: usePopupCloseButton,
 })<PopupCloseIconProps>(({children, ...elemProps}, Element) => {
-  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} type="button" {...elemProps} />;
+  return (
+    <TertiaryButton
+      as={Element}
+      size="medium"
+      icon={xIcon}
+      type="button"
+      position="absolute"
+      right={space.xxxs}
+      top={space.xxxs}
+      {...elemProps}
+    />
+  );
 });

package/toast/LICENSE

@@ -45,6 +45,7 @@ END OF TERMS AND CONDITIONS
 
 ©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
 
+
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 

package/toast/README.md

@@ -1,7 +1,5 @@
 # Canvas Kit Toast
 
-Canvas-styled React toast component. Allows for a brief message to be be shown about a process or
-action occurring in the app.
-
-For more detailed information on this component, please refer to the
-[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast-react--with-popper#canvas-kit-toast)
+View the
+[documentation for Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast-react--with-popper#canvas-kit-toast)
+on Storybook.

package/toast/index.ts

@@ -1 +1,2 @@
 export * from './lib/Toast';
+export * from './lib/hooks/useToastModel';

package/toast/lib/Toast.tsx

@@ -1,118 +1,113 @@
-import * as React from 'react';
+import React from 'react';
 
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space, colors, type, CanvasColor} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {checkIcon, exclamationCircleIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, ExtractProps, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {Hyperlink} from '@workday/canvas-kit-react/button';
 
-export interface ToastProps extends ExtractProps<typeof Popup.Card, never> {
-  /**
-   * The icon of the Toast.
-   * @default checkIcon
-   */
-  icon?: CanvasSystemIcon;
-  /**
-   * The color of the Toast icon.
-   * @default colors.greenApple400
-   */
-  iconColor?: CanvasColor | string; // TODO: Fix
-  /**
-   * The text of the Toast message.
-   */
-  children: string;
-  /**
-   * The function called when the Toast is closed.
-   */
-  onClose?: () => void;
-  /**
-   * The function called when the Toast action is clicked.
-   */
-  onActionClick?: () => void;
-  /**
-   * The text of the Toast action.
-   */
-  actionText?: string;
-}
-const toastWidth = 360;
+import {ToastCloseIcon} from './ToastCloseIcon';
+import {ToastIcon} from './ToastIcon';
+import {ToastMessage} from './ToastMessage';
+import {ToastLink} from './ToastLink';
+import {ToastBody} from './ToastBody';
+import {useToastModel} from './hooks/useToastModel';
 
-const ToastContentContainer = styled('div')<Pick<ToastProps, 'onClose'>>(
-  {
-    display: 'flex',
-    alignItems: 'center',
-    ...type.levels.subtext.large,
-  },
-  ({onClose}) => ({
-    marginRight: onClose ? space.m : undefined,
-  })
-);
-
-const ToastSystemIcon = styled(SystemIcon)({
-  marginRight: space.s,
-  alignSelf: 'start',
-});
-
-const {color, ...subTextLargeStyles} = type.levels.subtext.large;
+export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {}
 
-const StyledActionButton = styled(Hyperlink)<StyledType>({
-  ...subTextLargeStyles,
-  display: 'block',
-  backgroundColor: 'transparent', // To prevent Safari from rendering grey 'buttonface' as bgcolor
-  border: 'none',
-  marginTop: space.xxxs,
-});
-
-const Message = styled('div')({
-  wordBreak: 'break-word',
-});
+/**
+ * The function helps set the correct aria attributes based on the mode
+ * @param mode Defines what aria attributes will be added to the main container
+ * @param id Used to tie the Toast to Toast.Message for screen readers
+ */
+const getAriaAttributes = (mode: string, id: string): React.HtmlHTMLAttributes<HTMLDivElement> => {
+  switch (mode) {
+    case 'dialog':
+      return {
+        'aria-describedby': id,
+        // This is added by Popup.Card, so overwriting to remove it
+        'aria-labelledby': undefined,
+        role: 'dialog',
+      };
+    case 'alert':
+      return {
+        role: 'alert',
+        'aria-live': 'assertive',
+        'aria-atomic': true,
+      };
+    case 'status':
+      return {
+        role: 'status',
+        'aria-live': 'polite',
+        'aria-atomic': true,
+      };
+    default: {
+      return {};
+    }
+  }
+};
 
-export const Toast = createComponent('div')({
+/**
+ * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
+ *
+ * ```tsx
+ * import { Toast } from "@workday/canvas-kit-react/toast";
+ *
+ * const MyToast = (props: CardProps) => (
+ *    <Toast mode="dialog" aria-label="notifcation">
+ *      <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.CloseIcon aria-label="Close" onClick={handleClose} />
+ *    </Toast>
+ * );
+ *```
+ */
+export const Toast = createContainer('div')({
   displayName: 'Toast',
-  Component: (
-    {
-      icon = checkIcon, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
-      iconColor = colors.greenApple400,
-      onClose,
-      onActionClick,
-      actionText,
-      children,
-      ...elemProps
-    }: ToastProps,
-    ref,
-    Element
-  ) => {
-    const isInteractive = onClose || onActionClick;
-    const isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
-
-    return (
-      <Popup.Card
-        ref={ref}
-        as={Element}
-        width={toastWidth}
-        depth={5}
-        role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
-        aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
-        aria-atomic={!isInteractive}
-        padding="xxs"
-        {...elemProps}
-      >
-        {onClose && <Popup.CloseIcon aria-label="Close" onClick={onClose} size="small" />}
-        <Popup.Body>
-          <ToastContentContainer onClose={onClose}>
-            {icon && <ToastSystemIcon color={iconColor} colorHover={iconColor} icon={icon} />}
-            <Message>
-              {children}
-              {onActionClick && (
-                <StyledActionButton as="button" onClick={onActionClick}>
-                  {actionText}
-                </StyledActionButton>
-              )}
-            </Message>
-          </ToastContentContainer>
-        </Popup.Body>
-      </Popup.Card>
-    );
+  modelHook: useToastModel,
+  subComponents: {
+    /**
+     * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
+     *
+     * ```tsx
+     * <Toast.Body>
+     *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+     *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+     * </Toast.Body>
+     * ```
+     */
+    Body: ToastBody,
+    /**
+     * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
+     */
+    CloseIcon: ToastCloseIcon,
+    /**
+     * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
+     */
+    Icon: ToastIcon,
+    /**
+     * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
+     * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
+     */
+    Message: ToastMessage,
+    /**
+     * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
+     */
+    Link: ToastLink,
   },
+})<ToastProps>(({children, ...elemProps}, _, model) => {
+  return (
+    <Popup.Card
+      as={Flex}
+      width={360}
+      padding="0"
+      {...getAriaAttributes(model.state.mode, model.state.id)}
+      flexDirection="row"
+      gap="xxxs"
+      {...elemProps}
+    >
+      {children}
+    </Popup.Card>
+  );
 });

package/toast/lib/ToastBody.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
+
+export const ToastBody = createComponent('div')({
+  displayName: 'Toast.Body',
+  Component: ({children, ...elemProps}: ToastBodyProps, ref, Element) => {
+    return (
+      <Flex
+        alignItems="flex-start"
+        flexDirection="column"
+        justifyContent="center"
+        paddingY="s"
+        ref={ref}
+        as={Element}
+        flexGrow={1}
+        gap="xxxs"
+        {...elemProps}
+      >
+        {children}
+      </Flex>
+    );
+  },
+});

package/toast/lib/ToastCloseIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
+
+export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
+
+export const ToastCloseIcon = createComponent('button')({
+  displayName: 'Toast.CloseIcon',
+  Component: (elemProps: ToastCloseIconProps, ref, Element) => {
+    return (
+      <Popup.CloseIcon as={Element} ref={ref} size="small" position="relative" {...elemProps} />
+    );
+  },
+});

package/toast/lib/ToastIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+
+export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
+
+export const ToastIcon = createComponent('div')({
+  displayName: 'Toast.Icon',
+  Component: (elemProps: ToastIconProps, ref, Element) => {
+    return (
+      <SystemIcon
+        colorHover={elemProps.color}
+        marginY="s"
+        marginX="xs"
+        alignSelf="start"
+        ref={ref}
+        as={Element}
+        {...elemProps}
+      />
+    );
+  },
+});

package/toast/lib/ToastLink.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
+
+export interface ToastLinkProps extends HyperlinkProps {}
+
+export const ToastLink = createComponent('a')({
+  displayName: 'Toast.Link',
+  Component: ({children, href, ...elemProps}: ToastLinkProps, ref, Element) => {
+    return (
+      <Hyperlink ref={ref} href={href} as={Element} {...elemProps}>
+        {children}
+      </Hyperlink>
+    );
+  },
+});

package/toast/lib/ToastMessage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {useToastModel} from './hooks/useToastModel';
+import {Subtext} from '@workday/canvas-kit-react/text';
+
+export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
+
+export const ToastMessage = createSubcomponent('p')({
+  modelHook: useToastModel,
+})<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Subtext
+      size="large"
+      wordBreak="break-word"
+      marginY="zero"
+      id={model.state.id}
+      as={Element}
+      {...elemProps}
+    >
+      {children}
+    </Subtext>
+  );
+});

package/toast/lib/hooks/useToastModel.tsx

@@ -0,0 +1,29 @@
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+export type AriaRoleMode = 'dialog' | 'status' | 'alert';
+
+export const useToastModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: 'status' as AriaRoleMode,
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: '',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {state, events: {}};
+});