@workday/canvas-kit-react 7.1.5 → 7.2.0-427-next.2

package/layout/lib/Layout.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {GenericStyle} from '@workday/canvas-kit-react/common';
-import Column, {ColumnProps} from './Column';
-import canvas, {spaceNumbers} from '@workday/canvas-kit-react/tokens';
-import isPropValid from '@emotion/is-prop-valid';
-
-export interface LayoutProps {
-  /**
-   * The children of the Layout (cannot be empty).
-   */
-  children: React.ReactElement<ColumnProps>[] | React.ReactNode;
-  /**
-   * The spacing of the Layout children.
-   */
-  spacing?: number;
-  /**
-   * The padding of the Layout's outside container.
-   * @default 12
-   */
-  gutter?: number | string;
-  /**
-   * If true, set the max width of the Layout container to `1280px`.
-   * @default false
-   */
-  capWidth?: boolean;
-}
-
-const LayoutStyles: GenericStyle = {
-  classname: 'layout',
-  styles: {
-    display: 'flex',
-    width: '100%',
-    boxSizing: 'border-box',
-  },
-};
-
-const LayoutContainer = styled('div', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
-})<LayoutProps>(
-  LayoutStyles.styles,
-  ({gutter}) => {
-    if (gutter === 0) {
-      return;
-    }
-
-    return {padding: `0 ${gutter}`};
-  },
-  ({capWidth}) => {
-    if (!capWidth) {
-      return;
-    }
-
-    return {
-      maxWidth: '1280px',
-      margin: '0 auto',
-    };
-  }
-);
-
-class Layout extends React.Component<LayoutProps> {
-  public static Column = Column;
-
-  private renderChild = (child: React.ReactNode, spacing: number): React.ReactNode => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-
-    if (child.type === Column) {
-      const childProps = child.props;
-
-      if (childProps.spacing || childProps.spacing === 0) {
-        return child;
-      }
-
-      return React.cloneElement(child, {spacing});
-    }
-
-    return child;
-  };
-
-  public render() {
-    const {
-      gutter = canvas.space.xs,
-      spacing = spaceNumbers.xs,
-      children,
-      capWidth,
-      ...elemProps
-    } = this.props;
-
-    return (
-      <LayoutContainer spacing={spacing} gutter={gutter} capWidth={capWidth} {...elemProps}>
-        {React.Children.map(children, child => this.renderChild(child, spacing))}
-      </LayoutContainer>
-    );
-  }
-}
-
-Layout.Column = Column;
-
-export default Layout;

package/layout/lib/Stack.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from './Box';
-import {Flex, FlexProps} from './Flex';
-import {getValidChildren} from './utils/getValidChildren';
-import {stack, StackStyleProps} from './utils/stack';
-
-export type StackProps = FlexProps & StackStyleProps;
-
-const StackItem = createComponent('div')({
-  displayName: 'Stack.Item',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
-    return (
-      <Box
-        as={Element}
-        ref={ref}
-        display="inline-block"
-        flex="0 0 auto"
-        minWidth={0}
-        {...elemProps}
-      >
-        {children}
-      </Box>
-    );
-  },
-});
-
-// prevent `spacing` prop from being passed through to the HTML element
-const shouldForwardProp = (prop: string) => {
-  return prop !== 'spacing';
-};
-
-const StyledStack = styled(Flex, {shouldForwardProp})<StyledType & StackProps>(stack);
-
-export const Stack = createComponent('div')({
-  displayName: 'Stack',
-  Component: ({children, shouldWrapChildren = false, ...elemProps}: StackProps, ref, Element) => {
-    const validChildren = getValidChildren(children);
-    return (
-      <StyledStack as={Element} ref={ref} flexDirection="row" {...elemProps}>
-        {shouldWrapChildren
-          ? validChildren.map((child, index) => (
-              <StackItem key={child.props.id || index}>{child}</StackItem>
-            ))
-          : validChildren}
-      </StyledStack>
-    );
-  },
-  subComponents: {
-    Item: StackItem,
-  },
-});
-
-export interface HStackProps extends StackProps {
-  /**
-   * sets the direction for the stack
-   * @default "row"
-   * */
-  flexDirection?: 'row' | 'row-reverse';
-}
-
-export const HStack = createComponent('div')({
-  displayName: 'HStack',
-  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
-    return (
-      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
-        {children}
-      </Stack>
-    );
-  },
-  subComponents: {
-    Item: StackItem,
-  },
-});
-
-export interface VStackProps extends StackProps {
-  /**
-   * sets the direction for the stack
-   * @default "column"
-   * */
-  flexDirection?: 'column' | 'column-reverse';
-}
-
-export const VStack = createComponent('div')({
-  displayName: 'VStack',
-  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
-    return (
-      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
-        {children}
-      </Stack>
-    );
-  },
-  subComponents: {
-    Item: StackItem,
-  },
-});

package/layout/lib/utils/border.ts

@@ -1,263 +0,0 @@
-import {
-  borderRadius as borderRadiusTokens,
-  CanvasBorderRadiusKeys,
-  colors as colorTokens,
-  CanvasColor,
-} from '@workday/canvas-kit-react/tokens';
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-
-import {PropertyBorder} from './types';
-
-/** style props to set the border properties */
-export type BorderShorthandStyleProps = {
-  /** sets `border` property */
-  border?: string;
-  /** sets `border-top` property */
-  borderTop?: string;
-  /** sets `border-right` property (no bidirectional support) */
-  borderRight?: string;
-  /** sets `border-bottom` property */
-  borderBottom?: string;
-  /** sets `border-left` property (no bidirectional support) */
-  borderLeft?: string;
-};
-
-/** style props to set the border color properties */
-export type BorderColorStyleProps = {
-  /** sets `border-color` property */
-  borderColor?: CanvasColor | (string & {});
-  /** sets `border-top-color` property */
-  borderTopColor?: CanvasColor | (string & {});
-  /** sets `border-right-color` property (no bidirectional support) */
-  borderRightColor?: CanvasColor | (string & {});
-  /** sets `border-bottom-color` property */
-  borderBottomColor?: CanvasColor | (string & {});
-  /** sets `border-left-color` property (no bidirectional support) */
-  borderLeftColor?: CanvasColor | (string & {});
-};
-
-/** style props to set the border radius properties */
-export type BorderRadiusStyleProps = {
-  /** sets `border-radius` property */
-  borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-left-radius` property */
-  borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-right-radius` property */
-  borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-left-radius` property */
-  borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-right-radius` property */
-  borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-};
-
-/** style props to set the border style properties */
-export type BorderLineStyleProps = {
-  /** sets `border-style` property */
-  borderStyle?: PropertyBorder;
-  /** sets `border-top-style` property */
-  borderTopStyle?: PropertyBorder;
-  /** sets `border-right-style` property (no bidirectional support) */
-  borderRightStyle?: PropertyBorder;
-  /** sets `border-bottom-style` property */
-  borderBottomStyle?: PropertyBorder;
-  /** sets `border-left-style` property (no bidirectional support) */
-  borderLeftStyle?: PropertyBorder;
-};
-
-/** style props to set the border width properties */
-export type BorderWidthStyleProps = {
-  /** sets `border-width` property */
-  borderWidth?: string | number;
-  /** sets `border-top-width` property */
-  borderTopWidth?: string | number;
-  /** sets `border-right-width` property (no bidirectional support) */
-  borderRightWidth?: string | number;
-  /** sets `border-bottom-width` property */
-  borderBottomWidth?: string | number;
-  /** sets `border-left-width` property (no bidirectional support) */
-  borderLeftWidth?: string | number;
-};
-
-export type BorderLogicalStyleProps = {
-  /** sets `border-left` property (bidirectional support) */
-  borderInlineStart?: string;
-  /** sets `border-left-color` property (bidirectional support) */
-  borderInlineStartColor?: CanvasColor | (string & {});
-  /** sets `border-left-style` property (bidirectional support) */
-  borderInlineStartStyle?: PropertyBorder;
-  /** sets `border-left-width` property (bidirectional support) */
-  borderInlineStartWidth?: string | number;
-  /** sets `border-right` property (bidirectional support) */
-  borderInlineEnd?: string;
-  /** sets `border-right-color` property (bidirectional support) */
-  borderInlineEndColor?: CanvasColor | (string & {});
-  /** sets `border-right-style` property (bidirectional support) */
-  borderInlineEndStyle?: PropertyBorder;
-  /** sets `border-right-width` property (bidirectional support) */
-  borderInlineEndWidth?: string | number;
-};
-
-/** a collection style props for border properties */
-export type BorderStyleProps = BorderShorthandStyleProps &
-  BorderColorStyleProps &
-  BorderRadiusStyleProps &
-  BorderLineStyleProps &
-  BorderWidthStyleProps &
-  BorderLogicalStyleProps;
-
-// border logical prop handlers
-const borderInlineStart = (isRTL: boolean) => (isRTL ? 'borderRight' : 'borderLeft');
-const borderInlineEnd = (isRTL: boolean) => (isRTL ? 'borderLeft' : 'borderRight');
-const borderInlineStartColor = (isRTL: boolean) => (isRTL ? 'borderRightColor' : 'borderLeftColor');
-const borderInlineEndColor = (isRTL: boolean) => (isRTL ? 'borderLeftColor' : 'borderRightColor');
-const borderInlineStartStyle = (isRTL: boolean) => (isRTL ? 'borderRightStyle' : 'borderLeftStyle');
-const borderInlineEndStyle = (isRTL: boolean) => (isRTL ? 'borderLeftStyle' : 'borderRightStyle');
-const borderInlineStartWidth = (isRTL: boolean) => (isRTL ? 'borderRightWidth' : 'borderLeftWidth');
-const borderInlineEndWidth = (isRTL: boolean) => (isRTL ? 'borderLeftWidth' : 'borderRightWidth');
-
-const borderShorthandProps = {
-  border: 'border',
-  borderTop: 'borderTop',
-  borderRight: 'borderRight',
-  borderBottom: 'borderBottom',
-  borderLeft: 'borderLeft',
-  borderInlineStart,
-  borderInlineEnd,
-};
-
-const borderColors = {
-  borderColor: 'borderColor',
-  borderTopColor: 'borderTopColor',
-  borderRightColor: 'borderRightColor',
-  borderBottomColor: 'borderBottomColor',
-  borderLeftColor: 'borderLeftColor',
-  borderInlineStartColor,
-  borderInlineEndColor,
-};
-
-const borderRadii = {
-  borderRadius: 'borderRadius',
-  borderTopLeftRadius: 'borderTopLeftRadius',
-  borderTopRightRadius: 'borderTopRightRadius',
-  borderBottomLeftRadius: 'borderBottomLeftRadius',
-  borderBottomRightRadius: 'borderBottomRightRadius',
-};
-
-const borderStyles = {
-  borderStyle: 'borderStyle',
-  borderTopStyle: 'borderTopStyle',
-  borderRightStyle: 'borderRightStyle',
-  borderBottomStyle: 'borderBottomStyle',
-  borderLeftStyle: 'borderLeftStyle',
-  borderInlineStartStyle,
-  borderInlineEndStyle,
-};
-
-const borderWidths = {
-  borderWidth: 'borderWidth',
-  borderTopWidth: 'borderTopWidth',
-  borderRightWidth: 'borderRightWidth',
-  borderBottomWidth: 'borderBottomWidth',
-  borderLeftWidth: 'borderLeftWidth',
-  borderInlineStartWidth,
-  borderInlineEndWidth,
-};
-
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-export function border<P extends BorderStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  // border will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  const isRTL = canvas.direction === ContentDirection.RTL;
-  const styles = {};
-  for (const key in props) {
-    if (props.hasOwnProperty(key)) {
-      if (key in borderShorthandProps) {
-        const value = props[key as keyof BorderShorthandStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStart') {
-          attr = borderInlineStart(isRTL);
-        } else if (key === 'borderInlineEnd') {
-          attr = borderInlineEnd(isRTL);
-        } else {
-          attr = borderShorthandProps[key as keyof BorderShorthandStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderColors) {
-        const propValue = props[key as keyof BorderColorStyleProps] as CanvasColor | string;
-        const value = colorTokens[propValue as CanvasColor] || propValue;
-        let attr: string;
-        if (key === 'borderInlineStartColor') {
-          attr = borderInlineStartColor(isRTL);
-        } else if (key === 'borderInlineEndColor') {
-          attr = borderInlineEndColor(isRTL);
-        } else {
-          attr = borderColors[key as keyof BorderColorStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderRadii) {
-        const propValue = props[key as keyof BorderRadiusStyleProps] as
-          | CanvasBorderRadiusKeys
-          | number
-          | string;
-        const value = borderRadiusTokens[propValue as CanvasBorderRadiusKeys] || propValue;
-        const attr = borderRadii[key as keyof BorderRadiusStyleProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderStyles) {
-        const value = props[key as keyof BorderLineStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartStyle') {
-          attr = borderInlineStartStyle(isRTL);
-        } else if (key === 'borderInlineEndStyle') {
-          attr = borderInlineEndStyle(isRTL);
-        } else {
-          attr = borderStyles[key as keyof BorderLineStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderWidths) {
-        const value = props[key as keyof BorderWidthStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartWidth') {
-          attr = borderInlineStartWidth(isRTL);
-        } else if (key === 'borderInlineEndWidth') {
-          attr = borderInlineEndWidth(isRTL);
-        } else {
-          attr = borderWidths[key as keyof BorderWidthStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-      }
-    }
-  }
-  return styles;
-}

package/layout/lib/utils/stack.ts

@@ -1,78 +0,0 @@
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-import {space as spaceTokens, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
-
-export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-
-const selector = '& > *:not(style) ~ *:not(style)';
-
-export type StackSpacing = CanvasSpaceKeys | number | (string & {});
-
-export type StackStyleProps = {
-  /** sets space values between child elements (bidirectional support) */
-  spacing: StackSpacing;
-  /**
-   * sets the direction for the stack
-   * @default "row"
-   * */
-  flexDirection?: StackDirection;
-  /**
-   * when `true` wraps each child element in a `Stack.Item`
-   * @default false
-   * */
-  shouldWrapChildren?: boolean;
-};
-
-const column = (value: StackSpacing) => ({
-  marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
-});
-
-const columnReverse = (value: StackSpacing) => ({
-  marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-});
-
-const row = (value: StackSpacing, isRTL = false) => {
-  const attr = isRTL ? 'marginRight' : 'marginLeft';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const rowReverse = (value: StackSpacing, isRTL = false) => {
-  const attr = isRTL ? 'marginLeft' : 'marginRight';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
-
-const stackDirectionProps = {
-  column,
-  'column-reverse': columnReverse,
-  row,
-  'row-reverse': rowReverse,
-};
-
-export function stack<P extends StackStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  let styles = {};
-  const {flexDirection = 'row', spacing} = props;
-  if (flexDirection === 'column' || flexDirection === 'column-reverse') {
-    const stackFn = stackDirectionProps[flexDirection];
-    styles = stackFn(spacing);
-  }
-
-  if (flexDirection === 'row' || flexDirection === 'row-reverse') {
-    // stack will always be used within the context of a component, but eslint doesn't know that
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const {canvas} = useTheme(props.theme);
-    const stackFn = stackDirectionProps[flexDirection];
-    const isRTL = canvas.direction === ContentDirection.RTL;
-    styles = stackFn(spacing, isRTL);
-  }
-
-  return {
-    [selector]: styles,
-  };
-}

package/layout/lib/utils/types.ts

@@ -1,148 +0,0 @@
-import {
-  Globals,
-  GlobalsNumber,
-  SelfPosition,
-  DisplayOutside,
-  DisplayInside,
-  DisplayInternal,
-  DisplayLegacy,
-  LineStyle,
-  ContentDistribution,
-  ContentPosition,
-} from 'csstype';
-
-// We're temporarily creating these types from csstype
-// to improve type completion until we move to csstype v3.
-
-// Border
-export type PropertyBorder = Globals | LineStyle | (string & {});
-
-// Flex Item
-export type PropertyJustifySelf =
-  | Globals
-  | SelfPosition
-  | 'auto'
-  | 'baseline'
-  | 'left'
-  | 'normal'
-  | 'right'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyAlignSelf =
-  | Globals
-  | SelfPosition
-  | 'auto'
-  | 'baseline'
-  | 'normal'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyOrder = GlobalsNumber;
-
-// Layout
-export type PropertyDisplay =
-  | Globals
-  | DisplayOutside
-  | DisplayInside
-  | DisplayInternal
-  | DisplayLegacy
-  | 'contents'
-  | 'list-item'
-  | 'none'
-  | (string & {});
-
-export type PropertyListStyle = Globals | 'inside' | 'none' | 'outside' | (string & {});
-
-export type PropertyOverflow =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible'
-  | (string & {});
-
-export type PropertyOverflowX =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible';
-
-export type PropertyOverflowY =
-  | Globals
-  | '-moz-hidden-unscrollable'
-  | 'auto'
-  | 'clip'
-  | 'hidden'
-  | 'scroll'
-  | 'visible';
-
-export type PropertyVerticalAlign =
-  | Globals
-  | 'baseline'
-  | 'bottom'
-  | 'middle'
-  | 'sub'
-  | 'super'
-  | 'text-bottom'
-  | 'text-top'
-  | 'top'
-  | (string & {});
-
-// Position
-export type PropertyPosition =
-  | Globals
-  | '-webkit-sticky'
-  | 'absolute'
-  | 'fixed'
-  | 'relative'
-  | 'static'
-  | 'sticky';
-
-export type PropertyZIndex = GlobalsNumber | 'auto';
-
-// Flex
-export type PropertyAlignItems =
-  | Globals
-  | SelfPosition
-  | 'baseline'
-  | 'normal'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyAlignContent =
-  | Globals
-  | ContentDistribution
-  | ContentPosition
-  | 'baseline'
-  | 'normal'
-  | (string & {});
-
-export type PropertyJustifyItems =
-  | Globals
-  | SelfPosition
-  | 'baseline'
-  | 'left'
-  | 'legacy'
-  | 'normal'
-  | 'right'
-  | 'stretch'
-  | (string & {});
-
-export type PropertyJustifyContent =
-  | Globals
-  | ContentDistribution
-  | ContentPosition
-  | 'left'
-  | 'normal'
-  | 'right'
-  | (string & {});
-
-export type PropertyFlexWrap = Globals | 'nowrap' | 'wrap' | 'wrap-reverse';
-
-export type PropertyFlexDirection = Globals | 'column' | 'column-reverse' | 'row' | 'row-reverse';

package/loading-animation/README.md

@@ -1,7 +0,0 @@
-# Canvas Kit Loading Animation
-
-View the
-[documentation for Loading Animation](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-animation-react--basic)
-on Storybook.
-
-[> Workday Design Reference](https://design.workday.com/components/indicators/loading-animation)

package/loading-animation/index.ts

@@ -1,5 +0,0 @@
-import LoadingDots from './lib/LoadingDots';
-
-export {LoadingDots as LoadingAnimation, LoadingDots};
-export default LoadingDots;
-export * from './lib/LoadingDots';