Skip to content

Storybook format standard

Jump to bottom
Shixie edited this page Jun 4, 2021 · 25 revisions

1. Stories, sub-stories, & knobs

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)

Do not use sub-tabs under knobs

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.

viewport-ui-component.png

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

viewport-layout-component.png

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.
Clone this wiki locally