@workday/canvas-kit-preview-react 8.0.0 → 8.0.2

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+
+import {colors, type, space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {
+  BaseButton,
+  ButtonContainerProps,
+  ButtonColors,
+  ButtonSizes,
+  getMinWidthStyles,
+} from '@workday/canvas-kit-react/button';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+
+export interface ItemProps extends ButtonContainerProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+   * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the item. This is text used as the accessible name of the button for screen readers.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the item when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+   * should either be `true` or `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-pressed'?: boolean;
+  /**
+   * The icon of the button.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Tooltip Props
+   */
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+
+const getButtonSize = (size: ButtonContainerProps['size']) => {
+  switch (size) {
+    case 'large':
+      return 'medium';
+    case 'medium':
+      return 'small';
+    case 'small':
+      return 'extraSmall';
+    default:
+      return 'medium';
+  }
+};
+
+const getIconButtonColors = (toggled?: boolean): ButtonColors => {
+  return {
+    default: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap200,
+      border: toggled ? colors.licorice200 : 'transparent',
+      icon: toggled ? colors.blackPepper400 : colors.licorice400,
+      label: toggled ? colors.blackPepper400 : colors.licorice400,
+    },
+    hover: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    active: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    focus: {},
+    disabled: {
+      background: colors.soap200,
+      opacity: '1',
+    },
+  };
+};
+
+const getPaddingStyles = (
+  children: React.ReactNode,
+  size: ButtonContainerProps['size'],
+  icon: CanvasSystemIcon | undefined
+) => {
+  if (!children) {
+    return 0;
+  }
+
+  switch (size) {
+    case 'large':
+      return icon ? `0 ${space.m} 0 20px` : `0 ${space.m}`;
+
+    case 'medium':
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+
+    case 'small':
+      return icon ? `0 ${space.xs} 0 ${space.xxs}` : `0 ${space.xs}`;
+
+    default:
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+  }
+};
+
+const geButtonStyles = (size: ButtonSizes, children: React.ReactNode, icon?: CanvasSystemIcon) => {
+  const buttonSize = getButtonSize(size);
+  const minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
+
+  return {
+    height: getMinWidthStyles(false, buttonSize),
+    minWidth: minWidthValue,
+    padding: getPaddingStyles(children, size, icon),
+  };
+};
+
+const Container = ({
+  tooltipProps,
+  children,
+}: {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+}) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+export const SegmentedControlItem = createSubcomponent('button')({
+  displayName: 'SegmentedControl.Item',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlItem,
+})<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
+  const {color, ...textStyles} = type.levels.subtext[size === 'small' ? 'medium' : 'large'];
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        borderRadius="m"
+        colors={getIconButtonColors(elemProps['aria-pressed'])}
+        {...geButtonStyles(size, children, icon)}
+        {...elemProps}
+      >
+        {icon && (
+          <BaseButton.Icon
+            size={size === 'small' ? 'extraSmall' : 'medium'}
+            icon={icon}
+            shouldMirrorIcon={useIsRTL()}
+          />
+        )}
+        {children && (
+          <Text {...textStyles} fontWeight="bold" textAlign="left">
+            {children}
+          </Text>
+        )}
+      </BaseButton>
+    </Container>
+  );
+});

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+
+export interface SegmentedControlListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
+  'aria-label': string;
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+const useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(
+  ({state: {orientation, disabled, items}}) => {
+    const directionName = orientation === 'vertical' ? 'Row' : 'Column';
+    return {
+      [`gridTemplate${directionName}s`]: `repeat(${items.length}, 1fr)`,
+      opacity: disabled ? 0.4 : undefined,
+    };
+  }
+);
+
+export const SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlList,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Grid
+      as={Element}
+      display="inline-grid"
+      role="group"
+      backgroundColor="soap200"
+      border="1px solid transparent"
+      borderColor="licorice200"
+      borderRadius="l"
+      padding="3px"
+      gridGap="xxs"
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+    </Grid>
+  );
+});

package/segmented-control/lib/hooks/useSegmentedControlItem.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import {createElemPropsHook, composeHooks} from '@workday/canvas-kit-react/common';
+import {
+  useListItemRegister,
+  isSelected,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {useSegmentedControlModel} from './useSegmentedControlModel';
+
+export const useSegmentedControlItem = composeHooks(
+  useListItemSelect,
+  createElemPropsHook(useSegmentedControlModel)(
+    (
+      model,
+      _?: React.Ref<HTMLElement>,
+      elemProps: {'data-id'?: string; children?: React.ReactNode} = {}
+    ) => {
+      const name = elemProps['data-id'] || '';
+      const selected = !!name && isSelected(name, model.state);
+
+      return {
+        id: `${model.state.id}-${name}`,
+        'aria-pressed': selected,
+      };
+    }
+  ),
+  useListItemRegister,
+  createElemPropsHook(useSegmentedControlModel)(({state}) => {
+    return {
+      // override the default disabled functionality of `useListItemRegister`
+      // it shouldn't allow to set disabled state only for one button
+      // state prop will disable the whole container
+      disabled: state.disabled ? true : undefined,
+    };
+  })
+);

package/segmented-control/lib/hooks/useSegmentedControlModel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useListModel} from '@workday/canvas-kit-react/collection';
+
+export const useSegmentedControlModel = createModelHook({
+  defaultConfig: {
+    ...useListModel.defaultConfig,
+    /**
+     * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
+     * If not provided, the first value will be selected.
+     */
+    initialValue: '',
+    /**
+     * Sets disabled state for all segmented control buttons
+     * @default false
+     */
+    disabled: false,
+    /**
+     * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
+     * @default 'medium'
+     */
+    size: 'medium' as 'small' | 'medium' | 'large',
+    /**
+     * The SegmentedControl can rendered in a horizontal or vertical orientation.
+     * We suggest to use the `vertical` orientation only for icon only variant.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useListModel.defaultConfig.orientation,
+  },
+  requiredConfig: useListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const initialSelectedRef = React.useRef(config.initialValue);
+  const items = config.items;
+
+  const model = useListModel(
+    useListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = getId(data.item);
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialValue
+        ? [config.initialValue]
+        : config.items?.length
+        ? [getId(config.items![0])]
+        : [],
+      shouldVirtualize: false,
+    })
+  );
+
+  const state = {
+    ...model.state,
+    disabled: config.disabled,
+    size: config.size,
+  };
+
+  const events = {
+    ...model.events,
+  };
+
+  return {
+    ...model,
+    state,
+    events,
+  };
+});

package/segmented-control/package.json

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

package/select/README.md

@@ -34,7 +34,7 @@ fully accessible (see below).
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
+import {Select} from '@workday/canvas-kit-preview-react/select';
 
 function Example() {
   const options = [
@@ -58,8 +58,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = [
@@ -89,8 +89,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
@@ -117,8 +117,8 @@ used to customize how each option is rendered.
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
 import {
   activityStreamIcon,

package/select/index.ts

@@ -1,7 +1,3 @@
-import Select from './lib/Select';
-
-export default Select;
-export {Select};
 export * from './lib/Select';
 
 export {

package/select/lib/Select.tsx

@@ -7,7 +7,7 @@ import {
   generateUniqueId,
 } from '@workday/canvas-kit-react/common';
 import {menuAnimationDuration} from './SelectMenu';
-import SelectBase, {CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
+import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
 import {MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
 
@@ -587,5 +587,3 @@ export const Select = createComponent('button')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectBase.tsx

@@ -20,8 +20,8 @@ import {
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+import {SelectMenu} from './SelectMenu';
+import {SelectOption} from './SelectOption';
 import {scrollIntoViewIfNeeded} from './scrolling';
 import {MenuPlacement, MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
@@ -288,7 +288,7 @@ const defaultRenderSelected: RenderSelectedFunction = option => {
   return option.label;
 };
 
-const SelectBase = ({
+export const SelectBase = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-required': ariaRequired,
   as,
@@ -475,5 +475,3 @@ const SelectBase = ({
     </SelectWrapper>
   );
 };
-
-export default SelectBase;

package/select/lib/SelectMenu.tsx

@@ -223,7 +223,7 @@ const generatePopperOptions = (
   };
 };
 
-const SelectMenu = ({
+export const SelectMenu = ({
   buttonRef,
   children,
   error,
@@ -294,5 +294,3 @@ const SelectMenu = ({
     </Popper>
   );
 };
-
-export default SelectMenu;

package/select/lib/SelectOption.tsx

@@ -105,7 +105,7 @@ const Option = styled('li')<SelectOptionProps>(
   })
 );
 
-const SelectOption = ({
+export const SelectOption = ({
   children,
   focused = false,
   interactive = true,
@@ -126,5 +126,3 @@ const SelectOption = ({
     </Option>
   );
 };
-
-export default SelectOption;

package/side-panel/index.ts

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

package/side-panel/lib/SidePanel.tsx

@@ -110,7 +110,7 @@ export const SidePanelContext = React.createContext({
   origin: 'left',
 });
 
-const SidePanel = ({
+export const SidePanel = ({
   as = 'section',
   children,
   collapsedWidth = 64,
@@ -267,4 +267,3 @@ const ToggleButton = ({
 };
 
 SidePanel.ToggleButton = ToggleButton;
-export default SidePanel;

package/{breadcrumbs → status-indicator}/LICENSE

@@ -43,7 +43,7 @@ While redistributing the Work or Derivative Works thereof, You may choose to off
 
 END OF TERMS AND CONDITIONS
 
-©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
 
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

package/status-indicator/README.md

@@ -0,0 +1,12 @@
+# Canvas Kit Status Indicator
+
+<a href="https://github.com/Workday/canvas-kit/tree/master/modules/preview-react/README.md">
+  <img src="https://img.shields.io/badge/PREVIEW-beta-blueviolet" alt="PREVIEW: Beta" />
+</a>  This component is work in progress and currently in preview.
+
+Status Indicators help the user quickly identify the status of a task, action, or page element.
+
+View the
+[documentation for Status Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator-react--basic)
+on Storybook.
+

package/status-indicator/index.ts

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

package/status-indicator/lib/StatusIndicator.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {ExtractProps, createContainer, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {StatusIndicatorIcon, statusIndicatorColors} from './StatusIndicatorIcon';
+import {StatusIndicatorLabel} from './StatusIndicatorLabel';
+import {useStatusIndicatorModel} from './hooks';
+
+export interface StatusIndicatorProps extends Partial<ExtractProps<typeof HStack, never>> {
+  /**
+   * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
+   */
+  children: React.ReactNode;
+}
+
+export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(({state}) => {
+  const colors = statusIndicatorColors[state.variant][state.emphasis];
+  return {
+    opacity: state.variant === 'transparent' ? '0.85' : undefined,
+    color: colors.text,
+    background: colors.background,
+  };
+});
+
+export const StatusIndicator = createContainer('div')({
+  displayName: 'StatusIndicator',
+  modelHook: useStatusIndicatorModel,
+  elemPropsHook: useStatusIndicator,
+  subComponents: {
+    Icon: StatusIndicatorIcon,
+    Label: StatusIndicatorLabel,
+  },
+})<StatusIndicatorProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <HStack
+      spacing={4}
+      as={Element}
+      maxWidth={200}
+      paddingX="xxxs"
+      display="inline-flex"
+      alignItems="center"
+      height={20}
+      borderRadius="s"
+      {...elemProps}
+    >
+      {children}
+    </HStack>
+  );
+});

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