Skip to content
This repository was archived by the owner on Jan 23, 2025. It is now read-only.
This repository was archived by the owner on Jan 23, 2025. It is now read-only.

Standard Template for Component Stories #29

@nathanstilwell

Description

@nathanstilwell

Our storybook efforts have been very adhoc up until now. In the prototyping work that's been done so far some patterns have emerged. At a minimum I think there should be two sub-views to each component story.

Example

The Example view should document a components features (props, states, interactions, etc). Here are some example examples 😄 ,


Screen Shot 2020-04-21 at 13 43 16


Screen Shot 2020-04-21 at 13 43 27

Here I took the simple approach of a basic description and demonstrating the possible states for each prop.

Questions

  • Should we have example usage for a component? Such as displaying it in context?
  • Should we provide guidelines for when to use the component and when to use a different component?
  • What else are we missing?

Demo

The Demo view should provide an interactive place to allow contributors, implementers, and designers to experiment with different states of a component. This could be to test multiple props at once, determine capabilities to see if this component is well suited to a task, or to determine correctness of a component.

storybook-demo-view

Questions

  • I rolled these by hand in prototyping, is there a way to automate creating these?
  • Would this be useful in automated testing somehow?
  • I used the Knobs plugin here but are there better tools out there?
  • What else?

Others?

Are there other standard views that would be essential to have in our stories? I thought using something like the README plugin would be quite nice for providing more technical documentation about prop types and usage. I'm sure there's more that I'm missing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    📝 docsContributes to documentation or Storybook

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions