feat(styles): component simple check list (#4171)

swisspost · Dec 9, 2024 · 7dbde91 · 7dbde91
1 parent feeb3f3
commit 7dbde91
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 0 deletions.
diff --git a/.changeset/clever-cheetahs-draw.md b/.changeset/clever-cheetahs-draw.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented simple check list component.
diff --git a/packages/documentation/cypress/snapshots/components/list.snapshot.ts b/packages/documentation/cypress/snapshots/components/list.snapshot.ts
@@ -4,4 +4,10 @@ describe('List', () => {
     cy.get('ol', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Lists', { widths: [1440] });
   });
+
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--check-list');
+    cy.get('ul', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Lists', { widths: [1440] });
+  });
 });
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.docs.mdx b/packages/documentation/src/stories/foundations/typography/list/list.docs.mdx
@@ -72,3 +72,9 @@ Align terms and descriptions horizontally by using our grid system’s predefine
 For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
 <Canvas of={ListStories.DescriptionListUsingGrid} sourceState="shown" />
+
+## Check List
+
+A non-interactive checklist is a list with a check icon prefix, not only for better visual identification of the list items but also to indicate a 'completed' status for each item.
+
+<Canvas of={ListStories.CheckList} sourceState="shown" />
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.snapshot.stories.ts b/packages/documentation/src/stories/foundations/typography/list/list.snapshot.stories.ts
@@ -135,3 +135,43 @@ export const Lists: Story = {
     }
   },
 };
+
+export const CheckList: Story = {
+  render: () => {
+    return schemes(
+      () => html`
+        <div class="d-flex">
+              <ul class="list-check">
+                <li>
+                 A check 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>And one more</li>
+                <li>
+                  Nested check list:
+                  <ul class="list-check">
+                        <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>
+                      </ul>
+                    </li>
+                    <li>And another one</li>
+                    <li>And one more</li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          `,
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/foundations/typography/list/list.stories.ts b/packages/documentation/src/stories/foundations/typography/list/list.stories.ts
@@ -122,3 +122,13 @@ export const DescriptionListUsingGrid: Story = {
     </dl>
   `,
 };
+
+export const CheckList: Story = {
+  render: () => html`
+    <ul class="list-check">
+      <li>This is a check list item.</li>
+      <li>And another one.</li>
+      <li>And one more.</li>
+    </ul>
+  `,
+};
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
@@ -31,6 +31,7 @@
 @use 'icon-close-button';
 @use 'lead';
 @use 'list-group';
+@use 'list-check';
 @use 'modal';
 @use 'pagination';
 @use 'popover';

diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss
@@ -0,0 +1,79 @@
+@use '../functions/tokens';
+@use '../mixins/icons' as icon-mixin;
+@use '../tokens/components';
+@use '../mixins/media';
+@use '../mixins/utilities';
+
+tokens.$default-map: components.$post-listcheck;
+
+ul.list-check {
+  @include utilities.reset-list;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  list-style: none;
+  padding-block: tokens.get('list-check-margin-block') tokens.get('list-check-margin-block');
+  padding-inline-start: calc(
+    #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} + #{tokens.get(
+        'list-check-icon-gap-inline'
+      )} + 2 * #{tokens.get('list-check-icon-container-inline')}
+  );
+  gap: tokens.get('list-check-item-gap-block-text');
+
+  > li {
+    position: relative;
+    color: tokens.get('list-check-color-text-fg');
+    padding-block: tokens.get('list-check-text-padding');
+
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-inline-start: calc(
+        -1 * (#{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
+              #{tokens.get('list-check-icon-gap-inline')} + #{tokens.get(
+                'list-check-icon-container-inline'
+              )})
+      );
+      margin-block: calc(-1 * tokens.get('list-check-text-padding'));
+
+      background: tokens.get('list-check-color-icon-bg');
+      width: calc(
+        #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')}
+      );
+      height: calc(
+        #{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')}
+      );
+      content: '';
+      border-radius: 50%;
+      @include media.max(sm) {
+        margin-block: tokens.get('list-check-icon-container-block');
+        padding-inline: tokens.get('list-check-icon-container-inline');
+      }
+    }
+
+    &::after {
+      display: block;
+      position: absolute;
+      margin-inline-start: calc(
+        -1 * (#{tokens.get('list-check-sizing-icon')} + 2 * #{tokens.get('list-check-padding-icon')} +
+              #{tokens.get('list-check-icon-gap-inline')} + #{tokens.get(
+                'list-check-icon-container-inline'
+              )})
+      );
+      margin-block: calc(-1 * tokens.get('list-check-text-padding'));
+      top: tokens.get('list-check-padding-icon');
+      left: tokens.get('list-check-padding-icon');
+      width: tokens.get('list-check-sizing-icon');
+      height: tokens.get('list-check-sizing-icon');
+      content: '';
+      @include icon-mixin.icon('3035');
+      color: tokens.get('list-check-color-icon-fg');
+      @include media.max(sm) {
+        margin-block: tokens.get('list-check-icon-container-block');
+        padding-inline: tokens.get('list-check-icon-container-inline');
+      }
+    }
+  }
+}