@workday/canvas-kit-labs-react 8.0.0-alpha.172-next.1 → 8.0.0-alpha.178-next.2

package/toast/lib/ToastIcon.tsx

@@ -0,0 +1,24 @@
+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"
+        marginInlineEnd="xs"
+        marginInlineStart="xs"
+        alignSelf="start"
+        ref={ref}
+        as={Element}
+        {...elemProps}
+      />
+    );
+  },
+});

package/toast/lib/ToastLink.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export interface ToastLinkProps extends HyperlinkProps {
+  /**
+   * attribute for the hyperlink URL
+   */
+  href: string;
+}
+
+const StyledHyperLink = styled(Hyperlink)<StyledType>({
+  marginTop: space.xxxs,
+});
+
+export const ToastLink = createComponent('a')({
+  displayName: 'Toast.Link',
+  Component: ({children, href, ...elemProps}: ToastLinkProps, ref, Element) => {
+    return (
+      <StyledHyperLink ref={ref} href={href} as={Element} {...elemProps}>
+        {children}
+      </StyledHyperLink>
+    );
+  },
+});

package/toast/lib/ToastMessage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {createSubcomponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {useToastModel} from './hooks/useToastModel';
+
+export interface ToastMessageProps extends FlexProps {}
+
+const StyledMessage = styled(Flex)<StyledType>({
+  wordBreak: 'break-word',
+  // TODO: Remove once we officially drop support for IE11
+  wordWrap: 'break-word', // Needed for IE11
+});
+
+export const ToastMessage = createSubcomponent('div')({
+  modelHook: useToastModel,
+})<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <StyledMessage flexDirection="column" id={model.state.id} as={Element} {...elemProps}>
+      {children}
+    </StyledMessage>
+  );
+});

package/toast/lib/hooks/useToastModel.tsx

@@ -0,0 +1,27 @@
+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`
+     * @default 'status'
+     */
+    mode: 'status' as AriaRoleMode,
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to type the `Toast.Message` to the dialog.
+     */
+    id: '',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {state, events: {}};
+});

package/toast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/toast",
+  "module": "../dist/es6/toast",
+  "sideEffects": false,
+  "types": "../dist/es6/toast"
+}