@workday/canvas-kit-docs 8.3.4 → 8.3.6

package/dist/mdx/CONTRIBUTING.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Contributing"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Contributing to Canvas
 
 On behalf of the Canvas team, thank you so much for your contribution to this project and being a
@@ -155,7 +165,7 @@ Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your
 ### Releases
 
 - Releases are prepared by updating package versions with `lerna version`, and updating the
-  [changelog](./CHANGELOG.md)
+  [changelog](/docs/changelog--page)
 - A PR is created for the above updates
 - After the release PR is approved and merged, we create a release in GitHub with the contents of
   the changelog updates.
@@ -205,8 +215,7 @@ This will start the unit tests.
 
 ### Code Style Guide
 
-Refer to the
-[API & Pattern Guidelines](/getting-started/for-developers/resources/api-pattern-guidelines/).
+Refer to the [API & Pattern Guidelines](/getting-started/for-developers/resources/api-pattern-guidelines/).
 
 Rules are enforced using [ESLint](https://eslint.org) and code formatting is provided through
 [Prettier](https://prettier.io).

package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Creating Compound Components"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
+
 # Building a Compound Component
 
 Refer to the

package/dist/mdx/GETTING_STARTED.mdx

@@ -0,0 +1,14 @@
+import Readme from '../../../README.md';
+import Markdown from '../../../utils/storybook/Markdown.tsx';
+
+<Meta
+  title="Guides/Getting Started"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
+<Markdown content={Readme} />

package/dist/mdx/MAINTAINING.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Maintaining"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
 # Maintaining Canvas Kit
 
 If you're a Canvas Kit core maintainer, this doc is for you! Consider this a field guide to help you

package/dist/mdx/TESTING.mdx

@@ -1,3 +1,13 @@
+<Meta
+  title="Guides/Testing"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
 # Testing
 
 `canvas-kit` has 3 levels of testing: unit, functional and visual. Each area has special use-cases

package/dist/mdx/changelog.stories.mdx

@@ -1,5 +1,14 @@
 import Changelog from '../../../CHANGELOG.md';
 import Markdown from '../../../utils/storybook/Markdown.tsx';
 
+<Meta
+  title="Changelog"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {hidden: true},
+    },
+  }}
+/>
 
 <Markdown content={Changelog} />

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -106,8 +106,7 @@ Set the `disabled` prop of `SegmentedControl` to disable the entire component in
 
 ### Dynamic Items
 
-`SegmentedControl` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+`SegmentedControl` supports a [dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
 of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
 the `model` state and provide a render function to display the items.
 

package/dist/mdx/react/icon/Assets.mdx

@@ -0,0 +1,28 @@
+import SystemIconList from './examples/IconList';
+import AppletIconList from './examples/AppletIconList';
+import{AccentIconList} from './examples/AccentIconList.tsx'
+import Overview from './examples/Overview'
+
+
+# Assets
+Assets are graphics which help communicate meaning or highlight areas of interaction to our users. These may be presented individually or as part of a group with related information in components and patterns.
+
+<ExampleCodeBlock code={Overview} />
+
+## Accent Icon List
+
+Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating the overall tone and meaning of a page.
+
+<ExampleCodeBlock code={AccentIconList} />
+
+## Applet Icon List
+
+Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.
+
+<ExampleCodeBlock code={AppletIconList} />
+
+## System Icon List
+
+System Icons are symbols used to convey simple actions and functions, they are the most common icons encountered in products and help communicate metaphors at a glance.
+
+<ExampleCodeBlock code={SystemIconList} />

package/dist/mdx/react/icon/examples/AccentIconList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import * as CanvasAccenttIcons from '@workday/canvas-accent-icons-web';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {AccentIcon} from '@workday/canvas-kit-react/icon';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const ImportedIcons = Object.keys(CanvasAccenttIcons);
+
+const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleSearch = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Flex flexDirection="column" alignItems="center" gap="m">
+      <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
+      <Flex flexWrap="wrap">
+        {allIcons
+          .filter(icon => {
+            if (value === '') {
+              return 'No icons found';
+            } else if (icon.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
+              return icon;
+            }
+          })
+          .map((singleIcon, index) => {
+            return (
+              <Flex
+                alignItems="center"
+                width={'max(320px,20%)'}
+                flexDirection="row"
+                gap="xs"
+                padding="xs"
+                key={index}
+              >
+                <Box>
+                  <AccentIcon icon={CanvasAccenttIcons[singleIcon]} />
+                </Box>
+                <Box>{singleIcon}</Box>
+              </Flex>
+            );
+          })}
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/react/icon/examples/AppletIconList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {AppletIcon} from '@workday/canvas-kit-react/icon';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const ImportedIcons = Object.keys(CanvasAppletIcons);
+
+const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleSearch = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Flex flexDirection="column" alignItems="center" gap="m">
+      <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
+      <Flex flexWrap="wrap">
+        {allIcons
+          .filter(icon => {
+            if (value === '') {
+              return 'No icons found';
+            } else if (icon.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
+              return icon;
+            }
+          })
+          .map((singleIcon, index) => {
+            return (
+              <Flex
+                alignItems="center"
+                width={'max(320px,20%)'}
+                flexDirection="row"
+                gap="xs"
+                padding="xs"
+                key={index}
+              >
+                <Box>
+                  <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
+                </Box>
+                <Box>{singleIcon}</Box>
+              </Flex>
+            );
+          })}
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/react/icon/examples/IconList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import * as CanvasIcons from '@workday/canvas-system-icons-web';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const ImportedIcons = Object.keys(CanvasIcons);
+
+const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleSearch = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Flex flexDirection="column" alignItems="center" gap="m">
+      <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
+      <Flex flexWrap="wrap">
+        {allIcons
+          .filter(icon => {
+            if (value === '') {
+              return 'No icons found';
+            } else if (icon.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
+              return icon;
+            }
+          })
+          .map((singleIcon, index) => {
+            return (
+              <Flex
+                alignItems="center"
+                width={'max(320px,20%)'}
+                flexDirection="row"
+                gap="xs"
+                padding="xs"
+                key={index}
+              >
+                <Box>
+                  <SystemIcon icon={CanvasIcons[singleIcon]} />
+                </Box>
+                <Box>{singleIcon}</Box>
+              </Flex>
+            );
+          })}
+      </Flex>
+    </Flex>
+  );
+};

package/dist/mdx/react/icon/examples/Overview.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {shieldIcon} from '@workday/canvas-accent-icons-web';
+import {benefitsIcon} from '@workday/canvas-applet-icons-web';
+import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
+
+import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
+import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+
+const graphicExample: CanvasGraphic = {
+  name: 'badgeAchievement',
+  type: CanvasIconTypes.Graphic,
+  svg:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
+  filename: 'wd-graphic-badge-achievement.svg',
+  category: '',
+  tags: [],
+};
+
+export default () => (
+  <Flex flexDirection="row" alignItems="center" gap="s">
+    <AccentIcon icon={shieldIcon} />
+    <AppletIcon icon={benefitsIcon} />
+    <SystemIcon icon={activityStreamIcon} />
+    <SystemIconCircle icon={activityStreamIcon} />
+    <Graphic src={graphicExample} />
+  </Flex>
+);

package/dist/mdx/react/layout/Box.mdx

@@ -33,7 +33,9 @@ supports all `BoxProps` such as `padding`, it also supports semantic anchor elem
 
 ### Style Props
 
-`Box` exposes [style props](/getting-started/for-developers/resources/style-props/) that allow you to modify styles in an ergonomic way across components. To learn more about individual sets of `Box` style props, consult the lists below.
+`Box` exposes [style props](/getting-started/for-developers/resources/style-props/) that allow
+you to modify styles in an ergonomic way across components. To learn more about individual sets of
+`Box` style props, consult the lists below.
 
 - [Background Style Props](/getting-started/for-developers/resources/style-props/#background)
 - [Border Style Props](/getting-started/for-developers/resources/style-props/#border)

package/dist/mdx/react/layout/Flex.mdx

@@ -55,16 +55,14 @@ building layouts.
 
 #### Props
 
-`Flex` exposes
-[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+`Flex` exposes [flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
-to CSS Flexbox Item properties. This provides greater control over how child components render in
-your layout.
+[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map to CSS Flexbox Item
+properties. This provides greater control over how child components render in your layout.
 
 #### Usage
 
@@ -78,6 +76,5 @@ your layout.
 
 #### Props
 
-`Flex.Item` exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+`Flex.Item` exposes [flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -96,12 +96,14 @@ layouts.
 
 #### Props
 
-`Grid` exposes [grid container style props](/getting-started/for-developers/resources/style-props/#grid) and `Box` style props.
+`Grid` exposes [grid container style props](/getting-started/for-developers/resources/style-props/#grid) and `Box`
+style props.
 
 ### Grid.Item
 
-`Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes [grid item style props](/getting-started/for-developers/resources/style-props/#grid-item) that map to CSS Grid
-Item properties. This provides greater control over how child components render in your layout.
+`Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes
+[grid item style props](/getting-started/for-developers/resources/style-props/#grid) that map to CSS Grid Item
+properties. This provides greater control over how child components render in your layout.
 
 #### Usage
 
@@ -117,4 +119,5 @@ Item properties. This provides greater control over how child components render
 
 #### Props
 
-`Grid.Item` exposes [grid item style props](/getting-started/for-developers/resources/style-props/#grid-item) and `Box` style props.
+`Grid.Item` exposes [grid item style props](/docs/features-style-props--grid-item-example) and `Box`
+style props.

package/dist/mdx/react/tabs/Tabs.mdx

@@ -20,9 +20,8 @@ import {
 
 # Canvas Kit Tabs
 
-`Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/)
-that allows users to navigate between related views of content while remaining in context of the
-page.
+`Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/) that allows users to navigate between
+related views of content while remaining in context of the page.
 
 [> Workday Design Reference](https://design.workday.com/components/navigation/tabs)
 

package/dist/mdx/react/text/Text.mdx

@@ -21,8 +21,8 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of
-[style props](/getting-started/for-developers/resources/style-props/) including spacing props such
-as `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.
+[style props](/getting-started/for-developers/resources/style-props/) including spacing props such as
+`margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.
 
 `Text` renders a `<span>` element by default. You may override the rendered element using the `as`
 prop.

package/dist/mdx/react/tokens/Tokens.mdx

@@ -0,0 +1,51 @@
+import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
+import Overview from './examples/Overview';
+
+
+# Tokens
+
+Tokens are the smallest pieces of our Design System with the primary function of storing UI
+information. They enable building components and patterns with consistency across our platforms.
+
+<ExampleCodeBlock code={Overview} />
+
+## Border Radius
+
+### Usage
+
+<ExampleCodeBlock code={BorderRadius} />
+
+## Colors
+
+Our color system enables consistency and recognition across many contexts. There are 27 sets of hues
+with six shades in each color set.
+
+### Usage
+
+<ExampleCodeBlock code={Colors} />
+
+## Depth
+
+Light and shadows are utilized to indicate a sense of depth. This establishes hierarchy and provides
+predictability within the Canvas user interface.
+
+### Usage
+
+<ExampleCodeBlock code={Depth} />
+
+## Space
+
+This guide will help you make decisions when spacing elements in your designs using our space Tokens
+
+### Usage
+
+<ExampleCodeBlock code={Space} />
+
+## Type
+
+Typography is at the core of our interface. With it, we create clear hierarchies that guide users
+through our products.
+
+### Usage
+
+<ExampleCodeBlock code={Type} />

package/dist/mdx/react/tokens/examples/Overview.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const StyledCard = styled('div')({
+  ...depth[3],
+  padding: space.m,
+  borderRadius: borderRadius.m,
+  backgroundColor: colors.cinnamon300,
+  ...type.levels.body.medium,
+});
+
+export default () => (
+  <Flex>
+    <StyledCard>Using Tokens To Style</StyledCard>
+  </Flex>
+);