feat(styles): implement v2 styles for checkbox, radio-button & switch…

… using tokens (#3965) Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Nov 25, 2024 · 6ca7f64 · 6ca7f64
1 parent 2115474
commit 6ca7f64
Show file tree

Hide file tree

Showing 29 changed files with 775 additions and 463 deletions.
diff --git a/.changeset/chatty-kiwis-travel.md b/.changeset/chatty-kiwis-travel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Simplified the markup structure for checkboxes by removing the need to use the classes `.form-check-input` and `.form-check-label` on the input field and the label respectively. You can safely remove these classes from your markup, they no longer have any effect.
diff --git a/.changeset/dirty-squids-hunt.md b/.changeset/dirty-squids-hunt.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated radio-button styles with Design Tokens.
diff --git a/.changeset/slow-fishes-reply.md b/.changeset/slow-fishes-reply.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated checkbox styles with Design Tokens.
diff --git a/.changeset/stupid-walls-tie.md b/.changeset/stupid-walls-tie.md
@@ -0,0 +1,5 @@
+---
+"@swisspost/design-system-styles": minor
+---
+
+Updated switch styles with Design Tokens.
diff --git a/packages/components/cypress/fixtures/post-card-control.form-association.test.html b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
     <script>
       function formHandler(e) {

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -2,14 +2,15 @@
 @use 'sass:math';
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/components/form-check';
+@use '@swisspost/design-system-styles/components/checkbox';
+@use '@swisspost/design-system-styles/components/radio-button';
 
 /*
 * There are a whole bunch of !important statements in this file.
 * They are necessary and should not be removed, because we need to override the .form-check styles here.
 */
 
 :host {
-
   // remove as soon as all browser support :host-context()
   // https://caniuse.com/?search=%3Ahost-context()
   --post-card-control-bg-context: #{post.$backgrounds};
@@ -36,6 +37,7 @@
   flex-basis: 100%;
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
+  align-items: center;
   gap: 0 post.$size-mini;
   margin: 0;
   padding: post.$size-regular;
@@ -54,6 +56,14 @@
     cursor: inherit;
     transition: none;
 
+    @include post.focus-style-none();
+
+    &:hover:not([disabled]),
+    &:hover:not([disabled]) ~ label.form-check-label {
+      color: var(--post-contrast-color);
+      background-color: transparent;
+    }
+
     &:focus,
     &:focus-visible {
       box-shadow: none;
@@ -70,7 +80,7 @@
   .card-control--label {
     grid-area: label;
     margin: post.$size-micro 0;
-    padding: 0;
+    padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
     transition: none;
@@ -170,17 +180,11 @@
     --post-card-control-input-bg: transparent;
 
     border-style: dashed;
-    text-decoration: line-through;
     cursor: default;
 
     .card-control--input {
-      border: 0 none;
       padding: post.$form-check-input-border-width;
-      background-image: url('#{post.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='radio'] {
-        background-image: url('#{post.$form-check-input-radio-disabled-background-url-light}');
-      }
+      border-style: dashed;
     }
   }
 

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -362,7 +362,7 @@ export class PostCardControl {
           <input
             ref={el => (this.control = el)}
             id={this.controlId}
-            class="card-control--input form-check-input"
+            class="card-control--input"
             type={this.type}
             name={this.name}
             value={this.value}
@@ -381,7 +381,7 @@ export class PostCardControl {
           <label
             id={`${this.controlId}_label`}
             htmlFor={this.controlId}
-            class="card-control--label form-check-label"
+            class="card-control--label"
           >
             {this.label}
             {this.description ? (

diff --git a/packages/components/src/components/post-list/post-list.tsx b/packages/components/src/components/post-list/post-list.tsx
@@ -29,7 +29,7 @@ export class PostList {
    */
   @Prop() readonly horizontal: boolean = false;
 
-  titleEl: HTMLElement;
+  private titleEl: HTMLElement;
 
   componentWillLoad() {
     /**

diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
@@ -66,5 +66,5 @@ export const renderBadge = (store: StoreType) => {
 type Story = StoryObj<{ store: StoreType }>;
 
 export const Default: Story = {
-  render: (args) => renderBadge(args.store),
+  render: args => renderBadge(args.store),
 };
diff --git a/...mentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts b/...mentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryFn } from '@storybook/web-components';
 import { useArgs, useState } from '@storybook/preview-api';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '@/utils';
 import { MetaComponent } from '@root/types';
 import { parse } from '@/utils/sass-export';
@@ -152,10 +153,7 @@ export const Default = {
       'checkbox-button-card': args.type === 'checkbox',
       'radio-button-card': args.type === 'radio',
     });
-    const inputClasses = mapClasses({
-      'form-check-input': true,
-      'is-invalid': args.validation === 'is-invalid',
-    });
+    const validationClass = args.validation !== 'null' ? `is-${args.validation}` : undefined;
 
     // Child components
     const controlId = `CardControl_${id}`;
@@ -168,14 +166,14 @@ export const Default = {
         <input
           id="${controlId}"
           name="${args.type}-button-card-${args.inputName ?? `control_${id}`}"
-          class="${inputClasses}"
+          class="${ifDefined(validationClass)}"
           type="${args.type}"
           ?disabled="${args.disabled}"
           .checked="${args.checked}"
           checked="${args.checked || nothing}"
           @input="${(e: InputEvent) => inputHandler(e, updateArgs)}"
         />
-        <label class="form-check-label" for="${controlId}">
+        <label for="${controlId}">
           <span>${args.label}</span>
           ${args.description ? description : nothing}
         </label>

diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
@@ -49,14 +49,18 @@ The indeterminate state can only be set via JavaScript and is styled using the `
   language="javascript"
 />
 
-### Sizing
+### Grouped
 
-The size can be changed by simply adding a class:
+To show a checkbox group, just wrap your checkboxes in a `fieldset`.
 
-- Small: `.form-check-sm`
-- Large: default
+<div className="alert alert-info alert-md">
+  Don't forget to add also a `<legend>` element.
+  You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-<Canvas of={checkboxStories.Size} />
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+</div>
+
+<Canvas of={checkboxStories.Grouped} />
 
 ### Inline
 

diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
@@ -25,7 +25,10 @@ export const Checkbox: Story = {
       <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
+            <div
+              class="${bg} d-flex flex-wrap align-items-start gap-16 p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
               ${[
                 ...bombArgs({
                   checked: ['indeterminate'],

diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -24,7 +24,6 @@ const meta: MetaComponent = {
     hiddenLabel: false,
     checked: 'unchecked',
     disabled: false,
-    size: 'null',
     validation: 'null',
   },
   argTypes: {
@@ -90,21 +89,6 @@ const meta: MetaComponent = {
         category: 'States',
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      control: {
-        type: 'select',
-        labels: {
-          'form-check-sm': 'Small',
-          'null': 'Large',
-        },
-      },
-      options: ['form-check-sm', 'null'],
-      table: {
-        category: 'General',
-      },
-    },
     disabled: {
       name: 'Disabled',
       description:
@@ -165,7 +149,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 function getLabel({ label }: Args, { id }: StoryContext) {
-  return html` <label for="${id}" class="form-check-label">${label}</label> `;
+  return html` <label for="${id}">${label}</label> `;
 }
 
 function getValidationFeedback({ validation }: Args) {
@@ -185,10 +169,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
     'form-check-inline': args.inline,
   });
 
-  const checkboxClasses = mapClasses({
-    'form-check-input': true,
-    ['is-' + args.validation]: args.validation !== 'null',
-  });
+  const validationClass = args.validation !== 'null' ? `is-${args.validation}` : undefined;
 
   const handleChange = () => {
     updateArgs({ checked: CHECKED_STATE_TOGGLE_MAP[args.checked] });
@@ -203,7 +184,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
     <div class="${containerClasses}">
       <input
         id="${context.id}"
-        class="${checkboxClasses}"
+        class="${ifDefined(validationClass)}"
         type="checkbox"
         aria-invalid="${ifDefined(VALIDATION_STATE_MAP[args.validation])}"
         aria-label="${ifDefined(args.hiddenLabel ? args.label : undefined)}"
@@ -239,13 +220,23 @@ export const Validation: Story = {
   },
 };
 
-export const Size: Story = {
-  args: {
-    size: 'form-check-sm',
-  },
+export const Grouped: Story = {
+  render: (args: Args, context: StoryContext) => html`
+    <fieldset>
+      <legend class="${ifDefined(args.hiddenLegend ? 'visually-hidden' : undefined)}">
+        Legend
+      </legend>
+      ${['Unua Etikedo', 'Dua Etikedo', 'Tria Etikedo', 'Kvara  Etikedo'].map((label, index) =>
+        renderCheckbox(
+          { ...args, label, checked: false },
+          { ...context, id: `${context.id}-${index}` },
+        ),
+      )}
+    </fieldset>
+  `,
   parameters: {
     controls: {
-      exclude: ['Hidden Legend', 'Inline Layout'],
+      include: ['Hidden Legend'],
     },
   },
 };
@@ -254,7 +245,7 @@ export const Inline: Story = {
   render: (args: Args, context: StoryContext) => html`
     <fieldset>
       <legend class="${ifDefined(args.hiddenLegend ? 'visually-hidden' : undefined)}">
-        Legendo
+        Legend
       </legend>
       ${['Unua Etikedo', 'Dua Etikedo', 'Tria Etikedo', 'Kvara  Etikedo'].map((label, index) =>
         renderCheckbox(

diff --git a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
@@ -31,14 +31,18 @@ Our radios use custom icons to indicate checked states.
 
 The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
 
-### Sizing
+### Grouped
 
-The size can be changed by simply adding a class:
+To show radio button group, just wrap your radios in a `fieldset`.
 
-- Small: `.form-check-sm`
-- Large: default
+<div className="alert alert-info alert-md">
+  Don't forget to add also a `<legend>` element.
+  You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-<Canvas of={RadioStories.Size} />
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+</div>
+
+<Canvas of={RadioStories.Grouped} />
 
 ### Inline
 

diff --git a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
@@ -18,7 +18,10 @@ export const Radio: Story = {
       <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex gap-16 flex-column p-16">
+            <div
+              class="${bg} d-flex gap-16 flex-column p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
               ${[
                 ...bombArgs({
                   label: [