@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/DOCUMENTATION_GUIDELINES.mdx

@@ -1,13 +1,3 @@
-<Meta
-  title="Guides/Documentation Guidelines"
-  parameters={{
-    viewMode: 'docs',
-    previewTabs: {
-      canvas: {hidden: true},
-    },
-  }}
-/>
-
 # Documentation Guidelines
 
 ## Introduction
@@ -44,18 +34,21 @@ Import components which will be used to render documentation in the MDX file.
 The Specifications import is optional; only include it if the Specifications
 section exists (see below).
 -->
+
 import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 
 <!--
 Import the component so we can pass it into the Storybook Meta tag (see
 below).
 -->
+
 import {[Component]} from '@workday/canvas-kit-[preview-|labs-]react/[component]';
 
-<!-- Import component examples -->
-import Basic from './examples/Basic';
-import AnotherExample from './examples/AnotherExample';
-import ...
+<!--
+MDX file should refer to *.stories.ts/js file with CSF stories
+-->
+
+import \* as ComponentStories from './Component.stories'
 
 <!--
 Use the Storybook Meta tag to designate where to display the component in the
@@ -81,12 +74,14 @@ to include for a given component. Try to include enough examples to illustrate
 all common use cases and anything which may not be obvious based on the
 component API.
 -->
+
 ## Usage
 
 <!--
 Every component should have a basic example as its first example in the Usage
 section. Title the section "Basic Example" for consistency.
 -->
+
 ### Basic Example
 
 Description of the Basic Example.
@@ -101,6 +96,7 @@ along with its associated code.
 Feel free to include supplemental or follow-up information about the example
 underneath the ExampleCodeBlock (if necessary).
 -->
+
 More information about the Basic Example.
 
 ### Another Example
@@ -117,6 +113,7 @@ the component's JSDocs. This includes descriptions and props tables for the
 component, as well as its subcomponents if it's a compound component.
 Documentation for the model will also be included if the component has a model.
 -->
+
 ## Component API
 
 <!--
@@ -130,6 +127,7 @@ The Specifications section is optional. Only include it if the component has
 Cypress integration tests (i.e., a spec.ts file in the cypress/integration
 folder).
 -->
+
 ## Specifications
 
 <Specifications file="[Component].spec.ts" name="[Component]" />
@@ -150,17 +148,11 @@ you'll then follow the same document structure defined above with slight modific
 
 ````md
 <!-- Only import SymbolDescription if necessary (see below) -->
+
 import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
 
-<!-- Import component examples -->
-import Component1Example from './examples/Component1Example';
-import Component2Example from './examples/Component2Example';
-import ...
+import \* as ComponentFamilyStories from './Component.stories'
 
-<!--
-We are unable to use the component prop here since a component family
-represents multiple components.
--->
 
 # Canvas Kit [ComponentFamily]
 
@@ -178,11 +170,13 @@ component family will not have a Basic Example. Instead, it will have one
 section for each component in the family; each section will contain one or
 more examples for that particular component.
 -->
+
 ## Usage
 
 <!--
 Each section is named after the component.
 -->
+
 ### Component1
 
 <!--
@@ -204,6 +198,7 @@ More information about Component1Example.
 If necessary, you may add more examples for a single component within that
 component's Usage section.
 -->
+
 #### Another Component1 Example
 
 ### Component2
@@ -218,6 +213,7 @@ Description of Component2Example.
 You may include more examples at the end of the Usage section for examples
 which are not comopnent-specific and apply to every component in the family.
 -->
+
 ### More Examples...
 
 <!--
@@ -225,6 +221,7 @@ Unlike the Component API section for a single component, the Component API
 section for a component family will include multiple SymbolDocs, one for each
 component in the family.
 -->
+
 ## Component API
 
 <SymbolDoc name="[Component1]" fileName="/[preview-|labs-]react/" />
@@ -235,6 +232,7 @@ component in the family.
 Typically, all components within a family will share the same specifications
 file.
 -->
+
 ## Specifications
 
 <Specifications file="[ComponentFamily].spec.ts" name="[ComponentFamily]" />

package/dist/mdx/GETTING_STARTED.mdx

@@ -1,14 +1,5 @@
 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,13 +1,3 @@
-<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
@@ -274,6 +264,10 @@ We use codemods to reduce friction for consumers as they make changes and do upg
 accompany major version releases since v5, and can also be released in minor releases if users want
 to apply some changes sooner.
 
+> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7. With
+these updates has come some formatting issues after running our codemods. We recommend running a
+formatter to address the format issues that have been introduced in v12.**
+
 ### Add a New Codemod
 
 Adding a new codemod is pretty straightforward, but this guide will make sure you don't miss any
@@ -356,13 +350,10 @@ write.
 // modules/codemod/v10/spec/expectTransformFactory.spec.ts
 import {runInlineTest} from 'jscodeshift/dist/testUtils';
 
-export const expectTransformFactory = (fn: Function) => (
-  input: string,
-  expected: string,
-  options?: Record<string, any>
-) => {
-  return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
-};
+export const expectTransformFactory =
+  (fn: Function) => (input: string, expected: string, options?: Record<string, any>) => {
+    return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+  };
 ```
 
 ```ts
@@ -454,8 +445,9 @@ Finally, be sure to notify users of the deprecation in the corresponding
 
 ### ${Deprecated Name}
 
-**PR:** [#${PR number where the deprecation took place}](https://github.com/Workday/canvas-kit/pull/${PR number})
+**PR:** [#${PR number where the deprecation took
+place}](https://github.com/Workday/canvas-kit/pull/${PR number})
 
-We've deprecated ${Deprecated Name} ${Optional: Include package name to disambiguate (e.g., "from Labs")} ${Provide a
-migration strategy}
+We've deprecated ${Deprecated Name} ${Optional: Include package name to disambiguate (e.g., "from
+Labs")} ${Provide a migration strategy}
 ```

package/dist/mdx/TESTING.mdx

@@ -1,13 +1,3 @@
-<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
@@ -234,9 +224,7 @@ out. This is most confusing to those who approach Cypress commands as Promises.
 For example, imagine the following Cypress code:
 
 ```ts
-cy.get('body')
-  .contains('button', 'Delete Item')
-  .click();
+cy.get('body').contains('button', 'Delete Item').click();
 
 cy.get('[data-testid="MyResult"]').should('contain', 'Success!');
 ```
@@ -309,19 +297,6 @@ solutions like [knobs](https://github.com/storybookjs/storybook/tree/next/addons
 To make a story runnable in Chromatic for visual testing, add the following to the story's parameter
 list:
 
-```tsx
-// default Storybook API
-storiesOf('Some Category', module)
-  .add('My Visual Story', () => {
-    /** story contents */
-  })
-  .addParameter({
-    chromatic: {
-      disable: false,
-    },
-  });
-```
-
 ```tsx
 // CSF - All stories in file
 export default withSnapshotsEnabled({

package/dist/mdx/changelog.mdx

@@ -0,0 +1,5 @@
+import Changelog from '../../../CHANGELOG.md';
+import Markdown from '../../../utils/storybook/Markdown.tsx';
+
+
+<Markdown content={Changelog} />

package/dist/mdx/labs-react/combobox/Combobox.mdx

@@ -0,0 +1,52 @@
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import Basic from './examples/Basic';
+import DisabledItem from './examples/DisabledItem';
+import GroupOfResult from './examples/GroupOfResult';
+import Grow from './examples/Grow';
+import NoClearButton from './examples/NoClearButton';
+import RTL from './examples/RTL';
+
+
+# Combobox
+
+The term "Combobox" is based on the
+[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
+Authoring Practices Guide (APG):
+
+> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
+> that enables users to select a value for the combobox from a collection of possible values.
+
+Examples of a "combobox" would be date pickers, autocomplete, and select components.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Autocomplete
+
+<ExampleCodeBlock code={Basic} />
+
+### Grow
+
+<ExampleCodeBlock code={Grow} />
+
+### No Clear Button
+
+<ExampleCodeBlock code={NoClearButton} />
+
+### Group Of Result
+
+<ExampleCodeBlock code={GroupOfResult} />
+
+### Disabled Item
+
+<ExampleCodeBlock code={DisabledItem} />
+
+### RTL
+
+<ExampleCodeBlock code={RTL} />

package/dist/mdx/labs-react/combobox/examples/Basic.tsx

@@ -0,0 +1,87 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result
+    <span>
+      num<span>ber</span>
+    </span>
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <FormField id="autocomplete-123">
+      <FormField.Label>Autocomplete example</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Autocomplete} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/combobox/examples/DisabledItem.tsx

@@ -0,0 +1,87 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result
+    <span>
+      num<span>ber</span>
+    </span>
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <FormField id="autocomplete-123">
+      <FormField.Label>Group of results</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Autocomplete} showDisabledItems={true} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/combobox/examples/GroupOfResult.tsx

@@ -0,0 +1,87 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result{' '}
+    <span>
+      num<span>ber</span>
+    </span>{' '}
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <FormField id="autocomplete-123">
+      <FormField.Label>Group of results</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Autocomplete} group={true} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/combobox/examples/Grow.tsx

@@ -0,0 +1,87 @@
+import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {
+  Combobox,
+  ComboboxProps,
+  ComboBoxMenuItemGroup,
+} from '@workday/canvas-kit-labs-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+const autocompleteResult = (
+  textModifier: number,
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
+    Result
+    <span>
+      num<span>ber</span>
+    </span>
+    {textModifier}
+  </StyledMenuItem>
+);
+
+const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
+  Array.apply(null, Array(count))
+    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
+    .splice(0, total);
+
+const groupOfResults = (
+  count: number,
+  showDisabledItems: boolean,
+  groupHeading: ReactNode = 'Group'
+): ComboBoxMenuItemGroup => ({
+  header: (
+    <StyledMenuItem>
+      <strong>{groupHeading}</strong>
+    </StyledMenuItem>
+  ),
+  items: simpleAutoComplete(count, showDisabledItems, 10),
+});
+
+const Autocomplete: FC<
+  Omit<ComboboxProps, 'children'> & {
+    group?: boolean;
+    showDisabledItems?: boolean;
+  }
+> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
+  const [currentText, setCurrentText] = React.useState('');
+
+  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
+    setCurrentText(event.target.value);
+  };
+
+  const textLength = currentText.length;
+  const groupLength = Math.floor(textLength / 2);
+
+  return (
+    <Combobox
+      autocompleteItems={
+        group
+          ? [
+              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
+              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
+            ]
+          : simpleAutoComplete(textLength, showDisabledItems, 10)
+      }
+      onChange={autocompleteCallback}
+      showClearButton={showClearButton == null ? true : showClearButton}
+      labelId="autocomplete-123"
+      initialValue="Test"
+      {...props}
+    >
+      <TextInput data-width="ck-formfield-width" placeholder="Autocomplete" />
+    </Combobox>
+  );
+};
+
+export default () => {
+  return (
+    <FormField grow={true} id="autocomplete-123">
+      <FormField.Label>Grow example</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Autocomplete} />
+      </FormField.Field>
+    </FormField>
+  );
+};