Storybook content organisation

[alexcanning]

Proposing a couple of improvements to the way that content is organised on Storybook so that:

• We provide better way-finding for users
• Content is organised according to the way components are structured

Better way-finding

Currently users drop into https://legal-and-general-canopy.netlify.app/?path=/story/directives--feature-toggle - not an ideal first experience! Feels like it needs some sort of front page that helps users to find the right resources. There's some nice articles on getting started and contributing on GitHub, and we've got some introductory design principles on DSM - how might we surface them here so users have a better idea of what to do next?

Content organisation

The Canopy design system structure is:

• Foundation (e.g. typography, colours, grid) - the basic building blocks
• Components (e.g. icons, buttons, form elements) - analogous to individual HTML elements
• Patterns (e.g. product page hero, bank details, date) - arrangements of elements to be used in specific scenarios
• Templates (e.g. product page, form journey) N/A for Storybook

At the moment, it looks like Foundation elements are organised at the top level and Components and Patterns are mixed together. We should keep the same structure as we look to introduce more patterns over 2021; we regularly debate what constitutes a component or pattern, and it would help to keep them separate.

I've also noticed that components aren't organised in alphabetical order in the Form folder. We should also try to align the language we use on Storybook and DSM.

[aaronBery]

@alexcanning the new card navigation pattern has created a need for us to be able to document in storybook how card elements behave in the grid e.g. things like all cards on a row should be the same height. This feels like it falls into the category of a patterns which we could house in storybook. You also highlight the concept of a template and specifically a product page. If we want to promote common template patterns what is the downside of having these in Storybook too? (I noticed you had it marked as non applicable).

[aaronBery]

To summarise discussions that have taken place outside of this thread

• We are keen to adopt this proposed structure
• We are not sure from a technical perspective how best to treat patterns....one option is that they exist as an example of an arrangement components but the other option is that they are exportable as a group of wrapped components
• Some existing components would technically fall under the category of pattern in the new structure so would need to be moved into patterns
• We are keen to adopt an iterative approach and create the card navigation as the first pattern with the other areas of the new structure be added and refined over time