@justeattakeaway/pie-avatar 0.2.0 → 0.3.0

package/README.md

@@ -30,9 +30,12 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 ## Documentation
 
 ### Properties
-| Prop             | Options                                                                                                                                                                  | Description                                                                                                                                                                                                         | Default        |
-|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
-| | | | |
+
+| Prop | Options | Description | Default |
+|------|---------|-------------|---------|
+| `src` | — | The src attribute for the underlying image tag. | `""` |
+| `tag` | "button",  "a",  "div" | Which HTML element to use when rendering the avatar.| `div` |
+| `label` | - | User or company name that will be rendered as initials inside the avatar.| `""` |
 
 ### Slots
 | Slot     | Description                                                                                                                                                                                                                                                                         |

package/dist/index.d.ts

@@ -6,10 +6,13 @@ import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit';
 
 export declare interface AvatarProps {
-    label?: string;
     /**
      * 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];
 }
 

package/dist/index.js

@@ -1,25 +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 { property as v } from "lit/decorators.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconUser.js";
+import { property as u } from "lit/decorators.js";
 const o = class o extends h {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", o.v);
   }
 };
-o.v = "0.2.0";
+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)}.c-avatar-placeholder{display:inline-block;text-align:center;font-size:6px}", x = ["a", "button", "div"], u = {
+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 = {
   tag: "div"
 };
-var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (t, e, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? I(e, a) : e, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (r = (i ? p(e, a, r) : p(r)) || r);
-  return i && r && w(e, a, r), r;
+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;
 };
-const S = "pie-avatar";
+const C = "pie-avatar";
 let s = class extends g(d) {
   constructor() {
-    super(...arguments), this.tag = u.tag;
+    super(...arguments), this.tag = v.tag;
   }
   /**
    * Attempts to extract initials from the label string.
@@ -31,10 +32,10 @@ let s = class extends g(d) {
     try {
       if (!t || typeof t != "string" || t.trim().length === 0)
         return null;
-      const a = t.trim().replace(/-/g, " ").split(/\s+/).slice(0, 2).map((i) => i[0].toUpperCase());
-      return a.length === 0 ? null : {
-        visual: a.join(""),
-        screenreader: a.join(", ")
+      const r = t.trim().replace(/-/g, " ").split(/\s+/).slice(0, 2).map((i) => i[0].toUpperCase());
+      return r.length === 0 ? null : {
+        visual: r.join(""),
+        screenreader: r.join(", ")
         // joins the two words by comma so initials are correctly pronounced by screenreaders
       };
     } catch {
@@ -58,7 +59,7 @@ let s = class extends g(d) {
    * @private
    */
   renderIcon() {
-    return n`<span data-test-id="pie-avatar-icon" class="c-avatar-placeholder">Icon Placeholder</span>`;
+    return n`<icon-user size="s" aria-hidden="true" data-test-id="pie-avatar-icon"></icon-user>`;
   }
   /**
    * Renders the inner content of the avatar such as initials, an icon or an image.
@@ -90,17 +91,17 @@ let s = class extends g(d) {
 };
 s.styles = f(m);
 c([
-  v({ type: String }),
-  b(S, x, u.tag)
+  u({ type: String }),
+  b(C, x, v.tag)
 ], s.prototype, "tag", 2);
 c([
-  v({ type: String })
+  u({ type: String })
 ], s.prototype, "label", 2);
 s = c([
   y("pie-avatar")
 ], s);
 export {
   s as PieAvatar,
-  u as defaultProps,
+  v as defaultProps,
   x as tags
 };

package/dist/react.d.ts

@@ -7,10 +7,13 @@ import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit';
 
 export declare interface AvatarProps {
-    label?: string;
     /**
      * 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];
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-avatar",
   "description": "PIE Design System Avatar built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,6 +39,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-icons-webc": "1.14.2",
     "@justeattakeaway/pie-webc-core": "1.1.0"
   },
   "volta": {

package/src/avatar.scss

@@ -22,10 +22,3 @@
     border-radius:var(--dt-radius-rounded-e);
 
 }
-
-// Basic placeholder styling - will be removed in subsequent ticket
-.c-avatar-placeholder {
-    display: inline-block;
-    text-align: center; 
-    font-size: 6px;
-}

package/src/defs.ts

@@ -3,14 +3,14 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export const tags = ['a', 'button', 'div'] as const;
 
 export interface AvatarProps {
-    label?: string;
     /**
      * Label for the username that will be turned into initials inside the avatar, if provided.
      */
-    tag: typeof tags[number];
+    label?: string;
     /**
      * What HTML element the avatar should be such as button, a  or div.
      */
+    tag: typeof tags[number];
 
 }
 

package/src/index.ts

@@ -3,6 +3,7 @@ import {
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { RtlMixin, safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import '@justeattakeaway/pie-icons-webc/dist/IconUser.js';
 
 import { property } from 'lit/decorators.js';
 import styles from './avatar.scss?inline';
@@ -18,6 +19,7 @@ const componentSelector = 'pie-avatar';
 /**
  * @tagname pie-avatar
  */
+
 @safeCustomElement('pie-avatar')
 export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
     @property({ type: String })
@@ -73,7 +75,7 @@ export class PieAvatar extends RtlMixin(PieElement) implements AvatarProps {
      * @private
      */
     private renderIcon (): TemplateResult {
-        return html`<span data-test-id="pie-avatar-icon" class="c-avatar-placeholder">Icon Placeholder</span>`;
+        return html`<icon-user size="s" aria-hidden="true" data-test-id="pie-avatar-icon"></icon-user>`;
     }
 
     /**