Storybook format standard
| Name | Storybook representation | Definition |
|---|---|---|
| Components | Story | Building blocks of a page, with varying degree of complexity |
| Variants | Sub-story | (TBD) |
| Modifiers | Knobs | (TBD) |
Components are building blocks of a page. Regardless of the degree of complexity, they should be demoed as stories at root level.
Components always have a default variant. Other variations of a component maybe arise based on differences in the following properties. Variants are shown as second level stories nested inside a component.
- size
- height
- image or no image
- child component
Both components and variants names should be in sentence case.
Example
Feature card block
Medium
Large
Never expose unnecessary props as knobs unless proposed in design spec. Examples of acceptable props for demoing as knobs are:
- In Card group,
Number of cards - In CTA,
CTA type (cta-type) - In Lightbox Media Viewer,
Open (open)
Examples of unacceptable props for demoing, but should be kept in documentation:
- In Lightbox Media Viewer,
Disable user-initiated close action (Call event.preventDefault() in dds-expressive-modal-beingclosed event) - In Carousel,
Number of cards per page (--dds--carousel-page-size CSS custom property)
Components (root level stories) should be in alphabetical order based on component names.
Variants (sub stories) should be ordered by complexity, with the simplest story first, and more complex story later.
Example
CTA
Text
Button
Card
Feature
All components should be rendered **16px from top and align to first column of Carbon grid.
- Always use realistic content, or usage guidance for placeholder text in demos. Avoid "lorem ipusm" or "link text" when possible.
- When repeated components are demoed, eg. in Card group, content in each component should not repeat.
- Use good, polished placeholder images that aligns to IBM Design Language photography or illustration standard.