Skip to content

Commit

Permalink
feat: add sbb-checkup-list class
Browse files Browse the repository at this point in the history
  • Loading branch information
@dauriamarco
dauriamarco committed Aug 28, 2024
1 parent 375bdad commit 6e8bec7
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 61 deletions.
4 changes: 4 additions & 0 deletions src/elements/core/styles/lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@
.sbb-step-list {
@include lists.step-list;
}

.sbb-checkup-list {
@include lists.checkup-list;
}
155 changes: 94 additions & 61 deletions src/elements/core/styles/mixins/lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

list-style: none;
margin: 0;
padding: 0;
counter-reset: steps;

&: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;

/* 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 {
Expand All @@ -163,24 +159,61 @@
}
}

@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;
@mixin checkup-list {
@include base-marker-list;

margin: 0;
padding: 0;
display: grid;
--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);

// 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);
> 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%;
}
}

:is(dt, dd) {
margin: 0;
padding: 0;
@mixin step-list {
@include base-marker-list;

--sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
--sbb-list-marker-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);
}

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);
}
}
}
45 changes: 45 additions & 0 deletions src/storybook/styles/list/list.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,43 @@ const StepsTemplate = (): TemplateResult => html`
)}
`;

const CheckupTemplate = (): TemplateResult => html`
${['xs', 's', 'm', 'l', 'xl'].map(
(textSize) => html`
<sbb-title level="5">Text size ${textSize}</sbb-title>
<ol class=${`sbb-checkup-list sbb-text-${textSize}`}>
${ListContent()}
<li>
Nested list
<ol class="sbb-list">
${ListContent()}
</ol>
</li>
</ol>
`,
)}
`;

const CheckupCustomColorAndIconTemplate = (): TemplateResult => html`
${['xs', 's', 'm', 'l', 'xl'].map(
(textSize) => html`
<sbb-title level="5">Text size ${textSize}</sbb-title>
<ol
class=${`sbb-checkup-list sbb-text-${textSize}`}
style="--sbb-checkup-list-marker-icon-color: var(--sbb-color-red); --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-cross-medium.svg')"
>
${ListContent()}
<li>
Nested list
<ol class="sbb-list">
${ListContent()}
</ol>
</li>
</ol>
`,
)}
`;

const DescriptionListTemplate = (): TemplateResult => html`
<dl class="sbb-list">
<dt>Label:</dt>
Expand Down Expand Up @@ -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,
};
Expand Down

0 comments on commit 6e8bec7

Please sign in to comment.