@workday/canvas-kit-react 6.3.1 → 7.0.0-alpha.0-next.1

package/action-bar/README.md

@@ -1,55 +1,6 @@
-# Canvas Kit Action Bar
+# Canvas Kit React Action Bar
 
-Full width toolbar fixed to bottom of screen.
+`ActionBar` contains primary and secondary actions related to a page or task.
 
-Although not required, [buttons](../../button/react) are often used in in action bars. The primary
-action button should be left aligned followed by secondary buttons. The primary button is on the
-right only in task orchestration and on mobile devices.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-```tsx
-import * as React from 'react';
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {ActionBar} from '@workday/canvas-kit-react/action-bar';
-
-<ActionBar>
-  <PrimaryButton variant="primary">Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>;
-```
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-> None
-
-### Optional
-
-#### `fixed: boolean`
-
-> Fixes the toolbar to the bottom of the window (uses `position: fixed`)
-
-## Responsive Behavior
-
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
-
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+For more detailed information on this component, please refer to the
+[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar-react--basic)

package/action-bar/index.ts

@@ -1,5 +1 @@
-import ActionBar from './lib/ActionBar';
-
-export default ActionBar;
-export {ActionBar};
 export * from './lib/ActionBar';

package/action-bar/lib/ActionBar.tsx

@@ -1,76 +1,37 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
 
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * If true, fix the ActionBar to the bottom of the screen.
-   * @default false
-   */
-  fixed?: boolean;
+interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
 }
 
-function getFixedStyles(fixed = false): CSSProperties {
-  return fixed
-    ? {
-        position: 'fixed',
-        left: 0,
-        bottom: 0,
-        right: 0,
-      }
-    : {};
-}
-
-const ActionBarContainer = styled('div')<ActionBarProps>(
-  {
-    borderTop: `solid 1px ${colors.soap400}`,
-    background: commonColors.background,
+const ResponsiveHStack = styled(HStack)<HStackProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
     padding: space.s,
-    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-  },
-  ({fixed, theme}) => {
-    return {
-      ...getFixedStyles(fixed),
-      [theme.canvas.breakpoints.down('s')]: {
-        padding: space.xxs,
-      },
-    };
-  }
-);
-
-const ChildrenContainer = styled('div')(
-  {
-    display: 'inline-block',
-    padding: `0 ${space.m}`,
-    '*:not(:first-of-type)': {
-      marginLeft: space.s,
+    '> *:not(div)': {
+      flex: 1,
     },
   },
-  ({theme}) => ({
-    [theme.canvas.breakpoints.down('s')]: {
-      display: 'flex',
-      padding: space.xxs,
-      justifyContent: 'center',
-      flexDirection: 'row-reverse',
-      '> *': {
-        flex: 1,
-        '&:not(:first-of-type)': {
-          marginRight: space.s,
-          marginLeft: 0,
-        },
-      },
-    },
-  })
-);
-
-export default class ActionBar extends React.Component<ActionBarProps> {
-  public render() {
-    const {fixed, children, ...elemProps} = this.props;
+}));
 
-    return (
-      <ActionBarContainer {...elemProps} fixed={fixed}>
-        <ChildrenContainer>{children}</ChildrenContainer>
-      </ActionBarContainer>
-    );
-  }
-}
+export const ActionBar = createComponent('div')({
+  displayName: 'ActionBar',
+  Component: (elemProps: ActionBarProps, ref, Element) => (
+    <ResponsiveHStack
+      ref={ref}
+      as={Element}
+      spacing="s"
+      depth={1}
+      background={commonColors.background}
+      borderTop={`solid 1px ${colors.soap400}`}
+      padding={`${space.s} ${space.xl} `}
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      {...elemProps}
+    />
+  ),
+});

package/banner/index.ts

@@ -1,5 +1,2 @@
-import Banner from './lib/Banner';
-
-export default Banner;
-export {Banner};
 export * from './lib/Banner';
+export * from './lib/hooks/';

package/banner/lib/Banner.tsx

@@ -1,127 +1,101 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
 import * as React from 'react';
-import {colors, space, borderRadius, type} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
-import {ErrorType, focusRing, styled, Themeable} from '@workday/canvas-kit-react/common';
 
-export enum BannerVariant {
-  Full,
-  Sticky,
-}
+import {borderRadius, CSSProperties, space, type} from '@workday/canvas-kit-react/tokens';
+import {
+  createComponent,
+  ExtractProps,
+  focusRing,
+  hideMouseFocus,
+  useDefaultModel,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The function called when the Banner is clicked.
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * The label of the Banner.
-   */
-  label?: React.ReactNode;
-  /**
-   * The variant of the Banner. Accepts `Full` or `Sticky`.
-   * @default BannerVariant.Full
-   */
-  variant?: BannerVariant;
-  /**
-   * The type of error associated with the Banner (if applicable).
-   * @default ErrorType.Alert
-   */
-  error?: ErrorType;
+import {BannerModel, BannerModelConfig, useBanner, useBannerModel, useThemedPalette} from './hooks';
+
+import {BannerIcon} from './BannerIcon';
+import {BannerLabel} from './BannerLabel';
+import {BannerActionText} from './BannerActionText';
+
+export const BannerModelContext = React.createContext<BannerModel>({} as any);
+
+export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
+  model?: BannerModel;
   /**
-   * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-   * @default 'View All'
+   * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
    */
-  actionText?: string;
+  children?: React.ReactNode;
 }
 
-const BannerWrapper = styled('button')<BannerProps>(
-  {
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.medium,
-    backgroundColor: colors.cantaloupe400,
-    boxSizing: 'border-box',
-    color: colors.blackPepper400,
-    padding: `${space.xxs} ${space.s}`,
-    textAlign: 'left',
-    border: 0,
-    display: 'flex',
-    alignItems: 'center',
-    transition: 'background-color 120ms',
-    '&:focus': {
-      outline: 'none',
-      ...focusRing({separation: 2}),
-    },
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  ({error, variant}) => ({
-    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
-    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
-    borderRadius:
-      variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
-    width: variant === BannerVariant.Sticky ? '222px' : '328px',
-    '&:hover': {
-      backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
-    },
-  })
-);
+// Remove color from our type since it is set on the Flex style attribute
+const {color: _color, ...typeLevelsSubtextLarge} = type.levels.subtext.large;
 
-const BannerIcon = styled(SystemIcon)({
-  marginRight: space.xs,
-});
+const styles: CSSProperties = {
+  ...typeLevelsSubtextLarge,
+  cursor: 'pointer',
+  fontWeight: type.properties.fontWeights.medium,
+  textAlign: 'left',
+  transition: 'background-color 120ms',
+  '&:focus': {
+    outline: 'none',
+    ...focusRing({separation: 2}),
+  },
+  ...hideMouseFocus,
+};
 
-const BannerLabel = styled('div')({
-  flex: 1,
-});
+export const Banner = createComponent('button')({
+  displayName: 'Banner',
+  Component: ({children, model, ...props}: BannerProps, ref, Element) => {
+    const {hasError, isSticky, id, ...elemProps} = props;
+    const value = useDefaultModel(model, {hasError, isSticky, id}, useBannerModel);
 
-const BannerViewAll = styled('span')<BannerProps>(
-  {
-    textDecoration: 'underline',
-  },
-  ({variant}) => ({
-    display: variant === BannerVariant.Sticky ? 'none' : undefined,
-  })
-);
+    const palette = useThemedPalette(hasError ? 'error' : 'alert');
+    const themedBackgroundStyles: CSSProperties = {
+      '&:hover': {
+        backgroundColor: palette.hover,
+      },
+    };
 
-class Banner extends React.Component<BannerProps> {
-  static Variant = BannerVariant;
-  static ErrorType = ErrorType;
+    const isRTL = useIsRTL();
+    const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+    const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+    const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+    const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
 
-  public render() {
-    const {
-      actionText = 'View All',
-      variant = BannerVariant.Full,
-      error = ErrorType.Alert,
-      label,
-      onClick,
-      ...props
-    } = this.props;
+    const borderStyleProps = {
+      [borderBottomLeftRadius]: borderRadius.m,
+      [borderTopLeftRadius]: borderRadius.m,
+      [borderBottomRightRadius]: isSticky ? 0 : borderRadius.m,
+      [borderTopRightRadius]: isSticky ? 0 : borderRadius.m,
+    };
 
-    const bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
-    const iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
-    const iconSize = 24;
+    const bannerProps = useBanner(value, elemProps, ref);
 
     return (
-      <BannerWrapper
-        aria-label={actionText + ': ' + label}
-        role="button"
-        variant={variant}
-        tabIndex={0}
-        onClick={onClick}
-        error={error}
-        {...props}
-      >
-        <BannerIcon icon={bannerIcon} color={iconColor} colorHover={iconColor} size={iconSize} />
-        <BannerLabel>{label}</BannerLabel>
-        <BannerViewAll variant={variant}>{actionText}</BannerViewAll>
-      </BannerWrapper>
+      <BannerModelContext.Provider value={value}>
+        <Flex
+          as={Element}
+          width={isSticky ? '222px' : '328px'}
+          backgroundColor={palette.normal}
+          color={palette.contrast}
+          padding={`${space.xxs} ${space.s}`}
+          border="0"
+          display="flex"
+          alignItems="center"
+          {...borderStyleProps}
+          css={[styles, themedBackgroundStyles]}
+          {...bannerProps}
+        >
+          {children}
+        </Flex>
+      </BannerModelContext.Provider>
     );
-  }
-}
-
-Banner.Variant = BannerVariant;
-Banner.ErrorType = ErrorType;
-
-export default Banner;
+  },
+  subComponents: {
+    Icon: BannerIcon,
+    Label: BannerLabel,
+    ActionText: BannerActionText,
+  },
+});

package/banner/lib/BannerActionText.tsx

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import * as React from 'react';
+
+import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-labs-react/common';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+
+import {BannerModelContext} from './Banner';
+import {BannerModel, useBannerActionText} from './hooks';
+
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+  model?: BannerModel;
+  /**
+   * The text of the Banner action.
+   * @default 'View All'
+   */
+  children?: React.ReactNode;
+}
+
+const styles: CSSProperties = {
+  textDecoration: 'underline',
+};
+
+export const BannerActionText = createComponent('span')({
+  displayName: 'Banner.ActionTextText',
+  Component: (
+    {children = 'View All', model, ...elemProps}: BannerActionTextProps,
+    ref,
+    Element
+  ) => {
+    const localModel = useModelContext(BannerModelContext, model);
+    const props = useBannerActionText(localModel, elemProps, ref);
+
+    return (
+      <Box
+        display={localModel.state.isSticky ? 'none' : 'inline'}
+        as={Element}
+        css={[styles]}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  },
+});

package/banner/lib/BannerIcon.tsx

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+
+import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
+import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+
+import {BannerModelContext} from './Banner';
+import {BannerModel, useBannerIcon} from './hooks';
+
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+  model?: BannerModel;
+  /**
+   * Icon to show next to label
+   * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+   */
+  icon?: CanvasSystemIcon;
+}
+
+const styles: CSSProperties = {
+  marginRight: space.xs,
+};
+
+export const BannerIcon = createComponent('span')({
+  displayName: 'Banner.Icon',
+  Component: ({icon = exclamationTriangleIcon, model, ...elemProps}: BannerIconProps, ref) => {
+    const {themeRTL} = useThemeRTL();
+    const localModel = useModelContext(BannerModelContext, model);
+
+    // SystemIcon is still a class based component so we need to set ref manually.
+    const {ref: iconRef, icon: defaultIcon, ...props} = useBannerIcon(localModel, elemProps, ref);
+
+    return (
+      <SystemIcon icon={icon ?? defaultIcon} iconRef={iconRef} css={themeRTL(styles)} {...props} />
+    );
+  },
+});

package/banner/lib/BannerLabel.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+import {BannerModelContext} from './Banner';
+import {BannerModel, useBannerLabel} from './hooks';
+
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+  model?: BannerModel;
+  /**
+   * The text of the Banner.
+   */
+  children: React.ReactNode;
+}
+
+export const BannerLabel = createComponent('div')({
+  displayName: 'Banner.Label',
+  Component: ({children, model, ...elemProps}: BannerLabelProps, ref, Element) => {
+    const localModel = useModelContext(BannerModelContext, model);
+    const props = useBannerLabel(localModel, elemProps, ref);
+
+    return (
+      <Flex as={Element} flex="1 1 0%" {...props}>
+        {children}
+      </Flex>
+    );
+  },
+});

package/banner/lib/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useBannerModel';
+export * from './useThemedPalette';
+export * from './useBannerIcon';
+export * from './useBannerLabel';
+export * from './useBannerActionText';
+export * from './useBanner';

package/banner/lib/hooks/useBanner.tsx

@@ -0,0 +1,13 @@
+import {createHook} from '@workday/canvas-kit-react/common';
+import {BannerModel} from './useBannerModel';
+
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export const useBanner = createHook(({state}: BannerModel) => {
+  return {
+    'aria-describedby': `label-${state.id}`,
+    'aria-labelledby': `action-${state.id}`,
+  };
+});

package/banner/lib/hooks/useBannerActionText.tsx

@@ -0,0 +1,12 @@
+import {createHook} from '@workday/canvas-kit-react/common';
+import {BannerModel} from './useBannerModel';
+
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+export const useBannerActionText = createHook(({state}: BannerModel) => {
+  return {
+    id: `action-${state.id}`,
+  };
+});

package/banner/lib/hooks/useBannerIcon.tsx

@@ -0,0 +1,19 @@
+import {createHook} from '@workday/canvas-kit-react/common';
+import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
+import {BannerModel} from './useBannerModel';
+import {useThemedPalette} from './useThemedPalette';
+
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export const useBannerIcon = createHook(({state}: BannerModel) => {
+  const palette = useThemedPalette(state.hasError ? 'error' : 'alert');
+
+  return {
+    icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
+    color: palette.contrast,
+    colorHover: palette.contrast,
+    size: 24,
+  };
+});

package/banner/lib/hooks/useBannerLabel.tsx

@@ -0,0 +1,12 @@
+import {createHook} from '@workday/canvas-kit-react/common';
+import {BannerModel} from './useBannerModel';
+
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the Banner.Label subcomponent
+ */
+export const useBannerLabel = createHook(({state}: BannerModel) => {
+  return {
+    id: `label-${state.id}`,
+  };
+});

package/banner/lib/hooks/useBannerModel.tsx

@@ -0,0 +1,63 @@
+import {
+  createEventMap,
+  Model,
+  ToModelConfig,
+  useEventMap,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+
+type BannerState = {
+  /**
+   * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
+   * will be `exclamationCircleIcon`, and a themed error color will be applied.
+   * @default false
+   */
+  hasError?: boolean;
+  /**
+   * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
+   * will be hidden, and some basic styles will be applied.
+   * You will still need to manually set the css `position` value.
+   * @default false
+   */
+  isSticky?: boolean;
+  /**
+   * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
+   * - `Banner` will set `aria-describedby` to `label-${id}`
+   * - `Banner` will set `aria-label` to `action-${id}`
+   * - `Banner.Label` will set `id` to `label-${id}`
+   * - `Banner.ActionText` will set `id` to `action-${id}`
+   *
+   * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+   * @default `useUniqueId()`
+   */
+  id?: string;
+};
+
+type BannerEvents = {};
+
+export type BannerModel = Model<BannerState, BannerEvents>;
+
+const BannerEventMap = createEventMap<BannerEvents>()({
+  guards: {},
+  callbacks: {},
+});
+
+export type BannerModelConfig = BannerState &
+  Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
+
+export const useBannerModel = (config: BannerModelConfig = {}): BannerModel => {
+  const id = useUniqueId(config.id);
+
+  const state = {
+    hasError: config.hasError ?? false,
+    isSticky: config.isSticky ?? false,
+    id,
+  };
+
+  const events = useEventMap(BannerEventMap, state, config, {});
+
+  return {
+    state,
+    events,
+  };
+};