@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.216-next.4

package/layout/lib/Grid.tsx

@@ -4,10 +4,9 @@ import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from './Box';
 
 import {grid, GridStyleProps} from './utils/grid';
-import {GridItemStyleProps} from './utils/gridItem';
 
 export type GridProps = BoxProps & GridStyleProps;
-export type GridItemProps = BoxProps & GridItemStyleProps;
+export type GridItemProps = BoxProps;
 
 const StyledGrid = styled(Box)<StyledType & GridProps>(
   {
@@ -30,11 +29,11 @@ const GridItem = createComponent('div')({
 /**
  * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
  * It is highly flexible, and can be used on its own or to build other components.
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
- * ```
+ * ```tsx
  * import { Grid } from '@workday/canvas-kit-react/layout';
- * `Grid` is built on top of `Box` and has access to all `BoxProps`.
  *
  * interface CardProps extends GridProps {
  *   // card-specific props

package/layout/lib/utils/background.ts

@@ -0,0 +1,83 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to set CSS background properties */
+export type BackgroundStyleProps = {
+  /**
+   * - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+   * - system tokens: `color`
+   * */
+  background?: SystemPropValues['color'];
+  /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) */
+  backgroundAttachment?: Property.BackgroundAttachment;
+  /**
+   * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+   * - system tokens: `color`
+   * */
+  backgroundColor?: SystemPropValues['color'];
+  /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) */
+  backgroundImage?: Property.BackgroundImage;
+  /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) */
+  backgroundPosition?: Property.BackgroundPosition;
+  /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) */
+  backgroundRepeat?: Property.BackgroundRepeat;
+  /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) */
+  backgroundSize?: Property.BackgroundSize;
+};
+
+export const backgroundStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'background',
+    properties: ['background'],
+    system: 'color',
+  },
+  {
+    name: 'backgroundAttachment',
+    properties: ['backgroundAttachment'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundColor',
+    properties: ['backgroundColor'],
+    system: 'color',
+  },
+  {
+    name: 'backgroundImage',
+    properties: ['backgroundImage'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundPosition',
+    properties: ['backgroundPosition'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundRepeat',
+    properties: ['backgroundRepeat'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundSize',
+    properties: ['backgroundSize'],
+    system: 'none',
+  },
+];
+
+export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns border styles.
+ * Some props, such as background and backgroundColor, are connected to our design tokens.
+ * If no `BackgroundStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BackgroundExample = () => (
+ *   <Box backgroundColor="blueberry500">
+ *     Hello, background styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const background = buildStylePropFn<BackgroundStyleProps>(backgroundFns);

package/layout/lib/utils/border/color.ts

@@ -0,0 +1,85 @@
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {SystemPropValues} from '../systemProps';
+
+/** style props to set CSS border color properties */
+export type BorderColorStyleProps = {
+  /**
+   * - sets [CSS border-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
+   * - system tokens: `color`
+   */
+  borderColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-top-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+   * - system tokens: `color`
+   */
+  borderTopColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-right-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+   * - no bidirectional support
+   * - system tokens: `color`
+   */
+  borderRightColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-bottom-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+   * - system tokens: `color`
+   */
+  borderBottomColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-left-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+   * - no bidirectional support
+   * - system tokens: `color`
+   */
+  borderLeftColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-inline-start-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
+   * - bidirectional support
+   * - system tokens: `color`
+   */
+  borderInlineStartColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-inline-end-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
+   * - bidirectional support
+   * - system tokens: `color`
+   */
+  borderInlineEndColor?: SystemPropValues['color'];
+};
+
+export const borderColorStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderColor',
+    properties: ['borderColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderTopColor',
+    properties: ['borderTopColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderRightColor',
+    properties: ['borderRightColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderBottomColor',
+    properties: ['borderBottomColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderLeftColor',
+    properties: ['borderLeftColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderInlineStartColor',
+    properties: ['borderInlineStartColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderInlineEndColor',
+    properties: ['borderInlineEndColor'],
+    system: 'color',
+  },
+];
+
+export const borderColorFns = buildStyleFns(borderColorStyleFnConfigs);

package/layout/lib/utils/border/index.ts

@@ -0,0 +1,49 @@
+import {buildStylePropFn} from '../buildStyleFns';
+import {BorderColorStyleProps, borderColorFns, borderColorStyleFnConfigs} from './color';
+import {BorderLineStyleProps, borderLineStyleFns, borderLineStyleFnConfigs} from './lineStyle';
+import {BorderRadiusStyleProps, borderRadiusFns, borderRadiusStyleFnConfigs} from './radius';
+import {
+  BorderShorthandStyleProps,
+  borderShorthandFns,
+  borderShorthandStyleFnConfigs,
+} from './shorthand';
+import {BorderWidthStyleProps, borderWidthFns, borderWidthStyleFnConfigs} from './width';
+
+export type BorderStyleProps = BorderColorStyleProps &
+  BorderLineStyleProps &
+  BorderRadiusStyleProps &
+  BorderShorthandStyleProps &
+  BorderWidthStyleProps;
+
+/**
+ * A style prop function that takes component 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
+ * ```tsx
+ * const BorderExample = () => (
+ *   <Box
+ *    border="solid 1px"
+ *    borderColor="soap500"
+ *    borderRadius="l"
+ *   >
+ *     Hello, border styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const border = buildStylePropFn<BorderStyleProps>({
+  ...borderColorFns,
+  ...borderLineStyleFns,
+  ...borderRadiusFns,
+  ...borderShorthandFns,
+  ...borderWidthFns,
+});
+
+export const borderStyleFnConfigs = [
+  ...borderColorStyleFnConfigs,
+  ...borderLineStyleFnConfigs,
+  ...borderRadiusStyleFnConfigs,
+  ...borderShorthandStyleFnConfigs,
+  ...borderWidthStyleFnConfigs,
+];

package/layout/lib/utils/border/lineStyle.ts

@@ -0,0 +1,87 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border style properties */
+export type BorderLineStyleProps = {
+  /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) */
+  borderCollapse?: Property.BorderCollapse;
+  /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) */
+  borderSpacing?: Property.BorderSpacing;
+  /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) */
+  borderStyle?: Property.Border;
+  /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) */
+  borderTopStyle?: Property.Border;
+  /**
+   * - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+   * - no bidirectional support
+   */
+  borderRightStyle?: Property.Border;
+  /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) */
+  borderBottomStyle?: Property.Border;
+  /**
+   * - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+   * - no bidirectional support
+   */
+  borderLeftStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style)
+   * - bidirectional support
+   */
+  borderInlineStartStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style)
+   * - bidirectional support
+   */
+  borderInlineEndStyle?: Property.Border;
+};
+
+export const borderLineStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderCollapse',
+    properties: ['borderCollapse'],
+    system: 'none',
+  },
+  {
+    name: 'borderSpacing',
+    properties: ['borderSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'borderStyle',
+    properties: ['borderStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderTopStyle',
+    properties: ['borderTopStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderRightStyle',
+    properties: ['borderRightStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottomStyle',
+    properties: ['borderBottomStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeftStyle',
+    properties: ['borderLeftStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStartStyle',
+    properties: ['borderInlineStartStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEndStyle',
+    properties: ['borderInlineEndStyle'],
+    system: 'none',
+  },
+];
+
+export const borderLineStyleFns = buildStyleFns(borderLineStyleFnConfigs);

package/layout/lib/utils/border/radius.ts

@@ -0,0 +1,61 @@
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {SystemPropValues} from '../systemProps';
+
+/** style props to set CSS border radius properties */
+export type BorderRadiusStyleProps = {
+  /**
+   * - sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
+   * - system tokens: `shape`
+   * */
+  borderRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-top-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
+   * - system tokens: `shape`
+   * */
+  borderTopLeftRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-top-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
+   * - system tokens: `shape`
+   * */
+  borderTopRightRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-bottom-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
+   * - system tokens: `shape`
+   * */
+  borderBottomLeftRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-bottom-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
+   * - system tokens: `shape`
+   * */
+  borderBottomRightRadius?: SystemPropValues['shape'];
+};
+
+export const borderRadiusStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderRadius',
+    properties: ['borderRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderTopLeftRadius',
+    properties: ['borderTopLeftRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderTopRightRadius',
+    properties: ['borderTopRightRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderBottomLeftRadius',
+    properties: ['borderBottomLeftRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderBottomRightRadius',
+    properties: ['borderBottomRightRadius'],
+    system: 'shape',
+  },
+];
+
+export const borderRadiusFns = buildStyleFns(borderRadiusStyleFnConfigs);

package/layout/lib/utils/border/shorthand.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border properties */
+export type BorderShorthandStyleProps = {
+  /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) */
+  border?: Property.Border;
+  /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) */
+  borderTop?: Property.BorderTop;
+  /**
+   * - sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
+   * - no bidirectional support
+   * */
+  borderRight?: Property.BorderRight;
+  /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) */
+  borderBottom?: Property.BorderBottom;
+  /**
+   * - sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
+   * - no bidirectional support
+   * */
+  borderLeft?: Property.BorderLeft;
+  /**
+   * - sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start)
+   * - bidirectional support
+   * */
+  borderInlineStart?: Property.BorderInlineStart;
+  /**
+   * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+   * - bidirectional support
+   * */
+  borderInlineEnd?: Property.BorderInlineEnd;
+};
+
+export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'border',
+    properties: ['border'],
+    system: 'none',
+  },
+  {
+    name: 'borderTop',
+    properties: ['borderTop'],
+    system: 'none',
+  },
+  {
+    name: 'borderRight',
+    properties: ['borderRight'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottom',
+    properties: ['borderBottom'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeft',
+    properties: ['borderLeft'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStart',
+    properties: ['borderInlineStart'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEnd',
+    properties: ['borderInlineEnd'],
+    system: 'none',
+  },
+];
+
+export const borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

package/layout/lib/utils/border/width.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border width properties */
+export type BorderWidthStyleProps = {
+  /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) */
+  borderWidth?: Property.BorderWidth | number;
+  /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) */
+  borderTopWidth?: Property.BorderTopWidth | number;
+  /**
+   * - sets [CSS border-right-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
+   * - no bidirectional support
+   * */
+  borderRightWidth?: Property.BorderRightWidth | number;
+  /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) */
+  borderBottomWidth?: Property.BorderBottomWidth | number;
+  /**
+   * - sets [CSS border-left-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
+   * - no bidirectional support
+   * */
+  borderLeftWidth?: Property.BorderLeftWidth | number;
+  /**
+   * - sets [CSS border-inline-start-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width)
+   * - bidirectional support
+   * */
+  borderInlineStartWidth?: Property.BorderInlineStartWidth | number;
+  /**
+   * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+   * - bidirectional support
+   * */
+  borderInlineEndWidth?: Property.BorderInlineEndWidth | number;
+};
+
+export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderWidth',
+    properties: ['borderWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderTopWidth',
+    properties: ['borderTopWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderRightWidth',
+    properties: ['borderRightWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottomWidth',
+    properties: ['borderBottomWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeftWidth',
+    properties: ['borderLeftWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStartWidth',
+    properties: ['borderInlineStartWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEndWidth',
+    properties: ['borderInlineEndWidth'],
+    system: 'none',
+  },
+];
+
+export const borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);

package/layout/lib/utils/buildStyleFns.ts

@@ -0,0 +1,117 @@
+import {
+  borderRadius as borderRadiusTokens,
+  colors as colorTokens,
+  depth as depthTokens,
+  space as spaceTokens,
+  type as typeTokens,
+} from '@workday/canvas-kit-react/tokens';
+
+import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
+
+export type StyleFnConfig = {
+  name: string;
+  properties: string[];
+  system: SystemPropNames | 'none';
+};
+
+export type StyleFns = {
+  [key: string]: (value: unknown) => {};
+};
+
+const getColor = (value: SystemPropValues['color']) => {
+  return colorTokens[value] || value;
+};
+
+const getDepth = (value: SystemPropValues['depth']) => {
+  return depthTokens[value];
+};
+
+const getShape = (value: SystemPropValues['shape']) => {
+  return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || value;
+};
+
+const getSpace = (value: SystemPropValues['space']) => {
+  return spaceTokens[value as CanvasSystemPropValues['space']] || value;
+};
+
+const getFont = (value: SystemPropValues['font']) => {
+  return typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] || value;
+};
+
+const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
+  return typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] || value;
+};
+
+const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
+  return typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] || value;
+};
+
+export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
+  return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
+    const styleFn = (value: unknown) => {
+      return styleFnConfig.properties.reduce((styles = {}, property: string) => {
+        if (styleFnConfig.system === 'color') {
+          return {...styles, [property]: getColor(value as SystemPropValues['color'])};
+        }
+
+        if (styleFnConfig.system === 'depth') {
+          // Depth tokens return the style property (box-shadow) and the value
+          const depthStyle = getDepth(value as SystemPropValues['depth']);
+          return {...styles, ...depthStyle};
+        }
+
+        if (styleFnConfig.system === 'font') {
+          return {
+            ...styles,
+            [property]: getFont(value as SystemPropValues['font']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontSize') {
+          return {
+            ...styles,
+            [property]: getFontSize(value as SystemPropValues['fontSize']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontWeight') {
+          return {
+            ...styles,
+            [property]: getFontWeight(value as SystemPropValues['fontWeight']),
+          };
+        }
+
+        if (styleFnConfig.system === 'shape') {
+          return {
+            ...styles,
+            [property]: getShape(value as SystemPropValues['shape']),
+          };
+        }
+
+        if (styleFnConfig.system === 'space') {
+          return {...styles, [property]: getSpace(value as SystemPropValues['space'])};
+        }
+
+        return {...styles, [property]: value};
+      }, {});
+    };
+
+    return {...styleFns, [styleFnConfig.name]: styleFn};
+  }, {});
+}
+
+export function buildStylePropFn<P extends {}>(styleFns: StyleFns) {
+  return (props: P) => {
+    let styles = {};
+    for (const key in props) {
+      if (key in props && key in styleFns) {
+        const styleFn = styleFns[key];
+        const value = props[key];
+        const style = styleFn(value);
+        styles = {...styles, ...style};
+        continue;
+      }
+    }
+    return styles;
+  };
+}