x-govuk / govuk-prototype-components

Use common components that are not yet part of the GOV.UK Design System.
https://x-govuk.github.io/govuk-prototype-components/
MIT License
3 stars 2 forks source link

Makes the code example an exported component #264

Open frankieroberto opened 4 days ago

frankieroberto commented 4 days ago

This changes the design of the code examples component from this:

Screenshot 2024-11-11 at 00 41 15

to this:

Screenshot 2024-11-11 at 00 42 01

ie - the tabs are at the bottom, and the preview remains on top. This more closely aligns with the styled used by the GOV.UK Design System, and means you can see the preview and the HTML or Nunjucks code at the same time.

The 'Example' component is also moved from being just within the documentation site itself, to being exported with the GOV.UK Prototype Components package itself.

This means there could be a documentation page for the Example component itself, with examples, inception-style...:

Screenshot 2024-11-11 at 00 44 16

Code all needs tidying up and making more robust, but this is a first stab to see if it looks like a good idea or not...

paulrobertlloyd commented 3 days ago

I’d be up for making this an ‘officially unofficial’ component. We already use it in a few places (Prototype components, Accessibility mistakes) and can see it being useful as a component you might want to include in reference documentation.

And I agree, keeping the more opinionated bits out of the component makes sense. Let it do one thing well. No reason why those functions couldn’t be exports though, and able to be unofficially imported into other projects as Nunjucks globals.