From 40f58b78567168591ea5ac1185f589deca69afad Mon Sep 17 00:00:00 2001 From: Romain Veya <111903046+veyaromain@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:02:32 +0100 Subject: [PATCH] feat(styles): implemented new ordered list (#3755) --- .changeset/metal-rivers-look.md | 5 +++ packages/components/cypress/e2e/list.cy.ts | 7 +++ .../cypress/e2e/components/list.cy.ts | 13 ++++++ .../snapshots/components/list.snapshot.ts | 6 +-- .../components/list/list.snapshot.stories.ts | 44 +++++++++++++++++++ packages/styles/src/elements/_index.scss | 1 + packages/styles/src/elements/list.scss | 28 ++++++++++++ 7 files changed, 101 insertions(+), 3 deletions(-) create mode 100644 .changeset/metal-rivers-look.md create mode 100644 packages/documentation/cypress/e2e/components/list.cy.ts create mode 100644 packages/styles/src/elements/list.scss diff --git a/.changeset/metal-rivers-look.md b/.changeset/metal-rivers-look.md new file mode 100644 index 0000000000..fb7f05f3c6 --- /dev/null +++ b/.changeset/metal-rivers-look.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Added custom styles for the ordered lists. diff --git a/packages/components/cypress/e2e/list.cy.ts b/packages/components/cypress/e2e/list.cy.ts index 0bf19446f9..6078019acb 100644 --- a/packages/components/cypress/e2e/list.cy.ts +++ b/packages/components/cypress/e2e/list.cy.ts @@ -58,3 +58,10 @@ describe('PostList Component', { baseUrl: null, includeShadowDom: false }, () => }); }); }); + +describe('Accessibility', () => { + it('Has no detectable a11y violations on load for all variants', () => { + cy.getSnapshots('post-list'); + cy.checkA11y('#root-inner'); + }); +}); diff --git a/packages/documentation/cypress/e2e/components/list.cy.ts b/packages/documentation/cypress/e2e/components/list.cy.ts new file mode 100644 index 0000000000..af988242ea --- /dev/null +++ b/packages/documentation/cypress/e2e/components/list.cy.ts @@ -0,0 +1,13 @@ +describe('List', () => { + describe('Accessibility', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=snapshots--list'); + cy.get('ol', { timeout: 30000 }).should('be.visible'); + cy.injectAxe(); + }); + + it('Has no detectable a11y violations on load for all variants', () => { + cy.checkA11y('#root-inner'); + }); + }); +}); diff --git a/packages/documentation/cypress/snapshots/components/list.snapshot.ts b/packages/documentation/cypress/snapshots/components/list.snapshot.ts index 7417fec9e3..fa0320ecdb 100644 --- a/packages/documentation/cypress/snapshots/components/list.snapshot.ts +++ b/packages/documentation/cypress/snapshots/components/list.snapshot.ts @@ -1,7 +1,7 @@ describe('List', () => { it('default', () => { - cy.visit('/iframe.html?id=snapshots--post-list'); - cy.get('list-example', { timeout: 30000 }).should('be.visible'); - cy.percySnapshot('List', { widths: [1440] }); + cy.visit('/iframe.html?id=snapshots--list'); + cy.get('ol', { timeout: 30000 }).should('be.visible'); + cy.percySnapshot('Lists', { widths: [1440] }); }); }); diff --git a/packages/documentation/src/stories/components/list/list.snapshot.stories.ts b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts index cd346db626..139a1c4123 100644 --- a/packages/documentation/src/stories/components/list/list.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts @@ -50,3 +50,47 @@ export const PostList: Story = { }, ], }; + +export const List: Story = { + render: () => { + return html` +
+ ${['bg-white', 'bg-dark'].map( + bg => html` +
+
    +
  1. This is an ordered list.
    2. +
  2. It appears in its default style.
    3. +
  3. + Therefore it should be rendered with sequential numbers at the beginning of each + list item. +
    4. +
  4. + Nested list: +
      +
    1. This is a nested list
      2. +
    2. It is further indented, depending on the depth of nesting.
      3. +
    3. Nested lists numbers are independent form the numbers of their parents.
      4. +
    + After nested list item +
    5. +
  5. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur +
    6. +
  6. Ordered list item
    7. +
  7. Ordered list item
    8. +
  8. Ordered list item
    9. +
  9. Ordered list item
    10. +
  10. Ordered list item
    11. +
+
+ `, + )} +
+ `; + }, +}; diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index bbd73275c0..99e605d3a3 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -5,4 +5,5 @@ @use 'list-bullet'; @use 'paragraph'; @use 'fieldset-legend'; +@use 'list'; @use 'heading'; diff --git a/packages/styles/src/elements/list.scss b/packages/styles/src/elements/list.scss new file mode 100644 index 0000000000..72b3d950d9 --- /dev/null +++ b/packages/styles/src/elements/list.scss @@ -0,0 +1,28 @@ +@use '../functions/tokens'; +@use '../tokens/elements'; + +tokens.$default-map: elements.$post-listnumber; + +ol { + display: grid; + grid-template-columns: [marker] auto [item] 1fr; + list-style: none; + counter-reset: ol; + padding: tokens.get('list-number-item-gap-block'); + gap: tokens.get('list-number-margin-block'); + + > li { + display: grid; + grid-template-columns: subgrid; + counter-increment: ol; + column-gap: tokens.get('list-number-item-icon-gap-inline'); + grid-column: span 2; + + &::before { + text-align: right; + content: counter(ol) '.'; + grid-column: marker; + grid-row: span 30000; + } + } +}