From 7dbde91b011637c514ebf766f5305ca6ae922885 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com> Date: Mon, 9 Dec 2024 10:50:30 +0200 Subject: [PATCH] feat(styles): component simple check list (#4171) --- .changeset/clever-cheetahs-draw.md | 6 ++ .../snapshots/components/list.snapshot.ts | 6 ++ .../foundations/typography/list/list.docs.mdx | 6 ++ .../typography/list/list.snapshot.stories.ts | 40 ++++++++++ .../typography/list/list.stories.ts | 10 +++ packages/styles/src/components/_index.scss | 1 + .../styles/src/components/list-check.scss | 79 +++++++++++++++++++ 7 files changed, 148 insertions(+) create mode 100644 .changeset/clever-cheetahs-draw.md create mode 100644 packages/styles/src/components/list-check.scss diff --git a/.changeset/clever-cheetahs-draw.md b/.changeset/clever-cheetahs-draw.md new file mode 100644 index 0000000000..ca46bec57b --- /dev/null +++ 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 index a49515ac7f..143e484d6e 100644 --- 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 index 63e12fa3c1..40cdd109a3 100644 --- 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. + +## 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. + + 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 index 3114f36991..0e9510b88a 100644 --- 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` +
+
    +
  • + A check list item +
    • +
  • + 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 +
    • +
  • And one more
    • +
  • + Nested check list: +
      +
    • + 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 +
      • +
    +
    • +
  • And another one
    • +
  • And one more
    • +
+ + +
+ `, + ); + }, +}; diff --git a/packages/documentation/src/stories/foundations/typography/list/list.stories.ts b/packages/documentation/src/stories/foundations/typography/list/list.stories.ts index 0d7ea8eb73..435276b13c 100644 --- 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 = { `, }; + +export const CheckList: Story = { + render: () => html` + + `, +}; diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index 436321e941..2f9f104eca 100644 --- 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 new file mode 100644 index 0000000000..cc0c6efd9a --- /dev/null +++ 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'); + } + } + } +}