# Canvas Kit Documentation Package

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

## Installation

```sh
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:

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

<Specifications file="./cypress/component/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

```tsx
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

```tsx
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.