WIP: Reorganize Storybook Categories

[himerus]

NOTE: The list below under Proposal is a work in progress.

Description

We have previously agreed to utilize a more meaningful naming and organization structure for our Storybook stories.

While we still use Atomic Design principles during development, this doesn't necessarily play well with all audiences of a design system to have the components organized under categories that define methodology versus categorization.

Resources

uikit.wfp.org/docs should be used as a shining example of organization and presentation of a Storybook instance.

What we had

• Documentation
• Protons
• Atoms
• Molecules
• Organisms
• Templates
• Pages

Proposal

• Getting Started
  • Welcome
• Documentation
  • Outline
    • Tooling
    • Contributing
  • Code Examples
• Branding
  • Design Tokens
    • Colors
    • Spacing
    • Typefaces
  • Graphics
    • Logo
• Navigation
  • Links
  • Buttons
  • etc.
• Content
  • Card

[damontgomery]

This is what we are using. Seems OK.

• Getting Started: Documentation
• Demos: Demo pages / parts of pages
• Blocks: Things that fit in a box, like a card, hero, infographic
• Content: Things that don't fit in a box, like headings, buttons, links
• Navigation: Menus, pagers
• Design Tokens: Colors, icons, fonts
• Layout: Grids, columns
• Storybook: Swatches, etc

These are ordered mostly by frequency of use, but documentation is at the top.

We use demo pages a lot to see how the components work together and those are useful for a wide audience. Then, most people care about placing larger blocks in pages.

The rest in 🤷 order.

As a developer, I'm working most of the time in the Demos, Blocks, and Content sections and I can remember the distinction between the three.

I could see an argument for putting Navigation in Blocks.

TBH, the search feature is more helpful in many situations. Getting a hierarchy / categorization that is intuitive is probably impossible. This one so far seems OK, because it has some, but not too many groupings.

But... I made the groupings, so 🤷