feat: component check list

.changeset/old-beers-cough.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added Check List, which is an unordered list. Each list item is preceded with check icon.

packages/documentation/src/stories/utilities/list/list.docs.mdx → packages/documentation/src/stories/components/list/list.docs.mdx

@@ -5,7 +5,7 @@ import * as ListStories from './list.stories';
 
 # Lists
 
-<p className="lead">Use lists to group a collection  of related items.</p>
+<p className="lead">Use lists to group a collection of related items.</p>
 
 There are three types of HTML lists: unordered lists, ordered lists, and description lists.
 Utility classes allow you to style each of these lists in different ways.
@@ -29,7 +29,7 @@ This only applies to immediate child list items, meaning you will need to add th
 Remove a list’s bullets and apply some light margin with a combination of two classes,
 `.list-inline` and `.list-inline-item`.
 
-<Canvas of={ListStories.InlineList} sourceState="shown"/>
+<Canvas of={ListStories.InlineList} sourceState="shown" />
 
 ## Ordered List
 
@@ -40,6 +40,13 @@ It is created using a `<ol>` tag and list items are preceded by ascending number
 
 <Canvas of={ListStories.OrderedList} sourceState="shown" />
 
+## Check List
+
+An unordered list groups related items in no specific order.
+It is created using a `<ul>` tag with `list-checks` class. Each list item is preceded with check icon.
+
+<Canvas of={ListStories.CheckList} sourceState="shown" />
+
 ## Description List
 
 A description list is a list of terms, with a description of each term.

packages/documentation/src/stories/utilities/list/list.stories.ts → packages/documentation/src/stories/components/list/list.stories.ts

@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
-  title: 'Utilities/List',
+  title: 'Components/List',
   parameters: {
     badges: [],
   },
@@ -83,6 +83,29 @@ export const OrderedList: Story = {
   `,
 };
 
+export const CheckList: Story = {
+  render: () => html`
+    <ul class="list-checks">
+      <li>This is a check list item.</li>
+      <li>And another one.</li>
+      <li>
+        Nested list:
+        <ul class="list-checks">
+          <li>This is a check list item.</li>
+          <li>And another one.</li>
+          <li>And one more.</li>
+        </ul>
+      </li>
+      <li>
+        And another long text to check how it look like. Lorem Ipsum is simply dummy text of the
+        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+        a type specimen book
+      </li>
+    </ul>
+  `,
+};
+
 export const DescriptionList: Story = {
   render: () => html`
     <dl>

packages/styles/src/components/_index.scss

@@ -22,6 +22,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'list';
 @use 'lead';
 @use 'list-group';
 @use 'modal';

packages/styles/src/components/list.scss

@@ -0,0 +1,74 @@
+@use '../mixins/media';
+@use '../mixins/icons';
+@use '../mixins/utilities';
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-list-simple;
+
+$sizing-icon: tokens.get('list-simple-checks-sizing-icon');
+$padding-icon: tokens.get('list-simple-checks-padding-icon');
+
+.list-checks {
+  list-style: none;
+  padding-left: 0;
+  padding-block: tokens.get('list-simple-checks-padding-block-outer');
+  margin-bottom: 0;
+
+  > li {
+    position: relative;
+    padding-inline-start: calc(
+      #{tokens.get('list-simple-checks-gap-inline-text')} + #{$sizing-icon} + (#{$padding-icon} * 2)
+    );
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+
+    &::before {
+      @include icons.icon(2105);
+      left: calc($padding-icon);
+      top: calc($padding-icon);
+      width: $sizing-icon;
+      height: $sizing-icon;
+      background-color: tokens.get('list-checks-color-icon-fg');
+      z-index: 2;
+
+      @include utilities.high-contrast-mode() {
+        background-color: Canvas;
+      }
+    }
+
+    &::after {
+      left: 0;
+      top: 0;
+      width: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
+      height: calc(#{$sizing-icon} + (#{$padding-icon} * 2));
+      background-color: tokens.get('list-checks-color-icon-bg');
+      border-radius: 50%;
+
+      @include utilities.high-contrast-mode() {
+        background-color: CanvasText;
+        color: Canvas;
+      }
+    }
+
+    @include media.max(400px) {
+      &::before,
+      &::after {
+        margin-inline: tokens.get('list-simple-checks-icon-container-inline');
+        margin-block: tokens.get('list-simple-checks-icon-container-block');
+      }
+    }
+
+    > ul {
+      padding-bottom: 0;
+    }
+  }
+
+  > li:not(:last-child) {
+    margin-block-end: tokens.get('list-simple-checks-gap-block-text');
+  }
+}