[Epic] - Docs backlog

[andij]

### Bugs
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/601
- [x] [Bug] `ns-inputter` page - include space between words in tabs #474
- [x] [Bug] Sidebar - typography letterspacing #475
- [x] [Bug] Specification - enable deep-linking for `<h4>` headings
- [x] [Bug] Page navigation - first item selected on page-load #442
- [x] [Bug] Example - iframe height in tabs #488
- [x] [Bug} Example view - Viewport / Scale width mapping #553

### Priority high
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/479
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/478
- [x] Examples - attend to the radius of the preview and code snippet https://github.com/centrica-engineering/nucleus-docs/issues/483
- [x] Code snippet - Show 'copy to clipboard' label https://github.com/centrica-engineering/nucleus-docs/issues/483
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/487
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/507
- [x] Content - remove unwanted ` ` #498
- [x] Content - change all instances of 'variant' with 'type' #502
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/476
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/481
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/506
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/363
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/465
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/493
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/521
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/518
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/364

### Priority low
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/424
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/372
- [ ] Move `ns-test.mdx` to internal and preview only
- [ ] `ns-header` and `nsx-header` are difficult to distinguish between (search)
- [ ] Layout - increase margin-top of content-panel and match scroll-margin
- [ ] Configure button - location, position, hierarchy and colour
- [ ] Masthead - Stable - Alpha - Beta (badges) - include `@release` into JSDocs [#3366](https://github.com/ConnectedHomes/nucleus/pull/3366)
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/467
- [ ] Configurator - Light mode / Dark mode
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/409
- [ ] Components - ensure Specification notes heading is present
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/309
- [ ] Content - Page types review
- [ ] Content - Patterns review
- [ ] Example viewer - Viewport and Scale improvements
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/253

### No priority
- [ ] Assets - don't show duplicate `solid` icons
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/384
- [ ] Include accessibility checks on the build step for HTML assets
- [ ] https://github.com/centrica-engineering/nucleus-docs/issues/461
- [ ] [Bug] Content - deep-link not matching heading due to Example iframe (chrome more than firefox)
- [ ] Examples - Deep linking tabs with query string
- [ ] Configurator - drag-handle between form and preview
- [ ] Configurator - position of Run / Reset buttons
- [ ] Configurator - Accessibility include colour blindness filters
- [ ] Consider different icons - to include more fun (e.g. rocket for Do's)
- [ ] Homepage - Latest release notes (automated version)
- [ ] Automate a release notes page, and link it from the latest release homepage card
- [ ] Configurator - component masthead svg
- [x] Mobile responsive behaviour
- [ ] Footer fun overun [Discovery #383]
- [ ] Assets - categorise icons - functional, decorative (solid, outline)
- [ ] Purpose - create a markdown component to use the `purpose` style
- [ ] Typography - move examples from Tokens typography tab to Typography page
- [ ] Configurator - add spec table for the component
- [ ] Update image recommanded file types and sizes
- [ ] Add a validation page in Guidelines with available validations and link them in components page appropriately
- [ ] Improve the AI ✨ Summarise it! - the format of the message and Do / Don't hallucination
- [ ] Idea - Add description to badge.json and include a 'standout' to the component pages in a prominent position.

[andij]

Observations and ideas

• [ ] Timeline Event - 'additional content' should be 'Anonymous slot'
• [ ] Change aspect ratios that are 4:3 to 4 / 3
• [ ] Remove the unnecessary <span> elements from slot="heading" in Landmark, Lockup in the Example HTML assets.
• [ ] Remove references to Sketch and Figma, where it can be generalised
• [ ] ns-selector the Heading is missing from the Guidance for 'with image'
• [ ] ns-selector interchangeable use of 'decoration' and 'illustration'
• [ ] Consistent use of standard when displaying Examples E.g: ns-cta - Standard (Direct) / Text ns-cta - Direct (standard) / Text
• [ ] Remove the reference to Highlighter in ns-alert, as this is the Standard type
• [ ] Further documentation on ns-skeleton and how slot influences it, take note of the Specification as it appears to misrepresent the type
• [ ] Use title case across the site - noted in the Guidance tables
• [ ] Consistent use of backticks around component names - ns-table or ns-table or <ns-table> Consider how the components that are links compliment this
  • [ ] Should we remove the type from Specification if it is: type - Property - type - Type - string - Default - standard
• [ ] Write any missing Do and Don't - nsx-address-selector
• [ ] Remove all hyperlinks from Examples to britishgas.co.uk and /this/path/file.name
• [x] All instances of JPEG replaced with WebP
• [ ] Datepicker masked Example missing
• [ ] Marketing consent is missing Guidance Image and Key table
• [ ] Something is up with the Permitted tags here: /components/ns-article#specification-slots
• [ ] Include 'open in new tab' for Example
• [ ] Rewrite the Guidance for ns-calendar

Guidance Image and Key

The remaining component pages could benefit from attention to the Guidance Image and Key:

Adjustments

• [ ] Alert
  • Consider removing 'A' Icon and 'D' Accent. These are related to the state and not configurable.
• [ ] Calendar
  • The guidance is rather lacklustre
• [ ] Card
  • Support, image is showing three cards. It can show just one as there are now three examples.
• [ ] Pill
  • Remove 'C' Caveat. Describe it in the Anonymous slot (same as ns-landmark, ns-card)
• [ ] Skyline
  • Update to describe ns-skyline and not ns-expander - (like ns-accordion)
• [ ] Tab
  • There is no Content Image and Key here as (it's in ns-tabs)
  • Contains guidance related to `ns-tab'
  • Update to describe ns-timeline and not ns-timeline-event
• [ ] Appointment Picker
  • Suggest to remove the Image and Key
• [ ] Article
  • Contains information which is relevant for ns-content
• [ ] Content
  • Does not contain any Guidance. (It's in ns-article)
• [ ] Highlighter
  • Consider removing 'A' Icon and 'D' Accent. These are related to the state and not

Rewrite the following

• [ ] Download - simple
• [ ] Panel - shall we remove the Offset? And introduce the Schemes?
• [ ] Product Card - this is somewhat complicated and could be simplified by showcasing additional Examples
• [ ] Selector - this is somewhat complicated and could be simplified by showcasing additional Examples
• [ ] Progress - a bit complex
• [ ] Table - simple
• [ ] Testimonial - simple

Reconfigure

These are components that consume other components. The Guidance and Image Key and could be reconfigured.

• [ ] Expander
  • Accordion
  • Skyline
  • Selector
  • Product Card
• [ ] Tabs
  • Tab
• [ ] Timeline
  • Timeline Event
• [ ] Product Card Overview
  • This one is a bit unique, suggest removing the screenshots