feat(avatar): add pf-v6-avatar element

.config/cem.yaml

@@ -1,5 +1,6 @@
 sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/
 generate:
+  output: ./elements/custom-elements.json
   files:
     - ./elements/*/*.ts
     - ./core/*/*.ts

elements/package.json

@@ -15,6 +15,7 @@
     "./pf-v5-accordion/pf-v5-accordion.js": "./pf-v5-accordion/pf-v5-accordion.js",
     "./pf-v5-alert/pf-v5-alert.js": "./pf-v5-alert/pf-v5-alert.js",
     "./pf-v5-avatar/pf-v5-avatar.js": "./pf-v5-avatar/pf-v5-avatar.js",
+    "./pf-v6-avatar/pf-v6-avatar.js": "./pf-v6-avatar/pf-v6-avatar.js",
     "./pf-v5-back-to-top/pf-v5-back-to-top.js": "./pf-v5-back-to-top/pf-v5-back-to-top.js",
     "./pf-v5-background-image/pf-v5-background-image.js": "./pf-v5-background-image/pf-v5-background-image.js",
     "./pf-v5-badge/pf-v5-badge.js": "./pf-v5-badge/pf-v5-badge.js",

elements/pf-v6-avatar/demo/basic.html

@@ -0,0 +1,10 @@
+---
+name: Basic
+description: A basic avatar displays a user image.
+---
+<pf-v6-avatar alt="Avatar image"
+              src="./avatarImg.svg"></pf-v6-avatar>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>

elements/pf-v6-avatar/demo/bordered.html

@@ -0,0 +1,19 @@
+---
+name: Bordered
+description: A bordered avatar has a thin border around the image.
+---
+<section>
+  <pf-v6-avatar bordered
+                alt="Bordered avatar"
+                src="./avatarImg.svg"></pf-v6-avatar>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
+
+<style>
+  section {
+    padding: 64px 48px;
+  }
+</style>

elements/pf-v6-avatar/demo/index.html

@@ -0,0 +1,9 @@
+---
+name: Basic
+description: A basic avatar displays a user image.
+---
+<pf-v6-avatar></pf-v6-avatar>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>

elements/pf-v6-avatar/demo/size-variations.html

@@ -0,0 +1,63 @@
+---
+name: Size variations
+description: Avatars can be displayed in four sizes.
+---
+<dl>
+  <div>
+    <dt>Small</dt>
+    <dd>
+      <pf-v6-avatar size="sm"
+                    alt="Small avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Medium</dt>
+    <dd>
+      <pf-v6-avatar size="md"
+                    alt="Medium avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Large</dt>
+    <dd>
+      <pf-v6-avatar size="lg"
+                    alt="Large avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+
+  <div>
+    <dt>Extra Large</dt>
+    <dd>
+      <pf-v6-avatar size="xl"
+                    alt="Extra large avatar"
+                    src="./avatarImg.svg"></pf-v6-avatar>
+    </dd>
+  </div>
+</dl>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
+</script>
+
+<style>
+dl {
+  padding: 64px 48px;
+  display: flex;
+  gap: 1em;
+
+  & > div {
+    display: flex;
+    gap: 1em;
+    flex-flow: column;
+  }
+
+  & dd {
+    margin: 0;
+  }
+}
+</style>

elements/pf-v6-avatar/pf-v6-avatar.css

@@ -0,0 +1,54 @@
+:host {
+  --_width: var(--pf-v6-c-avatar--Width, 2.25rem);
+  --_height: var(--pf-v6-c-avatar--Height, 2.25rem);
+  --_border-radius: var(--pf-v6-c-avatar--BorderRadius, var(--pf-t--global--border--radius--pill, 30em));
+  --_border-color: var(--pf-v6-c-avatar--BorderColor, transparent);
+  --_border-width: var(--pf-v6-c-avatar--BorderWidth, 0);
+  --_placeholder-bg: var(--pf-t--global--background--color--200, light-dark(var(--pf-t--color--gray--10, #f2f2f2), var(--pf-t--color--gray--80, #292929)));
+  --_placeholder-fg: var(--pf-t--global--icon--color--subtle, light-dark(var(--pf-t--color--gray--50, #707070), var(--pf-t--color--gray--40, #a3a3a3)));
+
+  display: inline-block;
+  width: var(--_width);
+  height: var(--_height);
+  border-radius: var(--_border-radius);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host([bordered]) {
+  --_border-color: var(--pf-v6-c-avatar--m-bordered--BorderColor, var(--pf-t--global--border--color--default, #d2d2d2));
+  --_border-width: var(--pf-v6-c-avatar--m-bordered--BorderWidth, var(--pf-t--global--border--width--box--default, 1px));
+}
+
+:host([size="sm"]) {
+  --_width: var(--pf-v6-c-avatar--m-sm--Width, 1.5rem);
+  --_height: var(--pf-v6-c-avatar--m-sm--Height, 1.5rem);
+}
+
+:host([size="md"]) {
+  --_width: var(--pf-v6-c-avatar--m-md--Width, 2.25rem);
+  --_height: var(--pf-v6-c-avatar--m-md--Height, 2.25rem);
+}
+
+:host([size="lg"]) {
+  --_width: var(--pf-v6-c-avatar--m-lg--Width, 4.5rem);
+  --_height: var(--pf-v6-c-avatar--m-lg--Height, 4.5rem);
+}
+
+:host([size="xl"]) {
+  --_width: var(--pf-v6-c-avatar--m-xl--Width, 8rem);
+  --_height: var(--pf-v6-c-avatar--m-xl--Height, 8rem);
+}
+
+svg,
+img {
+  display: block;
+  object-fit: cover;
+  width: var(--_width);
+  height: var(--_height);
+  border-radius: var(--_border-radius);
+  border: var(--_border-width) solid var(--_border-color);
+}

elements/pf-v6-avatar/pf-v6-avatar.ts

@@ -0,0 +1,80 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators/property.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import style from './pf-v6-avatar.css';
+
+/** Size variants for the avatar. */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export class PfV6AvatarLoadEvent extends Event {
+  constructor(public originalEvent: Event) {
+    super('load', { bubbles: true });
+  }
+}
+
+/**
+ * An **avatar** is a visual used to represent a user. It may contain an image
+ * or a placeholder graphic.
+ * @summary Displays a user's avatar image
+ * @fires {PfV6AvatarLoadEvent} load - when the avatar image loads
+ * @cssprop {<length>} --pf-v6-c-avatar--Width - Width of the avatar
+ * @cssprop {<length>} --pf-v6-c-avatar--Height - Height of the avatar
+ * @cssprop {<length>} --pf-v6-c-avatar--BorderRadius - Border radius of the avatar
+ * @cssprop {<color>} --pf-v6-c-avatar--BorderColor - Border color of the avatar
+ * @cssprop {<length>} --pf-v6-c-avatar--BorderWidth - Border width of the avatar
+ * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Width - Width when size is `sm`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-sm--Height - Height when size is `sm`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-md--Width - Width when size is `md`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-md--Height - Height when size is `md`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Width - Width when size is `lg`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-lg--Height - Height when size is `lg`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Width - Width when size is `xl`
+ * @cssprop {<length>} --pf-v6-c-avatar--m-xl--Height - Height when size is `xl`
+ * @cssprop {<color>} --pf-v6-c-avatar--m-bordered--BorderColor - Border color when bordered
+ * @cssprop {<length>} --pf-v6-c-avatar--m-bordered--BorderWidth - Border width when bordered
+ */
+@customElement('pf-v6-avatar')
+export class PfV6Avatar extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [style];
+
+  /** The URL to the user's custom avatar image. */
+  @property() src?: string;
+
+  /** The alt text for the avatar image. */
+  @property({ reflect: true }) alt?: string;
+
+  /** Size of the avatar */
+  @property({ reflect: true }) size?: AvatarSize;
+
+  /** Whether to display a border around the avatar */
+  @property({ type: Boolean, reflect: true }) bordered = false;
+
+  override render(): TemplateResult {
+    return this.src != null ? html`
+      <img id="img"
+           alt="${this.alt ?? ''}"
+           src=${this.src}
+           @load="${this.#onLoad}">
+    ` : html`
+      <svg id="placeholder"
+           aria-hidden="true"
+           xmlns="http://www.w3.org/2000/svg"
+           viewBox="0 0 36 36">
+        <rect width="36" height="36" fill="var(--_placeholder-bg)"/>
+        <path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
+              fill="var(--_placeholder-fg)"/>
+      </svg>
+    `;
+  }
+
+  #onLoad(event: Event) {
+    this.dispatchEvent(new PfV6AvatarLoadEvent(event));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-avatar': PfV6Avatar;
+  }
+}