A package of documentation components for use in Storybook and the Canvas Kit Documentation site.

yarn add @workday/canvas-kit-docs

The Specifications component is meant to be used in MDX files by file name and top-level describe name:

import {Specifications} from '@workday/canvas-kit-docs';

<Specifications file="./cypress/component/Tooltip.spec.tsx" name="Tooltip">

The file path after cypress/integrations in the Canvas Kit repository. Example: 'Tooltip.spec.ts'

The string contents of the top-level 'describe' block of the specification. Most only have a single describe block. Omitting will grab the first one.

Default: The first defined describe block.

The StorybookURL is used for the base URL of the storybook. The default is / which works for local Storybook development and Storybook builds. This URL is used for the Story link in the specification table. To render the Specification table outside a Storybook, add a provider context with the value of https://workday.github.io/canvas-kit/

import {StorybookURL} from '@workday/canvas-kit-docs';

<StorybookURL.Provider value="https://workday.github.io/canvas-kit/">
  <Specifications file="Tooltip.spec.ts" />
</StorybookURL.Provider>;

This provider should be defined high up in the React tree and not directly in MDX files.

The GithubBranch is used for links to source code files in documentation. The default is master which works for mainline development, but could also point to a specific branch or tag.

import {StorybookURL} from '@workday/canvas-kit-docs';

<GithubBranch.Provider value="v4.5.0">
  <Specifications file="Tooltip.spec.ts" />
</GithubBranch.Provider>;

This provider should be defined high up in the React tree and not directly in MDX files.