[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
- [ ] [Review Example tabs naming convention](https://github.com/centrica-engineering/nucleus-docs/issues/718)
- [ ] 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

[RobTobias123]

Idea based on feedback receieved - 'Jargon-buster'

A page to be added to the Docs - probably under 'Guidelines', as a reference type page that is just an Alphabetical list/glossary of terms and acronyms we use so they can be easily understood. Possibly searchable or indexed/anchored.

Feedback that sparked the idea (MS Forms capture from Docs):

No.2 is regrading the new users of Nucleus that we must make it easy for to aid adoption.

3. We use terms we're familiar with but to the new user?
4. Example of how 'Anonymouse Slot' was misunderstood.