Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update docs for Checkbox #6628

Closed
7 tasks
joshblack opened this issue Aug 6, 2020 · 0 comments · Fixed by #6698
Closed
7 tasks

Update docs for Checkbox #6628

joshblack opened this issue Aug 6, 2020 · 0 comments · Fixed by #6698

Comments

@joshblack
Copy link
Contributor

This issue is to update the stories that we have for the component in our storybook. This work includes the following:

  • Update each story in <Component>-story.js to Component Story Format
    • There is an optional codemod that you can use from storybook:
    • npx -p @storybook/cli@next sb migrate storiesof-to-csf --glob='packages/react/src/<Component>/<Component>-story.js'
  • Update stories in the existing file, including:
    • Create a default example named after the component without any knobs (should match the first example in the overview section)
    • Clean-up or streamline any stories that seem to need it
    • Create a Playground story that uses knobs for the component
      • For any other components that use knobs, add a <Component> Playground story
  • Create an <Component>.mdx file and fill it out according to the template below
    • You should import the mdx file in your story and pass it as an option to the story config (see example below)
    • You can refer to stories by their story id from <Component>-story.js in <Component>.mdx
  • Document any usage mishaps for v11
Template
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';

# <Component name>

## Overview
<!--
This should include the default use-case(s) for a component, at most 2.
This should be the most common way the component is used.
It should summarize what this common is for and provide snippets for how
to accomplish these common use-cases
-->

<Preview>
  <Story id="story-id" />
</Preview>

## [Use case, for example, Skeleton state or Sorting]
<!--
Each use-case of this component becomes its own section. For example,
if the component had a skeleton then you would name this section Skeleton.

If the component had a specific piece of functionality or behavior, like
how you can sort with a Data Table, then Sorting would be the name of this
section.

This section should include an explainer for the use-case and when to use it,
along with a code snippet that someone could bring into their project.
-->

## Component API

<Props />

### [Component name] [prop name]
<!--
Used to clarify prop usage, provide additional info or snippets
-->


## References
<!--
A place for references, links, or a way clarify points made earlier
in the documentation.
-->

## Feedback

Help us improve this component by providing feedback through, asking questions on Slack, or
updating this file on GitHub
[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/<Component>/<Component>.mdx).
Configure story to use MDX page
import mdx from './Component.mdx';

export default {
  title: 'Component',
  component: Component,
  parameters: {
    docs: {
      page: mdx,
    },
  },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants