Canvas Kit Documentation Package

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

Installation

yarn add @workday/canvas-kit-docs

Specifications

Usage

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="Tooltip.spec.tsx" name="Tooltip">

Component Props

Required

file: string

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

Optional

name: string

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.

StorybookURL

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/

Usage

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.

GithubBranch

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.

Usage

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.