@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

package/icon/lib/SystemIcon.tsx

@@ -3,6 +3,7 @@ import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
+import {createComponent} from '../../common';
 
 export interface SystemIconStyles {
   /**
@@ -43,7 +44,9 @@ export interface SystemIconStyles {
   fillHover?: string;
 }
 
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface SystemIconProps
+  extends SystemIconStyles,
+    Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -51,7 +54,8 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number;
+  size?: number | undefined;
+  className?: string; //investigate more
 }
 
 export const systemIconStyles = ({
@@ -84,15 +88,15 @@ export const systemIconStyles = ({
   },
 });
 
-export default class SystemIcon extends React.Component<SystemIconProps> {
-  render() {
-    const {
+const SystemIcon = createComponent('span')({
+  displayName: 'SystemIcon',
+  Component: (
+    {
       background = 'transparent',
       backgroundHover = 'transparent',
       color = iconColors.standard,
       colorHover = iconColors.hover,
       icon,
-      iconRef,
       accent,
       accentHover,
       fill,
@@ -100,8 +104,10 @@ export default class SystemIcon extends React.Component<SystemIconProps> {
       size,
       shouldMirror,
       ...elemProps
-    } = this.props;
-
+    }: SystemIconProps,
+    ref,
+    Element
+  ) => {
     const style = systemIconStyles({
       accent,
       accentHover,
@@ -118,11 +124,14 @@ export default class SystemIcon extends React.Component<SystemIconProps> {
         src={icon}
         type={CanvasIconTypes.System}
         size={size}
-        styles={style}
-        iconRef={iconRef}
+        as={Element}
         shouldMirror={shouldMirror}
+        ref={ref}
+        styles={style}
         {...elemProps}
       />
     );
-  }
-}
+  },
+});
+
+export default SystemIcon;

package/icon/lib/SystemIconCircle.tsx

@@ -4,7 +4,7 @@ import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import SystemIcon, {SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -15,7 +15,7 @@ export enum SystemIconCircleSize {
   xxl = 120,
 }
 
-export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
+export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
   /**
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
@@ -58,33 +58,36 @@ const Container = styled('div', {
   })
 );
 
-export default class SystemIconCircle extends React.Component<SystemIconCircleProps> {
-  static Size = SystemIconCircleSize;
-
-  render() {
-    const {
+const SystemIconCircle = createComponent('span')({
+  displayName: 'SystemIconCircle',
+  Component: (
+    {
       background = colors.soap200,
       size = SystemIconCircleSize.l,
       icon,
-      iconRef,
+
       shouldMirror,
       ...elemProps
-    } = this.props;
-
+    }: SystemIconCircleProps,
+    ref,
+    Element
+  ) => {
     const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
     const iconSize = size * 0.625;
-
     return (
       <Container background={background} size={size} {...elemProps}>
         <SystemIcon
           icon={icon}
           color={iconColor}
           colorHover={iconColor}
+          as={Element}
           size={iconSize}
-          iconRef={iconRef}
+          ref={ref}
           shouldMirror={shouldMirror}
         />
       </Container>
     );
-  }
-}
+  },
+});
+
+export default SystemIconCircle;

package/index.ts

@@ -7,7 +7,6 @@ export * from './card';
 export * from './checkbox';
 export * from './color-picker';
 export * from './common';
-export * from './cookie-banner';
 export * from './dialog';
 export * from './disclosure';
 export * from './form-field';
@@ -15,7 +14,6 @@ export * from './icon';
 export * from './layout';
 export * from './loading-animation';
 export * from './modal';
-export * from './page-header';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

package/layout/LICENSE

@@ -45,6 +45,7 @@ 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.
 
+
 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
 http://www.apache.org/licenses/LICENSE-2.0
 

package/layout/README.md

@@ -1,3 +1,16 @@
+# Canvas Kit React Layout
+
+A collection of layout components.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react/layout
+```
+
+For more detailed information on this component, please refer to the
+[storybook documentation](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-react-column-and-layout--page-layout)
+
 # Canvas Kit Layout
 
 The layout component is used to create layouts for your application. The component comes with the
@@ -123,3 +136,21 @@ import {Layout} from '@workday/canvas-kit-react/layout';
 > The left and right padding for the column (inherits from Layout prop)
 
 Default: `12`
+
+# Flex
+
+View the
+[documentation for Flex](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-flex--usage)
+on Storybook.
+
+# Stack
+
+View the
+[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-stack--basic-stack)
+on Storybook.
+
+# Box
+
+View the
+[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-box--as#box)
+on Storybook.

package/layout/index.ts

@@ -1,6 +1,16 @@
 import Layout from './lib/Layout';
 import Column from './lib/Column';
 
-export default Layout;
-export {Layout, Column};
-export * from './lib/Layout';
+export { Layout, Column};
+export * from './lib/Box';
+export * from './lib/utils/border';
+export * from './lib/utils/color';
+export {DepthStyleProps} from './lib/utils/depth';
+export * from './lib/utils/flexItem';
+export * from './lib/utils/layout';
+export * from './lib/utils/position';
+export {SpaceStyleProps} from './lib/utils/space';
+export * from './lib/Flex';
+export * from './lib/Stack';
+export type { FlexStyleProps } from './lib/utils/flex';
+export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';

package/layout/lib/Box.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
+import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
+
+// style props
+import {border, BorderStyleProps} from './utils/border';
+import {color, ColorStyleProps} from './utils/color';
+import {depth, DepthStyleProps} from './utils/depth';
+import {flexItem, FlexItemStyleProps} from './utils/flexItem';
+import {layout, LayoutStyleProps} from './utils/layout';
+import {other, OtherStyleProps} from './utils/other';
+import {position, PositionStyleProps} from './utils/position';
+import {space, SpaceStyleProps} from './utils/space';
+
+export type BoxProps = BorderStyleProps &
+  ColorStyleProps &
+  DepthStyleProps &
+  FlexItemStyleProps &
+  LayoutStyleProps &
+  OtherStyleProps &
+  PositionStyleProps &
+  SpaceStyleProps & {
+    children?: React.ReactNode;
+  };
+
+const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+
+const shouldForwardProp = (prop: string) => {
+  return isPropValid(prop) && !omittedProps.includes(prop);
+};
+
+/**
+ * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
+ * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
+ * @example
+ * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
+ * const StyledHeader = styled('h1')(
+ *  boxStyleFn,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export const boxStyleFn = <P extends BoxProps>(props: P) => {
+  return [
+    {
+      boxSizing: 'border-box',
+    },
+    border,
+    color,
+    depth,
+    flexItem,
+    layout,
+    position,
+    space,
+  ].reduce((result, style) => {
+    // @ts-ignore
+    const temp = typeof style === 'function' ? style(props) : style;
+    // eslint-disable-next-line guard-for-in
+    for (const key in temp) {
+      // @ts-ignore
+      result[key] = temp[key];
+    }
+    return result;
+  }, {});
+};
+
+// Meant to be used with elements. The `shouldForwardProps` will remove all style props
+const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
+  {
+    boxSizing: 'border-box',
+  },
+  border,
+  color,
+  depth,
+  flexItem,
+  layout,
+  position,
+  space
+);
+
+// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
+  {
+    boxSizing: 'border-box',
+  },
+  border,
+  color,
+  depth,
+  flexItem,
+  layout,
+  other,
+  position,
+  space
+);
+
+/**
+ * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
+ * It is highly flexible, and its primary purpose is to build other components.
+ *
+ * @example
+ * import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends BoxProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `BoxProps`
+ * const Card = (props: CardProps) => (
+ *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ * );
+ *
+ */
+export const Box = createComponent('div')({
+  displayName: 'Box',
+  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    const BoxComponent = useConstant(() =>
+      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
+    );
+
+    return (
+      <BoxComponent as={Element} ref={ref} {...elemProps}>
+        {children}
+      </BoxComponent>
+    );
+  },
+});

package/layout/lib/Flex.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+
+import {flex, FlexStyleProps} from './utils/flex';
+
+export type FlexProps = BoxProps & FlexStyleProps;
+
+const StyledFlex = styled(Box)<StyledType & FlexProps>(
+  {
+    display: 'flex',
+  },
+  flex
+);
+
+/**
+ * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
+ * It is highly flexible, and can be used on its own or to build other components.
+ * `Flex` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends FlexProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `FlexProps`
+ * const Card = (props: CardProps) => (
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses flexbox to set its layout.</p>
+ *   </Flex>
+ * );
+ *
+ */
+export const Flex = createComponent('div')({
+  displayName: 'Flex',
+  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
+    return (
+      <StyledFlex as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledFlex>
+    );
+  },
+});

package/layout/lib/Stack.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+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 => <StackItem>{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,
+  },
+});