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

package/layout/lib/utils/grid.ts

@@ -1,129 +1,166 @@
 import {Property} from 'csstype';
-import {space as spaceTokens, CanvasSpace, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
 
-export type GridSpacePropsValues = CanvasSpaceKeys | number | (string & {});
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
 
-/** style props to for grid container properties */
+/** style props to for CSS grid container properties */
 export type GridStyleProps = {
-  /** sets `align-items` property */
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
   alignItems?: Property.AlignItems;
-  /** sets `align-content` property */
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
   alignContent?: Property.AlignContent;
   /**
-   * sets `display` property
-   * @default 'grid'
+   * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * - @default 'grid'
    * */
   display?: 'grid' | 'inline-grid';
-  /** sets `justify-items` property */
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
   justifyItems?: Property.JustifyItems;
-  /** sets `justify-content` property */
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
   justifyContent?: Property.JustifyContent;
-
-  // Container Types
-  /** sets `grid-template` property */
+  /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
   gridTemplate?: Property.GridTemplate;
-  /** sets `grid-template-area` property */
+  /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
   gridTemplateAreas?: Property.GridTemplateAreas;
-  /** sets `grid-template-columns` property */
+  /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
   gridTemplateColumns?: Property.GridTemplateColumns;
-  /** sets `grid-template-rows` property */
+  /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
   gridTemplateRows?: Property.GridTemplateRows;
-  /** sets `column-gap` property */
-  gridColumnGap?: Property.GridColumnGap | GridSpacePropsValues;
-  /** sets `row-gap` property */
-  gridRowGap?: Property.GridRowGap | GridSpacePropsValues;
-  /** sets `gap` property */
-  gridGap?: Property.GridGap | GridSpacePropsValues;
-  /** sets `place-items` property */
+  /**
+   * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+   * - system tokens: `space`
+   * */
+  gridColumnGap?: Property.GridColumnGap | SystemPropValues['space'];
+  /**
+   * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+   * - system tokens: `space`
+   * */
+  gridRowGap?: Property.GridRowGap | SystemPropValues['space'];
+  /**
+   * - sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
+   * - system tokens: `space`
+   * */
+  gridGap?: Property.GridGap | SystemPropValues['space'];
+  /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) */
   gridPlaceItems?: Property.PlaceItems;
-  /** sets `grid-auto-columns` property */
+  /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
   gridAutoColumns?: Property.GridAutoColumns;
-  /** sets `grid-auto-rows` property */
+  /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
   gridAutoRows?: Property.GridAutoRows;
-  /** sets `grid-area` property */
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
   gridArea?: Property.GridArea;
-  /** sets `grid-auto-flow` property */
+  /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
   gridAutoFlow?: Property.GridAutoFlow;
-  /** sets `grid` property */
+  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
   grid?: Property.Grid;
 };
 
-export type gridSpaceProps = {
-  /** sets `gap` property */
-  gridGap?: Property.GridGap | GridSpacePropsValues;
-};
-
-const gridGap = (value: GridSpacePropsValues) => {
-  return {gridGap: spaceTokens[value as keyof CanvasSpace] || value};
-};
-const gridRowGap = (value: GridSpacePropsValues) => {
-  return {gridRowGap: spaceTokens[value as keyof CanvasSpace] || value};
-};
-const gridColumnGap = (value: GridSpacePropsValues) => {
-  return {gridColumnGap: spaceTokens[value as keyof CanvasSpace] || value};
-};
-
-const gridSpaceStyleProps = {
-  gridGap,
-  gridRowGap,
-  gridColumnGap,
-};
-
-export type SpaceStyleProps = gridSpaceProps & GridStyleProps;
-
-const gridProps = {
-  alignContent: 'alignContent',
-  alignItems: 'alignItems',
-  display: 'display',
-  justifyContent: 'justifyContent',
-  justifyItems: 'justifyItems',
-  gridTemplateAreas: 'gridTemplateAreas',
-  gridTemplate: 'gridTemplate',
-  gridTemplateColumns: 'gridTemplateColumns',
-  gridTemplateRows: 'gridTemplateRows',
-  gridColumnGap: 'gridColumnGap',
-  gridRowGap: 'gridRowGap',
-  gridGap: 'gridGap',
-  gridPlaceItems: 'gridPlaceItems',
-  gridAutoColumns: 'gridAutoColumns',
-  gridAutoRows: 'gridAutoRows',
-  gridAutoFlow: 'gridAutoFlow',
-  gridArea: 'gridArea',
-  grid: 'grid',
-};
+export const gridStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'gridGap',
+    properties: ['gridGap'],
+    system: 'space',
+  },
+  {
+    name: 'gridRowGap',
+    properties: ['gridRowGap'],
+    system: 'space',
+  },
+  {
+    name: 'gridColumnGap',
+    properties: ['gridColumnGap'],
+    system: 'space',
+  },
+  {
+    name: 'alignContent',
+    properties: ['alignContent'],
+    system: 'none',
+  },
+  {
+    name: 'alignItems',
+    properties: ['alignItems'],
+    system: 'none',
+  },
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'justifyContent',
+    properties: ['justifyContent'],
+    system: 'none',
+  },
+  {
+    name: 'justifyItems',
+    properties: ['justifyItems'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateAreas',
+    properties: ['gridTemplateAreas'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplate',
+    properties: ['gridTemplate'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateColumns',
+    properties: ['gridTemplateColumns'],
+    system: 'none',
+  },
+  {
+    name: 'gridTemplateRows',
+    properties: ['gridTemplateRows'],
+    system: 'none',
+  },
+  {
+    name: 'gridPlaceItems',
+    properties: ['gridPlaceItems'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoColumns',
+    properties: ['gridAutoColumns'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoRows',
+    properties: ['gridAutoRows'],
+    system: 'none',
+  },
+  {
+    name: 'gridAutoFlow',
+    properties: ['gridAutoFlow'],
+    system: 'none',
+  },
+  {
+    name: 'gridArea',
+    properties: ['gridArea'],
+    system: 'none',
+  },
+  {
+    name: 'grid',
+    properties: ['grid'],
+    system: 'none',
+  },
+];
 
+export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
  * If no `GridStyleProps` are found, it returns an empty object.
- * Space tokens are available for `gridGap`, `gridRowGap`, `gridColumnGap` (`zero`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`).
- * Values: `zero: 0px`, `xxxs: 4px`, `xxs: 8px`, `xs: 12px`, `s: 16px`, `m: 24px`, `l: 32px`, `xl: 40px`, `xxl: 64px`, `xxxl: 80px`.
+ * Space tokens are available for gridGap, gridRowGap, gridColumnGap props.
  *
  * @example
- * // You'll most likely use `grid` with low-level, styled components
+ * ```tsx
  * const GridExample = () => (
  *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
  *     Hello, Grid!
  *   </Grid>
  * );
- *
+ * ```
  */
-export function grid<P extends SpaceStyleProps>(props: P) {
-  let styles = {};
-  for (const key in props) {
-    if (props.hasOwnProperty(key)) {
-      if (key in gridProps) {
-        const attr = gridProps[key as keyof GridStyleProps];
-        const value = props[key];
-        // @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;
-      }
-      if (key in gridSpaceStyleProps) {
-        const value = props[key as keyof gridSpaceProps] as GridSpacePropsValues;
-        const spaceFn = gridSpaceStyleProps[key as keyof gridSpaceProps];
-        const style = spaceFn(value);
-        styles = {...styles, ...style};
-      }
-    }
-  }
-  return styles;
-}
+export const grid = buildStylePropFn<GridStyleProps>(gridStyleFns);

package/layout/lib/utils/gridItem.ts

@@ -1,68 +1,96 @@
 import {Property} from 'csstype';
 
-/** style props to for grid item properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for CSS grid item properties */
 export type GridItemStyleProps = {
-  // Child Types
-  /** sets `grid-column-start` property */
+  /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */
   gridColumnStart?: Property.GridColumnStart;
-  /** sets `grid-column-end` property */
+  /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */
   gridColumnEnd?: Property.GridColumnEnd;
-  /** sets `grid-row-start` property */
+  /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */
   gridRowStart?: Property.GridRowStart;
-  /** sets `grid-row-end` property */
+  /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */
   gridRowEnd?: Property.GridRowEnd;
-  /** sets `grid-column` property */
+  /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */
   gridColumn?: Property.GridColumn;
-  /** sets `grid-row` property */
+  /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */
   gridRow?: Property.GridRow;
-  /** sets `grid-area` property */
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
   gridArea?: Property.GridArea;
-  /** sets `justify-self` property */
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
   justifySelf?: Property.JustifySelf;
-  /** sets `align-self` property */
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
   alignSelf?: Property.AlignSelf;
-  /** sets `place-self` property */
+  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) */
   placeSelf?: Property.PlaceSelf;
 };
 
-/** style props to for grid item properties */
-const gridItemProps = {
-  //Child Props
-  gridColumnStart: 'gridColumnStart',
-  gridColumnEnd: 'gridColumnEnd',
-  gridRowStart: 'gridRowStart',
-  gridRowEnd: 'gridRowEnd',
-  gridColumn: 'gridColumn',
-  gridRow: 'gridRow',
-  gridArea: 'gridArea',
-  justifySelf: 'justifySelf',
-  alignSelf: 'alignSelf',
-  placeSelf: 'placeSelf',
-};
+export const gridItemStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'gridColumnStart',
+    properties: ['gridColumnStart'],
+    system: 'none',
+  },
+  {
+    name: 'gridColumnEnd',
+    properties: ['gridColumnEnd'],
+    system: 'none',
+  },
+  {
+    name: 'gridRowStart',
+    properties: ['gridRowStart'],
+    system: 'none',
+  },
+  {
+    name: 'gridRowEnd',
+    properties: ['gridRowEnd'],
+    system: 'none',
+  },
+  {
+    name: 'gridColumn',
+    properties: ['gridColumn'],
+    system: 'none',
+  },
+  {
+    name: 'gridRow',
+    properties: ['gridRow'],
+    system: 'none',
+  },
+  {
+    name: 'gridArea',
+    properties: ['gridArea'],
+    system: 'none',
+  },
+  {
+    name: 'justifySelf',
+    properties: ['justifySelf'],
+    system: 'none',
+  },
+  {
+    name: 'alignSelf',
+    properties: ['alignSelf'],
+    system: 'none',
+  },
+  {
+    name: 'placeSelf',
+    properties: ['placeSelf'],
+    system: 'none',
+  },
+];
 
+export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
  * If no `GridItemStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `grid item` with low-level, styled components
+ * ```tsx
  * const GridItemExample = () => (
  *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
  *     Hello, Grid Item!
  *   </Grid.Item>
  * );
- *
+ * ```
  */
-
-export function gridItem<P extends GridItemStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in gridItemProps) {
-      const attr = gridItemProps[key as keyof GridItemStyleProps];
-      const value = props[key];
-      // @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;
-}
+export const gridItem = buildStylePropFn<GridItemStyleProps>(gridItemStyleFns);

package/layout/lib/utils/layout.ts

@@ -1,70 +1,129 @@
 import {Property} from 'csstype';
 
-/** style props to for layout properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS layout properties */
 export type LayoutStyleProps = {
-  /** sets `display` property */
+  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/displaydisplay) */
   display?: Property.Display;
-  /** sets `height` property */
-  height?: number | string;
-  /** sets `list-style property */
+  /**
+   * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
+   * - system tokens: `space`
+   * */
+  height?: SystemPropValues['space'];
+  /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) */
   listStyle?: Property.ListStyle;
-  /** sets `max-height` property */
-  maxHeight?: number | string;
-  /** sets `max-width` property */
-  maxWidth?: number | string;
-  /** sets `min-height` property */
-  minHeight?: number | string;
-  /** sets `min-width` property */
-  minWidth?: number | string;
-  /** sets `overflow` property */
+  /**
+   * - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
+   * - system tokens: `space`
+   * */
+  maxHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
+   * - system tokens: `space`
+   * */
+  maxWidth?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
+   * - system tokens: `space`
+   * */
+  minHeight?: SystemPropValues['space'];
+  /**
+   * - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
+   * - system tokens: `space`
+   * */
+  minWidth?: SystemPropValues['space'];
+  /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) */
   overflow?: Property.Overflow;
-  /** sets `overflow-x` property */
+  /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) */
   overflowX?: Property.OverflowX;
-  /** sets `overflow-y` property */
+  /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) */
   overflowY?: Property.OverflowY;
-  /** sets `vertical-align` property */
+  /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) */
   verticalAlign?: Property.VerticalAlign;
-  /** sets `width` property */
-  width?: number | string;
+  /**
+   * - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
+   * - system tokens: `space`
+   * */
+  width?: SystemPropValues['space'];
 };
 
-const layoutProps = {
-  display: 'display',
-  height: 'height',
-  listStyle: 'listStyle',
-  maxHeight: 'maxHeight',
-  maxWidth: 'maxWidth',
-  minHeight: 'minHeight',
-  minWidth: 'minWidth',
-  overflow: 'overflow',
-  overflowX: 'overflowX',
-  overflowY: 'overflowY',
-  verticalAlign: 'verticalAlign',
-  width: 'width',
-};
+export const layoutStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'height',
+    properties: ['height'],
+    system: 'space',
+  },
+  {
+    name: 'listStyle',
+    properties: ['listStyle'],
+    system: 'none',
+  },
+  {
+    name: 'maxHeight',
+    properties: ['maxHeight'],
+    system: 'space',
+  },
+  {
+    name: 'maxWidth',
+    properties: ['maxWidth'],
+    system: 'space',
+  },
+  {
+    name: 'minHeight',
+    properties: ['minHeight'],
+    system: 'space',
+  },
+  {
+    name: 'minWidth',
+    properties: ['minWidth'],
+    system: 'space',
+  },
+  {
+    name: 'overflow',
+    properties: ['overflow'],
+    system: 'none',
+  },
+  {
+    name: 'overflowX',
+    properties: ['overflowX'],
+    system: 'none',
+  },
+  {
+    name: 'overflowY',
+    properties: ['overflowY'],
+    system: 'none',
+  },
+  {
+    name: 'verticalAlign',
+    properties: ['verticalAlign'],
+    system: 'none',
+  },
+  {
+    name: 'width',
+    properties: ['width'],
+    system: 'space',
+  },
+];
 
+export const layoutStyleFns = buildStyleFns(layoutStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns layout styles.
+ * A style prop function that takes component props and returns layout styles.
  * If no `LayoutStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `layout` with low-level, styled components
- * const BoxExample = () => (
+ * ```tsx
+ * const LayoutExample = () => (
  *   <Box display="inline-block" height="50%">
- *     Hello, positions!
+ *     Hello, layout!
  *   </Box>
  * );
- *
+ * ```
  */
-export function layout<P extends LayoutStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in layoutProps) {
-      const attr = layoutProps[key as keyof LayoutStyleProps];
-      const value = props[key];
-      // @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;
-}
+export const layout = buildStylePropFn<LayoutStyleProps>(layoutStyleFns);