feat(styles): implemented new ordered list (#3755)

.changeset/metal-rivers-look.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added custom styles for the ordered lists.

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');
+  });
+});

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');
+    });
+  });
+});

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] });
   });
 });

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`
+      <div class="d-flex">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} p-5">
+              <ol>
+                <li>This is an ordered list.</li>
+                <li>It appears in its default style.</li>
+                <li>
+                  Therefore it should be rendered with sequential numbers at the beginning of each
+                  list item.
+                </li>
+                <li>
+                  Nested list:
+                  <ol>
+                    <li>This is a nested list</li>
+                    <li>It is further indented, depending on the depth of nesting.</li>
+                    <li>Nested lists numbers are independent form the numbers of their parents.</li>
+                  </ol>
+                  After nested list item
+                </li>
+                <li>
+                  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
+                </li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+                <li>Ordered list item</li>
+              </ol>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

packages/styles/src/elements/_index.scss

@@ -5,4 +5,5 @@
 @use 'list-bullet';
 @use 'paragraph';
 @use 'fieldset-legend';
+@use 'list';
 @use 'heading';

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;
+    }
+  }
+}