@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/layout/lib/utils/flex.ts

@@ -1,58 +1,109 @@
-import {Property} from 'csstype';
+import {Property, Globals} from 'csstype';
 
-/** style props to for flexbox container properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS flexbox container properties */
 export type FlexStyleProps = {
-  /** 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 'flex'
+   * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * - @default 'flex'
    * */
-  display?: 'flex' | 'inline-flex';
-  /** sets `justify-items` property */
+  display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {});
+  /** 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;
-  /** sets `flex-wrap` property */
+  /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) */
   flexWrap?: Property.FlexWrap;
-  /** sets `flex-direction` property */
+  /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) */
   flexDirection?: Property.FlexDirection;
+  /**
+   * - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+   * - system tokens: `space`
+   * */
+  gap?: SystemPropValues['space'];
+  /**
+   * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+   * - system tokens: `space`
+   * */
+  columnGap?: SystemPropValues['space'];
+  /**
+   * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+   * - system tokens: `space`
+   * */
+  rowGap?: SystemPropValues['space'];
 };
 
-const flexProps = {
-  alignContent: 'alignContent',
-  alignItems: 'alignItems',
-  display: 'display',
-  flexDirection: 'flexDirection',
-  flexWrap: 'flexWrap',
-  justifyContent: 'justifyContent',
-  justifyItems: 'justifyItems',
-};
+export const flexStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'alignContent',
+    properties: ['alignContent'],
+    system: 'none',
+  },
+  {
+    name: 'alignItems',
+    properties: ['alignItems'],
+    system: 'none',
+  },
+  {
+    name: 'display',
+    properties: ['display'],
+    system: 'none',
+  },
+  {
+    name: 'flexDirection',
+    properties: ['flexDirection'],
+    system: 'none',
+  },
+  {
+    name: 'flexWrap',
+    properties: ['flexWrap'],
+    system: 'none',
+  },
+  {
+    name: 'justifyContent',
+    properties: ['justifyContent'],
+    system: 'none',
+  },
+  {
+    name: 'justifyItems',
+    properties: ['justifyItems'],
+    system: 'none',
+  },
+  {
+    name: 'gap',
+    properties: ['gap'],
+    system: 'space',
+  },
+  {
+    name: 'columnGap',
+    properties: ['columnGap'],
+    system: 'space',
+  },
+  {
+    name: 'rowGap',
+    properties: ['rowGap'],
+    system: 'space',
+  },
+];
 
+export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox styles.
  * If no `FlexStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `flex` with low-level, styled components
+ * ```tsx
  * const FlexExample = () => (
  *   <Flex justifyContent="center" alignItems="center">
  *     Hello, flex!
  *   </Flex>
  * );
- *
+ * ```
  */
-export function flex<P extends FlexStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in flexProps) {
-      const attr = flexProps[key as keyof FlexStyleProps];
-      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 flex = buildStylePropFn<FlexStyleProps>(flexStyleFns);

package/layout/lib/utils/flexItem.ts

@@ -1,56 +1,74 @@
 import {Property} from 'csstype';
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for flexbox item properties */
+/** style props to for CSS flex item properties */
 export type FlexItemStyleProps = {
-  /** sets `flex` property */
-  flex?: number | string;
-  /** sets `flex-grow` property */
-  flexGrow?: number | string;
-  /** sets `flex-shrink` property */
-  flexShrink?: number | string;
-  /** sets `flex-basis` property */
-  flexBasis?: number | string;
-  /** sets `justify-self` property */
+  /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) */
+  flex?: Property.Flex;
+  /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) */
+  flexGrow?: Property.FlexGrow;
+  /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) */
+  flexShrink?: Property.FlexShrink;
+  /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) */
+  flexBasis?: Property.FlexBasis;
+  /** 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 `order` property */
+  /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) */
   order?: Property.Order;
 };
 
-/** style props to for flexbox item properties */
-const flexItemProps = {
-  flex: 'flex',
-  flexGrow: 'flexGrow',
-  flexShrink: 'flexShrink',
-  flexBasis: 'flexBasis',
-  justifySelf: 'justifySelf',
-  alignSelf: 'alignSelf',
-  order: 'order',
-};
+export const flexItemStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'flex',
+    properties: ['flex'],
+    system: 'none',
+  },
+  {
+    name: 'flexGrow',
+    properties: ['flexGrow'],
+    system: 'none',
+  },
+  {
+    name: 'flexShrink',
+    properties: ['flexShrink'],
+    system: 'none',
+  },
+  {
+    name: 'flexBasis',
+    properties: ['flexBasis'],
+    system: 'none',
+  },
+  {
+    name: 'justifySelf',
+    properties: ['justifySelf'],
+    system: 'none',
+  },
+  {
+    name: 'alignSelf',
+    properties: ['alignSelf'],
+    system: 'none',
+  },
+  {
+    name: 'order',
+    properties: ['order'],
+    system: 'none',
+  },
+];
 
+export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox item styles.
  * If no `FlexItemStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `flexItem` with low-level, styled components
+ * ```tsx
  * const FlexItemExample = () => (
  *   <Box flex={1} flexBasis="auto" alignSelf={center}>
  *     Hello, flex item!
  *   </Box>
  * );
- *
+ * ```
  */
-export function flexItem<P extends FlexItemStyleProps>(props: P) {
-  const styles = {};
-  for (const key in props) {
-    if (key in flexItemProps) {
-      const attr = flexItemProps[key as keyof FlexItemStyleProps];
-      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 flexItem = buildStylePropFn<FlexItemStyleProps>(flexItemStyleFns);

package/layout/lib/utils/grid.ts

@@ -0,0 +1,166 @@
+import {Property, Globals} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS grid container properties */
+export type GridStyleProps = {
+  /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
+  alignItems?: Property.AlignItems;
+  /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
+  alignContent?: Property.AlignContent;
+  /**
+   * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+   * - @default 'grid'
+   * */
+  display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {});
+  /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
+  justifyItems?: Property.JustifyItems;
+  /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+  justifyContent?: Property.JustifyContent;
+  /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) */
+  gridTemplate?: Property.GridTemplate;
+  /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) */
+  gridTemplateAreas?: Property.GridTemplateAreas;
+  /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) */
+  gridTemplateColumns?: Property.GridTemplateColumns;
+  /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) */
+  gridTemplateRows?: Property.GridTemplateRows;
+  /**
+   * - 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 [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) */
+  gridAutoColumns?: Property.GridAutoColumns;
+  /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) */
+  gridAutoRows?: Property.GridAutoRows;
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  gridArea?: Property.GridArea;
+  /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) */
+  gridAutoFlow?: Property.GridAutoFlow;
+  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) */
+  grid?: Property.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 props.
+ *
+ * @example
+ * ```tsx
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ * ```
+ */
+export const grid = buildStylePropFn<GridStyleProps>(gridStyleFns);

package/layout/lib/utils/gridItem.ts

@@ -0,0 +1,96 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+
+/** style props to for CSS grid item properties */
+export type GridItemStyleProps = {
+  /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) */
+  gridColumnStart?: Property.GridColumnStart;
+  /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) */
+  gridColumnEnd?: Property.GridColumnEnd;
+  /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) */
+  gridRowStart?: Property.GridRowStart;
+  /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) */
+  gridRowEnd?: Property.GridRowEnd;
+  /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) */
+  gridColumn?: Property.GridColumn;
+  /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) */
+  gridRow?: Property.GridRow;
+  /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) */
+  gridArea?: Property.GridArea;
+  /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) */
+  justifySelf?: Property.JustifySelf;
+  /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) */
+  alignSelf?: Property.AlignSelf;
+  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) */
+  placeSelf?: Property.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
+ * ```tsx
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ * ```
+ */
+export const gridItem = buildStylePropFn<GridItemStyleProps>(gridItemStyleFns);