swisspost / design-system

The Swiss Post Design System - for a consistent and accessible user experience across the web platform.
https://design-system.post.ch
Apache License 2.0
122 stars 14 forks source link

[component]: Check list #3438

Open Cian77 opened 2 months ago

Cian77 commented 2 months ago

Description

Create a unordered list variant that has checkmarks as bullet points. Keep in mind, that text and bullet size is dependent on the font-size of surrounding text.

Open issues:

Design:

Tokens:

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-170

Tokens

Proposed markup

<ul class="list-checks">
  <li>...</li>
</ul>

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [ ] https://github.com/swisspost/design-system/issues/3496
- [ ] #3437
- [ ] HTML/CSS implementation
- [x] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review
oliverschuerch commented 1 month ago

Wait for the native (simple) lists to be ready/tokenized/implemented!

Vandapanda commented 1 month ago

@bashirkarimi I moved the Tokens for Checks list into a Set on its own to differentiate between simple list and the normal list. Therefore the Set name for those Token was changed from Components/List to Components/List Simple. Every other naming stayed the same but this might mean that you have to touch the code again (not sure if you have the Set name in there)