feat: component check list

.changeset/old-beers-cough.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the checks list component, an unordered list where each item is preceded by a 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.
@@ -17,6 +17,13 @@ It is created using a `<ul>` tag and each list item is preceded by a bullet (sma
 
 <Canvas of={ListStories.UnorderedList} sourceState="shown" />
 
+### Checks
+
+By default, unordered lists show a bullet in front of each item.
+Use the `.list-check` class to replace the bullet with check icons.
+
+<Canvas of={ListStories.CheckList} sourceState="shown" />
+
 ### Unstyled
 
 Remove the default list-style and left margin on list items (immediate children only).
@@ -29,7 +36,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
 

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: [],
   },
@@ -33,6 +33,29 @@ export const UnorderedList: Story = {
   `,
 };
 
+export const CheckList: Story = {
+  render: () => html`
+    <ul class="list-checks">
+      <li>This is a checks list.</li>
+      <li>It shows a check icon in front of each item.</li>
+      <li>
+        Nested list:
+        <ul class="list-checks">
+          <li>This is a nested list item.</li>
+          <li>And another one.</li>
+          <li>And one more.</li>
+        </ul>
+      </li>
+      <li>
+        This item belongs to the parent list. 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 UnstyledList: Story = {
   render: () => html`
     <ul class="list-unstyled">

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