feat(components, components-angular, documentation): add new post-avatar component

.changeset/giant-games-swim.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-components-angular': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Added component `post-avatar` to show an avatar, based on different possible input data (gravatar by email, initials by first- and/or lastname, fallback).

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

@@ -23,6 +23,11 @@ <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 Avatar</h2>
+  <post-avatar></post-avatar>
+</div>
+
 <div class="my-4">
   <h2>Post Card-Control</h2>
   <post-card-control type="checkbox" label="label"></post-card-control>

packages/components/cypress/e2e/avatar.cy.ts

@@ -0,0 +1,83 @@
+const PAGE_ID = '09aac03d-220e-4885-8fb8-1cfa01add188';
+
+describe('Avatar', () => {
+  describe('Structure & Props', () => {
+    beforeEach(() => {
+      cy.getComponent('post-avatar', PAGE_ID);
+      cy.window().then(win => {
+        cy.wrap(cy.spy(win.console, 'error')).as('consoleError');
+      });
+    });
+
+    it('should have no console errors', () => {
+      cy.get('@consoleError').should('not.be.called');
+    });
+
+    it('should have only attribute firstname and class "large" by default', () => {
+      cy.get('@avatar').should('exist');
+      cy.get('@avatar').should('not.have.attr', 'size');
+      cy.get('@avatar').should('not.have.attr', 'email');
+      cy.get('@avatar').should('have.attr', 'firstname');
+      cy.get('@avatar').should('not.have.attr', 'lastname');
+      cy.get('@avatar').should('have.class', 'large');
+      cy.get('@avatar').should('not.have.class', 'small');
+    });
+
+    it('should have class "small", when size attribute is set to "small"', () => {
+      cy.get('@avatar').invoke('attr', 'size', 'small');
+      cy.get('@avatar').should('have.class', 'small');
+      cy.get('@avatar').should('not.have.class', 'large');
+    });
+
+    it('should have a console error, when attribute "firstname" is not defined', () => {
+      cy.get('@avatar').invoke('removeAttr', 'firstname');
+      cy.get('@consoleError').should('have.been.calledOnce');
+    });
+
+    it('should show initials when, firstname and lastname is defined', () => {
+      cy.get('@avatar').invoke('attr', 'firstname', 'Open');
+      cy.get('@avatar').invoke('attr', 'lastname', 'Source');
+      cy.get('@avatar').find('img').should('not.exist');
+      cy.get('@avatar').find('div').should('exist').and('have.text', 'OS');
+      cy.get('@consoleError').should('not.have.been.called');
+
+      cy.get('@avatar').invoke('removeAttr', 'lastname');
+      cy.get('@avatar').find('img').should('not.exist');
+      cy.get('@avatar').find('div').should('exist').and('have.text', 'O');
+      cy.get('@consoleError').should('not.have.been.called');
+
+      cy.get('@avatar').invoke('removeAttr', 'firstname');
+      cy.get('@avatar').find('img').should('not.exist');
+      cy.get('@consoleError').should('have.been.calledOnce');
+    });
+
+    it('should show image when, email with gravatar account is defined', () => {
+      cy.get('@avatar').invoke('attr', 'email', '[email protected]');
+      cy.get('@avatar').should('have.attr', 'email');
+      cy.get('@avatar').should('have.attr', 'firstname');
+      cy.get('@avatar').find('img').should('exist');
+      cy.get('@avatar').find('div').should('not.exist');
+
+      cy.get('@avatar').invoke('removeAttr', 'email');
+      cy.get('@avatar').find('img').should('not.exist');
+      cy.get('@avatar').find('div').should('exist');
+      cy.get('@consoleError').should('not.have.been.called');
+    });
+
+    it('should show initials when, email with no gravatar account is defined', () => {
+      cy.get('@avatar').invoke('attr', 'email', '[email protected]');
+      cy.get('@avatar').should('have.attr', 'email');
+      cy.get('@avatar').should('have.attr', 'firstname');
+      cy.get('@avatar').find('img').should('not.exist');
+      cy.get('@avatar').find('div').should('exist');
+      cy.get('@consoleError').should('not.have.been.called');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.getSnapshots('avatar');
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/components/src/components.d.ts

@@ -75,6 +75,24 @@ export namespace Components {
          */
         "type": AlertType;
     }
+    interface PostAvatar {
+        /**
+          * Defines the users email address.
+         */
+        "email"?: string;
+        /**
+          * Defines the users firstname.
+         */
+        "firstname": string;
+        /**
+          * Defines the users lastname.
+         */
+        "lastname"?: string;
+        /**
+          * Defines the size of the avatar.
+         */
+        "size"?: 'large' | 'small';
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -375,6 +393,12 @@ declare global {
         prototype: HTMLPostAlertElement;
         new (): HTMLPostAlertElement;
     };
+    interface HTMLPostAvatarElement extends Components.PostAvatar, HTMLStencilElement {
+    }
+    var HTMLPostAvatarElement: {
+        prototype: HTMLPostAvatarElement;
+        new (): HTMLPostAvatarElement;
+    };
     interface HTMLPostCardControlElementEventMap {
         "postInput": { state: boolean; value: string };
         "postChange": { state: boolean; value: string };
@@ -520,6 +544,7 @@ declare global {
         "post-accordion": HTMLPostAccordionElement;
         "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
+        "post-avatar": HTMLPostAvatarElement;
         "post-card-control": HTMLPostCardControlElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
@@ -583,6 +608,24 @@ declare namespace LocalJSX {
          */
         "type"?: AlertType;
     }
+    interface PostAvatar {
+        /**
+          * Defines the users email address.
+         */
+        "email"?: string;
+        /**
+          * Defines the users firstname.
+         */
+        "firstname": string;
+        /**
+          * Defines the users lastname.
+         */
+        "lastname"?: string;
+        /**
+          * Defines the size of the avatar.
+         */
+        "size"?: 'large' | 'small';
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -795,6 +838,7 @@ declare namespace LocalJSX {
         "post-accordion": PostAccordion;
         "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
+        "post-avatar": PostAvatar;
         "post-card-control": PostCardControl;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
@@ -817,6 +861,7 @@ declare module "@stencil/core" {
             "post-accordion": LocalJSX.PostAccordion & JSXBase.HTMLAttributes<HTMLPostAccordionElement>;
             "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
+            "post-avatar": LocalJSX.PostAvatar & JSXBase.HTMLAttributes<HTMLPostAvatarElement>;
             /**
              * @class PostCardControl - representing a stencil component
              */

packages/components/src/components/post-avatar/aiconizer.ts

@@ -0,0 +1,78 @@
+const ACTIVATOR = 'avatar';
+const ICONIZER = {
+  gallileo: '2136',
+  home: '3136',
+  love: '2586',
+  postman: '1007',
+  potter: '2493',
+  ra: '2199',
+  rocket: '2383',
+  sido: '2397',
+  smart: '2165',
+  stamp: '1022',
+  ux: '2198',
+  workout: '2555',
+};
+let input1 = '';
+let input2 = '';
+
+function aiconizer(e) {
+  if (['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) return;
+
+  if (input1 !== ACTIVATOR) {
+    input1 = (input1 + e.key).substring(Math.max(0, (input1 + e.key).length - ACTIVATOR.length));
+  } else {
+    input2 = (input2 + e.key).substring(Math.max(0, (input2 + e.key).length - 10));
+    const match = Object.entries(ICONIZER).find(([k]) => input2.includes(k));
+
+    if (input2.includes('help')) {
+      const keys = Object.keys(ICONIZER)
+        .map(k => `"${k}"`)
+        .join(', ');
+
+      console.log(
+        `%cCongrats, you have found an easter egg!%c\nClick in an empty area of the page and type:\n%c"${ACTIVATOR}"%c\nAnd then one of the following phrases:\n%c${keys}%c\nThis will let the post-avatar component display different icons.\nHave fun!`,
+        'font-size: 20px; font-weight: bold;',
+        'font-size: unset; font-weight: normal;',
+        'font-weight: bold; color: red;',
+        'font-weight: normal; color: unset;',
+        'font-weight: bold; color: red;',
+        'font-weight: normal; color: unset;',
+      );
+
+      input1 = '';
+      input2 = '';
+    }
+
+    if (match) {
+      Array.from(document.querySelectorAll('post-avatar')).forEach(el => {
+        const postIcon = document.createElement('post-icon');
+        postIcon.setAttribute('name', match[1]);
+
+        el.shadowRoot.querySelector('img')?.remove();
+        el.shadowRoot.querySelector('div')?.remove();
+        el.shadowRoot.querySelector('post-icon')?.remove();
+        el.shadowRoot.append(postIcon);
+
+        setTimeout(() => {
+          input1 = '';
+          input2 = '';
+        });
+      });
+    }
+  }
+}
+
+function register() {
+  window.removeEventListener('keydown', aiconizer);
+  window.addEventListener('keydown', aiconizer);
+}
+
+function destroy() {
+  window.removeEventListener('keydown', aiconizer);
+}
+
+export default {
+  register,
+  destroy,
+};

packages/components/src/components/post-avatar/post-avatar.scss

@@ -0,0 +1,37 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+:host {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+}
+
+:host(.small) {
+  width: 32px;
+  height: 32px;
+  font-size: post.$font-size-12;
+}
+
+img {
+  display: block;
+  width: 100%;
+  border-radius: 50%;
+}
+
+div,
+post-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #004976;
+  border-radius: 50%;
+  color: post.get-best-contrast-text(#004976);
+  text-transform: uppercase;
+  box-sizing: border-box;
+}
+
+post-icon {
+  padding: post.$size-micro;
+}