feat(components): add new component card-control

.changeset/fair-singers-return.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the `.form-check-input` background-color, by setting it to white on none or light backgrounds.

.changeset/shaggy-files-protect.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components-angular-workspace': minor
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added a new web-component `post-card-control`, which works like a native `input[type="checkbox"]` or `input[type="radio"]` but with a custom visual design.

package.json

@@ -50,6 +50,8 @@
     "components:snapshots": "start-server-and-test docs:headless 9001 'pnpm --filter design-system-components snapshots'",
     "components-angular:start": "pnpm --filter design-system-components-angular-workspace start",
     "components-angular:build": "pnpm --filter design-system-components-angular-workspace build",
+    "components-angular:e2e": "pnpm --filter design-system-components-angular-workspace e2e",
+    "components-angular:e2e:watch": "pnpm --filter design-system-components-angular-workspace e2e:watch",
     "header": "pnpm header:start",
     "header:start": "pnpm --filter internet-header dev",
     "header:build": "pnpm --filter internet-header build",

packages/components-angular/projects/components/src/lib/components.module.ts

@@ -1,16 +1,21 @@
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { DIRECTIVES } from './stencil-generated';
 import { defineCustomElements } from '@swisspost/design-system-components/loader';
 
+import { DIRECTIVES } from './stencil-generated';
+import { BooleanValueAccessor } from './stencil-generated/boolean-value-accessor';
+import { PostCardControlValueAccessorDirective } from './custom/value-accessors/post-card-control-radio-value-accessor';
+
+const DECLARATIONS = [...DIRECTIVES, BooleanValueAccessor, PostCardControlValueAccessorDirective];
+
 @NgModule({
-  declarations: [...DIRECTIVES],
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
   providers: [
     {
       provide: APP_INITIALIZER,
       useFactory: () => defineCustomElements,
       multi: true,
     },
   ],
-  exports: [...DIRECTIVES],
 })
 export class PostComponentsModule {}

packages/components-angular/projects/components/src/lib/custom/value-accessors/post-card-control-radio-value-accessor.ts

@@ -0,0 +1,51 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Directive({
+  /* eslint-disable-next-line @angular-eslint/directive-selector */
+  selector: 'post-card-control[type="radio"]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: PostCardControlValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class PostCardControlValueAccessorDirective implements ControlValueAccessor {
+  private onChange: (value: any) => void = () => {
+    /**/
+  };
+  private onTouched: () => void = () => {
+    /**/
+  };
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue =
+      this.el.nativeElement.value != value ? false : value;
+  }
+
+  @HostListener('change', ['$event.detail.value'])
+  handleChangeEvent(value: any) {
+    this.onChange(value);
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/components-angular/projects/components/src/public-api.ts

@@ -3,5 +3,11 @@
  */
 
 export * from './lib/components.module';
-export { DIRECTIVES } from './lib/stencil-generated';
 export * from './lib/stencil-generated/components';
+export { DIRECTIVES } from './lib/stencil-generated';
+
+// Export all custom made components & directives!
+// Skipping this step will lead to Angular Ivy errors when building for production.
+
+export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
+export { PostCardControlValueAccessorDirective } from './lib/custom/value-accessors/post-card-control-radio-value-accessor';

packages/components-angular/projects/components/tsconfig.lib.json

@@ -6,9 +6,8 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
+    "noImplicitOverride": false,
     "types": []
   },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
+  "exclude": ["**/*.spec.ts"]
 }

packages/components-angular/projects/consumer-app/cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:4200',
+    includeShadowDom: true,
   },
   component: {
     devServer: {

packages/components-angular/projects/consumer-app/cypress/e2e/card-control.cy.ts

@@ -0,0 +1,102 @@
+describe('Card-Control', () => {
+  beforeEach(() => {
+    cy.visit('/card-control');
+
+    cy.get('post-card-control[type="checkbox"]').as('checkbox');
+    cy.get('@checkbox').find('input.card-control--input').as('checkbox-input');
+    cy.get('.form-check input.form-check-input[type="checkbox"]').as('native-checkbox');
+    cy.get('post-card-control[type="radio"]').as('radio');
+    cy.get('@radio').find('input.card-control--input').as('radio-input');
+    cy.get('.form-check input.form-check-input[type="radio"]').as('native-radio');
+
+    cy.get('button[type="reset"]').as('reset');
+
+    cy.get('#validity').as('state');
+    cy.get('#output').as('output');
+  });
+
+  it('should exist', () => {
+    cy.get('@checkbox').should('exist');
+    cy.get('@radio').should('exist');
+  });
+
+  it('should update the surrounding form value, when checked', () => {
+    cy.get('@output').then($output => {
+      cy.checkOutputProps($output, {
+        checkbox: null,
+        radio: null,
+      });
+
+      cy.get('@checkbox').click();
+      cy.checkOutputProps($output, { checkbox: true });
+      cy.get('@checkbox').click();
+      cy.checkOutputProps($output, { checkbox: false });
+      cy.get('@checkbox-input').type(' ');
+      cy.checkOutputProps($output, { checkbox: true });
+
+      cy.get('@radio').each(($control, i) => {
+        cy.wrap($control).click();
+        cy.checkOutputProps($output, { radio: `option_${i + 1}` });
+      });
+
+      cy.get('@radio-input').each(($input, i) => {
+        cy.wrap($input).type(' ');
+        cy.checkOutputProps($output, { radio: `option_${i + 1}` });
+      });
+    });
+  });
+
+  it('should not update the surrounding form value, when a disabled group member has been checked by keyboard', () => {
+    cy.get('@radio').eq(1).invoke('attr', 'disabled', true);
+    cy.get('@radio').eq(3).invoke('attr', 'disabled', true);
+
+    cy.wait(0)
+      .get('@output')
+      .then($output => {
+        cy.checkOutputProps($output, { radio: null });
+
+        let option: null | undefined | string = null;
+
+        cy.get('@radio-input')
+          .its('length')
+          .then(length => {
+            cy.get('@radio-input').each(($input, i) => {
+              cy.get('@radio-input')
+                .eq(i + 1 < length ? i + 1 : 0)
+                .then($next => {
+                  const isDisabled = $next.attr('aria-disabled') !== undefined;
+
+                  if (!isDisabled) option = $next.val()?.toString();
+
+                  cy.wrap($input).focus().type('{downArrow}');
+                  cy.checkOutputProps($output, { radio: option });
+                });
+            });
+          });
+      });
+  });
+
+  it('should update the surrounding form validity, when checked', () => {
+    cy.get('@state').should('contain.text', 'INVALID');
+
+    cy.get('@native-checkbox').check();
+    cy.get('@native-radio').eq(2).check();
+    cy.get('@radio').eq(2).click();
+    cy.get('@radio').eq(2).click();
+    cy.get('@state').should('contain.text', 'INVALID');
+
+    cy.get('@checkbox').click();
+    cy.get('@state').should('contain.text', 'VALID');
+    cy.get('@checkbox').click();
+    cy.get('@state').should('contain.text', 'INVALID');
+
+    cy.get('@reset').click();
+    cy.get('@native-checkbox').check();
+    cy.get('@native-radio').eq(2).check();
+    cy.get('@checkbox').click();
+    cy.get('@state').should('contain.text', 'INVALID');
+
+    cy.get('@radio').eq(2).click();
+    cy.get('@state').should('contain.text', 'VALID');
+  });
+});

packages/components-angular/projects/consumer-app/cypress/support/commands.ts

@@ -41,3 +41,11 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('checkOutputProps', ($output, props) => {
+  const output = JSON.parse($output.text());
+
+  Object.entries(props).forEach(([key, value]) => {
+    expect(output[key]).to.be.eq(value);
+  });
+});

packages/components-angular/projects/consumer-app/cypress/support/component.ts

@@ -14,12 +14,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/angular'
+import { mount } from 'cypress/angular';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -28,12 +28,12 @@ import { mount } from 'cypress/angular'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mount', mount);
 
 // Example use:
 // cy.mount(MyComponent)

packages/components-angular/projects/consumer-app/cypress/support/e2e.ts

@@ -14,4 +14,4 @@
 // ***********************************************************
 
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
-// import './commands';
+import './commands';

packages/components-angular/projects/consumer-app/cypress/support/index.d.ts

@@ -0,0 +1,5 @@
+declare namespace Cypress {
+  interface Chainable {
+    checkOutputProps($output: JQuery<HTMLElement>, props: {}): Chainable<any>;
+  }
+}

packages/components-angular/projects/consumer-app/src/app/app-routing.module.ts

@@ -1,10 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './routes/home/home.component';
+import { CardControlComponent } from './routes/card-control/card-control.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+  { path: 'card-control', component: CardControlComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -1,84 +1,5 @@
 <h1>Hurray, it works!</h1>
 
-<div class="my-4">
-  <h2>Post Accordion</h2>
-  <post-accordion>
-    <post-accordion-item>
-      <span slot="header">Titulum 1</span>
-      <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
-    </post-accordion-item>
-
-    <post-accordion-item>
-      <span slot="header">Titulum 2</span>
-      <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
-    </post-accordion-item>
-
-    <post-accordion-item>
-      <span slot="header">Titulum 3</span>
-      <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
-    </post-accordion-item>
-  </post-accordion>
-</div>
-
-<div class="my-4">
-  <h2>Post Alert</h2>
-  <post-alert><p>Contentus momentus vero siteos et accusam iretea et justo.</p></post-alert>
-</div>
-
-<div class="my-4">
-  <h2>Post Collapsible</h2>
-  <post-collapsible>
-    <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
-  </post-collapsible>
-</div>
-
-<div class="my-4">
-  <h2>Post Popover</h2>
-  <button class="btn btn-secondary btn-large" data-popover-target="popover-one">
-    Click here to see a popover
-  </button>
-  <post-popover id="popover-one" placement="top" arrow="">
-    <h2 class="h6">Optional title</h2>
-
-    <p class="mb-0">
-      A longer message that needs more time to read.
-      <a href="#">Links</a>
-      are also possible.
-    </p>
-  </post-popover>
-</div>
-
-<div class="my-4">
-  <h2>Post Popovercontainer</h2>
-  <post-popovercontainer></post-popovercontainer>
-</div>
-
-<div class="my-4">
-  <h2>Post Icon</h2>
-  <post-icon name="1001"></post-icon>
-</div>
-
-<div class="my-4">
-  <h2>Post Tabs</h2>
-  <post-tabs>
-    <post-tab-header slot="tabs" panel="unua">Unua langeto</post-tab-header>
-    <post-tab-header slot="tabs" panel="dua">Dua langeto</post-tab-header>
-    <post-tab-header slot="tabs" panel="tria">Tria langeto</post-tab-header>
-
-    <post-tab-panel name="unua">
-      Jen la enhavo de la unua langeto. Defaŭlte ĝi montriĝas komence.
-    </post-tab-panel>
-    <post-tab-panel name="dua">
-      Jen la enhavo de la dua langeto. Defaŭlte ĝi estas kaŝita komence.
-    </post-tab-panel>
-    <post-tab-panel name="tria">
-      Jen la enhavo de la tria langeto. Defaŭlte ĝi ankaŭ estas kaŝita komence.
-    </post-tab-panel>
-  </post-tabs>
-</div>
-
-<div class="my-4">
-  <h2>Post Tooltip</h2>
-  <button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
-  <post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>
-</div>
+<main>
+  <router-outlet></router-outlet>
+</main>