[Docs content] HTML Examples

[RobTobias123]

Outcome

A refined set of HTML examples for each component type and state as required, to pull into the docs where the legacy version used screenshots. Enables users to understand, view or copy the snippet for use in a prototype from one resource, without going to Storybook for a more efficient workflow.

Scope

• Obtain all snippets currently used in storybook and save a local set for modifying
• Ascertain the consistent use of placeholder text vs BG example text
• Clean up HTML spacing indentation and formatting, removing unnecessary attributes eg. because default.
• Apply agreed naming convention (hyphens not underscores) (standard + type + state etc)

Update HTML example files (standard + type + state etc) and check visuals in playground for each component:

• ns-accordion
• ns-alert
• ns-appointment-picker
• ns-article
• ns-content
• ns-calendar
• ns-card
• ns-caveat
• ns-column
• ns-content
• ns-cta
• ns-datepicker
• ns-download
• ns-editorial
• ns-expander
• ns-fieldset
• ns-footer
• ns-form
• ns-form-group
• ns-header
• ns-highlighter
• ns-icon
• ns-illustration
• ns-image
• ns-inputter
• ns-landmark
• ns-live
• ns-lockup
• ns-panel
• ns-password <-- QUESTION ON THIS: [Docs content] HTML Examples #284 (comment)
• ns-pill
• ns-price
• ns-product-card
• ns-progress <-- QUESTION ON THIS: [Docs content] HTML Examples #284 (comment)
• ns-selector <-- QUESTION ON THIS: [Docs content] HTML Examples #284 (comment)
• ns-skeleton
• ns-skyline
• ns-standout
• ns-tab
• ns-table
• ns-tabs
• ns-testimonial
• ns-timeline
• ns-timeline-event
• ns-video
• nsx-address-selector
• nsx-footer
• nsx-header
• nsx-markting-consent
• nsx-product-card-overview

[RobTobias123]

Following discussions and initial trials, we decided the following:

• All component examples should use 'Hipster Ipsum' placeholder text, unless it is an intrinsic part of that component (eg. 'select a date' on the ns-datepicker). This means that the text will not imply any content and that any description can be made in the docs itself. It is also more scalable should we use for another brand, meaning less maintenance requirements in the future.
• All experiences will include the relative example content as specific to that brand. eg. ns-header component will show placeholder text, whereas nsx-header (the British Gas experience) would should BG examples of links/content etc. Because experiences may be particular to each brand we feel this is the right approach for now.

[RobTobias123]

LInk to the playground index (WIP) displaying a page of examples for visual reference of each component/experience using the modified HTML. (Please do not edit yet).

https://playground.nucleus.design/?t=index.html#project=e20d2a4b-b286-40f0-a297-fade0aee3f16

[RobTobias123]

ns-accordion https://playground.nucleus.design/?t=ns-accordion.html#project=4825bb77-bbef-48cc-a13f-1ae480f4ff59

[RobTobias123]

ns-alert https://playground.nucleus.design/?t=ns-alert.html#project=76c44d2b-fa26-41a1-8e5c-31175c37def5

[RobTobias123]

ns-appointment-picker https://playground.nucleus.design/?t=ns-appointment-picker.html#project=7fdd8944-3bf3-4b6d-b06f-592078314869

[RobTobias123]

ns-content https://playground.nucleus.design/?t=ns-content.html#project=6c364764-3479-43f3-9f2b-e1cc4f6dbafa

[RobTobias123]

ns-article https://playground.nucleus.design/?t=ns-article.html#project=264556f1-7c42-410e-ba77-e8e6a6599e71

[RobTobias123]

ns-calendar https://playground.nucleus.design/?t=ns-calendar.html#project=dcfeb7d6-9619-407d-9f67-5cbd0a6fca7c

[RobTobias123]

ns-card https://playground.nucleus.design/?t=ns-card.html#project=b3cf15c1-5fea-4f12-9629-ce9e9aff8f85

[RobTobias123]

ns-caveat https://playground.nucleus.design/?t=ns-caveat.html#project=b44a2a1e-f9fd-44d7-a10b-e2876b4d817c

[RobTobias123]

ns-column https://playground.nucleus.design/?t=ns-column.html#project=710ef4c9-035a-4138-bba5-c97cb8b21698