diff --git a/src/elements/core/styles/lists.scss b/src/elements/core/styles/lists.scss index 1bd81299288..4e61bee88a1 100644 --- a/src/elements/core/styles/lists.scss +++ b/src/elements/core/styles/lists.scss @@ -8,3 +8,7 @@ .sbb-step-list { @include lists.step-list; } + +.sbb-checkup-list { + @include lists.checkup-list; +} diff --git a/src/elements/core/styles/mixins/lists.scss b/src/elements/core/styles/mixins/lists.scss index c775b2c4bd9..bce2e86b16d 100644 --- a/src/elements/core/styles/mixins/lists.scss +++ b/src/elements/core/styles/mixins/lists.scss @@ -76,80 +76,76 @@ } } -@mixin step-list { - --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(34)}; - --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x); - --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs); - --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs); +@mixin description-list { + // Support both top level usage (& is empty / falsy) + // and applied to a selector usage. + #{if(&, '&:where(dl)', 'dl')} { + @include typo.text-s--regular; + + margin: 0; + padding: 0; + display: grid; + + // Ensure that description is always attached to the label + grid-template-columns: auto minmax(20%, 1fr); + gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x); + color: var(--sbb-color-iron); + + :is(dt, dd) { + margin: 0; + padding: 0; + } + } +} + +@mixin base-marker-list { + --sbb-list-marker-dimensions: #{functions.px-to-rem-build(34)}; + --sbb-list-marker-padding-inline: var(--sbb-spacing-responsive-xxs); + --sbb-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs); // Additional space from overall li padding to the text because text // has to be centered to marker number. - --sbb-step-list-text-to-marker-block-offset: calc( + --sbb-list-text-to-marker-block-offset: calc( 0.5 * ( - var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) * + var(--sbb-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) ) ); - --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x); - - &:where(.sbb-text-s) { - --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x); - } - - &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) { - --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x); - } &:where(.sbb-text-xl) { @include mediaqueries.mq($from: medium) { - --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(41)}; + --sbb-list-marker-dimensions: #{functions.px-to-rem-build(41)}; } } list-style: none; margin: 0; padding: 0; - counter-reset: steps; /* stylelint-disable-next-line no-descending-specificity */ > li { position: relative; - counter-increment: steps; - background-color: var(--sbb-color-milk); - border-radius: var(--sbb-border-radius-4x); - padding-block: calc( - var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset) - ) - var(--sbb-step-list-padding-block); padding-inline: calc( - var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + - var(--sbb-step-list-marker-to-text-gap) + var(--sbb-list-marker-padding-inline) + var(--sbb-list-marker-dimensions) + + var(--sbb-list-marker-to-text-gap) ) - var(--sbb-step-list-padding-inline); - min-height: calc( - var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block) - ); + var(--sbb-list-marker-padding-inline); + min-height: var(--sbb-list-marker-dimensions); &::before { @include typo.text-xxs--bold; - content: counter(steps); position: absolute; - display: flex; - align-items: center; - justify-content: center; - height: var(--sbb-step-list-marker-dimensions); - width: var(--sbb-step-list-marker-dimensions); - margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset)); - inset-inline-start: var(--sbb-step-list-padding-inline); - border: var(--sbb-border-width-1x) solid var(--sbb-color-cement); + height: var(--sbb-list-marker-dimensions); + width: var(--sbb-list-marker-dimensions); + margin-block-start: calc(-1 * var(--sbb-list-text-to-marker-block-offset)); + inset-inline-start: var(--sbb-list-marker-padding-inline); border-radius: 50%; - color: var(--sbb-color-charcoal); } + li { - margin-block-start: var(--sbb-step-list-vertical-gap); + margin-block-start: var(--sbb-list-marker-vertical-gap); } p { @@ -163,24 +159,63 @@ } } -@mixin description-list { - // Support both top level usage (& is empty / falsy) - // and applied to a selector usage. - #{if(&, '&:where(dl)', 'dl')} { - @include typo.text-s--regular; +// checkup-list mixin extending the base-step-list +@mixin checkup-list { + @include base-marker-list; + + --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-tick-medium.svg'); + --sbb-checkup-list-marker-icon-color: var(--sbb-color-black); + --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-2x); + + > li::before { + content: ''; + background-color: var(--sbb-checkup-list-marker-icon-color); + mask-image: var(--sbb-checkup-list-marker-icon); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 100%; + } +} - margin: 0; - padding: 0; - display: grid; +// step-list mixin extending the base-step-list +@mixin step-list { + @include base-marker-list; - // Ensure that description is always attached to the label - grid-template-columns: auto minmax(20%, 1fr); - gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x); - color: var(--sbb-color-iron); + --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x); + --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-1x); - :is(dt, dd) { - margin: 0; - padding: 0; + &:where(.sbb-text-s) { + --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x); + } + + &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) { + --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x); + } + + counter-reset: steps; + + > li { + counter-increment: steps; + background-color: var(--sbb-color-milk); + border-radius: var(--sbb-border-radius-4x); + padding-block: calc( + var(--sbb-step-list-padding-block) + var(--sbb-list-text-to-marker-block-offset) + ) + var(--sbb-step-list-padding-block); + padding-inline: calc( + var(--sbb-list-marker-padding-inline) + var(--sbb-list-marker-dimensions) + + var(--sbb-list-marker-to-text-gap) + ) + var(--sbb-list-marker-padding-inline); + min-height: calc(var(--sbb-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)); + + &::before { + content: counter(steps); + display: flex; + align-items: center; + justify-content: center; + border: var(--sbb-border-width-1x) solid var(--sbb-color-cement); + color: var(--sbb-color-charcoal); } } } diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts index 71f1f2d3344..62203142a04 100644 --- a/src/storybook/styles/list/list.stories.ts +++ b/src/storybook/styles/list/list.stories.ts @@ -66,6 +66,43 @@ const StepsTemplate = (): TemplateResult => html` )} `; +const CheckupTemplate = (): TemplateResult => html` + ${['xs', 's', 'm', 'l', 'xl'].map( + (textSize) => html` + Text size ${textSize} +
    + ${ListContent()} +
  1. + Nested list +
      + ${ListContent()} +
    +
  2. +
+ `, + )} +`; + +const CheckupCustomColorAndIconTemplate = (): TemplateResult => html` + ${['xs', 's', 'm', 'l', 'xl'].map( + (textSize) => html` + Text size ${textSize} +
    + ${ListContent()} +
  1. + Nested list +
      + ${ListContent()} +
    +
  2. +
+ `, + )} +`; + const DescriptionListTemplate = (): TemplateResult => html`
Label:
@@ -96,6 +133,14 @@ export const StepList: StoryObj = { render: StepsTemplate, }; +export const CheckupList: StoryObj = { + render: CheckupTemplate, +}; + +export const CheckupListCustomColorAndIcon: StoryObj = { + render: CheckupCustomColorAndIconTemplate, +}; + export const DescriptionList: StoryObj = { render: DescriptionListTemplate, };