@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-alert" error="error">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-default-custom">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input
+            as={Select}
+            name="icon"
+            options={customOptions}
+            renderOption={customRenderOption}
+            renderSelected={customRenderSelected}
+          />
+        )}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {simpleOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-default-simple">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-disabled">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input as={Select} name="contact" options={options} disabled={true} />
+        )}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-error" error="error">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-grow" grow={true}>
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {manyOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Top Label/index.ts

@@ -0,0 +1,8 @@
+export {Default} from './Default';
+export {DefaultWithCustomOptions} from './DefaultWithCustomOptions';
+export {DefaultWithSimpleOptions} from './DefaultWithSimpleOptions';
+export {Scrollable} from './Scrollable';
+export {Disabled} from './Disabled';
+export {Alert} from './Alert';
+export {Error} from './Error';
+export {Grow} from './Grow';

package/dist/mdx/preview-react/select/examples/storiesData.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {
+  activityStreamIcon,
+  avatarIcon,
+  uploadCloudIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
+import {
+  RenderOptionFunction,
+  RenderSelectedFunction,
+} from '@workday/canvas-kit-preview-react/select';
+
+export default 'Helpful text goes here.';
+export default 'error-desc-id';
+
+export default [
+  {label: 'E-mail', value: 'email-1234'},
+  {label: 'Phone', value: 'phone'},
+  {label: 'Fax (disabled)', value: 'fax', disabled: true},
+  {label: 'Mail', value: 'mail'},
+  {label: 'Mobile Phone', value: 'mobile_phone'},
+  {
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
+    value: 'oasis',
+  },
+];
+
+export default ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
+
+export default [
+  {label: 'Atlanta (United States)', value: 'atlanta'},
+  {label: 'Amsterdam (Europe)', value: 'amsterdam'},
+  {label: 'Austin (United States)', value: 'austin'},
+  {label: 'Beaverton (United States)', value: 'beaverton'},
+  {label: 'Belfast (Europe)', value: 'belfast'},
+  {label: 'Berlin (Europe)', value: 'berlin'},
+  {label: 'Boston (United States)', value: 'boston'},
+  {label: 'Boulder (United States)', value: 'boulder'},
+  {label: 'Chicago (United States)', value: 'chicago'},
+  {label: 'Dallas (United States)', value: 'dallas'},
+  {label: 'Denver (United States)', value: 'denver'},
+  {label: 'Dublin (Europe)', value: 'dublin'},
+  {label: 'Irvine (United States)', value: 'irvine'},
+  {label: 'Minneapolis (United States)', value: 'minneapolis'},
+  {label: 'New York (United States)', value: 'new-york'},
+  {label: 'Orlando (United States)', value: 'orlando'},
+  {label: 'Palo Alto (United States)', value: 'palo-alto'},
+  {label: 'Philadelphia (United States)', value: 'philadelphia'},
+  {label: 'Pleasanton (United States)', value: 'pleasanton'},
+  {label: 'Raleigh (United States)', value: 'raleigh'},
+  {label: 'San Francisco (United States)', value: 'san-francisco'},
+  {label: 'San Mateo (United States)', value: 'san-mateo'},
+  {label: 'Stockholm (Europe)', value: 'stockholm'},
+  {
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)',
+    value: 'oasis',
+  },
+  {label: 'Toronto (Canada)', value: 'toronto'},
+  {label: 'Victoria (Canada)', value: 'victoria'},
+  {label: 'Vienna (Europe)', value: 'vienna'},
+  {label: 'Warsaw (Europe)', value: 'warsaw'},
+  {label: 'Washington, DC (United States)', value: 'washington-dc'},
+  {label: 'Zurich (Europe)', value: 'zurich'},
+];
+
+export default [
+  {value: 'Activity Stream', data: {icon: activityStreamIcon}},
+  {value: 'Avatar', data: {icon: avatarIcon}},
+  {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
+  {value: 'User', data: {icon: userIcon}},
+];
+
+export const customRenderOption: RenderOptionFunction = option => {
+  const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
+  return (
+    <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
+      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
+      <div style={{marginLeft: 5}}>{option.value}</div>
+    </div>
+  );
+};
+
+export const customRenderSelected: RenderSelectedFunction = option => {
+  const iconColor = colors.blackPepper100;
+  return (
+    <div style={{alignItems: 'center', display: 'flex'}}>
+      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
+      <div style={{marginLeft: 5}}>{option.value}</div>
+    </div>
+  );
+};

package/dist/mdx/preview-react/side-panel/SidePanel.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {SidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-// Examples
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import HiddenName from './examples/HiddenName';
 import AlternatePanel from './examples/Variant';

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -1,6 +1,5 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import Basic from './examples/Basic';
 import Emphasis from './examples/Emphasis';
 import Icon from './examples/Icon';

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -22,7 +22,7 @@ export default () => {
     value.length < 3
       ? colors.greenApple600
       : value.length < 7
-      ? colors.cantaloupe600
+      ? colors.blackPepper300
       : colors.cinnamon500;
 
   return (

package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation="horizontal">
+    <TextArea orientation="horizontalStart">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -67,7 +64,7 @@ that the field is required. This will also add a red asterisk to `TextInput.Labe
 
 <ExampleCodeBlock code={Required} />
 
-### ReadOnly
+### Read Only
 
 Use `TextInput.Field`'s `readOnly` prop to indicate that the field can not be changed. We reccommend
 setting the background and border color to tranparent and the cursor to default to help inform users
@@ -75,13 +72,13 @@ of the immutiblity.
 
 <ExampleCodeBlock code={ReadOnly} />
 
-### Hidden
+### Hidden Input
 
 Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while still submitting its
 value, often used for things like security tokens. Note: You will likely need to manually
 set`aria-describedby={undefined}`and`id={undefined}`
 
-<ExampleCodeBlock code={Hidden} />
+<ExampleCodeBlock code={HiddenInput} />
 
 ### Ref Forwarding
 

package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation="horizontal">
+    <TextInput orientation="horizontalStart">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/react/_examples/{AriaLiveRegions.mdx → mdx/AriaLiveRegions.mdx}

@@ -1,3 +1,4 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import FilterListWithLiveStatus from './examples/AriaLiveRegions/FilterListWithLiveStatus';
 import VisibleLiveRegion from './examples/AriaLiveRegions/VisibleLiveRegion';

package/dist/mdx/react/_examples/{CompoundComponent.mdx → mdx/CompoundComponent.mdx}

@@ -1,3 +1,5 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import Template from './examples/compoundComponent/CustomCard';
 
 

package/dist/mdx/react/_examples/mdx/CookieBanner.mdx

@@ -0,0 +1,9 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import BasicExample from './examples/CookieBanner';
+
+
+# Canvas Kit Examples
+
+## CookieBanner
+
+<ExampleCodeBlock code={BasicExample} />

package/dist/mdx/react/_examples/mdx/Density.mdx

@@ -0,0 +1,11 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import Density from './examples/Density';
+
+
+# Canvas Kit Density Examples
+
+Although we currently don't support a density system, it's common practice to provide varying
+options to users, especially in the context of forms. Below is an example of how you can style our
+from elements to achieve the desired density.
+
+<ExampleCodeBlock code={Density} />

package/dist/mdx/react/_examples/mdx/Headers.mdx

@@ -0,0 +1,19 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {Basic as PageHeaderBasic} from './examples/PageHeader';
+import {Basic as GlobalHeaderBasic} from './examples/GlobalHeader';
+
+
+# Canvas Kit Examples
+
+## Global Header
+
+Developers building internal Workday applications will likely not need to create this component.
+However, if you're building components to be used outside of Workday, this is a helpful reference
+for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={GlobalHeaderBasic} />
+
+## Page Header
+
+<ExampleCodeBlock code={PageHeaderBasic} />

package/dist/mdx/react/_examples/{Layouts.mdx → mdx/Layouts.mdx}

@@ -1,3 +1,4 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import AreaColumnPositioning from './examples/layout/AreaColumnPositioning';
 import CustomColumnPositioning from './examples/layout/CustomColumnPositioning';
 import CustomColumnWidth from './examples/layout/CustomColumnWidth';

package/dist/mdx/react/_examples/{MediaModal.mdx → mdx/MediaModal.mdx}

@@ -1,4 +1,5 @@
-import Basic from './examples/MediaModal';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import BasicExample from './examples/MediaModal';
 
 
 ## Media Modal example
@@ -6,4 +7,4 @@ import Basic from './examples/MediaModal';
 These are modals that have an image or video as the primary content. The example can use a special
 `MediaContainer` component that allows for media to take up more space in the Modal.
 
-<ExampleCodeBlock code={Basic} />
+<ExampleCodeBlock code={BasicExample} />

package/dist/mdx/react/_examples/{SearchForm.mdx → mdx/SearchForm.mdx}

@@ -1,3 +1,4 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import SearchFormBasic from './examples/SearchFormBasic';
 
 

package/dist/mdx/react/_examples/{SidePanel.mdx → mdx/SidePanel.mdx}

@@ -1,3 +1,4 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import WithNavigation from './examples/SidePanelWithNavigation';
 import WithOverlay from './examples/SidePanelWithOverlay';
 
@@ -8,6 +9,6 @@ import WithOverlay from './examples/SidePanelWithOverlay';
 
 <ExampleCodeBlock code={WithNavigation} />
 
-## Side Panel With WithOverlay
+## Side Panel With Overlay
 
 <ExampleCodeBlock code={WithOverlay} />

package/dist/mdx/react/_examples/{TablesAdvanced.mdx → mdx/TablesAdvanced.mdx}

@@ -1,4 +1,4 @@
-import {Table} from '@workday/canvas-kit-react/table';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 
 import SelectableRows from './examples/Table/WithSelectableRows';
 import ExpandableRows from './examples/Table/WithExpandableRows';
@@ -39,11 +39,11 @@ table is added to the table just after the expanded row.
 
 ### Selectable Rows
 
-Developed by the Workday accessibility team, using a `Checkbox` labeled "Select All" inside of a table
-column header can be a confusing experience for screen reader users. Screen readers will
+Developed by the Workday accessibility team, using a `Checkbox` labeled "Select All" inside of a
+table column header can be a confusing experience for screen reader users. Screen readers will
 automatically announce the "Select All" column header each time users are reading any cell in
-column 1. For instance, the `Checkbox` in row 4 is decidedly not going to select all of the rows. Here
-is what we did about it:
+column 1. For instance, the `Checkbox` in row 4 is decidedly not going to select all of the rows.
+Here is what we did about it:
 
 - We intentionally rendered row 1, column 1 as a standard `<td>` element so screen readers won't
   automatically announce "Select All" while reading cells in column 1.

package/dist/mdx/react/_examples/{examples → mdx/examples}/AriaLiveRegions/FilterListWithLiveStatus.tsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system, base} from '@workday/canvas-tokens-web';
 import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';

package/dist/mdx/react/_examples/{examples → mdx/examples}/AriaLiveRegions/HiddenLiveRegion.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {TextInput} from '@workday/canvas-kit-react/text-input';

package/dist/mdx/react/_examples/{examples → mdx/examples}/AriaLiveRegions/TextInputWithLiveError.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system} from '@workday/canvas-tokens-web';

package/dist/mdx/react/_examples/{examples → mdx/examples}/AriaLiveRegions/VisibleLiveRegion.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {TextInput} from '@workday/canvas-kit-react/text-input';