@workday/canvas-kit-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.79-next.7

package/icon/lib/AppletIcon.tsx

@@ -3,6 +3,7 @@ import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/toke
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
+import {createComponent} from '../../common';
 
 export interface AppletIconStyles {
   /**
@@ -54,9 +55,7 @@ export const appletIconStyles = ({
   };
 };
 
-export interface AppletIconProps
-  extends AppletIconStyles,
-    Pick<IconProps, 'iconRef' | 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
   /**
    * The icon to display from `@workday/canvas-applet-icons-web`.
    */
@@ -68,22 +67,29 @@ export interface AppletIconProps
   size?: number;
 }
 
-export default class AppletIcon extends React.Component<AppletIconProps> {
-  public static Colors = BrandingColor;
-
-  public render() {
-    const {size = 92, icon, color, iconRef, shouldMirror, ...elemProps} = this.props;
-
+export const AppletIcon = createComponent('span')({
+  displayName: 'AppletIcon',
+  Component: (
+    {size = 92, icon, color, shouldMirror, ...elemProps}: AppletIconProps,
+    ref,
+    Element
+  ) => {
     return (
       <Icon
         src={icon}
         type={CanvasIconTypes.Applet}
         styles={appletIconStyles({color})}
+        as={Element}
         size={size}
-        iconRef={iconRef}
+        ref={ref}
         shouldMirror={shouldMirror}
         {...elemProps}
       />
     );
-  }
-}
+  },
+  subComponents: {
+    Colors: BrandingColor,
+  },
+});
+
+export default AppletIcon;

package/icon/lib/Graphic.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import Svg, {SvgProps} from './Svg';
+import {createComponent} from '../../common';
 
 export interface GraphicStyles {
   /**
@@ -21,7 +22,7 @@ export interface GraphicStyles {
   grow?: boolean;
 }
 
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
   /**
    * The graphic to display from `@workday/canvas-graphics-web`.
    */
@@ -58,19 +59,25 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
-export default class Graphic extends React.Component<GraphicProps> {
-  render() {
-    const {grow = false, src, width, height, iconRef, shouldMirror, ...elemProps} = this.props;
-
+const Graphic = createComponent('span')({
+  displayName: 'Graphic',
+  Component: (
+    {grow = false, src, width, height, shouldMirror, ...elemProps}: GraphicProps,
+    ref,
+    Element
+  ) => {
     return (
       <Svg
         src={src}
         styles={graphicStyles({width, height, grow})}
         type={CanvasIconTypes.Graphic}
-        iconRef={iconRef}
+        as={Element}
+        ref={ref}
         shouldMirror={shouldMirror}
         {...elemProps}
       />
     );
-  }
-}
+  },
+});
+
+export default Graphic;

package/icon/lib/Icon.tsx

@@ -2,18 +2,17 @@ import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import Svg, {SvgProps} from './Svg';
+import {createComponent} from '../../common';
 
 export interface IconProps extends SvgProps {
   src: CanvasIcon;
   size?: number;
   type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-  iconRef?: React.Ref<HTMLSpanElement>;
 }
 
-export default class Icon extends React.Component<IconProps> {
-  public render() {
-    const {src, size, styles, type, iconRef, shouldMirror, ...elemProps} = this.props;
-
+export const Icon = createComponent('span')({
+  displayName: 'Icon',
+  Component: ({src, size, styles, type, shouldMirror, ...elemProps}: IconProps, ref, Element) => {
     const iconStyles: CSSObject = {...styles};
 
     if (size) {
@@ -28,10 +27,13 @@ export default class Icon extends React.Component<IconProps> {
         src={src}
         type={type}
         shouldMirror={shouldMirror}
+        as={Element}
         {...elemProps}
+        ref={ref}
         styles={iconStyles}
-        iconRef={iconRef}
       />
     );
-  }
-}
+  },
+});
+
+export default Icon;

package/icon/lib/Svg.tsx

@@ -2,13 +2,13 @@ import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
-import {styled} from '@workday/canvas-kit-react/common';
+import {createComponent, styled} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface SvgProps extends BoxProps {
   src: CanvasIcon;
   styles?: CSSObject;
   type: CanvasIconTypes;
-  iconRef?: React.Ref<HTMLSpanElement>;
   /**
    * If set to `true`, transform the SVG's x-axis to mirror the graphic
    * @default false
@@ -16,7 +16,7 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   shouldMirror?: boolean;
 }
 
-const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
+const StyledIconSpan = styled(Box.as('span'))<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
   {
     display: 'inline-block',
     '> svg': {display: 'block'},
@@ -27,11 +27,9 @@ const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>
   })
 );
 
-export default class Svg extends React.Component<SvgProps> {
-  public render() {
-    const {src, type, iconRef, ...elemProps} = this.props;
-
-    // Validation for JS
+export const Svg = createComponent('span')({
+  displayName: 'Svg',
+  Component: ({src, type, ...elemProps}: SvgProps, ref, Element) => {
     try {
       validateIconType(src, type);
     } catch (e) {
@@ -39,8 +37,8 @@ export default class Svg extends React.Component<SvgProps> {
       return null;
     }
 
-    return (
-      <StyledIconSpan {...elemProps} dangerouslySetInnerHTML={{__html: src.svg}} ref={iconRef} />
-    );
-  }
-}
+    return <StyledIconSpan dangerouslySetInnerHTML={{__html: src.svg}} {...elemProps} ref={ref} />;
+  },
+});
+
+export default Svg;

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/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={1} 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={1} 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>
+    );
+  },
+});