Storybook format standard

1. Stories, sub-stories, & knobs

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

Example

Feature card block
|-- Medium
|-- Large

Never expose unnecessary props as knobs unless proposed in design spec. Example 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)

2. Sequence

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

3. Rendering in viewport

UI components should be rendered 16px from top and 16px from left of viewport top left corner.

Layout components should be rendered on the IBM 2x grid, correctly to design intent.

4. Realistic content

• Always use realistic content in the stories demoing the component. Avoid "lorem ipusm" or "link text" that should never appear on IBM.com production website.
• 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.