diff --git a/.changeset/old-beers-cough.md b/.changeset/old-beers-cough.md
new file mode 100644
index 0000000000..b0c82da59d
--- /dev/null
+++ b/.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.
\ No newline at end of file
diff --git a/packages/documentation/src/stories/utilities/list/list.docs.mdx b/packages/documentation/src/stories/components/list/list.docs.mdx
similarity index 84%
rename from packages/documentation/src/stories/utilities/list/list.docs.mdx
rename to packages/documentation/src/stories/components/list/list.docs.mdx
index a9d6ade2a3..d9bd77e986 100644
--- a/packages/documentation/src/stories/utilities/list/list.docs.mdx
+++ b/packages/documentation/src/stories/components/list/list.docs.mdx
@@ -5,7 +5,7 @@ import * as ListStories from './list.stories';
# Lists
-
Use lists to group a collection of related items.
+Use lists to group a collection of related items.
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 `` tag and each list item is preceded by a bullet (sma
+### 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.
+
+
+
### 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`.
-
+
## Ordered List
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
similarity index 82%
rename from packages/documentation/src/stories/utilities/list/list.stories.ts
rename to packages/documentation/src/stories/components/list/list.stories.ts
index f06cbf056d..45fb8ddefe 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/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`
+
+ - This is a checks list.
+ - It shows a check icon in front of each item.
+ -
+ Nested list:
+
+ - This is a nested list item.
+ - And another one.
+ - And one more.
+
+
+ -
+ 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
+
+
+ `,
+};
+
export const UnstyledList: Story = {
render: () => html`
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 0cb16051b7..86b7d4146b 100644
--- a/packages/styles/src/components/_index.scss
+++ b/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';
diff --git a/packages/styles/src/components/list.scss b/packages/styles/src/components/list.scss
new file mode 100644
index 0000000000..e2a61d95b7
--- /dev/null
+++ b/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');
+ }
+}