feat: component check list

[bashirkarimi]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2a6cff5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@swisspost/design-system-documentation	Minor
@swisspost/design-system-styles	Minor
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-components	Minor
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header-workspace	Patch
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles-primeng-workspace	Patch
@swisspost/design-system-intranet-header	Minor
@swisspost/design-system-styles-primeng	Minor
@swisspost/design-system-components-react	Minor
@swisspost/design-system-components-angular	Minor
@swisspost/design-system-intranet-header-showcase	Patch
@swisspost/design-system-tokens	Minor
@swisspost/design-system-icons	Minor
@swisspost/design-system-migrations	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[swisspost-bot]

Related Previews

• https://preview-3511--swisspost-web-frontend.netlify.app
• https://preview-3511--swisspost-design-system-next.netlify.app

[gfellerph]

On mobile, the checklist is now misaligned.

And in high contrast mode, the round checks disappear:

Can you add a rule for high contrast mode like

@include utilities.high-contrast-mode() {
    background-color: CanvasText;
    color: Canvas;
}

[bashirkarimi]

On mobile, the checklist is now misaligned.

And in high contrast mode, the round checks disappear:

Can you add a rule for high contrast mode like

@include utilities.high-contrast-mode() {
    background-color: CanvasText;
    color: Canvas;
}

The high contrast mode is added.
The Tokens for icon size does not change on breakpoints, currently. Therefore, the size of icon is the same for all screen sizes and it overflow to bottom on mobile.
I asked Alessio about tokens changing on breakpoints and here is his reply:

The font-size is atm device dependent, meaning it pulls different numbers from the semantical level based on what screensice people are on. Not sure if it will just stay that way or if they want to switch it up once we got figma enterprise as we then can have 40 different breakpoints compared to 4 right now. Therefore as it is now: Desktop ≥ 1024, Tablet 600-1023, Mobile <600

[gfellerph]

There should be a way to always align the checkmark on the first line of content, no matter the size of the checkmark or the text. See https://stackoverflow.com/questions/32118013/align-icon-vertically-to-the-center-of-the-first-line-of-text for some ideas.

[alizedebray]

Waiting for the bullet list styles to be implemented with #3437

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud