[component]: Accordion - Githubissues

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

121 stars 14 forks source link

[component]: Accordion #3457

Open Cian77 opened 2 months ago

Cian77 commented 2 months ago

Description

Open issues:

Design:

[x] Integrated new typography
[ ] Spacing is defined
[ ] Documentation final

Tokens proposal:

accordion-padding-block
accordion-padding-inline
accordion-border-bottom (for the accordion component)
accordion-item-border-top (for the accordion item components)
accordion-title-font-X
accordion-color-fg

Not part of the component:

background (needs to be transparent for the footer and other applications)

Design

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

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [x] Define tokens for the accordion
- [x] Upgrade existing component with tokenised styles
- [ ] Documentation in Storybook
- [ ] Unit tests
- [ ] End to end tests
- [ ] Visual regression tests
- [ ] Design review

gfellerph commented 2 weeks ago

@Vandapanda created a token proposal right in the description of the ticket

Vandapanda commented 2 weeks ago

@gfellerph there is some stuff missing here my proposal according to how you named stuff above accordion-header-padding-block-start/end accordion-header-padding-inline accordion-header-content-gap-inline accordion-header-logo-size accordion-border-bottom-style/color (enabled/hover)/width accordion-group-border-top-style/color(enabled/hover)/width accordion-content-padding-block-start accordion-content-padding-block-end accordion-content-padding-inline accordion-header-font-size accordion-header-enabled/hover-fg accordion-focus-outline-color/offset/width/radius

Not sure if needed: accordion-header-logo-padding-block/inline accordion-header-logo-gap-inline accordion-header-icon-size Also there might be a specification for open or closed. Header can be changed to title as used aboth content might be changed to item as wrote above

gfellerph commented 2 weeks ago

@Vandapanda I think the proposal is good, the logo size and gap between title are needed. As it will be an image, it does not need any inline gap or padding itself. Wondering if an icon would need to take the line-height as height, I don't see any design for this. We can leave that away for the moment.

Vandapanda commented 6 days ago

Tokenized except for Focus state as this has to be further defined in the pattern discussion