feat(styles): create validation component (#3824)

Co-authored-by: Alizé Debray <[email protected]>

.changeset/wise-tomatoes-brake.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the styles  of the form validation messages to match the new Post design.

packages/documentation/cypress/e2e/components/validation.cy.ts

@@ -0,0 +1,13 @@
+describe('Validation', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--validation');
+      cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/cypress/snapshots/components/validation.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Validation', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--validation');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Validation', { widths: [1440] });
+  });
+});

packages/documentation/src/shared/styles-package-import-individual.sample.ts

@@ -6,7 +6,7 @@ interface Props {
 const requiredLabels: { [key: string]: string } = {
   'icons': 'required if you use icons',
   'floating-label': 'required if you use floating-labels',
-  'form-feedback': 'required if you use validation feedbacks',
+  'validation': 'required if you use validation feedbacks',
 };
 
 export function getComponentStyleImports(props: Props) {

packages/documentation/src/shared/styles-package-import.mdx

@@ -4,20 +4,17 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 ## Style Imports
 
 <p>
-  <small>*Make sure the `@swisspost/design-system-styles` package is already present in your project
-    or follow the [installation guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*</small>
+  <small>
+    *Make sure the `@swisspost/design-system-styles` package is already present in your project or
+    follow the [installation
+    guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*
+  </small>
 </p>
 
 To import all Design System styles:
 
-<Source
-  code={`@use '@swisspost/design-system-styles/index.scss';`}
-  language="scss"
-/>
+<Source code={`@use '@swisspost/design-system-styles/index.scss';`} language="scss" />
 
 To import only the styles required for this component:
 
-<Source
-  code={getComponentStyleImports(props)}
-  language="scss"
-/>
+<Source code={getComponentStyleImports(props)} language="scss" />

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

@@ -95,7 +95,8 @@ const meta: MetaComponent = {
     },
     validation: {
       name: 'Validation',
-      description: "Controls the display of the component's validation state.",
+      description:
+        'Defines the validation state of the card control and controls the display of the corresponding return message.<span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs##card-control">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx

@@ -24,7 +24,7 @@ Our checkboxes use custom icons to indicate checked or indeterminate states.
   <Controls of={checkboxStories.Default} />
 </div>
 
-<StylesPackageImport components={['form-check']} required={{ 'form-feedback': true }} />
+<StylesPackageImport components={['form-check']} required={{ validation: true }} />
 
 ## Examples
 
@@ -57,7 +57,8 @@ To show a checkbox group, just wrap your checkboxes in a `fieldset`.
   Don't forget to add also a `<legend>` element.
   You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+
 </div>
 
 <Canvas of={checkboxStories.Grouped} />
@@ -75,13 +76,3 @@ Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83
 </div>
 
 <Canvas of={checkboxStories.Inline} />
-
-### Validation
-
-To provide feedback to your users about the validation state of a checkbox,
-simply add a `.is-valid` or a `.is-invalid` classes to it.
-
-These classes control the display of corresponding feedback messages that should be placed under the input:
-`<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
-
-<Canvas of={checkboxStories.Validation} />

packages/documentation/src/stories/components/checkbox/checkbox.stories.ts

@@ -107,8 +107,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the checkbox and controls the display of the corresponding return' +
-        ' message.',
+        'Defines the validation state of the checkbox and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#checkbox">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

packages/documentation/src/stories/components/forms/validation/validation.docs.mdx

@@ -0,0 +1,75 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ValidationStories from './validation.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ValidationStories} />
+
+<div className="docs-title">
+# Validation
+
+  <nav>
+    <link-design of={JSON.stringify(ValidationStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  The Validation component is a reusable component designed to provide consistent validation
+  feedback across all components that require input validation.
+</div>
+
+Validation employs the `:invalid` and `:valid` pseudo-classes to provide styling for `<input>`, `<select>`, and `<textarea>` elements. To control when these styles are displayed, the `.was-validated` class must be applied to a parent element (e.g. `<form>`).
+
+Alternatively, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for server-side validation, without the `.was-validated` parent class.
+
+These classes control the display of corresponding feedback messages that should be placed under the component: `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
+
+## Examples
+
+### Checkbox
+
+<Canvas sourceState="shown" of={ValidationStories.Checkbox} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Checkbox} />
+</div>
+
+### Input
+
+<Canvas sourceState="shown" of={ValidationStories.Input} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Input} />
+</div>
+
+### Radio Button
+
+<Canvas sourceState="shown" of={ValidationStories.RadioButton} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.RadioButton} />
+</div>
+
+### Radio Button Inline Group
+
+<Canvas sourceState="shown" of={ValidationStories.RadioButtonGroup} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.RadioButtonGroup} />
+</div>
+
+### Select
+
+<Canvas sourceState="shown" of={ValidationStories.Select} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Select} />
+</div>
+
+### Switch
+
+<Canvas sourceState="shown" of={ValidationStories.Switch} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.Switch} />
+</div>
+
+### Textarea
+
+<Canvas sourceState="shown" of={ValidationStories.TextArea} />
+<div className="hide-col-default">
+  <Controls of={ValidationStories.TextArea} />
+</div>

packages/documentation/src/stories/components/forms/validation/validation.snapshot.stories.ts

@@ -0,0 +1,50 @@
+import type { StoryObj, Args, StoryContext } from '@storybook/web-components';
+import meta, {
+  Checkbox,
+  Input,
+  RadioButton,
+  RadioButtonGroup,
+  Select,
+  Switch,
+  TextArea,
+} from './validation.stories';
+import { html, nothing } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+const components = [Checkbox, Input, RadioButton, RadioButtonGroup, Select, Switch, TextArea];
+
+export const Validation: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return schemes(
+      scheme => html`
+        <div class="snapshot">
+          ${components.map(Component => {
+            return html`
+              <div>
+                ${['is-valid', 'is-invalid'].map(validation => {
+                  const render = Component.render || (() => nothing);
+                  const args = {
+                    ...context.args,
+                    validationValidation: validation,
+                    scheme: scheme,
+                    componentName: Object.keys(Component.args!)[0],
+                  };
+                  return html`${render(args, context)}`;
+                })}
+              </div>
+            `;
+          })}
+        </div>
+      `,
+    );
+  },
+};