@workday/canvas-kit-preview-react 7.1.5 → 7.2.0-427-next.2

package/status-indicator/lib/StatusIndicatorIcon.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {useStatusIndicatorModel} from './hooks';
+
+export interface StatusIndicatorIconProps extends SystemIconProps {}
+
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export const statusIndicatorColors = {
+  gray: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.licorice300,
+    },
+    low: {
+      text: colors.licorice400,
+      background: colors.soap300,
+    },
+  },
+  orange: {
+    high: {
+      text: colors.licorice500,
+      background: colors.cantaloupe400,
+    },
+    low: {
+      text: colors.toastedMarshmallow600,
+      background: colors.cantaloupe100,
+    },
+  },
+  blue: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.blueberry400,
+    },
+    low: {
+      text: colors.blueberry500,
+      background: colors.blueberry100,
+    },
+  },
+  green: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.greenApple600,
+    },
+    low: {
+      text: colors.greenApple600,
+      background: colors.greenApple100,
+    },
+  },
+  red: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.cinnamon500,
+    },
+    low: {
+      text: colors.cinnamon600,
+      background: colors.cinnamon100,
+    },
+  },
+  transparent: {
+    high: {
+      text: colors.frenchVanilla100,
+      background: colors.blackPepper600,
+    },
+    low: {
+      text: colors.frenchVanilla100,
+      background: colors.blackPepper600,
+    },
+  },
+};
+
+export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({state}) => {
+  const colors = statusIndicatorColors[state.variant][state.emphasis];
+  return {
+    color: colors.text,
+    colorHover: colors.background,
+  };
+});
+
+export const StatusIndicatorIcon = createSubcomponent('span')({
+  modelHook: useStatusIndicatorModel,
+  elemPropsHook: useStatusIndicatorIcon,
+})<StatusIndicatorIconProps>((elemProps, Element, model) => {
+  return <SystemIcon as={Element} size={20} role="img" {...elemProps} />;
+});

package/status-indicator/lib/StatusIndicatorLabel.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+
+export interface StatusIndicatorLabelProps extends TextProps {}
+
+export const StatusIndicatorLabel = createComponent('span')({
+  displayName: 'StatusIndicator.Label',
+  Component: ({children, ...elemProps}: StatusIndicatorLabelProps, ref, Element) => {
+    return (
+      <Text
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        typeLevel="subtext.large"
+        fontWeight="bold"
+        textTransform="capitalize"
+        ref={ref}
+        color="inherit"
+        as={Element}
+        {...elemProps}
+      >
+        {children}
+      </Text>
+    );
+  },
+});

package/status-indicator/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useStatusIndicatorModel';

package/status-indicator/lib/hooks/useStatusIndicatorModel.tsx

@@ -0,0 +1,29 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+
+export type StatusIndicatorEmphasis = 'high' | 'low';
+
+export const useStatusIndicatorModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+
+    emphasis: 'low' as StatusIndicatorEmphasis,
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: 'gray' as StatusIndicatorVariant,
+  },
+})(config => {
+  const state = {
+    ...config,
+  };
+
+  return {state, events: {}};
+});

package/status-indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/status-indicator",
+  "module": "../dist/es6/status-indicator",
+  "sideEffects": false,
+  "types": "../dist/es6/status-indicator"
+}

package/{breadcrumbs → table}/LICENSE

@@ -45,7 +45,6 @@ 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/table/README.md

@@ -0,0 +1,5 @@
+# Canvas Kit Table
+
+View the
+[documentation for Table](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) on
+Storybook.

package/table/index.ts

@@ -0,0 +1 @@
+export * from './lib/Table';

package/table/lib/Table.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {type, colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {TableHead} from './TableHead';
+import {TableBody} from './TableBody';
+import {TableRow} from './TableRow';
+import {TableHeader} from './TableHeader';
+import {TableCell} from './TableCell';
+import {TableFooter} from './TableFooter';
+import {TableCaption} from './TableCaption';
+
+/**
+ * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
+ *
+ *
+ * ```tsx
+import {Table} from '@workday/canvas-kit-preview-react/table';
+
+export default function App() {
+  return (
+    <Table>
+      <Table.Caption>Table Caption</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table>
+  );
+}
+```
+ */
+export const Table = createComponent('table')({
+  displayName: 'Table',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        border={`1px solid ${colors.soap500}`}
+        borderRadius="l"
+        overflow="scroll"
+        {...type.levels.subtext.large}
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+  subComponents: {
+    /**
+     * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
+     *
+     *
+     * ```tsx
+      import {Table} from '@workday/canvas-kit-preview-react/table';
+
+      export default function App() {
+        return (
+          <Table>
+            <Table.Caption>Table Caption</Table.Caption>
+            <Table.Body>
+              <Table.Row>
+                <Table.Header>Table Header</Table.Header>
+                <Table.Cell>Table Cell</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        );
+      }
+      ```
+    */
+    Caption: TableCaption,
+    /**
+    * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Head: TableHead,
+    /**
+     * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Body: TableBody,
+    /**
+     * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
+     *
+     * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
+     * how many children are there and if those children are valid React Elements. This will adjust the
+     * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
+     * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
+     * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
+     * overwrite `gridTemplateColumns`.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Row: TableRow,
+    /**
+    * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+        </Table>
+      );
+    }
+    ```
+    */
+    Header: TableHeader,
+    /**
+    * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    }
+    ```
+    */
+    Cell: TableCell,
+    /**
+    * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-react/table';
+
+    export default function App() {
+      return (
+        <Table>
+          <Table.Footer>
+            <Table.Row>
+              <Table.Header>Table Header</Table.Header>
+              <Table.Cell>Table Cell</Table.Cell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      );
+    }
+    ```
+    */
+    Footer: TableFooter,
+  },
+});

package/table/lib/TableBody.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+
+const StyledBody = styled(Grid.as('tbody'))<StyledType>({
+  'tr:last-of-type td': {
+    borderBottom: 'none',
+  },
+  'tr:last-of-type th': {
+    borderBottom: 'none',
+  },
+  'tr:first-of-type td': {
+    borderTop: 'none',
+  },
+  'tr:first-of-type th': {
+    borderTop: 'none',
+  },
+  'td:last-of-type': {
+    borderRight: 'none',
+  },
+  'td:first-of-type': {
+    borderLeft: 'none',
+  },
+});
+
+export const TableBody = createComponent('tbody')({
+  displayName: 'Table.Body',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledBody as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledBody>
+    );
+  },
+});

package/table/lib/TableCaption.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {FlexProps, Flex} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableCaption = createComponent('caption')({
+  displayName: 'Table.Caption',
+  Component: ({children, ...elemProps}: FlexProps, ref, Element) => {
+    return (
+      <Flex
+        as={Element}
+        ref={ref}
+        borderBottom={`1px solid ${colors.soap500}`}
+        paddingY="xxs"
+        paddingX="s"
+        {...elemProps}
+      >
+        {children}
+      </Flex>
+    );
+  },
+});

package/table/lib/TableCell.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableCell = createComponent('td')({
+  displayName: 'Table.Cell',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        alignItems="center"
+        backgroundColor="frenchVanilla100"
+        borderBottom={`1px solid ${colors.soap400}`}
+        justifyContent="left"
+        minHeight="56px"
+        paddingY="xxs"
+        paddingX="s"
+        wordBreak="break-word"
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableFooter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableFooter = createComponent('tfoot')({
+  displayName: 'Table.Footer',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid as={Element} ref={ref} {...elemProps}>
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableHead.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+
+const StyledHead = styled(Grid.as('thead'))<StyledType>({
+  'th:last-of-type': {
+    borderRight: 'none',
+  },
+  'th:first-of-type': {
+    borderLeft: 'none',
+  },
+});
+
+export const TableHead = createComponent('thead')({
+  displayName: 'Table.Head',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledHead as={Element} ref={ref} backgroundColor="soap100" minHeight="48px" {...elemProps}>
+        {children}
+      </StyledHead>
+    );
+  },
+});

package/table/lib/TableHeader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableHeader = createComponent('th')({
+  displayName: 'Table.Header',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        alignItems="center"
+        backgroundColor="frenchVanilla100"
+        borderBottom={`1px solid ${colors.soap400}`}
+        justifyContent="left"
+        minHeight="56px"
+        paddingY="xxs"
+        paddingX="s"
+        wordBreak="break-word"
+        fontWeight="medium"
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableRow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableRow = createComponent('tr')({
+  displayName: 'Table.Row',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    const validChildren = (children: React.ReactNode) => {
+      return React.Children.toArray(children).filter(child =>
+        React.isValidElement(child)
+      ) as React.ReactElement[];
+    };
+    const childrenArray = validChildren(children).length;
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        gridAutoFlow="column"
+        gridTemplateColumns={`repeat(${childrenArray}, minmax(10rem, 1fr))`}
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/table",
+  "module": "../dist/es6/table",
+  "sideEffects": false,
+  "types": "../dist/es6/table"
+}

package/text-area/lib/TextArea.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {
+  FormField,
+  useFormFieldModel,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
 
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
@@ -16,7 +19,7 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  modelHook: useTextAreaModel,
+  modelHook: useFormFieldModel,
   subComponents: {
     Field: TextAreaField,
     Label: FormField.Label,
@@ -26,8 +29,8 @@ export const TextArea = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-area/lib/TextAreaField.tsx

@@ -9,13 +9,16 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  useTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 
 const baseStyles: CSSProperties = {
-  ...type.levels.subtext.large,
   transition: '0.2s box-shadow, 0.2s border-color',
   resize: 'both',
   '&::webkit-resizer': {
@@ -59,6 +62,7 @@ export const TextAreaField = createSubcomponent('textarea')({
   return (
     <FormField.Input
       as={Element}
+      {...type.levels.subtext.large}
       css={[baseStyles, focusStyles]}
       {...elemProps}
       border={`1px solid ${inputColors.border}`}