Merge branch 'main' into 1834-update-textarea-styles

# Conflicts: # packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
swisspost · Jun 11, 2024 · 80719c7 · 80719c7
2 parents 3354737 + 6e37a06
commit 80719c7
Show file tree

Hide file tree

Showing 26 changed files with 388 additions and 1,829 deletions.
diff --git a/.changeset/pretty-clouds-exercise.md b/.changeset/pretty-clouds-exercise.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-intranet-header': patch
+---
+
+Enabled keyboard navigation for the user dropdown.
diff --git a/packages/components-angular/projects/consumer-app/src/app/app.component.spec.ts b/packages/components-angular/projects/consumer-app/src/app/app.component.spec.ts
@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
 
 describe('App', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       declarations: [AppComponent],
     }),
   );

diff --git a/packages/components/cypress/downloads/downloads.htm b/packages/components/cypress/downloads/downloads.htm
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
@@ -371,7 +371,7 @@ export class PostCardControl {
           data-host-context={this.hostContext.join(' ')}
         >
           <input
-            ref={el => (this.control = el as HTMLInputElement)}
+            ref={el => (this.control = el)}
             id={this.controlId}
             class="card-control--input form-check-input"
             type={this.type}

diff --git a/packages/demo/src/app/app.component.spec.ts b/packages/demo/src/app/app.component.spec.ts
@@ -1,11 +1,11 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       declarations: [AppComponent],
     }).compileComponents();
   }));

diff --git a/...ponents/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.html b/...ponents/button-group/button-group-checkbox-demo/button-group-checkbox-demo.component.html
@@ -1,4 +1,4 @@
-<div aria-label="Checkboxes with Reactive Froms" class="btn-group" role="group">
+<fieldset aria-label="Checkboxes with Reactive Froms" class="btn-group">
   <input
     [(ngModel)]="checkboxes.one"
     autocomplete="off"
@@ -35,4 +35,4 @@
     disabled
   />
   <label class="btn btn-secondary" for="btncheck4">Four (disabled)</label>
-</div>
+</fieldset>
diff --git a/...trap/components/button-group/button-group-demo-page/button-group-demo-page.component.html b/...trap/components/button-group/button-group-demo-page/button-group-demo-page.component.html
@@ -120,9 +120,9 @@ <h4 class="bold">Bad example</h4>
     <code>.btn-secondary</code>
     .
   </p>
-  <div class="btn-group" role="group" aria-label="Basic mixed styles example">
+  <fieldset class="btn-group" aria-label="Basic mixed styles example">
     <button type="button" class="btn btn-nightblue">Left</button>
     <button type="button" class="btn btn-danger">Middle</button>
     <button type="button" class="btn btn-success">Right</button>
-  </div>
+  </fieldset>
 </section>
diff --git a/...ap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html b/...ap/components/button-group/button-group-radio-demo/button-group-radio-demo.component.html
@@ -1,4 +1,4 @@
-<div aria-label="Radio Buttons with Template-driven Froms" class="btn-group" role="group">
+<fieldset aria-label="Radio Buttons with Template-driven Froms" class="btn-group">
   <input
     [(ngModel)]="radio"
     [value]="Choice.One"
@@ -44,4 +44,4 @@
     disabled
   />
   <label class="btn btn-secondary" for="btnradio4">Four (disabled)</label>
-</div>
+</fieldset>
diff --git a/...up/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html b/...up/button-group-reactive-checkbox-demo/button-group-reactive-checkbox-demo.component.html
@@ -1,9 +1,4 @@
-<div
-  [formGroup]="checkboxes"
-  aria-label="Checkboxes with Reactive Froms"
-  class="btn-group"
-  role="group"
->
+<fieldset [formGroup]="checkboxes" aria-label="Checkboxes with Reactive Froms" class="btn-group">
   <input
     autocomplete="off"
     class="btn-check"
@@ -39,4 +34,4 @@
     type="checkbox"
   />
   <label class="btn btn-secondary" for="btncheck4">Four (disabled)</label>
-</div>
+</fieldset>
diff --git a/...on-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html b/...on-group/button-group-reactive-radio-demo/button-group-reactive-radio-demo.component.html
@@ -1,4 +1,4 @@
-<div aria-label="Radio Buttons with Reactive Froms" class="btn-group" role="group">
+<fieldset aria-label="Radio Buttons with Reactive Froms" class="btn-group">
   <input
     [formControl]="radio"
     [value]="Choice.One"
@@ -39,4 +39,4 @@
     [attr.disabled]="fourthIsDisabled ? '' : null"
   />
   <label class="btn btn-secondary" for="btnradio4">Four (disabled)</label>
-</div>
+</fieldset>
diff --git a/.../src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html b/.../src/app/bootstrap/components/buttons/buttons-demo/button-tags/button-tags.component.html
@@ -1,4 +1,4 @@
-<a class="btn btn-primary" href="#" role="button">Link</a>
+<a class="btn btn-primary" href="#">Link</a>
 <button class="btn btn-primary" type="submit">Button</button>
 <input class="btn btn-primary" type="button" value="Input" />
 <input class="btn btn-primary" type="submit" value="Submit" />

diff --git a/...nents/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts b/...nents/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts
@@ -2,15 +2,15 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { IntranetHeaderDemoBigSidebarComponent } from './intranet-header-demo-big-sidebar.component';
 import { ErrorService } from '../../services/error.service';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 describe('IntranetHeaderBigComponent', () => {
   let component: IntranetHeaderDemoBigSidebarComponent;
   let fixture: ComponentFixture<IntranetHeaderDemoBigSidebarComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       declarations: [IntranetHeaderDemoBigSidebarComponent],
       providers: [ErrorService],
     }).compileComponents();

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
@@ -17,7 +17,7 @@ <h1 class="bold font-curve-large">Datepicker</h1>
 <section>
   <p id="languageSelectorTitle" class="light font-curve-regular">Choose a language:</p>
 
-  <div aria-labelledby="languageSelectorTitle" class="btn-group mb-3" role="group">
+  <fieldset aria-labelledby="languageSelectorTitle" class="btn-group mb-3">
     <input
       [(ngModel)]="language"
       autocomplete="off"
@@ -57,7 +57,7 @@ <h1 class="bold font-curve-large">Datepicker</h1>
       value="it"
     />
     <label class="btn btn-secondary" for="btn-check-it">Italiano</label>
-  </div>
+  </fieldset>
 
   <div class="alert alert-info" role="alert">
     <p>

diff --git a/...ages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html b/...ages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html
@@ -7,7 +7,7 @@ <h2 class="visually-hidden">Order progress, step 3 of 4</h2>
     aria-hidden="true"
   ></ngb-progressbar>
 
-  <ol class="stepper" role="list">
+  <ol class="stepper">
     <li
       *ngFor="let step of steps; index as i"
       [attr.aria-current]="isCurrent(step) ? 'step' : undefined"

diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore
@@ -3,3 +3,4 @@ storybook-static
 
 # Project specific
 public/manager
+cypress/downloads
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -211,7 +211,6 @@ type Story = StoryObj;
 const Template: Story = {
   render: (args: Args, context: StoryContext) => {
     const [_, updateArgs] = useArgs();
-    const id = `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleSelect`;
     const classes = [
       'form-select',
       args.size,
@@ -223,7 +222,7 @@ const Template: Story = {
       .join(' ');
     const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
     const label = !useAriaLabel
-      ? html` <label for="${id}" class="form-label">${args.label}</label> `
+      ? html` <label for="${context.id}" class="form-label">${args.label}</label> `
       : null;
     const optionElements = Array.from({ length: args.options - 1 }, (_, i) => i + 2).map(
       (key: number) => html` <option value="valoro_${key}">Opcion ${key}</option> `,
@@ -247,7 +246,7 @@ const Template: Story = {
     ];
     const control = html`
       <select
-        id="${id}"
+        id="${context.id}"
         class="${classes}"
         ?multiple="${args.multiple}"
         size="${args.multipleSize ?? nothing}"

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -176,19 +176,15 @@ export default meta;
 type Story = StoryObj;
 
 function renderTextarea(args: Args, context: StoryContext) {
-  const id =
-    context.id ?? `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleTextarea`;
-  const classes = [
-    'form-control',
-    args.floatingLabel ? args.sizeFloatingLabel : args.size,
-    args.validation,
-  ]
-    .filter(c => c && c !== 'null')
-    .join(' ');
-
+  const classes = mapClasses({
+    'form-control': true,
+    [args.size]: !args.floatingLabel && args.size !== 'null',
+    [args.sizeFloatingLabel]: args.floatingLabel && args.sizefloatingLabel !== 'null',
+    [args.validation]: args.validation && args.validation !== 'null',
+  });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
-    ? html` <label for=${id} class="form-label">${args.label}</label> `
+    ? html` <label for=${context.id} class="form-label">${args.label}</label> `
     : null;
   const contextual = [
     args.validation === 'is-valid'
@@ -201,7 +197,7 @@ function renderTextarea(args: Args, context: StoryContext) {
   ];
   const control = html`
     <textarea
-      id=${id}
+      id=${context.id}
       class=${classes}
       defaultValue=${args.value ?? nothing}
       placeholder=${useAriaLabel ? args.label : ' '}

diff --git a/packages/icons/src/utilities/__snapshots__/downloadSVG.spec.ts.snap b/packages/icons/src/utilities/__snapshots__/downloadSVG.spec.ts.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`downloadSVG should download an svg icon 1`] = `
-"<svg><g id="icon">
+"<svg>
   <path d="M16 8.4 3.467 20.8z"/>
-</g></svg>
+</svg>
 "
 `;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@ storybook-static

		# Project specific
		public/manager
		cypress/downloads