feat(avatar): add badge as notification

Endava · Jun 29, 2023 · 6279e8d · 6279e8d
1 parent a6f2880
commit 6279e8d
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 41 deletions.
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -44,6 +44,10 @@ export namespace Components {
           * Alternate text for the avatar image if the image cannot be displayed
          */
         "altText": string;
+        /**
+          * The string to display in the badge
+         */
+        "badgeContent": string;
         /**
           * The image source to load on the avatar (this can be also a base64 encoded image)
          */
@@ -838,6 +842,10 @@ declare namespace LocalJSX {
           * Alternate text for the avatar image if the image cannot be displayed
          */
         "altText"?: string;
+        /**
+          * The string to display in the badge
+         */
+        "badgeContent"?: string;
         /**
           * The image source to load on the avatar (this can be also a base64 encoded image)
          */

diff --git a/packages/bee-q/src/components/avatar/_storybook/bq-avatar.stories.tsx b/packages/bee-q/src/components/avatar/_storybook/bq-avatar.stories.tsx
@@ -18,6 +18,7 @@ const meta: Meta = {
     initials: { control: 'text' },
     shape: { control: 'inline-radio', options: ['circle', 'square'] },
     size: { control: 'select', options: ['xsmall', 'small', 'medium', 'large'] },
+    'badge-content': { control: 'text' },
   },
   args: {
     label: 'Avatar component label',
@@ -37,6 +38,7 @@ const Template = (args: Args) => html`
     initials=${args.initials}
     shape=${args.shape}
     size=${args.size}
+    badge-content=${args['badge-content']}
   ></bq-avatar>
 `;
 
@@ -55,3 +57,12 @@ export const Initials: Story = {
     initials: 'JS',
   },
 };
+
+export const Badge: Story = {
+  render: Template,
+  args: {
+    image:
+      'https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80',
+    'badge-content': '9',
+  },
+};
diff --git a/packages/bee-q/src/components/avatar/bq-avatar.tsx b/packages/bee-q/src/components/avatar/bq-avatar.tsx
@@ -1,4 +1,4 @@
-import { h, Component, Prop, Watch, State, Element } from '@stencil/core';
+import { h, Component, Prop, Watch, State, Element, Host } from '@stencil/core';
 
 import { TAvatarShape, TAvatarSize, AVATAR_SHAPE, AVATAR_SIZE } from './bq-avatar.types';
 import { validatePropValue } from '../../shared/utils';
@@ -53,6 +53,9 @@ export class BqAvatar {
   /** The size of the avatar */
   @Prop({ reflect: true, mutable: true }) size: TAvatarSize = 'medium';
 
+  /** The string to display in the badge */
+  @Prop({ reflect: true }) badgeContent: string;
+
   // Prop lifecycle events
   // =======================
 
@@ -124,7 +127,7 @@ export class BqAvatar {
       case 'large':
         return 4;
       default:
-        // also === xsmall
+        // also if size === xsmall
         return 1;
     }
   };
@@ -135,37 +138,44 @@ export class BqAvatar {
 
   render() {
     return (
-      <div
-        class={{
-          'relative overflow-hidden border-[2px] border-solid border-stroke-tiertary bg-ui-secondary-light': true,
-          [`size--${this.size}`]: true,
-          'rounded-full': this.shape === 'circle',
-          'rounded-xs': this.shape === 'square' && this.size === 'xsmall',
-          'rounded-s': this.shape === 'square' && this.size === 'small',
-          'rounded-m': this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
-        }}
-        aria-label={this.label}
-        role="img"
-        part="base"
-      >
-        {this.initials && (
-          <span
-            class="absolute left-0 top-0 inline-flex h-full w-full items-center justify-center font-bold"
-            part="text"
-          >
-            {this.trimmedInitials}
-          </span>
-        )}
-        {this.image && !this.hasError && (
-          <img
-            class="absolute left-0 top-0 h-full w-full object-cover"
-            alt={this.altText ?? undefined}
-            src={this.image}
-            onError={this.onImageError}
-            part="img"
-          />
+      <Host>
+        <div
+          class={{
+            'relative overflow-hidden border-[2px] border-solid border-stroke-tiertary bg-ui-secondary-light': true,
+            [`size--${this.size}`]: true,
+            'rounded-full': this.shape === 'circle',
+            'rounded-xs': this.shape === 'square' && this.size === 'xsmall',
+            'rounded-s': this.shape === 'square' && this.size === 'small',
+            'rounded-m': this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
+          }}
+          aria-label={this.label}
+          role="img"
+          part="base"
+        >
+          {this.initials && (
+            <span
+              class="absolute left-0 top-0 inline-flex h-full w-full items-center justify-center font-bold"
+              part="text"
+            >
+              {this.trimmedInitials}
+            </span>
+          )}
+          {this.image && !this.hasError && (
+            <img
+              class="absolute left-0 top-0 h-full w-full object-cover"
+              alt={this.altText ?? undefined}
+              src={this.image}
+              onError={this.onImageError}
+              part="img"
+            />
+          )}
+        </div>
+        {this.badgeContent && (
+          <bq-badge size="small" text-color="#fff">
+            {this.badgeContent}
+          </bq-badge>
         )}
-      </div>
+      </Host>
     );
   }
 }
diff --git a/packages/bee-q/src/components/avatar/readme.md b/packages/bee-q/src/components/avatar/readme.md
@@ -11,14 +11,15 @@ An avatar represents an object made of different pieces of information, in a way
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                      | Type                                         | Default     |
-| ---------- | ---------- | -------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
-| `altText`  | `alt-text` | Alternate text for the avatar image if the image cannot be displayed             | `string`                                     | `undefined` |
-| `image`    | `image`    | The image source to load on the avatar (this can be also a base64 encoded image) | `string`                                     | `undefined` |
-| `initials` | `initials` | The text to display on avatar                                                    | `string`                                     | `undefined` |
-| `label`    | `label`    | A text to use for describing the avatar on assistive devices                     | `string`                                     | `undefined` |
-| `shape`    | `shape`    | The shape of the avatar                                                          | `"circle" \| "square"`                       | `'circle'`  |
-| `size`     | `size`     | The size of the avatar                                                           | `"large" \| "medium" \| "small" \| "xsmall"` | `'medium'`  |
+| Property       | Attribute       | Description                                                                      | Type                                         | Default     |
+| -------------- | --------------- | -------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
+| `altText`      | `alt-text`      | Alternate text for the avatar image if the image cannot be displayed             | `string`                                     | `undefined` |
+| `badgeContent` | `badge-content` | The string to display in the badge                                               | `string`                                     | `undefined` |
+| `image`        | `image`         | The image source to load on the avatar (this can be also a base64 encoded image) | `string`                                     | `undefined` |
+| `initials`     | `initials`      | The text to display on avatar                                                    | `string`                                     | `undefined` |
+| `label`        | `label`         | A text to use for describing the avatar on assistive devices                     | `string`                                     | `undefined` |
+| `shape`        | `shape`         | The shape of the avatar                                                          | `"circle" \| "square"`                       | `'circle'`  |
+| `size`         | `size`          | The size of the avatar                                                           | `"large" \| "medium" \| "small" \| "xsmall"` | `'medium'`  |
 
 
 ## Shadow Parts
@@ -30,6 +31,19 @@ An avatar represents an object made of different pieces of information, in a way
 | `"text"` | The `<span>` tag element that renderd the `Initials` text string. |
 
 
+## Dependencies
+
+### Depends on
+
+- [bq-badge](../badge)
+
+### Graph
+```mermaid
+graph TD;
+  bq-avatar --> bq-badge
+  style bq-avatar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
@@ -5,7 +5,7 @@
 @import './bq-avatar.variables';
 
 :host {
-  @apply inline-block;
+  @apply relative inline-block;
 }
 
 .size {
@@ -25,3 +25,7 @@
     @apply h-[var(--bq-avatar--size-large)] w-[var(--bq-avatar--size-large)] text-m;
   }
 }
+
+bq-badge {
+  @apply absolute right-[var(--bq-avatar--badge-right)] top-[var(--bq-avatar--badge-top)] max-w-[var(--bq-avatar--badge-m-width)];
+}
diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
@@ -7,4 +7,8 @@
   --bq-avatar--size-small: 32px;
   --bq-avatar--size-medium: 48px;
   --bq-avatar--size-large: 64px;
+
+  --bq-avatar--badge-right: -8px;
+  --bq-avatar--badge-top: -8px;
+  --bq-avatar--badge-m-width: 25px;
 }
diff --git a/packages/bee-q/src/components/badge/readme.md b/packages/bee-q/src/components/badge/readme.md
@@ -26,11 +26,13 @@
 
 ### Used by
 
+ - [bq-avatar](../avatar)
  - [bq-status](../status)
 
 ### Graph
 ```mermaid
 graph TD;
+  bq-avatar --> bq-badge
   bq-status --> bq-badge
   style bq-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```