### Install Applet Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using Applet Icons.

```sh
npm install @workday/canvas-kit-react @workday/canvas-applet-icons-web
```

--------------------------------

### Install Canvas Kit Docs

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/README.md

Install the canvas-kit-docs package using yarn.

```sh
yarn add @workday/canvas-kit-docs
```

--------------------------------

### Install Canvas Kit Styling

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-style-props-migration.txt

Install the core styling utilities package for runtime use.

```sh
yarn add @workday/canvas-kit-styling
```

--------------------------------

### Component Import Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Example of importing the Tabs component for documentation.

```tsx
import {Tabs} from '@workday/canvas-kit-react/tabs';
```

--------------------------------

### Install Emotion for Global Styles

Source: https://github.com/workday/canvas-kit/blob/master/modules/react-fonts/README.md

If you are not already using emotion, install it as a dependency to manage global styles.

```sh
yarn add emotion
```

--------------------------------

### Viewport-based Media Query Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/stories/mdx/Responsive.mdx

A CSS example demonstrating how to apply styles based on viewport width using a media query.

```css
@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}
```

--------------------------------

### Full Page Demo Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/accessibility/PageStructure.mdx

A comprehensive example demonstrating the implementation of accessible page structure, likely including landmark regions and proper heading hierarchy.

```javascript
import React from 'react';
import { Box } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import { Button } from '@workday/canvas-kit-react/button';

export const FullPageDemo = () => (
  <Box>
    <Box as="header" padding="s" background="#f0f0f0">
      <Text as="h1">Main Page Title (h1)</Text>
      <Text as="h2">Subtitle (h2)</Text>
    </Box>
    <Box as="nav" padding="s" background="#e0e0e0">
      <Text as="h3">Navigation Menu (h3)</Text>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </Box>
    <Box as="main" padding="s">
      <Text as="h2">Section Title (h2)</Text>
      <Text>This is the main content area of the page.</Text>
      <Box margin="s">
        <Text as="h3">Subsection Title (h3)</Text>
        <Text>Details within the subsection.</Text>
        <Button>Action Button</Button>
      </Box>
    </Box>
    <Box as="footer" padding="s" background="#f0f0f0">
      <Text as="h2">Footer Information (h2)</Text>
      <Text>Copyright details and links.</Text>
    </Box>
  </Box>
);
```

--------------------------------

### Install Color Picker

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/color-picker/README.md

Install the Color Picker component using npm or yarn.

```sh
preview-react add @workday/canvas-kit-preview-react
```

--------------------------------

### Component API Installation

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Command to install the Canvas Kit React package. Use this in the Installation section of component documentation.

```sh
yarn add @workday/canvas-kit-[preview-|labs-]react
```

--------------------------------

### Install Canvas Tokens Web Package

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Install the new @workday/canvas-tokens-web package using npm.

```bash
npm install @workday/canvas-tokens-web
```

--------------------------------

### Install Canvas Kit React Layout

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/layout/README.md

Install the layout module using yarn.

```sh
yarn add @workday/canvas-kit-react/layout
```

--------------------------------

### Install Accent Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using Accent Icons.

```sh
npm install @workday/canvas-kit-react @workday/canvas-accent-icons-web
```

--------------------------------

### System CSS Token Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/theming.md

Example of system CSS variables defining component-specific values.

```css
--cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600);
--cnvs-sys-color-text-primary-default: var(--cnvs-base-palette-blue-600);
--cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4);
```

--------------------------------

### Install Canvas Kit React and Tokens

Source: https://github.com/workday/canvas-kit/blob/master/README.md

Install the necessary Canvas Kit React and web tokens packages using Yarn or npm.

```sh
yarn add @workday/canvas-kit-react @workday/canvas-tokens-web
```

```sh
npm install @workday/canvas-kit-react @workday/canvas-tokens-web
```

--------------------------------

### Install and Run Codemod Locally

Source: https://github.com/workday/canvas-kit/blob/master/modules/codemod/README.md

Install the codemod package using yarn and then run it directly. This avoids the need for npx.

```sh
> yarn add @workday/canvas-kit-codemod
> canvas-kit-codemod <transform> [path]
```

--------------------------------

### Install Canvas Kit Common

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/lib/theming/README.md

Install the common module for Canvas Kit React to access theming utilities.

```sh
yarn add @workday/canvas-kit-react/common
```

--------------------------------

### Install Popup Stack

Source: https://github.com/workday/canvas-kit/blob/master/modules/popup-stack/README.md

Install the Canvas Kit Popup Stack module using yarn.

```sh
yarn add @workday/canvas-kit-popup-stack
```

--------------------------------

### Install Canvas Tokens Web

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Install the necessary Canvas Kit tokens package using yarn.

```bash
yarn add @workday/canvas-tokens-web
```

--------------------------------

### Install System Icons Package

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using System Icons in your React project.

```sh
npm install @workday/canvas-kit-react @workday/canvas-system-icons-web
```

--------------------------------

### Basic Media Modal Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/MediaModal.mdx

Demonstrates a basic Media Modal with an image or video. This example utilizes the MediaContainer component for expanded media presentation.

```javascript
import {Meta} from '@storybook/blocks';
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import {BasicExample} from './examples/MediaModal';

<Meta title="Examples/Media Modal" />

## Media Modal example

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={BasicExample} />
```

--------------------------------

### Install Expressive Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Instructions for installing the necessary packages to use Expressive Icons. This includes the core React package and the expressive icons web package.

```sh
npm install @workday/canvas-kit-react @workday/canvas-expressive-icons-web
```

--------------------------------

### System CSS Tokens Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/stories/mdx/Theming.mdx

Defines component-specific values using CSS variables, referencing base tokens. Includes examples for background color and shape.

```css
--cnvs-sys-color-bg-default: var(--cnvs-base-palette-blue-600);
--cnvs-sys-shape-sm: var(--cnvs-base-size-50);
```

--------------------------------

### Document Deprecation in Upgrade Guide

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/MAINTAINING.mdx

Markdown example for documenting a deprecation in the Upgrade Guide, including PR number and migration strategy.

```markdown
## Deprecations

...

### ${Deprecated Name}

**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}
```

--------------------------------

### Basic Pagination Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/pagination/stories/pagination.mdx

Sets up a basic Pagination component with default range and step controls for navigating between pages. Includes Pagination.AdditionalDetails for accessibility.

```jsx
import React from 'react';
import {Pagination} from '@workday/canvas-kit-react/pagination';

export const Basic = () => (
  <Pagination>
    <Pagination.StepToPreviousButton />
    <Pagination.Pages />
    <Pagination.StepToNextButton />
    <Pagination.AdditionalDetails />
  </Pagination>
);
```

--------------------------------

### Basic Tabs Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/tabs/stories/Tabs.mdx

A basic setup of the Tabs component with Tabs.List, Tabs.Item, and Tabs.Panel. This example uses a static API and does not support overflow.

```jsx
import React from 'react';

import {Tabs} from '@workday/canvas-kit-react/tabs';

export const Basic = () => (
  <Tabs>
    <Tabs.List>
      <Tabs.Item>Tab 1</Tabs.Item>
      <Tabs.Item>Tab 2</Tabs.Item>
      <Tabs.Item>Tab 3</Tabs.Item>
      <Tabs.Item>Tab 4</Tabs.Item>
      <Tabs.Item>Tab 5</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel>Panel 1</Tabs.Panel>
    <Tabs.Panel>Panel 2</Tabs.Panel>
    <Tabs.Panel>Panel 3</Tabs.Panel>
    <Tabs.Panel>Panel 4</Tabs.Panel>
    <Tabs.Panel>Panel 5</Tabs.Panel>
  </Tabs>
);
```

--------------------------------

### Responsive Columns Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Shows how columns adapt to different screen sizes. Use for layouts that need to be responsive.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const ResponsiveColumns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={4} />
    <Grid gridColumnStart={4} gridColumnEnd={8} />
    <Grid gridColumnStart={8} gridColumnEnd={12} />
  </Grid>
);
```

--------------------------------

### Select with Formik

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/FormsWithFormik.mdx

Example of a Select component integrated with Formik for form handling. Ensure Formik is installed and configured in your project.

```jsx
import {Meta} from '@storybook/blocks';
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import {SelectWithFormik} from './examples/SelectWithFormik';

<Meta title="Examples/Forms/Select With Formik" />

# Canvas Kit Examples

## Select Using Formik

<ExampleCodeBlock code={SelectWithFormik} />
```

--------------------------------

### Webpack Configuration for StylingWebpackPlugin

Source: https://github.com/workday/canvas-kit/blob/master/modules/styling/stories/mdx/Overview.mdx

Provides an example of how to import and configure the `StylingWebpackPlugin` in a Webpack setup, including setting the `tsconfigPath` and adding the loader to module rules.

```javascript
import {StylingWebpackPlugin} from '@workday/canvas-kit-styling-transform';

const tsPlugin = const tsPlugin = new StylingWebpackPlugin({
  tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), // allows your TS config to be used
  // A different tsconfig could be used if you want to use TS to transpile to something like ES2019 and
  // also have Babel process the file.
});

{
  rules: [
    //...
    {
      test: /.\.tsx?$/,
      use: [
        {
          loader: require.resolve('@workday/canvas-kit-styling-transform/webpack-loader'),
          options: tsPlugin.getLoaderOptions(),
        },
      ],
      enforce: 'pre'
    },
  ];
  // We need to pass the plugin to Webpack's plugin list. Failure to do this will result in a
  // production build hanging
  plugins: [tsPlugin]
}
```

--------------------------------

### Button Examples with Different Styling Methods

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-style-props-migration.txt

Demonstrates various ways to apply styles to buttons using createStyles, CSS Props, Styled Components, and Style Props. Shows the combination of these methods and their precedence.

```jsx
<Flex flexDirection="column" minHeight="100vh" gap="s">
      <Flex flexDirection="column" gap="s">
        <h2>Buttons</h2>
        <Flex flexDirection="row" gap="s">
          <PrimaryButton cs={styles}>createStyles</PrimaryButton>
          {jsx(PrimaryButton, {...cssProp}, 'CSS Prop')}
          <StyledPrimaryButton>Styled Component</StyledPrimaryButton>
          <PrimaryButton backgroundColor={backgroundColors.styleProps}>Style Props</PrimaryButton>
        </Flex>
        <div>
          {jsx(
            PrimaryButton,
            {
              ...cssProp,
              cs: styles,
            },
            'createStyles + CSS Prop'
          )}
        </div>
        <div>
          <StyledPrimaryButton cs={styles}>createStyles + Styled Component</StyledPrimaryButton>
        </div>
        <div>
          <PrimaryButton cs={styles} backgroundColor={backgroundColors.styleProps}>
            createStyles + Style Props
          </PrimaryButton>
        </div>
        <div>
          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps} cs={styles}>
            createStyles + Styled Component + Style Props
          </StyledPrimaryButton>
        </div>
        <div>
          {jsx(
            StyledPrimaryButton,
            {
              ...cssProp,
              backgroundColor: backgroundColors.styleProps,
              cs: styles,
            },
            'createStyles + CSS Prop + Styled Component + Style Props'
          )}
        </div>
        <div>{jsx(StyledPrimaryButton, {...cssProp}, 'CSS Prop + Styled Component')}</div>
        <div>
          {jsx(
            PrimaryButton,
            {
              ...cssProp,
              backgroundColor: backgroundColors.styleProps,
            },
            'CSS Prop + Style Props'
          )}
        </div>
        <div>
          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps}>
            Styled Component + Style Props
          </StyledPrimaryButton>
        </div>
      </Flex>
      <div>
        <p>Legend:</p>
        <CreateStyles />
        <CSSProp />
        <StyledComponent />
        <StyleProps />
      </div>
      <p>
        Style Precedence: <strong>createStyles</strong> &gt; <strong>CSS Props</strong> &gt;
        <strong>Styled Component</strong> &gt; <strong>Style Props</strong>
      </p>
    </Flex>
```

--------------------------------

### Component Styling with New Tokens

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationFinal.mdx

Example of styling a primary button using the new Brand and System tokens from Canvas Kit. Ensure '@workday/canvas-kit-styling' and '@workday/canvas-tokens-web' are installed.

```javascript
import {createStyles} from '@workday/canvas-kit-styling';
import {brand, system} from '@workday/canvas-tokens-web';

const primaryButtonStyles = createStyles({
  padding: `${system.padding.sm} ${system.padding.xl}`,
  backgroundColor: brand.primary600,
  borderColor: brand.common.focus,
  borderRadius: system.shape.sm,
  color: system.color.fg.inverse,
  '&:hover': {
    backgroundColor: brand.primary800,
  },
});
```

--------------------------------

### Using System Tokens for Theming

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Demonstrates the preferred way to use system tokens for semantic styling, ensuring better theming support.

```javascript
backgroundColor: system.color.bg.default
```

--------------------------------

### Context Menu Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/menu/stories/Menu.mdx

Shows how to implement a context menu using the Menu component. Note the accessibility considerations for cross-platform support.

```jsx
import {Menu} from '@workday/canvas-kit-react/menu';

<Menu>
  <Menu.Target as={Button}>Right Click Me</Menu.Target>
  <Menu.Popper>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu.Popper>
</Menu>
```

--------------------------------

### Component Documentation MDX Structure

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Standard structure for component documentation MDX files, including imports, Meta tag, component title, installation, usage examples, and API documentation.

```md
<!--
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]';

<!--
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
Storybook navigation hierarchy. The title prop specifies where to show the
component in the hierarchy. The component prop is required to get the component
to show up at the end of that path.
-->
<Meta of={ComponentStories} />

# Canvas Kit [Component]

Short description of Component.

## Installation

```sh
yarn add @workday/canvas-kit-[preview-|labs-]react
```

<!--
The Usage section should be a list of examples of how to use the component.
Aside from having a Basic Example, there are no set rules on how many examples
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.

<!--
Every example should include an ExampleCodeBlock which renders the example
along with its associated code.
-->
<ExampleCodeBlock code={Basic} />

<!--
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

Description of Another Example.

<ExampleCodeBlock code={AnotherExample} />

### More Examples...

<!--
The SymbolDoc component will generate the entire Component API section using
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

<!--
The fileName prop is used to disambiguate between components which exist in
multiple Canvas Kit packages.
-->
<SymbolDoc name="[Component]" fileName="/[preview-|labs-]react/" />

<!--
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="./cypress/component/[Component].spec.tsx" name="[Component]" />
```

--------------------------------

### Basic createStyles Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/styling/stories/mdx/CreateStyles.mdx

Demonstrates a simple use case for createStyles to apply background and text color. The generated HTML and CSS are shown for clarity.

```html
<div class="css-m39zwu"></div>
```

```css
.css-m39zwu {
  background: var(--cnvs-sys-color-bg-default);
  color: var(--cnvs-sys-color-fg-inverse);
}
```

--------------------------------

### Interactive Grid Item Layout

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/layout/stories/Grid.mdx

Shows how to use Grid.Item for more granular control over cell placement within a Grid container. This example allows manipulation of row and column start positions.

```jsx
<Grid gridTemplateColumns="repeat(3, 1fr)" gridGap={space.s}>
  <Grid.Item gridRowStart={1} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={3}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={3}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={3} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={3} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={3} gridRowEnd={4}>
    <Box background={color.peach300} height="100%" />
  </Grid.Item>
</Grid>
```

--------------------------------

### Fetch Component Documentation Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/stories/mdx/MCPDocs.mdx

Opens a Canvas Kit component in Storybook and returns metadata, including a link to the full markdown documentation for that component. Use this when the user needs to see the Storybook page or an interactive preview.

```javascript
fetchComponentDocumentationExample({
  story: "buttons"
});
```

--------------------------------

### Delete Button Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/button/stories/button/Button.mdx

Example usage of the DeleteButton component.

```jsx
import { DeleteButton } from '@workday/canvas-kit-react/button';

// Example usage:
<DeleteButton>Delete</DeleteButton>
```

--------------------------------

### Install Divider Component

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/divider/stories/Divider.mdx

Install the Divider component using yarn.

```sh
yarn add @workday/canvas-kit-preview-react
```

--------------------------------

### Install Canvas Kit Fonts

Source: https://github.com/workday/canvas-kit/blob/master/modules/react-fonts/README.md

Install the @workday/canvas-kit-react-fonts module using yarn.

```sh
yarn add @workday/canvas-kit-react-fonts
```

--------------------------------

### App Level Theming Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/stories/mdx/Theming.mdx

Demonstrates correct application-level theming using `CanvasProvider` with theme properties, utilizing brand tokens for color definitions.

```tsx
import {CanvasProvider} from '@workday/canvas-kit-react/common';

import {base, brand} from '@workday/canvas-tokens-web';


<CanvasProvider theme={{canvas: {palette: {primary: {main: base.magenta600}}}}}>
  <App/>
</CanvasProvider>
```

--------------------------------

### Global Theming with CanvasProvider

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/upgrade-guides/14.0-UPGRADE-GUIDE.md

Example of setting up global theming by wrapping the application with `CanvasProvider` and importing base CSS variables.

```tsx
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';

<CanvasProvider>
  <App />
</CanvasProvider>
```

--------------------------------

### CSS Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/tokens/v4/color.md

Import CSS variables for system color tokens and apply them to elements in your stylesheets. This method requires importing the system variables file.

```css
// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.card {
  background-color: var(--cnvs-sys-color-bg-default);
}

```

--------------------------------

### 4 and 2 Column Tiled View Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Demonstrates a tiled layout with alternating 4 and 2 column configurations. Suitable for asymmetrical content arrangements.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const Tiled4and2Columns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={7} />
    <Grid gridColumnStart={7} gridColumnEnd={13} />
    <Grid gridColumnStart={1} gridColumnEnd={5} />
    <Grid gridColumnStart={5} gridColumnEnd={9} />
  </Grid>
);
```

--------------------------------

### Basic Action Bar Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/action-bar/stories/ActionBar.mdx

Demonstrates a basic ActionBar with a primary action and secondary actions.

```jsx
import {ActionBar} from '@workday/canvas-kit-react/action-bar';

<ActionBar>
  <ActionBar.List>
    <ActionBar.Item>
      Primary Action
    </ActionBar.Item>
    <ActionBar.Item>
      Secondary Action 1
    </ActionBar.Item>
    <ActionBar.Item>
      Secondary Action 2
    </ActionBar.Item>
  </ActionBar.List>
</ActionBar>
```

--------------------------------

### JavaScript/TypeScript Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/tokens/v4/color.md

Import and use system color tokens as JavaScript variables in your styles. Ensure CSS variables are also imported for the token values to be applied.

```typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  backgroundColor: `var(${system.color.bg.default})`,
};

```

--------------------------------

### Install Loading Sparkles

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/loading-sparkles/stories/LoadingSparkles.mdx

Install the Canvas Kit React package to use the LoadingSparkles component.

```sh
yarn add @workday/canvas-kit-react
```

--------------------------------

### Custom Column Width Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Shows how to define custom widths for columns. Apply this when specific column sizing is required.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const CustomColumnWidth = () => (
  <Grid minWidth={300} gridColumns={12} gridColumnStart={1} gridColumnEnd={4}>
    <Grid gridColumnStart={1} gridColumnEnd={4} />
  </Grid>
);
```

--------------------------------

### Card Component Migration Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Demonstrates a complete migration of a Card component's styles from old tokens to new system tokens, including spacing, colors, shape, depth, and typography.

```javascript
import { colors, space, borderRadius, type, depth } from '@workday/canvas-kit-react/tokens';
import { createStyles } from '@workday/canvas-kit-styling';

const cardStyles = createStyles({
  padding: space.l,
  backgroundColor: colors.frenchVanilla100,
  borderColor: colors.soap500,
  borderRadius: borderRadius.m,
  color: colors.blackPepper300,
  depth: 1,
  ...type.levels.body.medium,
});

const headerStyles = createStyles({
  color: colors.blackPepper500,
  marginBottom: space.s,
  ...type.levels.heading.small,
});

const errorTextStyles = createStyles({
  color: colors.cinnamon500,
  ...type.levels.subtext.large,
});
```

```javascript
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';

const cardStyles = createStyles({
  padding: system.space.x8,
  backgroundColor: system.color.bg.default,
  border: `solid ${px2rem(1)}`,
  borderColor: system.color.border.container,
  borderRadius: system.shape.x1,
  color: system.color.text.default,
  boxShadow: system.depth[1],
  ...system.type.body.medium,
});

const headerStyles = createStyles({
  color: system.color.text.default,
  marginBottom: system.space.x4,
  ...system.type.heading.small,
});

const errorTextStyles = createStyles({
  color: system.color.text.critical.default,
  ...system.type.subtext.large,
});
```

--------------------------------

### Install AI Ingress Button

Source: https://github.com/workday/canvas-kit/blob/master/modules/labs-react/ai-ingress-button/stories/AIIngressButton.mdx

Install the AI Ingress Button component using yarn.

```sh
yarn add @workday/canvas-kit-labs-react
```

--------------------------------

### 3 and 2 Column Tiled View Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Illustrates a tiled layout with alternating 3 and 2 column configurations. Useful for varied content presentation.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const Tiled2and3Columns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={7} />
    <Grid gridColumnStart={7} gridColumnEnd={13} />
    <Grid gridColumnStart={1} gridColumnEnd={5} />
    <Grid gridColumnStart={5} gridColumnEnd={9} />
    <Grid gridColumnStart={9} gridColumnEnd={13} />
  </Grid>
);
```

--------------------------------

### Form Input Migration: After (New Tokens)

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationFinal.mdx

Demonstrates migrating form input styles to the new system tokens, including focus, error, and disabled states.

```javascript
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const inputStyles = createStyles({
  padding: `${system.padding.sm} ${system.padding.md}`,
  backgroundColor: system.color.surface.default,
  borderColor: system.color.border.default,
  borderRadius: px2rem(2),
  color: system.color.fg.default,
  '&:focus': {
    borderColor: system.color.border.primary.default,
    backgroundColor: system.color.surface.default,
  },
  '&.error': {
    borderColor: system.color.border.critical.default,
    backgroundColor: system.color.surface.critical.default,
  },
  '&:disabled': {
    backgroundColor: system.color.surface.raised,
    color: system.color.fg.disabled,
  },
});
```

--------------------------------

### Basic InformationHighlight Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/information-highlight/stories/InformationHighlight.mdx

A standard implementation of the InformationHighlight component.

```jsx
import { InformationHighlight } from '@workday/canvas-kit-react/information-highlight';

<InformationHighlight>
  <InformationHighlight.Body>This is a basic information highlight.</InformationHighlight.Body>
</InformationHighlight>
```

--------------------------------

### Configuration Component Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/COMPOUND_COMPONENTS.mdx

Illustrates a configuration component for Tabs, where items are passed as a prop.

```tsx
<Tabs
  items={[
    {title: 'First Tab', content: 'First Tab Contents'},
    {title: 'Second Tab', content: 'Second Tab Contents'},
  ]}
/>
```

--------------------------------

### Brand CSS Token Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/theming.md

Example of brand CSS variables defining semantic color assignments.

```css
--cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
--cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
--cnvs-brand-error-base: var(--cnvs-base-palette-red-600);
--cnvs-brand-success-base: var(--cnvs-base-palette-green-600);
```

--------------------------------

### Card Codemod Non-Handling Examples

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx

Examples of Card usage that are NOT handled by the codemod, such as spread props or re-exported components.

```tsx
// NOT handled by the codemod

// Spread props
import {Card} from '@workday-canvas-kit-card'

const props = {
  header: 'Card Title'
}
<Card {...props}>Card Body</Card>

// Re-exporting
import {Card} from './Card' // where `Card` is a re-exported Canvas Kit `Card`
```

--------------------------------

### Full Example of RTL Theming with Canvas Provider

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/theming.md

Demonstrates how to set up an application with RTL direction using CanvasProvider and apply specific RTL styles to components.

```tsx
import React from 'react';

import {PrimaryButton} from '@workday/canvas-kit-react/button';
import {Card} from '@workday/canvas-kit-react/card';
import {CanvasProvider} from '@workday/canvas-kit-react/common';
import {FormField} from '@workday/canvas-kit-react/form-field';
import {TextInput} from '@workday/canvas-kit-react/text-input';
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
import {arrowRightSmallIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const rtlStyles = createStyles({
  paddingInlineStart: px2rem(64),
});

const rtlButtonStyles = createStyles({
  ':dir(rtl)': {
    svg: {
      transform: 'rotate(180deg)',
    },
  },
});

const App = () => {
  const [value, setValue] = React.useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };
  return (
    <Card>
      <Card.Heading>RTL Support</Card.Heading>
      <Card.Body cs={rtlStyles}>
        <FormField>
          <FormField.Label>Email</FormField.Label>
          <FormField.Field>
            <FormField.Input as={TextInput} onChange={handleChange} value={value} />
          </FormField.Field>
        </FormField>
        <PrimaryButton cs={rtlButtonStyles} iconPosition="end" icon={arrowRightSmallIcon}>
          RTL
        </PrimaryButton>
      </Card.Body>
    </Card>
  );
};

export const RTL = () => {
  return (
    <CanvasProvider dir="rtl">
      <App />
    </CanvasProvider>
  );
};
```

--------------------------------

### Base CSS Token Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/theming.md

Example of base CSS variables defining foundation palette and design values.

```css
--cnvs-base-palette-blue-600: oklch(0.5198 0.1782 256.11 / 1);
--cnvs-base-palette-magenta-600: oklch(0.534 0.183 344.19 / 1);
--cnvs-base-font-size-100: 1rem;
--cnvs-base-space-x4: calc(var(--cnvs-base-unit) * 4);
```

--------------------------------

### Complete Brand Theming Example (Magenta)

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/stories/mdx/Theming.mdx

Provides a complete CSS example for applying a magenta brand theme globally. It imports necessary token files and overrides primary brand colors.

```css
/* themes/magenta-theme.css */
@import '@workday/canvas-tokens-web/css/base/_variables.css';
@import '@workday/canvas-tokens-web/css/system/_variables.css';
@import '@workday/canvas-tokens-web/css/brand/_variables.css';

:root {
  /* Primary brand colors */
  --cnvs-brand-primary-600: var(--cnvs-base-palette-magenta-600);
  --cnvs-brand-primary-200: var(--cnvs-base-palette-magenta-200);
  --cnvs-brand-primary-50: var(--cnvs-base-palette-magenta-50);
  --cnvs-brand-primary-25: var(--cnvs-base-palette-magenta-25);
  --cnvs-brand-primary-700: var(--cnvs-base-palette-magenta-700);
  --cnvs-brand-primary-800: var(--cnvs-base-palette-magenta-800);
}
```

--------------------------------

### Horizontal Label Position (Start)

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/form-field/stories/FormField.mdx

Configure the label to appear at the start of the container by setting the `orientation` prop to `horizontalStart`.

```jsx
import {FormField} from '@workday/canvas-kit-react';

<FormField orientation="horizontalStart">
  <FormField.Label>Label</FormField.Label>
  <FormField.Input />
</FormField>
```

--------------------------------

### Cypress Command Chain Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/TESTING.mdx

Demonstrates Cypress's command chaining for interacting with DOM elements and asserting their state. Commands are enqueued and executed sequentially by the Cypress runtime.

```typescript
cy.get('body').contains('button', 'Delete Item').click();

cy.get('[data-testid="MyResult"]').should('contain', 'Success!');
```

--------------------------------

### v7 Modal Hook Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx

Example of the useMyModalModel hook in v7, showcasing the refactored createModelHook for simplified type management.

```ts
import {
  useCloseOnEscape,
  useEventMap,
  useFocusTrap,
  useInitialFocus,
  usePopupModel,
  useReturnFocus,
} from '@workday/canvas-kit-react';

const useMyModalModel = createModelHook({
  defaultConfig: {
    ...usePopupModel.defaultConfig,
    showOverlay: true,
  },
  requiredConfig: usePopupModel.requiredConfig,
  contextOverride: usePopupModel.Context, // needed to make sure this model uses the same context as the popup model, otherwise it will create a new one
})(config => {
  // `mergeConfig` takes care of the manual merging we were doing earlier
  const model = usePopupModel(
    usePopupModel.mergeConfig(config, {
      // hook up to a redux store
      onShow() {
        dispatch(setIsModalOpen(true));
      },
      onHide() {
        dispatch(setIsModalOpen(false));
      },
    })
  );

  useInitialFocus(model);
  useReturnFocus(model);
  useFocusTrap(model);
  useCloseOnEscape(model);

  const state = {
    ...model.state,
    showOverlay,
  };

  return {...model, state};
});

```

--------------------------------

### Basic CanvasProvider Setup

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/welcome.mdx

Wrap your application root with CanvasProvider to ensure proper style merging, especially when using Emotion. Ensure CSS variables are imported.

```tsx
import * as React from 'react';

import {CanvasProvider} from '@workday/canvas-kit-react/common';
// Ensure CSS variables are defined. You Can also do this at the root index.css
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/component/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';

export const App = () => {
  return (
    <CanvasProvider>
      <main>
        <p>Get Started With Canvas Kit</p>
      </main>
    </CanvasProvider>
  );
};

```

--------------------------------

### Migrate Space Tokens

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationMappingSystem.mdx

Example demonstrating the migration of space tokens from older versions to v4 system tokens for padding and margin properties.

```javascript
// Old
import {space} from '@workday/canvas-kit-react/tokens';
const styles = createStyles({
  padding: space.l,
  margin: space.m,
});

// New
import {system} from '@workday/canvas-tokens-web';
const styles = createStyles({
  padding: system.padding.xxl,
  margin: system.gap.lg,
});
```

--------------------------------

### v6 Modal Hook Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx

Example of the useMyModalModel hook in v6, demonstrating manual state and event map creation.

```tsx
import {
  BasePopupModelConfig,
  createEventMap,
  Model,
  popupEventMap,
  PopupEvents,
  PopupModelConfig,
  PopupState,
  ToModelConfig,
  useCloseOnEscape,
  useEventMap,
  useFocusTrap,
  useInitialFocus,
  usePopupModel,
  useReturnFocus,
} from '@workday/canvas-kit-react';

type MyModalState = PopupState & {
  showOverlay: boolean;
};

type MyModalEvents = PopupEvents;

const myModalEventMap = createEventMap<MyModalEvents>()({
  guards: {
    ...popupEventMap.guards,
  },
  callbacks: {
    ...popupEventMap.callbacks,
  },
});

type MyBaseModalConfig = BasePopupModelConfig & {
  showOverlay?: boolean;
};

type MyModalModel = Model<MyModalState, MyModalEvents>;

type MyConfig = MyBaseConfig &
  Partial<ToModelConfig<MyModalState, MyModalEvents, typeof myModalEventMap>>;

export const useMyModalModel = (config: MyConfig = {}): MyModalModel => {
  const [showOverlay] = React.useState(config.showOverlay ?? true);

  const model = usePopupModel({
    ...config,
    // hook up to a redux store
    onShow(...params) {
      dispatch(setIsModalOpen(true));
      config?.onShow?.(...params);
    },
    onHide(...params) {
      dispatch(setIsModalOpen(false));
      config?.onShow?.(...params);
    },
  });

  useInitialFocus(model);
  useReturnFocus(model);
  useFocusTrap(model);
  useCloseOnEscape(model);

  const state = {
    ...model.state,
    showOverlay,
  };

  const events = useEventMap(myEventMap, state, config, {
    ...model.events,
  });

  return {state, events};
};

```

--------------------------------

### Basic System Icon Implementation

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Demonstrates the basic usage of the System Icon component. Ensure you have installed the required packages.

```jsx
<ExampleCodeBlock code={SystemBasic} />
```

--------------------------------

### Install and Run Codemod with npx

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/style-props/stylePropsMigrationCodemod.mdx

Use npx to run the codemod without installing it globally. Replace `[path]` with the target directory.

```sh
npx @workday/canvas-kit-codemod v14.1 [path]
```

--------------------------------

### Install and Run General Codemod with Yarn

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md

If npx fails, install the codemod as a dev dependency, run it with yarn, and then remove the package.

```sh
yarn add @workday/canvas-kit-codemod --dev
yarn canvas-kit-codemod v15 [path]
yarn remove @workday/canvas-kit-codemod
```

--------------------------------

### Basic ListBox Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/collection/stories/mdx/Collection.mdx

Demonstrates the basic usage of ListBox with static items registered using useListItemRegister.

```jsx
<ExampleCodeBlock code={Basic} />
```