feat(styles): invalid message on card-control (#2978)

.changeset/giant-bees-sleep.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added an invalid message for the card-control component and an icon in the invalid message of the checkbox and radio button

packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts

@@ -2,7 +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 { classMap } from 'lit/directives/class-map.js';
+import { mapClasses } from '@/utils';
 import { MetaComponent } from '@root/types';
 import { parse } from '@/utils/sass-export';
 import scss from '../card-control.module.scss';
@@ -30,7 +30,7 @@ const meta: MetaComponent = {
     checked: false,
     disabled: false,
     validation: 'null',
-    groupValidation: 'null',
+    groupValidation: false,
   },
   argTypes: {
     type: {
@@ -108,18 +108,9 @@ const meta: MetaComponent = {
       },
     },
     groupValidation: {
-      name: 'Group Validation',
-      description: 'Set validation status for the whole group of choice cards',
+      name: 'GroupValidation',
       control: {
-        type: 'radio',
-        labels: {
-          'null': 'Default',
-          'is-invalid': 'Invalid',
-        },
-      },
-      options: ['null', 'is-invalid'],
-      table: {
-        category: 'General',
+        type: 'boolean',
       },
     },
   },
@@ -154,14 +145,14 @@ export const Default = {
     const [_, updateArgs] = useArgs();
 
     // Conditional classes
-    const cardClasses = classMap({
+    const cardClasses = mapClasses({
       'checked': args.checked,
       'disabled': args.disabled,
       'is-invalid': args.validation === 'is-invalid',
       'checkbox-button-card': args.type === 'checkbox',
       'radio-button-card': args.type === 'radio',
     });
-    const inputClasses = classMap({
+    const inputClasses = mapClasses({
       'form-check-input': true,
       'is-invalid': args.validation === 'is-invalid',
     });
@@ -170,6 +161,7 @@ export const Default = {
     const controlId = `CardControl_${id}`;
     const description = html`<span class="font-size-12">${args.description}</span>`;
     const icon = html` <post-icon name="${args.icon}" aria-hidden="true"></post-icon> `;
+    const invalidFeedback = html`<p class="invalid-feedback mt-2">Invalid feedback</p>`;
 
     return html`
       <div class="${cardClasses}">
@@ -189,6 +181,7 @@ export const Default = {
         </label>
         ${args.icon !== 'none' ? icon : nothing}
       </div>
+      ${args.validation === 'is-invalid' && !args.GroupValidation ? invalidFeedback : nothing}
     `;
   },
 };
@@ -238,7 +231,8 @@ function col(label: string, args: Args, useState: useStateFn) {
         label,
         inputName: args.type === 'radio' ? 'group' : `control-${id}`,
         checked: false,
-        validation: args.groupValidation,
+        GroupValidation: true,
+        validation: args.validation,
       })}
     </div>
   `;
@@ -247,19 +241,19 @@ function col(label: string, args: Args, useState: useStateFn) {
 export const Group = {
   parameters: {
     controls: {
-      include: ['Type', 'Group Validation'],
+      include: ['Type', 'Validation'],
     },
   },
   render: (args: Args) => {
-    const error = html`
-      <p id="radio-group-invalid-feedback" class="d-block mt-3 invalid-feedback">Invalid choice</p>
+    const invalidFeedback = html`
+      <p id="invalid-feedback" class="d-inline-flex mt-3 invalid-feedback">Invalid choice</p>
     `;
 
     return html`
       <fieldset class="container-fluid">
-        <legend aria-describedby="radio-group-invalid-feedback">Legend</legend>
+        <legend aria-describedby="invalid-feedback">Legend</legend>
         <div class="row g-3">${CONTROL_LABELS.map(n => col(n, args, useState))}</div>
-        ${args.groupValidation === 'is-invalid' ? error : null}
+        ${args.validation === 'is-invalid' ? invalidFeedback : nothing}
       </fieldset>
     `;
   },

packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts

@@ -36,6 +36,7 @@ const meta: MetaComponent = {
     'slots-icon': '',
     'event-postInput': '',
     'event-postChange': '',
+    'groupValidation': false,
   },
   argTypes: {
     'type': {
@@ -80,6 +81,12 @@ const meta: MetaComponent = {
         disable: true,
       },
     },
+    'groupValidation': {
+      name: 'groupValidation',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 };
 
@@ -88,11 +95,21 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ['groupValidation'],
+      },
+    },
+  },
   render: (args: Args) => {
     const [, updateArgs] = useArgs();
 
     const content = html`${unsafeHTML(args['slots-default'])}`;
     const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
+    const invalidFeedback = html`<p class="invalid-feedback${args.groupValidation ? '' : ' mt-2'}">
+      Invalid feedback
+    </p>`;
 
     return html`
       <post-card-control
@@ -111,6 +128,7 @@ export const Default: Story = {
       >
         ${args['slots-default'] ? content : null} ${args['slots-icon'] ? icon : null}
       </post-card-control>
+      ${args.validity === 'false' && !args.disabled ? invalidFeedback : nothing}
     `;
   },
 };
@@ -160,18 +178,18 @@ export const FormIntegration: Story = {
   parameters: {
     docs: {
       controls: {
-        include: ['disabled fieldset', 'value', 'disabled'],
+        include: ['disabled fieldset', 'value', 'disabled', 'validity', 'group validity'],
       },
     },
   },
   args: {
     name: 'checkbox',
     checkboxFieldset: false,
-    validity: 'null',
     radioValue: '',
     radioDisabled: '',
     radioFieldset: false,
     radioValidity: 'null',
+    groupValidation: true,
   },
   argTypes: {
     value: {
@@ -264,10 +282,7 @@ export const FormIntegration: Story = {
   render: (args: Args, context: StoryContext) => {
     const [_, updateArgs] = useArgs();
 
-    const invalidFeedback = html`<p
-      id="radio-group-invalid-feedback"
-      class="d-block invalid-feedback"
-    >
+    const invalidFeedback = html`<p id="radio-invalid-feedback" class="invalid-feedback">
       Invalid feedback
     </p>`;
 
@@ -281,7 +296,7 @@ export const FormIntegration: Story = {
         ${Default.render?.(args, context)}
       </fieldset>
       <fieldset class="mt-3" .disabled=${args.radioFieldset}>
-        <legend aria-describedby="radio-group-invalid-feedback">Legend</legend>
+        <legend aria-describedby="radio-invalid-feedback">Legend</legend>
         ${[1, 2, 3].map(
           n =>
             html`<post-card-control

packages/styles/src/components/form-validation.scss

@@ -13,10 +13,13 @@
 @use './../variables/components/form-validation';
 @use './../variables/components/forms';
 @use './../variables/spacing';
+@use './../variables/type';
+@use './../mixins/icons';
 
 .invalid-feedback,
 .valid-feedback {
   display: none;
+  align-items: center;
   width: 100%;
   margin-block: form-validation.$form-feedback-margin-top 0;
   padding: form-validation.$form-feedback-padding-y form-validation.$form-feedback-padding-x;
@@ -25,16 +28,32 @@
   @include utilities-mx.high-contrast-mode() {
     padding-inline: 0;
   }
+
+  &::before {
+    content: '';
+    height: form-validation.$form-feedback-font-size * type.$line-height-copy;
+    width: form-validation.$form-feedback-font-size * type.$line-height-copy;
+    display: inline-block;
+    margin-right: spacing.$size-mini;
+  }
 }
 
 .invalid-feedback {
   background: form-validation.$form-feedback-invalid-bg;
   color: form-validation.$form-feedback-invalid-text;
+
+  &::before {
+    @include icons.icon(2413);
+  }
 }
 
 .valid-feedback {
   background: form-validation.$form-feedback-valid-bg;
   color: form-validation.$form-feedback-valid-text;
+
+  &::before {
+    @include icons.icon(2105);
+  }
 }
 
 .valid-feedback.custom-feedback {
@@ -48,7 +67,7 @@
   @include b.form-validation-state-selector($state) {
     ~ .#{$state}-feedback,
     ~ .#{$state}-tooltip {
-      display: block;
+      display: inline-flex;
     }
   }
 
@@ -92,8 +111,9 @@
 }
 
 .is-invalid ~ .invalid-feedback,
-.is-valid ~ .valid-feedback {
-  display: block;
+.is-valid ~ .valid-feedback,
+post-card-control ~ .invalid-feedback {
+  display: inline-flex;
 }
 
 .form-control,