@justeattakeaway/pie-avatar 0.3.0 → 0.4.0

package/custom-elements.json

@@ -70,6 +70,14 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "AvatarProps['src']"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "getInitials",
@@ -117,7 +125,26 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "Renders the icon (placeholder span for now)."
+              "description": "Renders the user icon."
+            },
+            {
+              "kind": "method",
+              "name": "renderImage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "imgSrc",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Renders an image.\nWe assign an empty string to the alt attribute for a11y clarity as it explicitly declares the image as decorative"
             },
             {
               "kind": "field",

package/dist/index.d.ts

@@ -14,9 +14,13 @@ export declare interface AvatarProps {
      * What HTML element the avatar should be such as button, a  or div.
      */
     tag: typeof tags[number];
+    /**
+     * The src attribute for the avatar image. When provided, displays an image instead of initials.
+     */
+    src?: string;
 }
 
-export declare type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label'>>;
+export declare type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label' | 'src'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -31,6 +35,7 @@ export declare type Initials = {
 export declare class PieAvatar extends PieAvatar_base implements AvatarProps {
     tag: "a" | "button" | "div";
     label: AvatarProps['label'];
+    src: AvatarProps['src'];
     /**
      * Attempts to extract initials from the label string.
      * If the label is not provided or is invalid, it returns null.
@@ -45,11 +50,18 @@ export declare class PieAvatar extends PieAvatar_base implements AvatarProps {
      */
     private renderInitials;
     /**
-     * Renders the icon (placeholder span for now).
+     * Renders the user icon.
      *
      * @private
      */
     private renderIcon;
+    /**
+     * Renders an image.
+     * We assign an empty string to the alt attribute for a11y clarity as it explicitly declares the image as decorative
+     *
+     * @private
+     */
+    private renderImage;
     /**
      * Renders the inner content of the avatar such as initials, an icon or an image.
      * It is a getter because the value is computed based on properties

package/dist/index.js

@@ -1,26 +1,26 @@
-import { LitElement as h, html as n, unsafeCSS as f } from "lit";
-import { RtlMixin as g, validPropertyValues as b, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
+import { LitElement as h, html as s, unsafeCSS as g } from "lit";
+import { RtlMixin as f, validPropertyValues as b, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconUser.js";
-import { property as u } from "lit/decorators.js";
+import { property as v } from "lit/decorators.js";
 const o = class o extends h {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", o.v);
   }
 };
-o.v = "0.3.0";
-let d = o;
-const m = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-avatar-visuallyHidden{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-avatar-content{display:flex;justify-content:center;align-items:center;font-size:calc(var(--dt-font-body-s-size) * 1px);background-color:var(--dt-color-container-inverse);color:var(--dt-color-content-interactive-primary);width:32px;height:32px;border-radius:var(--dt-radius-rounded-e)}", x = ["a", "button", "div"], v = {
+o.v = "0.4.0";
+let p = o;
+const y = "*,*:after,*:before{box-sizing:inherit}:host{display:block;--avatar-size: 32px}.c-avatar-visuallyHidden{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-avatar{display:flex;justify-content:center;align-items:center;font-size:calc(var(--dt-font-body-s-size) * 1px);background-color:var(--dt-color-container-inverse);color:var(--dt-color-content-interactive-primary);width:var(--avatar-size);height:var(--avatar-size);border-radius:var(--dt-radius-rounded-e);overflow:hidden}.c-avatar--image{width:100%;height:100%;object-fit:cover}.c-avatar--button{border:none;font-family:inherit}", x = ["a", "button", "div"], u = {
   tag: "div"
 };
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t, e, r, i) => {
-  for (var a = i > 1 ? void 0 : i ? S(e, r) : e, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (a = (i ? p(e, r, a) : p(a)) || a);
-  return i && a && w(e, r, a), a;
+var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (t, a, r, i) => {
+  for (var e = i > 1 ? void 0 : i ? I(a, r) : a, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (e = (i ? c(a, r, e) : c(e)) || e);
+  return i && e && w(a, r, e), e;
 };
-const C = "pie-avatar";
-let s = class extends g(d) {
+const S = "pie-avatar";
+let n = class extends f(p) {
   constructor() {
-    super(...arguments), this.tag = v.tag;
+    super(...arguments), this.tag = u.tag;
   }
   /**
    * Attempts to extract initials from the label string.
@@ -48,18 +48,27 @@ let s = class extends g(d) {
    * @private
    */
   renderInitials(t) {
-    return n`
+    return s`
             <span aria-hidden="true" data-test-id="pie-avatar-initials-visual">${t.visual}</span>
             <span class="c-avatar-visuallyHidden" data-test-id="pie-avatar-initials-screenreader">${t.screenreader}</span>
         `;
   }
   /**
-   * Renders the icon (placeholder span for now).
+   * Renders the user icon.
    *
    * @private
    */
   renderIcon() {
-    return n`<icon-user size="s" aria-hidden="true" data-test-id="pie-avatar-icon"></icon-user>`;
+    return s`<icon-user size="s" aria-hidden="true" data-test-id="pie-avatar-icon"></icon-user>`;
+  }
+  /**
+   * Renders an image.
+   * We assign an empty string to the alt attribute for a11y clarity as it explicitly declares the image as decorative
+   *
+   * @private
+  */
+  renderImage(t) {
+    return s`<img class="c-avatar--image" src="${t}" data-test-id="pie-avatar-image" alt=""/>`;
   }
   /**
    * Renders the inner content of the avatar such as initials, an icon or an image.
@@ -68,6 +77,8 @@ let s = class extends g(d) {
    * @private
    */
   get avatarContent() {
+    if (this.src)
+      return this.renderImage(this.src);
     if (this.label) {
       const t = this.getInitials(this.label);
       if (t)
@@ -82,26 +93,29 @@ let s = class extends g(d) {
    * @private
    */
   renderAvatarWrapper(t) {
-    const { tag: e } = this;
-    return e === "button" ? n`<button data-test-id="pie-avatar-button">${t}</button>` : e === "a" ? n`<a data-test-id="pie-avatar-anchor">${t}</a>` : n`<div class="c-avatar-content" data-test-id="pie-avatar-div">${t}</div>`;
+    const { tag: a } = this;
+    return a === "button" ? s`<button data-test-id="pie-avatar-button" class="c-avatar c-avatar--button">${t}</button>` : a === "a" ? s`<a data-test-id="pie-avatar-anchor" class="c-avatar">${t}</a>` : s`<div class="c-avatar" data-test-id="pie-avatar-div" ?aria-hidden="${this.src}">${t}</div>`;
   }
   render() {
     return this.renderAvatarWrapper(this.avatarContent);
   }
 };
-s.styles = f(m);
-c([
-  u({ type: String }),
-  b(C, x, v.tag)
-], s.prototype, "tag", 2);
-c([
-  u({ type: String })
-], s.prototype, "label", 2);
-s = c([
-  y("pie-avatar")
-], s);
+n.styles = g(y);
+l([
+  v({ type: String }),
+  b(S, x, u.tag)
+], n.prototype, "tag", 2);
+l([
+  v({ type: String })
+], n.prototype, "label", 2);
+l([
+  v({ type: String })
+], n.prototype, "src", 2);
+n = l([
+  m("pie-avatar")
+], n);
 export {
-  s as PieAvatar,
-  v as defaultProps,
+  n as PieAvatar,
+  u as defaultProps,
   x as tags
 };

package/dist/react.d.ts

@@ -15,9 +15,13 @@ export declare interface AvatarProps {
      * What HTML element the avatar should be such as button, a  or div.
      */
     tag: typeof tags[number];
+    /**
+     * The src attribute for the avatar image. When provided, displays an image instead of initials.
+     */
+    src?: string;
 }
 
-export declare type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label'>>;
+export declare type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label' | 'src'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -34,6 +38,7 @@ export declare const PieAvatar: React_2.ForwardRefExoticComponent<React_2.PropsW
 declare class PieAvatar_2 extends PieAvatar_base implements AvatarProps {
     tag: "a" | "button" | "div";
     label: AvatarProps['label'];
+    src: AvatarProps['src'];
     /**
      * Attempts to extract initials from the label string.
      * If the label is not provided or is invalid, it returns null.
@@ -48,11 +53,18 @@ declare class PieAvatar_2 extends PieAvatar_base implements AvatarProps {
      */
     private renderInitials;
     /**
-     * Renders the icon (placeholder span for now).
+     * Renders the user icon.
      *
      * @private
      */
     private renderIcon;
+    /**
+     * Renders an image.
+     * We assign an empty string to the alt attribute for a11y clarity as it explicitly declares the image as decorative
+     *
+     * @private
+     */
+    private renderImage;
     /**
      * Renders the inner content of the avatar such as initials, an icon or an image.
      * It is a getter because the value is computed based on properties

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-avatar",
   "description": "PIE Design System Avatar built using Web Components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.19.0",
+    "@justeattakeaway/pie-css": "0.20.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },

package/src/avatar.scss

@@ -4,21 +4,34 @@
     // Note: For consistency sake, the recommended display should be either
     // "block" or "inline-block", otherwise it can be ommited for floating elements
     display: block;
+
+    --avatar-size: 32px;
 }
 
 .c-avatar-visuallyHidden {
     @include p.visually-hidden;
 }
 
-.c-avatar-content {
+.c-avatar {
     display: flex;
     justify-content: center;
     align-items: center;
     @include p.font-size(--dt-font-body-s-size);
     background-color: var(--dt-color-container-inverse);
     color: var(--dt-color-content-interactive-primary); 
-    width: 32px;
-    height: 32px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
     border-radius:var(--dt-radius-rounded-e);
+    overflow: hidden;
+}
 
+.c-avatar--image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
+
+.c-avatar--button {
+    border: none;
+    font-family: inherit;
+}

package/src/defs.ts

@@ -7,14 +7,20 @@ export interface AvatarProps {
      * Label for the username that will be turned into initials inside the avatar, if provided.
      */
     label?: string;
+
     /**
      * What HTML element the avatar should be such as button, a  or div.
      */
     tag: typeof tags[number];
 
+    /**
+     * The src attribute for the avatar image. When provided, displays an image instead of initials.
+     */
+    src?: string;
+
 }
 
-export type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label'>>;
+export type DefaultProps = ComponentDefaultProps<AvatarProps, keyof Omit<AvatarProps, 'label' | 'src'>>;
 export const defaultProps: DefaultProps = {
     tag: 'div',
 };

package/src/index.ts

@@ -29,6 +29,9 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
     @property({ type: String })
     public label: AvatarProps['label'];
 
+    @property({ type: String })
+    public src: AvatarProps['src'];
+
     /**
      * Attempts to extract initials from the label string.
      * If the label is not provided or is invalid, it returns null.
@@ -70,7 +73,7 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
     }
 
     /**
-     * Renders the icon (placeholder span for now).
+     * Renders the user icon.
      *
      * @private
      */
@@ -78,6 +81,16 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
         return html`<icon-user size="s" aria-hidden="true" data-test-id="pie-avatar-icon"></icon-user>`;
     }
 
+    /**
+     * Renders an image.
+     * We assign an empty string to the alt attribute for a11y clarity as it explicitly declares the image as decorative
+     *
+     * @private
+    */
+    private renderImage (imgSrc: string): TemplateResult {
+        return html`<img class="c-avatar--image" src="${imgSrc}" data-test-id="pie-avatar-image" alt=""/>`;
+    }
+
     /**
      * Renders the inner content of the avatar such as initials, an icon or an image.
      * It is a getter because the value is computed based on properties
@@ -85,7 +98,9 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
      * @private
      */
     private get avatarContent (): TemplateResult {
-        // TODO: handle unauthenticated and src here
+        if (this.src) {
+            return this.renderImage(this.src);
+        }
 
         if (this.label) {
             const initials = this.getInitials(this.label);
@@ -107,14 +122,14 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
         const { tag } = this;
 
         if (tag === 'button') {
-            return html`<button data-test-id="pie-avatar-button">${content}</button>`;
+            return html`<button data-test-id="pie-avatar-button" class="c-avatar c-avatar--button">${content}</button>`;
         }
 
         if (tag === 'a') {
-            return html`<a data-test-id="pie-avatar-anchor">${content}</a>`;
+            return html`<a data-test-id="pie-avatar-anchor" class="c-avatar">${content}</a>`;
         }
 
-        return html`<div class="c-avatar-content" data-test-id="pie-avatar-div">${content}</div>`;
+        return html`<div class="c-avatar" data-test-id="pie-avatar-div" ?aria-hidden="${this.src}">${content}</div>`;
     }
 
     render () {