feat: component check list

[bashirkarimi]

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2a6cff5bd5e835662f4664fb99e07f3370497405

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

[oliverschuerch]

@bashirkarimi create a :after element, place it the same way as the :before element. Set the background-color of it through the icon and define the icon as a mask-image (there is a mixin for that).

[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

[alizedebray]

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

[sonarqubecloud[bot]]

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