@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
107 lines (106 loc) • 4.64 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const popup_1 = require("@workday/canvas-kit-react/popup");
const ToastCloseIcon_1 = require("./ToastCloseIcon");
const ToastIcon_1 = require("./ToastIcon");
const ToastMessage_1 = require("./ToastMessage");
const ToastLink_1 = require("./ToastLink");
const ToastBody_1 = require("./ToastBody");
const useToastModel_1 = require("./hooks/useToastModel");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const layout_1 = require("@workday/canvas-kit-react/layout");
/**
* 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, id) => {
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 {};
}
}
};
const toastStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "ojxa6a", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
}, "toast-55513d");
/**
* 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>
* );
*```
*/
exports.Toast = (0, common_1.createContainer)('div')({
displayName: 'Toast',
modelHook: useToastModel_1.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_1.ToastBody,
/**
* `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
*/
CloseIcon: ToastCloseIcon_1.ToastCloseIcon,
/**
* `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
*/
Icon: ToastIcon_1.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_1.ToastMessage,
/**
* `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
*/
Link: ToastLink_1.ToastLink,
},
})(({ children, ...elemProps }, _, model) => {
return (react_1.default.createElement(popup_1.Popup.Card, { ...getAriaAttributes(model.state.mode, model.state.id), ...(0, layout_1.mergeStyles)(elemProps, toastStencil()) }, children));
});