feat: add sbb-checkup-list style class #3038
Conversation
dauriamarco
added
pr: peer review required
github-actions
bot
removed
the
pr: peer review required
dauriamarco
force-pushed
the
feat/checkup-list-css-class
branch
from
f54ee52
to
6e8bec7
Compare
github-actions
bot
added
pr: peer review required
github-actions
bot
added
pr: visual review required
diff-available
and removed
pr: visual review required
labels
| @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); |
There was a problem hiding this comment.
Would current or inherit work? If yes, we could leave out --sbb-checkup-list-color var as the consumer could just set "color:" on the list itself (I did not check if it really works ;) )
| --sbb-checkup-list-marker-icon-color: var(--sbb-color-black); | |
| --sbb-checkup-list-marker-icon-color: current; |
| } | ||
| } | ||
|
|
||
| @mixin base-marker-list { |
There was a problem hiding this comment.
I'd suggest creating SCSS vars for the CSS var names so that the output when consuming checkup-list and step-list is clean of --sbb-list-marker-* vars. and also re-declarations of a css var. The base-marker-list should be excluded from public api here: src/elements/core/styles/_index.scss
| @@ -8,3 +8,7 @@ | |||
| .sbb-step-list { | |||
| @include lists.step-list; | |||
| } | |||
|
|
|||
| .sbb-checkup-list { | |||
There was a problem hiding this comment.
checkup-list, or simple icon-list, or? @kyubisation
There was a problem hiding this comment.
we decided for sbb-icon-list
| @@ -76,28 +76,119 @@ | |||
| } | |||
There was a problem hiding this comment.
Please cleanup structure to avoid warnings on yarn build (https://github.com/sbb-design-systems/lyne-components/actions/runs/10630456007/job/29469418012?pr=3038)
| @mixin checkup-list { | ||
| @include base-marker-list; | ||
|
|
||
| --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-tick-medium.svg'); |
There was a problem hiding this comment.
@kyubisation, could we deliver with icon CDN url, or do we have to include it as base64?
There was a problem hiding this comment.
decision: inline as svg code (probably base64 not even needed)
| @@ -66,6 +66,63 @@ const StepsTemplate = (): TemplateResult => html` | |||
| )} | |||
| `; | |||
|
|
|||
| const CheckupTemplate = (): TemplateResult => html` | |||
There was a problem hiding this comment.
Please add the visual tests
| @mixin checkup-list { | ||
| @include base-marker-list; | ||
|
|
||
| --sbb-checkup-list-marker-icon: url('https://icons.app.sbb.ch/icons/circle-tick-medium.svg'); |
There was a problem hiding this comment.
It could be, that starting from 36x36 that the medium icon should be chosen (but let's check later with review of @mcilurzo)
jeripeierSBB
changed the title
Closes #3008