@workday/canvas-kit-preview-react 7.0.0-alpha.140-next.6 → 7.0.0-alpha.256-next.2

package/status-indicator/lib/StatusIndicatorIcon.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {useStatusIndicatorModel} from './hooks';
+
+export interface StatusIndicatorIconProps extends SystemIconProps {}
+
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export const statusIndicatorColors = {
+  gray: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.licorice300,
+    },
+    low: {
+      text: colors.licorice400,
+      background: colors.soap300,
+    },
+  },
+  orange: {
+    high: {
+      text: colors.licorice500,
+      background: colors.cantaloupe400,
+    },
+    low: {
+      text: colors.toastedMarshmallow600,
+      background: colors.cantaloupe100,
+    },
+  },
+  blue: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.blueberry400,
+    },
+    low: {
+      text: colors.blueberry500,
+      background: colors.blueberry100,
+    },
+  },
+  green: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.greenApple600,
+    },
+    low: {
+      text: colors.greenApple600,
+      background: colors.greenApple100,
+    },
+  },
+  red: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.cinnamon500,
+    },
+    low: {
+      text: colors.cinnamon600,
+      background: colors.cinnamon100,
+    },
+  },
+  transparent: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.blackPepper600,
+    },
+    low: {
+      text: colors.frenchVanilla100,
+      background: colors.blackPepper600,
+    },
+  },
+};
+
+const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({state}) => {
+  const colors = statusIndicatorColors[state.variant][state.emphasis];
+  return {
+    color: colors.text,
+    colorHover: colors.background,
+  };
+});
+
+export const StatusIndicatorIcon = createSubcomponent('span')({
+  modelHook: useStatusIndicatorModel,
+  elemPropsHook: useStatusIndicatorIcon,
+})<StatusIndicatorIconProps>((elemProps, Element, model) => {
+  return <SystemIcon as={Element} size={20} role="img" {...elemProps} />;
+});

package/status-indicator/lib/StatusIndicatorLabel.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+
+export interface StatusIndicatorLabelProps extends TextProps {}
+
+export const StatusIndicatorLabel = createComponent('span')({
+  displayName: 'StatusIndicator.Label',
+  Component: ({children, ...elemProps}: StatusIndicatorLabelProps, ref, Element) => {
+    return (
+      <Text
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        typeLevel="subtext.large"
+        fontWeight="bold"
+        textTransform="capitalize"
+        ref={ref}
+        color="inherit"
+        as={Element}
+        {...elemProps}
+      >
+        {children}
+      </Text>
+    );
+  },
+});

package/status-indicator/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useStatusIndicatorModel';

package/status-indicator/lib/hooks/useStatusIndicatorModel.tsx

@@ -0,0 +1,29 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+
+export type StatusIndicatorEmphasis = 'high' | 'low';
+
+export const useStatusIndicatorModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+
+    emphasis: 'low' as StatusIndicatorEmphasis,
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: 'gray' as StatusIndicatorVariant,
+  },
+})(config => {
+  const state = {
+    ...config,
+  };
+
+  return {state, events: {}};
+});

package/status-indicator/package.json

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

package/text-area/lib/TextAreaField.tsx

@@ -15,7 +15,6 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 
 const baseStyles: CSSProperties = {
-  ...type.levels.subtext.large,
   transition: '0.2s box-shadow, 0.2s border-color',
   resize: 'both',
   '&::webkit-resizer': {
@@ -59,6 +58,7 @@ export const TextAreaField = createSubcomponent('textarea')({
   return (
     <FormField.Input
       as={Element}
+      {...type.levels.subtext.large}
       css={[baseStyles, focusStyles]}
       {...elemProps}
       border={`1px solid ${inputColors.border}`}

package/text-input/lib/TextInputField.tsx

@@ -16,7 +16,6 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {useTextInputField, useTextInputModel} from './hooks';
 
 const baseStyles: CSSProperties = {
-  ...type.levels.subtext.large,
   transition: '0.2s box-shadow, 0.2s border-color',
   '&::placeholder': {
     color: inputColors.placeholder,
@@ -60,6 +59,7 @@ export const TextInputField = createSubcomponent('input')({
   return (
     <FormField.Input
       as="input"
+      {...type.levels.subtext.large}
       css={[baseStyles, focusStyles]}
       padding={space.xxs}
       margin={0}

package/breadcrumbs/README.md

@@ -1,7 +0,0 @@
-# Canvas Kit Breadcrumbs
-
-View the
-[documentation for Breadcrumbs](https://workday.github.io/canvas-kit/?path=/docs/preview-breadcrumbs-react--page)
-on Storybook.
-
-[> Workday Design Reference](https://design.workday.com/components/navigation/breadcrumbs)

package/breadcrumbs/index.ts

@@ -1 +0,0 @@
-export * from './lib/Breadcrumbs';

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import {BaseButton} from '@workday/canvas-kit-react/button';
-import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-
-export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * The accessibility label for the button
-   */
-  'aria-label': string;
-  /**
-   * The Canvas System Icon for the button
-   *
-   * @default relatedActionsIcon
-   */
-  buttonIcon?: CanvasSystemIcon;
-  /**
-   * The boolean to determine whether the button should be in a 'toggled' state
-   */
-  toggled: boolean;
-}
-
-export const DropdownButton = createComponent('button')({
-  displayName: 'DropdownButton',
-  Component: (
-    {buttonIcon = relatedActionsIcon, toggled, ...elemProps}: DropdownButtonProps,
-    ref,
-    Element
-  ) => {
-    const theme = useTheme();
-    return (
-      <BaseButton
-        as={Element}
-        ref={ref}
-        aria-pressed={undefined} // removing aria-pressed from button and opting for aria-expanded
-        aria-expanded={toggled}
-        aria-haspopup
-        aria-controls="menu"
-        size="small"
-        height={space.l}
-        width={space.l}
-        padding={space.zero}
-        colors={getDropdownColors(toggled, theme)}
-        {...elemProps}
-      >
-        <BaseButton.Icon icon={buttonIcon} />
-      </BaseButton>
-    );
-  },
-});
-
-const getDropdownColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  return {
-    default: {
-      icon: toggled ? themePrimary.main : colors.blackPepper400,
-      label: themePrimary.main,
-    },
-    hover: {
-      background: colors.soap200,
-      icon: toggled ? themePrimary.dark : colors.blackPepper500,
-      label: themePrimary.dark,
-    },
-    active: {
-      background: colors.soap300,
-      icon: toggled ? themePrimary.dark : colors.blackPepper500,
-      label: themePrimary.dark,
-    },
-    focus: {
-      icon: toggled ? themePrimary.main : colors.blackPepper500,
-      label: themePrimary.main,
-    },
-    disabled: {
-      icon: toggled ? themePrimary.main : colors.blackPepper400,
-      label: themePrimary.main,
-    },
-  };
-};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {
-  borderRadius,
-  colors,
-  commonColors,
-  depth,
-  space,
-  type,
-} from '@workday/canvas-kit-react/tokens';
-
-// types
-import {Breadcrumb} from '../types';
-// local components
-import {DropdownMenuItemLink} from './MenuItemLink';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
-
-export interface DropdownMenuProps {
-  /**
-   * The active dropdown item in the menu
-   */
-  activeDropdownItem: Breadcrumb;
-  /**
-   * The HTML `id` of the element that labels the Menu. It should match the id of the menu button.
-   */
-  'aria-labelledby': string;
-  /**
-   * An array of Breadcrumb items to render in the dropdown menu
-   */
-  dropdownItems: Breadcrumb[];
-  /**
-   * A function to set the active dropdown item
-   */
-  setActiveDropdownItem: React.Dispatch<React.SetStateAction<Breadcrumb>>;
-  /**
-   * The ref of the rendered HTMLAnchorElement
-   */
-  activeDropdownItemRef: React.RefObject<HTMLAnchorElement>;
-  /**
-   * A function to return the focus to the dropdown button
-   */
-  resetFocus: () => void;
-  /**
-   * A function to toggle the focus to the previous list item
-   */
-  toggleActiveItemUp: () => void;
-  /**
-   * A function to toggle the focus to the next list item
-   */
-  toggleActiveItemDown: () => void;
-}
-
-const StyledDropdownMenu = styled(Box)<BoxProps>({
-  ...type.levels.subtext.large,
-  ...depth[3],
-  backgroundColor: commonColors.background,
-  border: `1px solid ${colors.soap500}`,
-  borderRadius: borderRadius.m,
-  boxSizing: 'border-box',
-  display: 'inline-block',
-  marginTop: space.xxxs,
-  maxHeight: 200,
-  outline: 'none',
-  overflowY: 'auto',
-  position: 'relative',
-  width: 'max-content',
-});
-
-const StyledMenuList = styled('ul')({
-  boxSizing: 'border-box',
-  listStyle: 'none',
-  margin: `${space.xxs} 0`,
-  padding: 0,
-  width: 280,
-  wordBreak: 'break-word',
-  wordWrap: 'break-word', // Needed for IE11
-});
-
-const MenuList = (elemProps: React.HTMLAttributes<HTMLUListElement>) => {
-  return <StyledMenuList role="menu" {...elemProps} />;
-};
-
-export const DropdownMenu = ({
-  activeDropdownItemRef,
-  activeDropdownItem,
-  dropdownItems = [],
-  resetFocus,
-  setActiveDropdownItem,
-  toggleActiveItemDown,
-  toggleActiveItemUp,
-  ...elemProps
-}: DropdownMenuProps) => {
-  const handleItemKeyUp = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'Up': // IE/Edge specific value
-      case 'ArrowLeft':
-      case 'Left': // IE/Edge specific value
-        toggleActiveItemUp();
-        break;
-      case 'ArrowDown':
-      case 'Down': // IE/Edge specific value
-      case 'ArrowRight':
-      case 'Right': // IE/Edge specific value
-        toggleActiveItemDown();
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handleItemKeyDown = (event: React.KeyboardEvent<HTMLLIElement>, item: Breadcrumb) => {
-    switch (event.key) {
-      case 'Tab':
-        event.preventDefault();
-        break;
-      case 'Enter':
-        event.preventDefault();
-        if (item.onAction) {
-          item.onAction(item.link);
-          resetFocus();
-          break;
-        }
-        window.location.href = item.link;
-        break;
-      default:
-        break;
-    }
-  };
-
-  return (
-    <StyledDropdownMenu>
-      <MenuList {...elemProps}>
-        {dropdownItems.map((item, i) => {
-          const {index, link, text, ...elemProps} = item;
-          const isFocused = index === activeDropdownItem.index;
-          return (
-            <li onKeyUp={handleItemKeyUp} onKeyDown={e => handleItemKeyDown(e, item)} key={i}>
-              <DropdownMenuItemLink
-                ref={isFocused ? activeDropdownItemRef : null}
-                href={link}
-                {...elemProps}
-              >
-                {text}
-              </DropdownMenuItemLink>
-            </li>
-          );
-        })}
-      </MenuList>
-    </StyledDropdownMenu>
-  );
-};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/MenuItemLink.tsx

@@ -1,63 +0,0 @@
-import React, {forwardRef} from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, type, typeColors, space} from '@workday/canvas-kit-react/tokens';
-
-interface DropdownMenuItemLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
-  /**
-   * The href url of the anchor tag
-   */
-  href: string;
-  /**
-   * A handler function for overriding hard-redirects with links
-   */
-  onAction?: (href: string) => void;
-}
-
-const MenuItemLink = styled('a')({
-  ...type.levels.subtext.large,
-  boxSizing: 'border-box',
-  textAlign: 'left',
-  color: colors.blackPepper300,
-  cursor: 'pointer',
-  display: 'block',
-  outline: 'none',
-  padding: `${space.xxs} ${space.s}`,
-  textDecoration: 'none',
-  transition: 'background-color color 80ms',
-  '&:hover': {
-    backgroundColor: commonColors.hoverBackground,
-  },
-  '&:focus': {
-    backgroundColor: commonColors.focusBackground,
-    color: typeColors.inverse,
-    outline: 'none',
-  },
-});
-
-export const DropdownMenuItemLink = forwardRef(
-  (
-    {children, href, onAction, onClick, ...elemProps}: DropdownMenuItemLinkProps,
-    ref: React.Ref<HTMLAnchorElement>
-  ) => {
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      event.preventDefault();
-      // allow an override to the hard redirect
-      if (onAction) {
-        onAction(href);
-      } else {
-        // default to hard redirecting
-        window.location.href = href;
-      }
-      // don't block the onClick event if it's provided
-      if (onClick) {
-        onClick(event);
-      }
-    };
-
-    return (
-      <MenuItemLink ref={ref} href={href} role="menuitem" onClick={handleClick} {...elemProps}>
-        {children}
-      </MenuItemLink>
-    );
-  }
-);

package/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts

@@ -1,109 +0,0 @@
-import {useState, useLayoutEffect} from 'react';
-import {useUniqueId, changeFocus} from '@workday/canvas-kit-react/common';
-import {
-  useCloseOnOutsideClick,
-  useCloseOnEscape,
-  usePopupModel,
-  useReturnFocus,
-  usePopupTarget,
-  usePopupPopper,
-} from '@workday/canvas-kit-react/popup';
-
-import {DropdownButtonProps} from './Button';
-import {DropdownMenuProps} from './Menu';
-import {Breadcrumb} from '../types';
-
-export const useFocusActiveItemElement = <E extends HTMLElement>(
-  activeDropdownItemRef: React.RefObject<E>
-) => {
-  useLayoutEffect(() => {
-    if (activeDropdownItemRef.current) {
-      return activeDropdownItemRef.current.focus();
-    }
-  });
-};
-
-const initialActiveItem = {
-  index: 0,
-  link: '',
-  text: '',
-  width: 0,
-} as Breadcrumb;
-
-interface UseDropdown {
-  dropdownButtonProps: Omit<DropdownButtonProps, 'aria-label'>;
-  dropdownMenuProps: DropdownMenuProps;
-  popperProps: ReturnType<typeof usePopupPopper>;
-}
-
-export const useDropdown = (
-  activeDropdownItemRef: React.RefObject<HTMLAnchorElement>,
-  items: Breadcrumb[],
-  buttonId?: string
-): UseDropdown => {
-  // state
-  const [activeDropdownItem, setActiveDropdownItem] = useState(initialActiveItem);
-  // behaviors
-  const model = usePopupModel({
-    initialFocusRef: activeDropdownItemRef,
-  });
-
-  useCloseOnOutsideClick(model);
-  useCloseOnEscape(model);
-  useReturnFocus(model);
-  useFocusActiveItemElement(activeDropdownItemRef);
-
-  const handleButtonKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === 'Enter') {
-      setActiveDropdownItem(items[0]);
-    }
-  };
-
-  const resetMenuFocus = () => {
-    model.events.hide();
-    changeFocus(model.state.targetRef.current);
-  };
-
-  const findActiveDropdownItemByIndex = (index: number) => {
-    return items.filter(item => item.index === index)[0];
-  };
-
-  const toggleActiveItemUp = () => {
-    const previousItem = findActiveDropdownItemByIndex(activeDropdownItem.index - 1);
-    if (!previousItem) {
-      return resetMenuFocus();
-    }
-    return setActiveDropdownItem(previousItem);
-  };
-
-  const toggleActiveItemDown = () => {
-    const nextItem = findActiveDropdownItemByIndex(activeDropdownItem.index + 1);
-    if (!nextItem) {
-      return setActiveDropdownItem(items[0]);
-    }
-    return setActiveDropdownItem(nextItem);
-  };
-
-  const uniqueButtonId = useUniqueId(buttonId);
-
-  const dropdownButtonProps = usePopupTarget(model, {
-    id: uniqueButtonId,
-    toggled: model.state.visibility !== 'hidden',
-    onKeyUp: handleButtonKeyUp,
-  });
-
-  const dropdownMenuProps = {
-    'aria-labelledby': uniqueButtonId,
-    dropdownItems: items,
-    activeDropdownItem,
-    activeDropdownItemRef,
-    setActiveDropdownItem,
-    resetFocus: resetMenuFocus,
-    toggleActiveItemUp,
-    toggleActiveItemDown,
-  };
-
-  const popperProps = usePopupPopper(model);
-
-  return {dropdownButtonProps, dropdownMenuProps, popperProps};
-};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/index.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import {Breadcrumb} from '../types';
-import {Popper} from '@workday/canvas-kit-react/popup';
-
-import {useRTL} from '../hooks';
-import {useDropdown} from './hooks';
-import {DropdownButton, DropdownButtonProps} from './Button';
-import {DropdownMenu} from './Menu';
-
-export interface DropdownProps extends Pick<DropdownButtonProps, 'buttonIcon'> {
-  buttonAriaLabel: string;
-  items?: Breadcrumb[];
-}
-
-export const Dropdown = ({buttonAriaLabel, buttonIcon, items = []}: DropdownProps) => {
-  // refs
-  const activeDropdownItemRef = React.useRef<HTMLAnchorElement>(null);
-  // behaviors
-  const {dropdownButtonProps, dropdownMenuProps, popperProps} = useDropdown(
-    activeDropdownItemRef,
-    items
-  );
-  const {shouldUseRTL} = useRTL();
-  const placement = shouldUseRTL ? 'bottom-end' : 'bottom-start';
-
-  return (
-    <>
-      <DropdownButton
-        aria-label={buttonAriaLabel}
-        buttonIcon={buttonIcon}
-        {...dropdownButtonProps}
-      />
-      <Popper placement={placement} {...popperProps}>
-        <DropdownMenu {...dropdownMenuProps} />
-      </Popper>
-    </>
-  );
-};