@workday/canvas-kit-react 8.0.0-alpha.144-next.0 → 8.0.0-alpha.151-next.3

package/dist/es6/text/lib/Text.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+// type changes no need
+import { type } from '@workday/canvas-kit-react/tokens';
+import { Box } from '@workday/canvas-kit-react/layout';
+/**
+ * Function returns updated props by token and variant values
+ */
+var validateProps = function (_a) {
+    var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
+    var updatedProps = props;
+    var tokenPropNames = [
+        'color',
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'letterSpacing',
+        'lineHeight',
+    ];
+    /*
+    If token provided it updates undefined values of token styles:
+    `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color`
+    by replacing them by token value
+    */
+    if (typeLevel) {
+        var _b = typeLevel.split('.'), level = _b[0], size = _b[1];
+        var tokenProps_1 = type.levels[level][size];
+        tokenPropNames.forEach(function (item) {
+            if (!props[item]) {
+                updatedProps[item] = tokenProps_1[item];
+            }
+        });
+    }
+    // If variant provided it updates color value by variant color
+    if (variant) {
+        updatedProps = __assign(__assign({}, updatedProps), type.variants[variant]);
+    }
+    return updatedProps;
+};
+export var Text = createComponent('span')({
+    displayName: 'Text',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Box, __assign({ ref: ref, as: Element }, validateProps(elemProps)), children));
+    },
+});

package/dist/es6/text/lib/TypeLevelComponents.d.ts

@@ -0,0 +1,13 @@
+import { TextProps } from '@workday/canvas-kit-react/text';
+/**
+ * Props interface for type level specific component:
+ * Title, Heading, BodyText, Subtext.
+ */
+export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+    size: 'large' | 'medium' | 'small';
+}
+export declare const Subtext: import("../../common").ElementComponent<"p", TypeLevelProps>;
+export declare const BodyText: import("../../common").ElementComponent<"p", TypeLevelProps>;
+export declare const Heading: import("../../common").ElementComponent<"h2", TypeLevelProps>;
+export declare const Title: import("../../common").ElementComponent<"h1", TypeLevelProps>;
+//# sourceMappingURL=TypeLevelComponents.d.ts.map

package/dist/es6/text/lib/TypeLevelComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeLevelComponents.d.ts","sourceRoot":"","sources":["../../../../text/lib/TypeLevelComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,OAAO,8DAMlB,CAAC;AAEH,eAAO,MAAM,QAAQ,8DAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,+DAMlB,CAAC;AAEH,eAAO,MAAM,KAAK,+DAMhB,CAAC"}

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Text } from '@workday/canvas-kit-react/text';
+export var Subtext = createComponent('p')({
+    displayName: 'Subtext',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "subtext." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var BodyText = createComponent('p')({
+    displayName: 'BodyText',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "body." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var Heading = createComponent('h2')({
+    displayName: 'Heading',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "heading." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});
+export var Title = createComponent('h1')({
+    displayName: 'Title',
+    Component: function (_a, ref, Element) {
+        var size = _a.size, elemProps = __rest(_a, ["size"]);
+        var typeLevel = "title." + size;
+        return React.createElement(Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    },
+});

package/dist/es6/text-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC"}

package/form-field/index.ts

@@ -1,4 +1,3 @@
-
 export * from './lib/types';
 export * from './lib/FormField';
 export * from './lib/Hint';

package/form-field/lib/Hint.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {ErrorType, styled, Themeable} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {Subtext, Text} from '@workday/canvas-kit-react/text';
 
 export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -19,20 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
   alertLabel?: string;
 }
 
-const Label = styled('span')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    fontWeight: type.properties.fontWeights.medium,
-  },
-  ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
-);
-
-const Message = styled('p')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    margin: `${space.xxs} 0 0`,
-    width: '100%',
-  },
+const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
   ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
 );
 
@@ -41,7 +29,6 @@ class Hint extends React.Component<HintProps> {
 
   public render() {
     const {errorLabel = 'Error', alertLabel = 'Alert', children, error} = this.props;
-
     let hintLabel: string | undefined;
     switch (error) {
       case Hint.ErrorType.Error:
@@ -54,8 +41,10 @@ class Hint extends React.Component<HintProps> {
     }
 
     return (
-      <Message {...this.props}>
-        {typeof error !== 'undefined' && hintLabel && <Label error={error}>{hintLabel}: </Label>}
+      <Message size="medium" margin={`${space.xxs} 0 0`} width="100%" {...this.props}>
+        {typeof error !== 'undefined' && hintLabel && (
+          <Text fontWeight="medium">{hintLabel}: </Text>
+        )}
         {children}
       </Message>
     );

package/index.ts

@@ -27,6 +27,7 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/layout/index.ts

@@ -7,10 +7,14 @@ 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/font';
 export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export {SpaceStyleProps} from './lib/utils/space';
+export * from './lib/utils/text';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';

package/layout/lib/Box.tsx

@@ -8,23 +8,47 @@ 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 {font, FontStyleProps} from './utils/font';
 import {layout, LayoutStyleProps} from './utils/layout';
 import {other, OtherStyleProps} from './utils/other';
 import {position, PositionStyleProps} from './utils/position';
 import {space, SpaceStyleProps} from './utils/space';
+import {text, TextStyleProps} from './utils/text';
 
 export type BoxProps = BorderStyleProps &
   ColorStyleProps &
   DepthStyleProps &
   FlexItemStyleProps &
+  FontStyleProps &
   LayoutStyleProps &
   OtherStyleProps &
   PositionStyleProps &
-  SpaceStyleProps & {
+  SpaceStyleProps &
+  TextStyleProps & {
     children?: React.ReactNode;
   };
 
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+const omittedProps = [
+  'display',
+  'color',
+  'height',
+  'overflow',
+  'width',
+  'border',
+  'background',
+  'fontSize',
+  'fontWeight',
+  'fontFamily',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'textDecoration',
+  'textOverflow',
+  'textTransform',
+  'textShadow',
+  'whiteSpace',
+  'wordBreak',
+];
 
 const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
@@ -55,9 +79,11 @@ export const boxStyleFn = <P extends BoxProps>(props: P) => {
     color,
     depth,
     flexItem,
+    font,
     layout,
     position,
     space,
+    text,
   ].reduce((result, style) => {
     // @ts-ignore
     const temp = typeof style === 'function' ? style(props) : style;
@@ -79,9 +105,11 @@ const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProp
   color,
   depth,
   flexItem,
+  font,
   layout,
   position,
-  space
+  space,
+  text
 );
 
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
@@ -93,10 +121,12 @@ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
   color,
   depth,
   flexItem,
+  font,
   layout,
   other,
   position,
-  space
+  space,
+  text
 );
 
 /**

package/layout/lib/Grid.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from './Box';
+
+import {grid, GridStyleProps} from './utils/grid';
+import {gridItem, GridItemStyleProps} from './utils/gridItem';
+
+export type GridProps = BoxProps & GridStyleProps;
+export type GridItemProps = BoxProps & GridItemStyleProps;
+
+const StyledGrid = styled(Box)<StyledType & GridProps>(
+  {
+    display: 'grid',
+  },
+  grid
+);
+
+const StyledGridItem = styled(Box)<StyledType & GridItemProps>(gridItem);
+
+const GridItem = createComponent('div')({
+  displayName: 'Grid.Item',
+  Component: ({children, ...elemProps}: GridItemProps, ref, Element) => {
+    return (
+      <StyledGridItem as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledGridItem>
+    );
+  },
+});
+
+/**
+ * `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.
+ *
+ * @example
+ * ```
+ * 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
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export const Grid = createComponent('div')({
+  displayName: 'Grid',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledGrid as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledGrid>
+    );
+  },
+  subComponents: {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+
+    Item: GridItem,
+  },
+});

package/layout/lib/Stack.tsx

@@ -62,9 +62,9 @@ export interface HStackProps extends StackProps {
 
 export const HStack = createComponent('div')({
   displayName: 'HStack',
-  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );
@@ -84,9 +84,9 @@ export interface VStackProps extends StackProps {
 
 export const VStack = createComponent('div')({
   displayName: 'VStack',
-  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );

package/layout/lib/utils/color.ts

@@ -1,4 +1,9 @@
-import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
+// type changes no need
+import {
+  colors as colorTokens,
+  CanvasColor,
+  CanvasTypeVariants,
+} from '@workday/canvas-kit-react/tokens';
 
 export type ColorTokens = typeof colorTokens;
 
@@ -26,7 +31,7 @@ const getBackgroundImage = (value: string) => ({
   backgroundImage: value,
 });
 
-const getColor = (value: CanvasColor | string) => ({
+const getColor = (value: CanvasColor | keyof CanvasTypeVariants | string) => ({
   color: colorTokens[value] || value,
 });
 

package/layout/lib/utils/font.ts

@@ -0,0 +1,67 @@
+import {Property} from 'csstype';
+import {type, CanvasTypeProperties} from '@workday/canvas-kit-react/tokens';
+
+export type FontFamilyTokens = keyof CanvasTypeProperties['fontFamilies'];
+export type FontSizeTokens = keyof CanvasTypeProperties['fontSizes'];
+export type FontWeightTokens = keyof CanvasTypeProperties['fontWeights'];
+type FontValue = FontFamilyTokens & FontSizeTokens & FontWeightTokens;
+
+/** style props to for color properties */
+export type FontStyleProps = {
+  /** sets `font-family` property */
+  fontFamily?: Property.FontFamily | FontFamilyTokens;
+  /** sets `font-size` property */
+  fontSize?: Property.FontSize | FontSizeTokens;
+  /** sets `font-style` property */
+  fontStyle?: Property.FontStyle;
+  /** sets `font-weight` property */
+  fontWeight?: Property.FontWeight | FontWeightTokens;
+};
+
+const getFontFamily = (value: FontStyleProps['fontFamily']) => ({
+  fontFamily: type.properties.fontFamilies[value as FontFamilyTokens] || value,
+});
+
+const getFontSize = (value: FontStyleProps['fontSize']) => ({
+  fontSize: type.properties.fontSizes[value as FontSizeTokens] || value,
+});
+
+const getFontStyle = (value: FontStyleProps['fontStyle']) => ({
+  fontStyle: value,
+});
+
+const getFontWeight = (value: FontStyleProps['fontWeight']) => ({
+  fontWeight: type.properties.fontWeights[value as FontWeightTokens] || value,
+});
+
+const fontProps = {
+  fontFamily: getFontFamily,
+  fontSize: getFontSize,
+  fontWeight: getFontWeight,
+  fontStyle: getFontStyle,
+};
+
+/**
+ * A style prop function that takes components props and returns font styles from canvas token values.
+ * If no `FontStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `font` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box fontFamily="monospace" fontWeight="medium">Hello, fonts!</Box>
+ * );
+ *
+ */
+export function font<P extends FontStyleProps>(props: P) {
+  let styles = {};
+  for (const key in props) {
+    if (key in fontProps) {
+      const value = props[key as keyof FontStyleProps] as FontValue;
+      const fontFn = fontProps[key as keyof FontStyleProps];
+      const style = fontFn(value);
+      styles = {...styles, ...style};
+    }
+  }
+
+  return styles;
+}

package/layout/lib/utils/grid.ts

@@ -0,0 +1,93 @@
+import {Property} from 'csstype';
+
+/** style props to for grid container properties */
+export type GridStyleProps = {
+  /** sets `align-items` property */
+  alignItems?: Property.AlignItems;
+  /** sets `align-content` property */
+  alignContent?: Property.AlignContent;
+  /**
+   * sets `display` property
+   * @default 'grid'
+   * */
+  display?: 'grid' | 'inline-grid';
+  /** sets `justify-items` property */
+  justifyItems?: Property.JustifyItems;
+  /** sets `justify-content` property */
+  justifyContent?: Property.JustifyContent;
+
+  // Container Types
+  /** sets `grid-template` property */
+  gridTemplate?: Property.GridTemplate;
+  /** sets `grid-template-area` property */
+  gridTemplateAreas?: Property.GridTemplateAreas;
+  /** sets `grid-template-columns` property */
+  gridTemplateColumns?: Property.GridTemplateColumns;
+  /** sets `grid-template-rows` property */
+  gridTemplateRows?: Property.GridTemplateRows;
+  /** sets `gap` property */
+  gridGap?: Property.GridGap;
+  /** sets `column-gap` property */
+  gridColumnGap?: Property.GridColumnGap;
+  /** sets `row-gap` property */
+  gridRowGap?: Property.GridRowGap;
+  /** sets `place-items` property */
+  gridPlaceItems?: Property.PlaceItems;
+  /** sets `grid-auto-columns` property */
+  gridAutoColumns?: Property.GridAutoColumns;
+  /** sets `grid-auto-rows` property */
+  gridAutoRows?: Property.GridAutoRows;
+  /** sets `grid-area` property */
+  gridArea?: Property.GridArea;
+  /** sets `grid-auto-flow` property */
+  gridAutoFlow?: Property.GridAutoFlow;
+  /** sets `grid` property */
+  grid?: Property.Grid;
+};
+
+const gridProps = {
+  alignContent: 'alignContent',
+  alignItems: 'alignItems',
+  display: 'display',
+  justifyContent: 'justifyContent',
+  justifyItems: 'justifyItems',
+  gridTemplateAreas: 'gridTemplateAreas',
+  gridTemplate: 'gridTemplate',
+  gridTemplateColumns: 'gridTemplateColumns',
+  gridTemplateRows: 'gridTemplateRows',
+  gridGap: 'gridGap',
+  gridColumnGap: 'gridColumnGap',
+  gridRowGap: 'gridRowGap',
+  gridPlaceItems: 'gridPlaceItems',
+  gridAutoColumns: 'gridAutoColumns',
+  gridAutoRows: 'gridAutoRows',
+  gridAutoFlow: 'gridAutoFlow',
+  gridArea: 'gridArea',
+  grid: 'grid',
+};
+
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export function grid<P extends GridStyleProps>(props: P) {
+  const styles = {};
+  for (const key in props) {
+    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;
+    }
+  }
+  return styles;
+}