Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Docs content] HTML Examples #284

Closed
54 tasks done
Tracked by #247
RobTobias123 opened this issue Jan 5, 2024 · 52 comments
Closed
54 tasks done
Tracked by #247

[Docs content] HTML Examples #284

RobTobias123 opened this issue Jan 5, 2024 · 52 comments
Assignees
@RobTobias123
Labels
question Further information is requested Status: Completed Nothing further to be done with this issue. Awaiting to be closed Type: Documentation Improvements or additions to documentation
Milestone
Internal tools

Comments

@RobTobias123
Copy link
Contributor

RobTobias123 commented Jan 5, 2024 •
edited
Loading

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 RobTobias123 mentioned this issue Jan 5, 2024
Closed
11 tasks
@RobTobias123 RobTobias123 self-assigned this Jan 5, 2024
@RobTobias123 RobTobias123 added this to the Internal tools milestone Jan 5, 2024
@RobTobias123
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123 RobTobias123 changed the title Example [Docs content] HTML Examples Jan 5, 2024
@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

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

@RobTobias123
Copy link
Contributor Author

ns-content https://playground.nucleus.design/?t=ns-content.html#project=b207f827-abf3-4710-b97f-3ed473c1ce95

@RobTobias123
Copy link
Contributor Author

ns-cta https://playground.nucleus.design/?t=ns-cta.html#project=96f13c45-fb64-4817-b33d-5a63689e563f

@RobTobias123
Copy link
Contributor Author

ns-datepicker https://playground.nucleus.design/?t=ns-datepicker.html#project=75dd9d01-2498-40a8-9027-0f8102493c9d

@RobTobias123
Copy link
Contributor Author

ns-download https://playground.nucleus.design/?t=ns-download.html#project=169ba0c6-11ea-4719-bec8-0420c7e3c46f

@RobTobias123
Copy link
Contributor Author

ns-editorial https://playground.nucleus.design/?t=ns-editorial.html#project=11b2a654-3597-4647-8e4d-f0eb32dd1548

@RobTobias123
Copy link
Contributor Author

ns-expander https://playground.nucleus.design/?t=ns-expander.html#project=04801a37-8d55-4ef1-861e-3d98faee0d30

@RobTobias123
Copy link
Contributor Author

ns-fieldset https://playground.nucleus.design/?t=ns-fieldset.html#project=3a20c63a-c260-4674-a39e-9478a0990bdf

@RobTobias123
Copy link
Contributor Author

ns-footer https://playground.nucleus.design/?t=ns-footer.html#project=cd941106-e04e-4df3-b1b5-507cf8600523

@RobTobias123
Copy link
Contributor Author

ns-form https://playground.nucleus.design/?t=ns-form.html#project=7aaebda5-fb22-4ca6-8db1-67b75b067694

@RobTobias123
Copy link
Contributor Author

ns-form-group https://playground.nucleus.design/?t=ns-form-group.html#project=7c518382-6f2c-4cbc-b331-963d8976d9f2

@RobTobias123 RobTobias123 added the Type: Documentation Improvements or additions to documentation label Jan 9, 2024
@RobTobias123
Copy link
Contributor Author

ns-header https://playground.nucleus.design/?t=ns-header.html#project=88aa3f7c-27a1-4976-a774-4b81ca044a33

@RobTobias123
Copy link
Contributor Author

ns-highlighter https://playground.nucleus.design/?t=ns-highlighter.html#project=c5a7e6ec-bf67-4e75-b326-962a9b38a7d6

@RobTobias123
Copy link
Contributor Author

ns-icon https://playground.nucleus.design/?t=ns-icon.html#project=9998c124-a6cc-4a56-b79b-70150f281c63

@RobTobias123
Copy link
Contributor Author

ns-illustration https://playground.nucleus.design/?t=ns-illustration.html#project=693a2bf0-1446-46c7-a6ea-c8998a2c3284

@RobTobias123
Copy link
Contributor Author

ns-image https://playground.nucleus.design/?t=ns-image.html#project=750d9bca-8aeb-4dba-a8e6-22e768ffbfc0

@RobTobias123
Copy link
Contributor Author

ns-inputter https://playground.nucleus.design/?t=ns-inputter.html#project=8f0fbe46-b715-4606-af4f-f209280d7782

@RobTobias123
Copy link
Contributor Author

ns-landmark https://playground.nucleus.design/?t=ns-landmark.html#project=3188bcde-c49c-42d1-9025-868538a6e43d

@RobTobias123
Copy link
Contributor Author

ns-live https://playground.nucleus.design/?t=ns-live.html#project=9035efd0-1237-423a-9946-df7931f74c27

@RobTobias123
Copy link
Contributor Author

ns-lockup https://playground.nucleus.design/?t=ns-lockup.html#project=bb6a78eb-f486-4461-9588-64df0d02d63f

@RobTobias123
Copy link
Contributor Author

ns-panel https://playground.nucleus.design/?t=ns-panel.html#project=42d27ef3-1501-4a8e-9cd1-e88df83113aa

@RobTobias123
Copy link
Contributor Author

ns-password https://playground.nucleus.design/?t=ns-password.html#project=c12de8da-35df-4ed8-9bcf-35641cfdf881

Question: I can only change certain elements of this component to use Hipsum (placeholder text), this results in a mix of both on each types.Is it better to retain all original real words like 'Password' for label, tip text etc in light of this or keep it mixed? (I prefer the former personally).

@RobTobias123 RobTobias123 added the question Further information is requested label Jan 10, 2024
@RobTobias123
Copy link
Contributor Author

ns-pill https://playground.nucleus.design/?t=ns-pill.html#project=007cad4e-ac25-4536-9295-7429c5bfbbb2

@RobTobias123
Copy link
Contributor Author

ns-price https://playground.nucleus.design/?t=ns-price.html#project=3077c09b-fb00-4cba-850e-de89de2d84a0

@RobTobias123
Copy link
Contributor Author

ns-product-card https://playground.nucleus.design/?t=ns-product-card.html#project=35a20061-0c1c-44e4-b502-7f7e24f8a1ab

@RobTobias123
Copy link
Contributor Author

ns-progress https://playground.nucleus.design/?t=ns-progress.html#project=3570b832-a1b2-4746-bc31-980fc8505280

Question: On the Form type, Buttons Back and Next are not part of the component and don't work outside of Storybook. Should we omit the buttons in this form.html example?

@RobTobias123
Copy link
Contributor Author

ns-selector https://playground.nucleus.design/?t=ns-selector.html#project=0f62bcc9-971c-483e-8eea-3072a38d8941

Question: All these are wrapped in ns-inputter with a label. Is that required for this purpose?

@RobTobias123
Copy link
Contributor Author

ns-skeleton https://playground.nucleus.design/?t=ns-skeleton.html#project=31361138-6d8e-4aa2-97ea-34967d169560

@RobTobias123
Copy link
Contributor Author

ns-skyline https://playground.nucleus.design/?t=ns-skyline.html#project=34b852cd-cfc0-45fd-a729-7e97e8b194ad

@RobTobias123
Copy link
Contributor Author

ns-standout https://playground.nucleus.design/?t=ns-standout.html#project=9205cc3f-0a60-42ba-a43c-76d3cbfc458b

@RobTobias123
Copy link
Contributor Author

ns-tab https://playground.nucleus.design/?t=ns-tab.html#project=ece1daa7-57a0-4b7d-be72-48948f8f3e31

@RobTobias123
Copy link
Contributor Author

ns-table https://playground.nucleus.design/?t=ns-table.html#project=72c4b479-5be3-487b-a0e1-7a9137b03381

@RobTobias123
Copy link
Contributor Author

ns-tabs https://playground.nucleus.design/?t=ns-tabs.html#project=e081761d-eabc-4281-aabf-9fd18329639b

@RobTobias123
Copy link
Contributor Author

ns-testimonial https://playground.nucleus.design/?t=ns-testimonial.html#project=fae5b9ce-f7d1-4a67-940a-78a965bc34d0

@RobTobias123
Copy link
Contributor Author

ns-timeline https://playground.nucleus.design/?t=ns-timeline.html#project=bb064d23-f691-4d79-96cb-b66bb21ececb

@RobTobias123
Copy link
Contributor Author

ns-timeline-event https://playground.nucleus.design/?t=ns-timeline-event.html#project=a8b8cf57-ee03-427b-a541-297fc0f4d967

@RobTobias123
Copy link
Contributor Author

ns-video https://playground.nucleus.design/?t=ns-video.html#project=e1d83b31-dc59-44b4-9cac-01c47e9f3547

@RobTobias123
Copy link
Contributor Author

nsx-address-selector https://playground.nucleus.design/?t=nsx-address-selector.html#project=3f9a1141-3176-44d5-88c1-c9fc3d9af618

@RobTobias123
Copy link
Contributor Author

RobTobias123 commented Jan 10, 2024 •
edited
Loading

nsx-header https://playground.nucleus.design/?t=nsx-header.html#project=94a04055-78b1-451c-b27d-ca363843e054

@RobTobias123
Copy link
Contributor Author

nsx-footer https://playground.nucleus.design/?t=nsx-footer.html#project=e4b960b5-7c4e-4717-bf4b-369eb0ea0fb4

@RobTobias123
Copy link
Contributor Author

nsx-marketing-consent https://playground.nucleus.design/?t=nsx-marketing-consent.html#project=d5cbbd44-cac4-4436-bc04-860582a3e7d4

@RobTobias123
Copy link
Contributor Author

nsx-product-card-overview https://playground.nucleus.design/?t=nsx-product-card-overview.html#project=e1aecfc2-f723-4dd3-90b8-c4ca5305de5a

@RobTobias123 RobTobias123 added the Status: Completed Nothing further to be done with this issue. Awaiting to be closed label Jan 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobTobias123 RobTobias123

Labels
question Further information is requested Status: Completed Nothing further to be done with this issue. Awaiting to be closed Type: Documentation Improvements or additions to documentation
Projects
None yet
Milestone
Internal tools
Development

No branches or pull requests
1 participant
@RobTobias123