blip-ds 1.198.2 → 1.200.0

package/dist/collection/components/avatar/avatar.css

@@ -16,42 +16,31 @@
 /**
  * Define media query values
  */
-/*
-  Font family is Nunito Sans. Its fallback is Helvetica
-*/
-/*
-  Font sizes have been converted to rem considering a base size of 16px.
-*/
+.host {
+  position: relative;
+}
+
 .avatar {
-  margin: 0;
-  font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  margin: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 72px;
+  border-radius: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  appearance: none;
+  height: 100%;
 }
 .avatar__text {
-  color: #ffffff;
+  color: #202c44;
 }
 .avatar__icon {
-  color: #8ca0b3;
+  color: #202c44;
 }
 .avatar__img {
   width: 100%;
   height: auto;
 }
 .avatar__ellipsis {
-  color: #505f79;
+  color: #ffffff;
 }
 .avatar__btn {
   position: relative;
@@ -66,14 +55,14 @@
   height: auto;
 }
 .avatar__btn__text {
-  color: #ffffff;
+  color: #202c44;
   opacity: 1;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   transition: all 0.5s;
 }
 .avatar__btn__icon {
-  color: #8ca0b3;
+  color: #202c44;
   opacity: 1;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
@@ -88,15 +77,13 @@
   align-items: center;
   top: 0;
   left: 0;
-  background-color: rgba(80, 95, 121, 0.5);
+  background-color: #ffffff;
   cursor: pointer;
   opacity: 0;
-  -webkit-transition: all 0.5s;
-  -moz-transition: all 0.5s;
   transition: all 0.5s;
 }
 .avatar__btn__thumb__icon {
-  color: #ffffff;
+  color: #202c44;
 }
 .avatar__btn__name {
   position: absolute;
@@ -114,7 +101,7 @@
   transition: all 0.5s;
 }
 .avatar__btn__name__icon {
-  color: #ffffff;
+  color: #202c44;
 }
 .avatar__btn__empty {
   position: absolute;
@@ -132,7 +119,7 @@
   transition: all 0.5s;
 }
 .avatar__btn__empty__icon {
-  color: #8ca0b3;
+  color: #202c44;
 }
 .avatar__size--micro {
   width: 24px;
@@ -141,43 +128,48 @@
 .avatar__size--extra-small {
   width: 32px;
   height: 32px;
+  min-width: 32px;
 }
 .avatar__size--small {
   width: 40px;
   height: 40px;
+  min-width: 40px;
 }
 .avatar__size--standard {
   width: 56px;
   height: 56px;
+  min-width: 56px;
 }
 .avatar__size--large {
   width: 64px;
   height: 64px;
+  min-width: 64px;
 }
 .avatar__size--extra-large {
   width: 72px;
   height: 72px;
+  min-width: 72px;
 }
 .avatar__color--neutral {
-  background-color: #d2dfe6;
+  background-color: #e7edf4;
 }
-.avatar__color--purple {
-  background-color: #c226fb;
+.avatar__color--yellow {
+  background-color: #fff6a8;
 }
-.avatar__color--brand {
-  background-color: #00c6d7;
+.avatar__color--blue {
+  background-color: #80e3eb;
 }
 .avatar__color--green {
-  background-color: #c226fb;
+  background-color: #90e6bc;
 }
 .avatar__color--brown {
-  background-color: #f6a721;
+  background-color: #ffd29e;
 }
 .avatar__color--pink {
-  background-color: #fb5a8b;
+  background-color: #fdacc5;
 }
 .avatar:hover .avatar__btn__thumb {
-  opacity: 1;
+  opacity: 0.65;
 }
 .avatar:hover .avatar__btn__text {
   opacity: 0;
@@ -190,4 +182,18 @@
 }
 .avatar:hover .avatar__btn__empty {
   opacity: 1;
+}
+
+.focus:focus-visible {
+  display: flex;
+  position: absolute;
+  border: 2px solid #c226fb;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  top: -4px;
+  left: -4px;
+  padding-right: 4px;
+  padding-bottom: 4px;
+  outline: none;
 }

package/dist/collection/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, Event, Host } from '@stencil/core';
 export class BdsAvatar {
   constructor() {
     this.typoSize = 'fs-20';
@@ -40,7 +40,7 @@ export class BdsAvatar {
           break;
         case 'small':
           this.typoSize = 'fs-16';
-          this.iconSize = 'small';
+          this.iconSize = 'x-small';
           break;
         case 'standard':
           this.typoSize = 'fs-20';
@@ -48,11 +48,11 @@ export class BdsAvatar {
           break;
         case 'large':
           this.typoSize = 'fs-24';
-          this.iconSize = 'large';
+          this.iconSize = 'xxx-large';
           break;
         case 'extra-large':
           this.typoSize = 'fs-32';
-          this.iconSize = 'x-large';
+          this.iconSize = 'xxx-large';
           break;
         default:
           this.typoSize = 'fs-20';
@@ -60,30 +60,40 @@ export class BdsAvatar {
       }
     };
   }
+  onUploadClick(e) {
+    e.preventDefault();
+    this.bdsClickAvatar.emit(e);
+  }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && this.upload) {
+      event.preventDefault();
+      this.bdsClickAvatar.emit();
+    }
+  }
   render() {
-    const avatarColor = ['purple', 'brand', 'green', 'brown', 'pink'];
+    const avatarColor = ['yellow', 'blue', 'green', 'brown', 'pink'];
     const randColor = avatarColor[Math.floor(Math.random() * avatarColor.length)];
     const avatarBgColor = !this.name || this.ellipsis ? 'neutral' : randColor;
     const arrayName = this.name ? this.name.split(' ') : [];
     const firstName = arrayName.length ? arrayName.shift().charAt(0) : '';
     const lastName = arrayName.length ? arrayName.pop().charAt(0) : '';
-    const Element = this.upload ? 'button' : 'div';
     this.selectTypoSize(this.size);
-    return (h(Element, { class: {
-        avatar: true,
-        [`avatar__size--${this.size}`]: true,
-        [`avatar__color--${avatarBgColor}`]: true,
-        upload: this.upload,
-      }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { class: "avatar__ellipsis", variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload ? (h("div", { class: "avatar__btn" },
-      h("img", { class: "avatar__btn__img", src: this.thumbnail }),
-      h("div", { class: "avatar__btn__thumb" },
-        h("bds-icon", { class: "avatar__btn__thumb__icon", name: "edit", theme: "outline", size: this.iconSize })))) : (h("img", { class: "avatar__img", src: this.thumbnail }))) : this.name ? (this.upload ? (h("div", { class: "avatar__btn" },
-      h("bds-typo", { class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName),
-      h("div", { class: "avatar__btn__name" },
-        h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload ? (h("div", { class: "avatar__btn" },
-      h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }),
-      h("div", { class: "avatar__btn__empty" },
-        h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize }))));
+    return (h(Host, { class: { host: true, [`avatar__size--${this.size}`]: true } },
+      h("div", { class: {
+          avatar: true,
+          [`avatar__color--${avatarBgColor}`]: true,
+          upload: this.upload,
+        }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { margin: false, class: "avatar__ellipsis", variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick },
+        h("img", { class: "avatar__btn__img", src: this.thumbnail }),
+        h("div", { class: "avatar__btn__thumb" },
+          h("bds-icon", { class: "avatar__btn__thumb__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("img", { class: "avatar__img", src: this.thumbnail }))) : this.name ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick },
+        h("bds-typo", { margin: false, class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName),
+        h("div", { class: "avatar__btn__name" },
+          h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { margin: false, class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick },
+        h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }),
+        h("div", { class: "avatar__btn__empty" },
+          h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize }))),
+      this.upload && this.size !== 'micro' ? (h("div", { tabindex: "0", onClick: () => this.handleClickKey, class: "focus" })) : ('')));
   }
   static get is() { return "bds-avatar"; }
   static get originalStyleUrls() { return {
@@ -206,4 +216,20 @@ export class BdsAvatar {
       "defaultValue": "null"
     }
   }; }
+  static get events() { return [{
+      "method": "bdsClickAvatar",
+      "name": "bdsClickAvatar",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }

package/dist/collection/components/avatar-group/avatar-group.css

@@ -16,37 +16,56 @@
 /**
  * Define media query values
  */
+.host {
+  position: relative;
+  height: fit-content;
+}
+
 .avatar__group {
   display: flex;
 }
 .avatar__group > *:nth-child(1) {
-  z-index: 5;
+  z-index: 1;
 }
 .avatar__group > *:nth-child(2) {
-  z-index: 4;
+  z-index: 2;
 }
 .avatar__group > *:nth-child(3) {
   z-index: 3;
 }
 .avatar__group > *:nth-child(4) {
-  z-index: 2;
+  z-index: 4;
 }
 .avatar__group > *:nth-child(5) {
-  z-index: 1;
+  z-index: 5;
+}
+.avatar__group > *:nth-child(6) {
+  z-index: 6;
+  width: auto;
+}
+.avatar__group > *:nth-child(6) div {
+  background-color: #1a2437;
+  padding: 0 16px;
+  width: auto;
+}
+.avatar__group__click--true {
+  cursor: pointer;
 }
 .avatar__group .avatar {
-  border: 2px solid #ffffff;
   position: relative;
 }
 .avatar__group__size--extra-small {
-  margin-left: 4px;
+  margin-left: 8px;
 }
 .avatar__group__size--extra-small > * {
-  margin-left: -4px;
+  margin-left: -8px;
+}
+.avatar__group__size--extra-small > *:nth-child(6) div {
+  padding: 0 8px;
 }
 .avatar__group__size--extra-small .avatar {
-  width: 32px;
   height: 32px;
+  padding: 0 8px;
 }
 .avatar__group__size--small {
   margin-left: 8px;
@@ -55,16 +74,50 @@
   margin-left: -8px;
 }
 .avatar__group__size--small .avatar {
-  width: 40px;
   height: 40px;
+  padding: 0 8px;
 }
 .avatar__group__size--standard {
-  margin-left: 12px;
+  margin-left: 16px;
 }
 .avatar__group__size--standard > * {
-  margin-left: -12px;
+  margin-left: -16px;
 }
 .avatar__group__size--standard .avatar {
-  width: 56px;
   height: 56px;
+  padding: 0 8px;
+}
+.avatar__group__size--large {
+  margin-left: 16px;
+}
+.avatar__group__size--large > * {
+  margin-left: -16px;
+}
+.avatar__group__size--large .avatar {
+  height: 64px;
+  padding: 0 8px;
+}
+.avatar__group__size--extra-large {
+  margin-left: 16px;
+}
+.avatar__group__size--extra-large > * {
+  margin-left: -16px;
+}
+.avatar__group__size--extra-large .avatar {
+  height: 72px;
+  padding: 0 8px;
+}
+
+.focus:focus-visible {
+  display: flex;
+  position: absolute;
+  border: 2px solid #c226fb;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  top: -4px;
+  left: -4px;
+  padding-right: 4px;
+  padding-bottom: 4px;
+  outline: none;
 }

package/dist/collection/components/avatar-group/avatar-group.js

@@ -1,4 +1,4 @@
-import { Component, h, Host, State, Prop } from '@stencil/core';
+import { Component, h, Host, State, Prop, Event } from '@stencil/core';
 export class AvatarGroup {
   constructor() {
     /**
@@ -7,6 +7,16 @@ export class AvatarGroup {
      */
     this.size = 'standard';
   }
+  handleClickGroup(e) {
+    e.preventDefault();
+    this.bdsClickAvatarGroup.emit(e);
+  }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && this.canClick) {
+      event.preventDefault();
+      this.bdsClickAvatarGroup.emit();
+    }
+  }
   parseUsers() {
     if (this.users) {
       try {
@@ -19,16 +29,18 @@ export class AvatarGroup {
   }
   componentWillLoad() {
     this.users && this.parseUsers();
-    this.leftoversUsers = this.internalUsers.length - 4;
+    this.leftoversUsers = this.internalUsers.length - 5;
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { class: "host" },
       h("div", { class: {
           avatar__group: true,
           [`avatar__group__size--${this.size}`]: true,
-        } }, this.internalUsers ? (this.internalUsers
-        .slice(0, 5)
-        .map((user, i, row) => i + 1 === row.length && this.internalUsers.length > 5 ? (h("bds-avatar", { size: this.size, ellipsis: this.leftoversUsers })) : (h("bds-avatar", { id: user.id, name: user.name, thumbnail: user.thumbnail, size: this.size })))) : (h("slot", null)))));
+          [`avatar__group__click--${this.canClick}`]: true,
+        }, onClick: () => this.handleClickGroup }, this.internalUsers ? (this.internalUsers
+        .slice(0, 6)
+        .map((user, i, row) => i + 1 === row.length && this.internalUsers.length > 5 ? (h("bds-avatar", { size: this.size, ellipsis: this.leftoversUsers })) : (h("bds-avatar", { id: user.id, name: user.name, thumbnail: user.thumbnail, size: this.size })))) : (h("slot", null))),
+      this.canClick ? h("div", { class: "focus", tabindex: "0", onClick: () => this.handleClickKey }) : ''));
   }
   static get is() { return "bds-avatar-group"; }
   static get originalStyleUrls() { return {
@@ -81,10 +93,43 @@ export class AvatarGroup {
       },
       "attribute": "users",
       "reflect": false
+    },
+    "canClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "can-click",
+      "reflect": false
     }
   }; }
   static get states() { return {
     "internalUsers": {},
     "leftoversUsers": {}
   }; }
+  static get events() { return [{
+      "method": "bdsClickAvatarGroup",
+      "name": "bdsClickAvatarGroup",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }