feat(Stories): Add guidance for component and token usage

Royal-Navy / design-system

Build web applications that meet the Royal Navy service standards

https://storybook.design-system.navy.digital.mod.uk

Apache License 2.0

103 stars 32 forks source link

feat(Stories): Add guidance for component and token usage #3746

Closed markhigham closed 4 weeks ago

markhigham commented 1 month ago

Related issue

Closes #3750

Overview

Add guidance for component and token usage to the storybook. Token examples are based on the actual design tokens.

Reason

We wanted to reduce the cost / overhead of maintaining a separate DS website and the storybook. It was important to generate the tokens docs from the actual code

Work carried out

[x] Enable mdx for storybook
[x] Reorganise existing stories into Components folder
[x] Create new tokens stories
[x] Reorganise forms stories and import guidance from docs site
[x] Create overall guidance from existing site content.
[x] Fix broken e2e tests which were dependent on storybook paths

netlify[bot] commented 1 month ago

Deploy Preview for storybook-navy-digital-mod-uk ready!

Name	Link
Latest commit	45b90fc81f4257de7692b6da5a3aa503d2a6bded
Latest deploy log	https://app.netlify.com/sites/storybook-navy-digital-mod-uk/deploys/6620d0d55aa1d6000856bc60
Deploy Preview	https://deploy-preview-3746--storybook-navy-digital-mod-uk.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

m7kvqbe1 commented 4 weeks ago

Can we change these commit message types from feat and fix to docs where they are Storybook related.

m7kvqbe1 commented 4 weeks ago

The font used in the SVG graphics appears to be incorrect - it should be using the one from the fonts package.

markhigham commented 4 weeks ago

The font used in the SVG graphics appears to be incorrect - it should be using the one from the fonts package.

The Lato font stack isn't readily available in the mdx files. I used the system stack as an interim measure. We can take a look at how to make this consistent in a subsequent release.

It's better than the current site which is times new roman