feat(styles): add the radio/checkbox card component #1607

gfellerph · 2023-07-05T10:02:07Z

Added the radio button and checkbox card component.

changeset-bot · 2023-07-05T10:02:10Z

🦋 Changeset detected

Latest commit: 56dd629

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

This PR includes changesets to release 9 packages

Name	Type
@swisspost/design-system-documentation	Minor
@swisspost/design-system-styles	Minor
@swisspost/design-system-components-angular	Patch
@swisspost/design-system-components	Patch
@swisspost/design-system-demo	Patch
@swisspost/design-system-documentation-v7	Patch
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header	Patch
@swisspost/design-system-components-react	Patch

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 · 2023-07-05T10:04:54Z

Preview environment ready: https://preview-1607--swisspost-web-frontend.netlify.app
Preview environment ready: https://preview-1607--swisspost-design-system-next.netlify.app
Preview environment ready: https://preview-1607--swisspost-design-system-next-v7.netlify.app

…of grid

packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx

packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx

packages/documentation-v7/package.json

packages/documentation-v7/cypress/e2e/home.cy.ts

package.json

…adiobutton-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

…heckbox-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

This reverts commit 82fff41.

This reverts commit 620c553.

packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts

imagoiq · 2023-08-07T07:42:20Z

packages/styles/src/components/choice-control-card.scss

+    border-color 100ms ease-in-out;
+
+  // Checked
+  &:where(:has(input:checked)) {


:has is not supported by Firefox at the moment.

Added a fallback with classes until it is.

…hoice-control.snapshot.stories.ts Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

packages/styles/src/components/choice-control-card.scss

oliverschuerch · 2023-08-04T14:57:24Z

packages/styles/src/components/choice-control-card.scss

+  &:where(:has(input:checked)) {
+    --post-card-select--hover-bg: #{color.$yellow};
+    background-color: color.$yellow;
+    border-color: color.$gray-60;


Suggested change

border-color: color.$gray-60;

border-color: color.$gray-60;

input {

background-color: color.$white;

}

The radio/checkbox background is not white when check.

It's not working!

Figma:

Storybook:

oliverschuerch · 2023-08-04T14:59:02Z

packages/styles/src/components/choice-control-card.scss

+  &:has(input[aria-invalid]),
+  &:has(input.is-invalid) {
+    color: color.$error;
+    border-color: color.$error;
+
+    ~ .invalid-feedback {
+      display: block;
+    }
+  }


The input and the label should also be red colored in an invalid state.

Not working when checked.
Figma:

Storybook:

packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts

oliverschuerch · 2023-08-08T08:10:25Z

packages/styles/src/variables/_type.scss

@@ -77,6 +77,7 @@ $font-sizes: (
 );

 $font-size-map: (
+  12: $font-size-12,


Should be done in another PR together with a changeset?

packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts

oliverschuerch

If a user checks/unchecks the checkbox in the preview story, the control for toggling the Checked state is not working anymore.

oliverschuerch

Validation states are only reflected with color. There should be at least a hidden text which tells the user, the field is invalid.

oliverschuerch

HCM Styles are not well.
Use smaller borders for cards and higlight color for selected cards.

Firefox does not support `:has` as of August 2023, therefore implemented a class based fallback for the choice cards. A web-component would be an option, but due to the criticality of the component, this is a faster solution.

…hoice-control.ts Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>

…adiobutton-card.docs.mdx Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>

gfellerph · 2023-08-11T13:42:05Z

HCM Styles are not well. Use smaller borders for cards and higlight color for selected cards.

Updated the hover styles, but I would not use the selectedItem color as background, I think it's a bit disruptive to the otherwise very simple HCM.

Also, a 10px border is coming from storybook, which has some broken HCM styles anyway.

…thub.com/swisspost/design-system into 1469-add-the-radio-button-card-component

sonarcloud · 2023-08-11T13:50:14Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

gfellerph linked an issue Jul 5, 2023 that may be closed by this pull request

Add the radio button card component #1469

Closed

gfellerph mentioned this pull request Jul 5, 2023

chore: re-apply icon change #1606

Closed

2 tasks

gfellerph marked this pull request as ready for review July 6, 2023 12:42

gfellerph requested review from oliverschuerch, alizedebray and imagoiq as code owners July 6, 2023 12:42

gfellerph added 12 commits August 3, 2023 11:51

sync

2d02273

feat: add controls to story and update styles

67988da

fix: update label styles

cf329e6

refactor: remove the need for a second label and use flexbox instead …

2652055

…of grid

docs: update documentation

1180cd2

refactor: rename docs folder

fb23378

test: add snapshot tests for coice card

888c811

chore: add keys to looping elements

0f4453e

chore: create changeset

85c1bbc

feat: migrate docs to v7

352bc5e

tests: fix docsv7 e2e test timeout

620c553

chore: start http-server in slient mode

82fff41

gfellerph force-pushed the 1469-add-the-radio-button-card-component branch from 8329317 to 82fff41 Compare August 3, 2023 09:51

Merge branch 'main' into 1469-add-the-radio-button-card-component

1b1c492

imagoiq reviewed Aug 3, 2023

View reviewed changes

packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx Outdated Show resolved Hide resolved

imagoiq reviewed Aug 3, 2023

View reviewed changes

gfellerph and others added 6 commits August 4, 2023 08:58

Update packages/documentation-v7/src/stories/components/choice-card/r…

2be60fd

…adiobutton-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Update packages/documentation-v7/src/stories/components/choice-card/r…

f5683f5

…adiobutton-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Update packages/documentation-v7/src/stories/components/choice-card/c…

2b1d077

…heckbox-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Update packages/documentation-v7/src/stories/components/choice-card/c…

26b348c

…heckbox-card.docs.mdx Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Revert "chore: start http-server in slient mode"

00afe01

This reverts commit 82fff41.

Revert "tests: fix docsv7 e2e test timeout"

4d21c6a

This reverts commit 620c553.

gfellerph requested a review from imagoiq August 4, 2023 07:20

imagoiq suggested changes Aug 7, 2023

View reviewed changes

Update packages/documentation-v7/src/stories/components/choice-card/c…

edc5c6f

…hoice-control.snapshot.stories.ts Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

oliverschuerch requested changes Aug 8, 2023

View reviewed changes

oliverschuerch reviewed Aug 8, 2023

View reviewed changes

oliverschuerch requested changes Aug 8, 2023

View reviewed changes

gfellerph and others added 8 commits August 8, 2023 15:25

Merge branch 'main' into 1469-add-the-radio-button-card-component

87d8362

chore: fix eslint config

afa7b50

fix: added class based fallback styling

e8112ce

Firefox does not support `:has` as of August 2023, therefore implemented a class based fallback for the choice cards. A web-component would be an option, but due to the criticality of the component, this is a faster solution.

Updated source order of addons

e099655

Merge branch 'main' into 1469-add-the-radio-button-card-component

9adf377

docs: add info about class mirroring

5a736c4

docs: update documentation

8d47941

fix: update hcm styles and remove styling hack

f7667c4

gfellerph requested review from oliverschuerch and imagoiq August 11, 2023 13:00

gfellerph and others added 4 commits August 11, 2023 15:23

fix: checked input background is white

0579dc2

Update packages/documentation-v7/src/stories/components/choice-card/c…

18e6c32

…hoice-control.ts Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>

Update packages/documentation-v7/src/stories/components/choice-card/c…

c3f0eec

…hoice-control.ts Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>

Update packages/documentation-v7/src/stories/components/choice-card/r…

786e79a

…adiobutton-card.docs.mdx Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>

gfellerph added 3 commits August 11, 2023 15:44

fix: small issues

139ac71

Merge branch '1469-add-the-radio-button-card-component' of https://gi…

aa98094

…thub.com/swisspost/design-system into 1469-add-the-radio-button-card-component

chore: fix tslint source

56dd629

gfellerph added the 📦 migrations Related to the @swisspost/design-system-migrations package label Aug 17, 2023

gfellerph merged commit c1dee3b into main Aug 17, 2023
11 checks passed

gfellerph deleted the 1469-add-the-radio-button-card-component branch August 17, 2023 11:56

github-actions bot mentioned this pull request Aug 17, 2023

chore(changesets): 🦋📦 publish packages #1805

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(styles): add the radio/checkbox card component #1607

feat(styles): add the radio/checkbox card component #1607

gfellerph commented Jul 5, 2023 •

edited

changeset-bot bot commented Jul 5, 2023 •

edited

swisspost-bot commented Jul 5, 2023 •

edited

imagoiq Aug 7, 2023

gfellerph Aug 11, 2023

oliverschuerch Aug 4, 2023

gfellerph Aug 11, 2023

oliverschuerch Aug 15, 2023 •

edited

oliverschuerch Aug 4, 2023

gfellerph Aug 11, 2023

oliverschuerch Aug 15, 2023 •

edited

oliverschuerch Aug 8, 2023 •

edited

oliverschuerch left a comment •

edited

oliverschuerch left a comment

oliverschuerch left a comment

gfellerph commented Aug 11, 2023 •

edited

sonarcloud bot commented Aug 11, 2023

feat(styles): add the radio/checkbox card component #1607

feat(styles): add the radio/checkbox card component #1607

Conversation

gfellerph commented Jul 5, 2023 • edited

changeset-bot bot commented Jul 5, 2023 • edited

🦋 Changeset detected

swisspost-bot commented Jul 5, 2023 • edited

imagoiq Aug 7, 2023

Choose a reason for hiding this comment

gfellerph Aug 11, 2023

Choose a reason for hiding this comment

oliverschuerch Aug 4, 2023

Choose a reason for hiding this comment

gfellerph Aug 11, 2023

Choose a reason for hiding this comment

oliverschuerch Aug 15, 2023 • edited

Choose a reason for hiding this comment

oliverschuerch Aug 4, 2023

Choose a reason for hiding this comment

gfellerph Aug 11, 2023

Choose a reason for hiding this comment

oliverschuerch Aug 15, 2023 • edited

Choose a reason for hiding this comment

oliverschuerch Aug 8, 2023 • edited

Choose a reason for hiding this comment

oliverschuerch left a comment • edited

Choose a reason for hiding this comment

oliverschuerch left a comment

Choose a reason for hiding this comment

oliverschuerch left a comment

Choose a reason for hiding this comment

gfellerph commented Aug 11, 2023 • edited

sonarcloud bot commented Aug 11, 2023

gfellerph commented Jul 5, 2023 •

edited

changeset-bot bot commented Jul 5, 2023 •

edited

swisspost-bot commented Jul 5, 2023 •

edited

oliverschuerch Aug 15, 2023 •

edited

oliverschuerch Aug 15, 2023 •

edited

oliverschuerch Aug 8, 2023 •

edited

oliverschuerch left a comment •

edited

gfellerph commented Aug 11, 2023 •

edited