search

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]: Badge #3362

Open sandra-post opened 3 months ago

sandra-post commented 3 months ago

Description

Open issues:

Design:

Tokens:

Design

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

Tokens

Proposed structure

The badge can easily be an HTML/CSS only component, but there is no dedicated HTML element for this kind of information. According to proposals in https://github.com/swisspost/design-system/discussions/3287, this element would use a custom name. Depending on the context, aria-live support for incoming messages would be necessary (but not provided by the badge).

<post-badge>Content</post-badge>

<post-badge class="bg-yellow">Yellow content</post-badge>

Tasks

### 💻 Tasks
- [ ] Review Design (All states present? Possible to implement?)
- [ ] HTML/CSS implementation
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review
Cian77 commented 2 months ago

Hi Philipp, we can close this ticket, I have postponed this component, as we don't have a use case for it just now.