[QOLOE-523] Reorganise the components in the Storybook

[ienxckl]

This is just a change to reorganise how the components are structured in the storybook. Please give feedback on whether these changes seem appropriate, or if you have any suggestions.

List of changes I've made:

• Add numberings to the categories so they can be ordered manually, rather than putting '!' at the start of categories that should go near the top
• Move Button component out of the 'Forms' folder, as typically they are not primarily associated with their use in forms
• Move Breadcrumbs, Footer, Header, and Side nav from 'Core' to 'Layout' category, as they are the main components comprising the way pages are laid out - the other components will generally go into the body of the page between these layout components
• Keep Head under the 'Core' category, as it is metadata that should be included in every page
  • Unsure if maybe 'Core' and 'Layout' could maybe be grouped into a single 'Core and Layout' category as they are elements that generally will all be present on almost any page, or if these two groupings are too logically distinct to combine them
• Move Typography out of 'Components' and into a 'Style' category, since it isn't a component but is simply about what fonts are used
• Keep Main Integration Template under the 'Integration' category, since I'm not sure what its use is or how it could otherwise be grouped
• Rename the 'Layout' category to 'Wrappers', as the term 'layout' is better used for other components, and this is more descriptive of the components under this category

Before and after:

[elvishu]

@ienxckl looks good to me.
@kat-yarrr, could you share your thoughts on re-categorisation of the existing components on Storybook?
https://ssq-qol.atlassian.net/browse/QOLOE-522

[kat-yarrr]

@ienxckl looks good to me. @kat-yarrr, could you share your thoughts on re-categorisation of the existing components on Storybook? https://ssq-qol.atlassian.net/browse/QOLOE-522

@ienxckl This is a fantastic improvement!

I looked at the DS docs site and other storybooks like screen NSW, GOV UK, AirBnB, Nasa.

For cohesion with other QGDS resources I have a few (minor) suggestions:

1. Rename "core" to "core styles". Move typography here (later icons, colour, crest/ logo etc will go here too)
2. I really like how you separated the header and footer, side nav and breadcrumbs into the layout section as these components form the shell, and won't be referenced as frequently. They are in the component section on the QGDS docs site, but do make a lot of sense being here. I would just suggest re-ordering to Header, Footer, Breadcrumbs, Side-nav
3. Wrappers - I am not sure what this is? How important is it? If it's important than it might be an idea to move it up the list otherwise it can be easily missed under all the components.

[ienxckl]

@kat-yarrr Thank you so much for the feedback! I'm not exactly sure what the purpose of the wrappers is so I tried to play it quite safe with them here and leave them mostly as they are - maybe @duttonw can give some context for them?