Merge branch 'main' into feat/2836-add-a-slot-for-card-control-descri…

…ption
swisspost · Mar 21, 2024 · 88c0f4b · 88c0f4b
2 parents 0ae0d78 + cafcc05
commit 88c0f4b
Show file tree

Hide file tree

Showing 21 changed files with 165 additions and 171 deletions.
diff --git a/.changeset/forty-knives-love.md b/.changeset/forty-knives-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added a workaround to display progress bar on input range and on webkit browsers without JavaScript.
diff --git a/.changeset/silver-items-press.md b/.changeset/silver-items-press.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored the new focus style to only be visible when using keyboard for form elements.
diff --git a/...tstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html b/...tstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html
@@ -1,18 +1,11 @@
 <label class="form-label" for="templateDrivenRange">Template-driven range</label>
-<input
-  [(ngModel)]="templateDrivenValue"
-  class="form-range"
-  appFormRange
-  id="templateDrivenRange"
-  type="range"
-/>
+<input [(ngModel)]="templateDrivenValue" class="form-range" id="templateDrivenRange" type="range" />
 
 <label class="form-label" for="reactiveRange">Reactive range</label>
 <input
   (input)="reactiveValue.setValue($event.target['value'])"
   [formControl]="reactiveValue"
   class="form-range"
-  appFormRange
   id="reactiveRange"
   type="range"
 />
@@ -21,7 +14,6 @@
 <input
   [(ngModel)]="displayedValue"
   class="form-range"
-  appFormRange
   id="rangeWithValue"
   max="100"
   min="0"
@@ -36,7 +28,6 @@
     <input
       [(ngModel)]="controlledValue"
       class="form-range"
-      appFormRange
       id="controlledRange"
       max="100"
       min="0"

diff --git a/...p/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts b/...p/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.module.ts
@@ -6,10 +6,9 @@ import { NgModule } from '@angular/core';
 import { FormRangeCustomDemoComponent } from './form-range-custom-demo.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormRangeDirective } from './form-range.directive';
 
 @NgModule({
-  declarations: [FormRangeCustomDemoComponent, FormRangeDirective],
+  declarations: [FormRangeCustomDemoComponent],
   exports: [FormRangeCustomDemoComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule],
 })

diff --git a/...mo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts b/...mo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts
diff --git a/.../bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html b/.../bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
@@ -4,19 +4,6 @@ <h1 class="bold font-curve-large">Form range</h1>
 </div>
 
 <section>
-  <h3>Recommended form range</h3>
-  <div class="alert alert-info my-large">
-    <p class="alert-heading">
-      It is recommended to add the
-      <a
-        href="https://github.com/swisspost/design-system/tree/main/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts"
-      >
-        FormRangeDirective
-      </a>
-      to your project so that the range inputs behavior is complete.
-    </p>
-  </div>
-
   <app-form-range-custom></app-form-range-custom>
   <code
     [highlight]="customCodeTemplate"

diff --git a/...mo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html b/...mo/src/app/bootstrap/components/form-range/form-range-demo/form-range-demo.component.html
@@ -1,11 +1,2 @@
 <label for="customRange" class="form-label">Example range</label>
-<input
-  type="range"
-  class="form-range"
-  appFormRange
-  min="0"
-  max="5"
-  step="0.5"
-  value="3.5"
-  id="customRange"
-/>
+<input type="range" class="form-range" min="0" max="5" step="0.5" value="3.5" id="customRange" />
diff --git a/...-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/...-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
@@ -95,7 +95,6 @@ <h3 class="bold">Simple datepicker</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size"
@@ -153,7 +152,6 @@ <h3 class="bold mt-5">Datepicker with validation</h3>
       <input
         type="range"
         class="form-range"
-        appFormRange
         min="0"
         max="3"
         id="size-validation"

diff --git a/packages/documentation/cypress/e2e/components/product-card.cy.ts b/packages/documentation/cypress/e2e/components/product-card.cy.ts
@@ -9,9 +9,6 @@ describe('Product Card', () => {
     it('Has no detectable a11y violations on load for all variants', () => {
       cy.checkA11y('#root-inner', {
         rules: {
-          'color-contrast': {
-            enabled: false,
-          },
           'heading-order': {
             enabled: false,
           },

diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -88,7 +88,7 @@ function getText(args: Args) {
 function renderProductCard(args: Args) {
   return html`
     <a href="#" class="card product-card${args.cardClasses}">
-      <div class="card-body product-navigation">
+      <div class="card-body product-navigation bg-white">
         ${getTitle(args)} ${getText(args)}
         <span class="link-icon">
           <post-icon name="3020" aria-hidden="true"></post-icon>
@@ -137,7 +137,7 @@ export const Multipart: Story = {
     <div class="row row-cols-md-2 border-gutters">
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body" data-sync-height-with="product-header">
+          <div class="card-body bg-white" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Preiswert</h3>
@@ -167,7 +167,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body" data-sync-height-with="product-body-2">
+          <div class="card-body bg-white" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-3 align-items-stretch">
@@ -217,7 +217,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body">
+          <div class="card-body bg-light">
             <button class="btn btn-secondary btn-animated w-100 mb-small-regular">
               <span>Order Sample Product</span>
             </button>
@@ -231,7 +231,7 @@ export const Multipart: Story = {
 
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body" data-sync-height-with="product-header">
+          <div class="card-body bg-white" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Schneller</h3>
@@ -266,7 +266,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body" data-sync-height-with="product-body-2">
+          <div class="card-body bg-white" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-3 align-items-stretch">
@@ -304,7 +304,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body">
+          <div class="card-body bg-light">
             <button class="btn btn-secondary btn-animated w-100 mb-small-regular">
               <span>Order Sample Product</span>
             </button>

diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
@@ -66,7 +66,7 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
                     (context.args.type === 'text' || context.args.type === 'password')),
               )
               .map((args: Args) => {
-                context.id = `a-${crypto.randomUUID()}`;
+                context.id = `${bg}-${crypto.randomUUID()}`;
                 return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
               })}
           </div>

diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -183,7 +183,7 @@ export default meta;
 type Story = StoryObj;
 
 function render(args: Args, context: StoryContext) {
-  const id = `ExampleTextarea_${context.name}`;
+  const id = context.id ?? `ExampleTextarea_${context.name}`;
   const classes = [
     'form-control',
     args.size,

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
@@ -39,7 +39,7 @@ export const Radio: Story = {
                 // remove disabled & validated examples
                 .filter((args: Args) => !(args.disabled && args.validation !== 'null'))
                 .map((args: Args) => {
-                  context.id = `a-${crypto.randomUUID()}`;
+                  context.id = `${bg}-${crypto.randomUUID()}`;
                   return meta.render?.({ ...context.args, ...args }, context);
                 })}
             </div>

diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -119,7 +119,7 @@ const meta: MetaComponent = {
 function render(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
-  const id = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
+  const id = context.id ?? `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
   const classes = ['form-check-input', args.validation].filter(c => c && c !== 'null').join(' ');
   const groupClasses = ['form-check', args.size].filter(c => c && c !== 'null').join(' ');
 

diff --git a/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts
@@ -49,7 +49,7 @@ export const Slider: Story = {
                   hiddenLabel: [true],
                 }),
               ].map((args: Args) => {
-                context.id = `a-${crypto.randomUUID()}`;
+                context.id = `${bg}-${crypto.randomUUID()}`;
                 return meta.render?.({ ...context.args, ...args }, context);
               })}
             </div>

diff --git a/packages/documentation/src/stories/components/forms/slider/slider.stories.ts b/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
@@ -165,7 +165,7 @@ type Story = StoryObj;
 function render(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
-  const id = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRange`;
+  const id = context.id ?? `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRange`;
   const classes = ['form-range', args.validation].filter(c => c && c !== 'null').join(' ');
 
   const useAriaLabel = args.hiddenLabel;
@@ -200,7 +200,9 @@ function render(args: Args, context: StoryContext) {
   if (args.showValue === 'text') {
     valueElement = html` <p class="form-text">${args.value}</p> `;
   } else if (args.showValue === 'input') {
-    const inputId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRangeInput`;
+    const inputId = context.id
+      ? `${context.id}_input`
+      : `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRangeInput`;
 
     valueElement = [
       html` <label class="form-label visually-hidden" for="${inputId}">Range controller</label> `,

diff --git a/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
@@ -16,29 +16,30 @@ export const Switch: Story = {
   render: (_args: Args, context: StoryContext) => {
     const longerText =
       'Longa etikedo kiu plej versajne ne taugas sur unu linio kaj tial devas esti envolvita. Kaj nur por esti sur la sekura flanko, ni simple aldonu unu plian tre sencelan frazon ci tie. Vi neniam scias...';
-    const templateVariants = bombArgs({
-      labelPosition: ['before', 'after'],
-      label: ['Notifications', longerText],
-      hiddenLabel: [false],
-      checked: [false, true],
-      disabled: [false, true],
-      validation: ['null', 'is-valid', 'is-invalid'],
-    })
-      .filter((args: Args) => !(args.labelPosition == 'before' && args.label === longerText))
-      .map(args => ({ ...args, id: `a-${crypto.randomUUID()}` }))
-      .map(
-        (args: Args) =>
-          html`
-            <div class="col-6 p-3">
-              ${meta.render?.({ ...context.args, ...args }, { ...context, id: args.id })}
-            </div>
-          `,
-      );
+    const templateVariants = (bg: string) =>
+      bombArgs({
+        labelPosition: ['before', 'after'],
+        label: ['Notifications', longerText],
+        hiddenLabel: [false],
+        checked: [false, true],
+        disabled: [false, true],
+        validation: ['null', 'is-valid', 'is-invalid'],
+      })
+        .filter((args: Args) => !(args.labelPosition == 'before' && args.label === longerText))
+        .map(args => ({ ...args, id: `${bg}-${crypto.randomUUID()}` }))
+        .map(
+          (args: Args) =>
+            html`
+              <div class="col-6 p-3">
+                ${meta.render?.({ ...context.args, ...args }, { ...context, id: args.id })}
+              </div>
+            `,
+        );
 
     return html`
       <div>
         ${['white', 'dark'].map(
-          bg => html` <div class=${'row bg-' + bg}>${templateVariants}</div> `,
+          bg => html` <div class=${'row bg-' + bg}>${templateVariants(bg)}</div> `,
         )}
       </div>
     `;

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
@@ -43,7 +43,7 @@ export const Textarea: Story = {
               <h3>Sizes</h3>
               ${getCombinations('size', context.argTypes.size.options, combinations).map(
                 (args: Args) => {
-                  context.id = `a-${crypto.randomUUID()}`;
+                  context.id = `${bg}-${crypto.randomUUID()}`;
                   return html`
                     <div>
                       ${args.title !== undefined && args.title
@@ -62,7 +62,7 @@ export const Textarea: Story = {
               )}
               <h3>Floating Label</h3>
               ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => {
-                context.id = `a-${crypto.randomUUID()}`;
+                context.id = `${bg}-${crypto.randomUUID()}`;
                 return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
               })}
             </div>

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -154,7 +154,8 @@ export default meta;
 type Story = StoryObj;
 
 function renderTextarea(args: Args, context: StoryContext) {
-  const id = `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleTextarea`;
+  const id =
+    context.id ?? `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleTextarea`;
   const classes = mapClasses({
     'form-control': true,
     [args.size]: args.size && args.size !== 'null',