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,24 @@ 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 one.</li>
+    </ul>
+  `,
+};
+
 export const DescriptionList: Story = {
   render: () => html`
     <dl>

packages/styles/src/components/_index.scss

@@ -23,6 +23,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'list';
 @use 'list-group';
 @use 'modal';
 @use 'pagination';

packages/styles/src/components/list.scss

@@ -0,0 +1,54 @@
+@use './../themes/bootstrap/core' as *;
+@use '../tokens/components' as components;
+@use '../functions/tokens' as tokens;
+@use './../functions/icons';
+
+tokens.$default-map: components.$post-list;
+
+$sizing-icon: tokens.get('post-list-checks', 'sizing-icon');
+$padding-icon: tokens.get('post-list-checks', 'spacing-padding-icon');
+
+.list-checks {
+  list-style: none;
+  padding-left: 0;
+  padding-block: tokens.get('post-list-checks', 'spacing-padding-block-outer');
+  margin-bottom: 0;
+
+  > li {
+    position: relative;
+    padding-inline-start: calc(
+      #{tokens.get('post-list-checks', 'spacing-gap-inline-text'),
+      } + #{$sizing-icon}
+    );
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: $sizing-icon;
+      height: $sizing-icon;
+      padding: $padding-icon;
+      background-repeat: no-repeat;
+      background-position-x: 50%;
+      background-position-y: center;
+      background-color: tokens.get('post-list-checks', 'color-icon-bg');
+      border-radius: 50%;
+      background-size: calc(#{$sizing-icon} - #{$padding-icon} * 2);
+      background-image: url('#{icons.get-colored-svg-url("2105", "white")}'); // 'white' should be changed with variable
+    }
+
+    @include media-breakpoint-down(sm) {
+      &::before {
+        margin: tokens.get('post-list-checks', 'spacing-padding-icon');
+      }
+    }
+
+    > ul {
+      padding-bottom: 0;
+    }
+  }
+
+  > li:not(:last-child) {
+    margin-block-end: tokens.get('post-list-checks', 'spacing-gap-block-text');
+  }
+}