@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/labs-react/search-form/examples/CustomStyles.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, searchFormStencil} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-const customSearchFormStencil = createStencil({
-  extends: searchFormStencil,
-  base: ({submitSearchIconPart}) => ({
-    [searchFormStencil.vars.background]: 'black',
-    [searchFormStencil.vars.backgroundHover]: system.color.bg.muted.strong,
-    [searchFormStencil.vars.color]: system.color.text.inverse,
-    [searchFormStencil.vars.placeholderColor]: system.color.bg.alt.softer,
-    [submitSearchIconPart]: {
-      [systemIconStencil.vars.color]: system.color.fg.inverse,
-    },
-    [`& [data-part="combobox-reset-button"]`]: {
-      [systemIconStencil.vars.color]: system.color.fg.inverse,
-    },
-    '&:focus-within': {
-      [submitSearchIconPart]: {
-        [systemIconStencil.vars.color]: system.color.fg.default,
-      },
-      [`& [data-part="combobox-reset-button"]`]: {
-        [systemIconStencil.vars.color]: system.color.fg.default,
-      },
-    },
-  }),
-});
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        cs={customSearchFormStencil()}
-        autocompleteItems={menuItems}
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  const customTheme = {
-    background: '#a31b12',
-    backgroundFocus: '#fff',
-    placeholderColor: '#fff',
-    placeholderColorFocus: '#333333',
-  } as SearchThemeAttributes;
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start">
-      <Flex padding="xs" backgroundColor="cinnamon500" flex={1} flexBasis="auto">
-        <SearchForm
-          searchTheme={customTheme}
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/Grow.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        autocompleteItems={menuItems}
-        grow
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/RTL.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
-
-  return (
-    <CanvasProvider theme={theme}>
-      <Flex minHeight={200} alignItems="flex-start" padding="xs">
-        <SearchForm
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </CanvasProvider>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/Theming.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm, SearchTheme} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start">
-      <Flex padding="xs" backgroundColor="blueberry500" flex={1} flexBasis="auto">
-        <SearchForm
-          searchTheme={SearchTheme.Dark}
-          autocompleteItems={menuItems}
-          onInputChange={filterMenuItems}
-          onSubmit={handleSubmit}
-        />
-      </Flex>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/avatar/examples/Basic.tsx

@@ -1,5 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
-
-export default () => {
-  return <Avatar name="John Doe" />;
-};

package/dist/mdx/preview-react/information-highlight/InformationHighlight.mdx

@@ -1,109 +0,0 @@
-import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-
-import * as InformationHighlight from './InformationHighlight.stories.ts';
-import Basic from './examples/Basic';
-import Body from './examples/Body';
-import Heading from './examples/Heading';
-import Informational from './examples/Informational';
-import Caution from './examples/Caution';
-import Critical from './examples/Critical';
-import IconCritical from './examples/CustomIconCritical';
-import RTL from './examples/RTL';
-
-
-# Canvas Kit Information Highlight
-
-A container to call out important information on a page or a section of a page that the user should be aware of.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-`InformationHighlight` should be used to call out important information to the user and are paired with a meaningful
- icon and color to differentiate information type. It should not be removed from the interface until some system or admin level action has been taken to do so.
-
-You can use an `InformationHighlight` to:
-- Prevent unwanted consequences from destructive actions
-- Reassure users in their next steps
-- Provide detail into information on the page
-- Show changes in page content
-
-### When to Consider Something Else
-- Consider a [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if the message is about system-wide errors or alerts, or if the message appears in response to user action.
-- Consider a [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the message is critical and requires user action or decision before proceeding
-- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs) if the message is timely, such as communicating updates on the process of an application.
-### Basic Example
-<ExampleCodeBlock code={Basic} />
-
-
-## Variants
-`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
-
-
-Variants: `informational`, `caution`, `critical`
-
-Emphasis: `low`, `high`
-
-
-The variants have different icons and colors to convey severity and the emphasis changes the background color to have a
- lower or higher contrast. If no `variant` or `emphasis` is selected the layout will default to
-  `Variant: informational, Emphasis: low`.
-
-
-The following examples will show the `low` and `high` emphasis of the three variants.
-`low` Emphasis will be shown first and should be used when there is other more important information on the page.
-`high` Emphasis will be shown second, and should be used when the highlight is not competing with other, more important information.
-
-### Informational
-The informational variant is for _nice to have_ information, such as related features or opportunities.
-<ExampleCodeBlock code={Informational} />
-
-### Caution
-The caution variant is for _important to know_ information, such as the potential consequences of specific actions.
-
-<ExampleCodeBlock code={Caution} />
-
-
-### Critical
-The critical variant is for _must know_ information that could otherwise cause failure if the user is unaware
-
-<ExampleCodeBlock code={Critical} />
-
-
-### RTL Example
- Information Highlight also supports RTL Languages. To enable RTL, add a custom theme with direction set to 'ContentDirection.RTL'
-<ExampleCodeBlock code={RTL} />
-
-## Partial and Custom Information Highlights
-
-`InformationHighlight` can use custom icons or be designed to only use some of its components.
-
-### Custom Icon: Critical
-<ExampleCodeBlock code={IconCritical} />
-
-### Body Only Example
-<ExampleCodeBlock code={Body} />
-
-### Heading Only Example
-<ExampleCodeBlock code={Heading} />
-
-### Accessible Use of the `as` Prop
-Like many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop, which lets you change
-the underlying semantic element. For `InformationHighlight.Heading`, you can change the heading level if you were
-needing to define a different level of importance. This should be done with caution to ensure the best accessibility.
-
-## Component API
-
-<SymbolDoc name="InformationHighlight" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="InformationHighlight.spec.tsx" name="InformationHighlight" />

package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx

@@ -1,53 +0,0 @@
-import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
-
-import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const customPillStencil = createStencil({
-  base: {
-    [pillStencil.vars.background]: system.color.static.green.default,
-    [pillStencil.vars.border]: system.color.static.green.stronger,
-    [pillStencil.vars.label]: system.color.static.white,
-    [systemIconStencil.vars.color]: system.color.static.white,
-    [pillCountStencil.vars.backgroundColor]: system.color.static.green.default,
-    [pillCountStencil.vars.borderColor]: system.color.static.green.default,
-
-    '&:hover, &.hover': {
-      [pillStencil.vars.background]: system.color.static.green.stronger,
-      [pillStencil.vars.label]: system.color.static.white,
-      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
-      [systemIconStencil.vars.color]: system.color.static.white,
-      [pillCountStencil.vars.borderColor]: system.color.static.green.stronger,
-    },
-    '&:active, &.active': {
-      [pillStencil.vars.background]: system.color.static.green.stronger,
-      [pillStencil.vars.label]: system.color.static.white,
-      [systemIconStencil.vars.color]: system.color.static.white,
-      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
-    },
-    '&:focus, &.focus, &:focus-visible': {
-      [pillStencil.vars.background]: system.color.static.green.stronger,
-      [pillStencil.vars.label]: system.color.static.white,
-      [systemIconStencil.vars.color]: system.color.static.white,
-      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
-    },
-    '&:disabled, &.disabled': {
-      [pillStencil.vars.background]: system.color.static.green.default,
-      [pillStencil.vars.label]: system.color.static.white,
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-export default () => {
-  return (
-    <div>
-      <Pill cs={customPillStencil()}>
-        <Pill.Icon aria-label="Add user" />
-        <Pill.Label>Custom Pill Color</Pill.Label>
-        <Pill.Count>10</Pill.Count>
-      </Pill>
-    </div>
-  );
-};

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

@@ -1,139 +0,0 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import Basic from './examples/Basic';
-import Disabled from './examples/Disabled';
-import TextAndIcon from './examples/TextAndIcon';
-import TextOnly from './examples/TextOnly';
-import Sizes from './examples/Sizes';
-import Vertical from './examples/Vertical';
-import RTL from './examples/RTL';
-import Dynamic from './examples/Dynamic';
-
-
-# Canvas Kit Segmented Control
-
-Segmented Control is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that represents
-a linear group of multiple buttons allowing the selection of a specific value.
-
-[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-`SegmentedControl` includes a container `SegmentedControl` component and the following
-subcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.
-
-The example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered
-using a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only
-one button can be active at a time.
-
-<ExampleCodeBlock code={Basic} />
-
-We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
-
-### Accessibility
-
-Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
-wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
-`<fieldset>` element, and useful for screen readers to describe the relationship between the
-buttons.
-
-- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
-  state to screen readers.
-- Providing your own `aria-label`string to `SegmentedControl.List` is recommended for describing the
-  purpose of the component.
-
-#### Screen Reader Experience
-
-When users interact with a `SegmentedControl` using screen readers:
-
-- The group context is announced (e.g., "View options, group" when using
-  `aria-label="View options"`)
-- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
-  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
-- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
-  state
-- When a button is activated, screen readers should announce the new state
-
-Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
-accessibility of these components.
-
-### Variations
-
-`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`
-components have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.
-
-All `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same
-variation.
-
-#### Icon-Only
-
-To render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do
-not provide it with text content. Refer to the [basic example](#basic-example) above for an instance
-of an icon-only `SegmentedControl`.
-
-The icon-only variation is the only variation which supports a vertical orientation in addition to
-the default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`
-to configure the component to render vertically.
-
-<ExampleCodeBlock code={Vertical} />
-
-#### Text-Only
-
-To render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and
-provide it with text content.
-
-<ExampleCodeBlock code={TextOnly} />
-
-#### Text-and-Icon
-
-To render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and
-provide it with text content.
-
-<ExampleCodeBlock code={TextAndIcon} />
-
-### Sizes
-
-`SegmentedControl` accepts a `size` prop which supports the following values:
-
-- `small`
-- `medium` (Default)
-- `large`
-
-<ExampleCodeBlock code={Sizes} />
-
-### Disabled
-
-Set the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Right-to-Left (RTL)
-
-`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
-
-<ExampleCodeBlock code={RTL} />
-
-### Dynamic Items
-
-`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.
-
-<ExampleCodeBlock code={Dynamic} />
-
-## Component API
-
-<SymbolDoc name="SegmentedControl" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />