@workday/canvas-kit-react 6.0.0-alpha.0-next.31 → 6.0.0-alpha.0-next.37

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,
+  };
+};

package/banner/lib/hooks/useThemedPalette.ts

@@ -0,0 +1,53 @@
+import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import chroma from 'chroma-js';
+
+type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+
+interface BackgroundColors {
+  normal?: string;
+  hover?: string;
+  contrast?: string;
+}
+
+const isAccessible = (foreground: string, background: string) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
+
+const getPaletteColorsFromTheme = (
+  palette: CanvasThemePalette,
+  fallbackColors?: BackgroundColors
+): BackgroundColors => {
+  return {
+    hover: palette.dark,
+    normal: palette.main,
+    contrast: isAccessible(palette.contrast, palette.main)
+      ? palette.contrast
+      : fallbackColors?.contrast,
+  };
+};
+
+export function getPaletteColors(
+  type: paletteSelection,
+  theme: EmotionCanvasTheme
+): BackgroundColors {
+  const palette = theme.canvas.palette[type];
+
+  switch (type) {
+    case 'error': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.frenchVanilla100});
+    }
+    case 'alert': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.blackPepper400});
+    }
+    default: {
+      return getPaletteColorsFromTheme(palette);
+    }
+  }
+}
+
+export const useThemedPalette = (type: paletteSelection) => {
+  const theme = useTheme();
+
+  return getPaletteColors(type, theme);
+};

package/common/index.ts

@@ -6,3 +6,4 @@ export * from './lib/styles';
 export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
+export * from './lib/EllipsisText';

package/common/lib/EllipsisText.tsx

@@ -0,0 +1,11 @@
+import styled, {CSSObject} from '@emotion/styled';
+import {ElementComponent} from '..';
+
+export const ellipsisStyles: CSSObject = {
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+};
+
+// Recast as an `ElementComponent` due to better type support for `as` and `ref`
+export const EllipsisText = (styled('span')(ellipsisStyles) as any) as ElementComponent<'span', {}>;

package/common/lib/styles/hideMouseFocus.ts

@@ -1,10 +1,11 @@
-import {CSSObject, Interpolation} from '@emotion/core';
+import {Interpolation} from '@emotion/core';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-export const hideMouseFocus: CSSObject = {
+export const hideMouseFocus: CSSProperties = {
   [`[data-whatinput="mouse"] &:focus,
     [data-whatinput="touch"] &:focus,
     [data-whatinput="pointer"] &:focus`]: {