Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[component]: List with Numbers #3451

Open
4 of 6 tasks
Cian77 opened this issue Aug 22, 2024 · 1 comment · May be fixed by #3755
Open
4 of 6 tasks

[component]: List with Numbers #3451

Cian77 opened this issue Aug 22, 2024 · 1 comment · May be fixed by #3755
Assignees
@veyaromain
Labels
❇️ good first issue Good for newcomers 📦 styles Related to the @swisspost/design-system-styles package
Milestone
PPNL Components

Comments

@Cian77
Copy link

Cian77 commented Aug 22, 2024 •
edited by veyaromain
Loading

Description

Open issues:

Design:

  • Integrated new typography
  • Spacing is defined
  • Documentation final

Tokens:

  • Typography tokens ready

Design

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

Tokens

  • Tokens for this component are ready

DEVs proposal

Base styles: body
Token set name: Elements/ListNumber

  • post-list-number-margin-block (padding top/bottom on List simple / Numbers)
  • post-list-number-item-gap-block (gap between listItem 1 and listItem 2)
  • post-list-number-item-icon-gap-inline (gap between bulletIcon and numberLabel)
  • post-list-number-item-icon-size (width of NumberIcon)

Code example:

ol {
  --post-body-line-height: 1.5em;
  --post-list-number-margin-block: 1rem;
  --post-list-number-item-gap-block: 8px;
  --post-list-number-item-icon-size: 32px;
  --post-list-number-item-icon-gap-inline: 8px;

  margin-block-start: var(--post-list-number-margin-block);
  padding-inline-start: calc(
    var(--post-list-number-item-icon-size) +
      var(--post-list-number-item-icon-gap-inline)
  );
  list-style: none;
  counter-reset: list;

  li {
    position: relative;

    &:not(:first-child) {
      margin-block-start: var(--post-list-number-item-gap-block);
    }

    &::before {
      box-sizing: content-box;
      display: block;
      content: "";
      position: absolute;
      right: 100%;
      content: counters(list, ".");
      counter-increment: list;
      margin-inline-end: var(--post-list-number-item-icon-gap-inline);
      min-width: var(--post-list-number-item-icon-size);
      text-align: center;
    }
  }
}

Tasks

💻 Tasks
Beta Give feedback
@Cian77 Cian77 added the 📦 components Related to the @swisspost/design-system-components package label Aug 22, 2024
@Cian77 Cian77 added this to the Design v2 milestone Aug 22, 2024
@Cian77 Cian77 changed the title [component]: Numbered List [component]: List with Numberes Aug 22, 2024
@gfellerph gfellerph changed the title [component]: List with Numberes [component]: List with Numbers Sep 2, 2024
@gfellerph gfellerph added 📦 styles Related to the @swisspost/design-system-styles package ❇️ good first issue Good for newcomers and removed needs: refinement 📦 components Related to the @swisspost/design-system-components package labels Sep 2, 2024
@Vandapanda
Copy link
Contributor

Tokenized according to DEVs proposal + added 2 more tokens for padding in front and after the numbered Item. If not possible to implement just ignore as they are mainly from design side so the number looks better them they are called post.list.number.item.icon.padding.start and post.list.number.item.icon.padding.end

@gfellerph gfellerph modified the milestones: Design v2, Cargo Components Oct 1, 2024
@veyaromain veyaromain linked a pull request Oct 15, 2024 that will close this issue
feat(styles): implemented new ordered list #3755
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@veyaromain veyaromain

Labels
❇️ good first issue Good for newcomers 📦 styles Related to the @swisspost/design-system-styles package
Projects
Design System Production Board
Status: 🤬 Dev in review
Milestone
PPNL Components
Development

Successfully merging a pull request may close this issue.

feat(styles): implemented new ordered list swisspost/design-system
5 participants
@gfellerph @alizedebray @veyaromain @Cian77 @Vandapanda