@shopify/ui-extensions 2025.10.0-rc.7 → 2025.10.0-rc.9

package/src/surfaces/customer-account/components/Avatar/examples/basic-Avatar-js.example.ts

@@ -0,0 +1,9 @@
+export default function extension() {
+  const avatar = document.createElement('s-avatar');
+
+  avatar.initials = 'EW';
+  avatar.alt = 'Evan White';
+  avatar.size = 'base';
+
+  document.body.append(avatar);
+}

package/src/surfaces/customer-account/components/Avatar/examples/basic-Avatar-preact.example.tsx

@@ -0,0 +1,9 @@
+import {render} from 'preact';
+
+export default function extension() {
+  render(<App />, document.body);
+}
+
+function App() {
+  return <s-avatar initials="EW" alt="Evan White" size="base" />;
+}

package/src/surfaces/customer-account/components/Avatar.d.ts

@@ -0,0 +1,66 @@
+import {BaseElementPropsWithChildren, Size} from './shared';
+
+interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+
+export interface AvatarProps extends GlobalProps {
+  /**
+   * Initials to display in the avatar.
+   */
+  initials?: string;
+
+  /**
+   * The URL or path to the image.
+   *
+   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+   */
+  src?: string;
+
+  /**
+   * Invoked when load of provided image completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?(): void;
+
+  /**
+   * Invoked on load error of provided image.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?(): void;
+
+  /**
+   * Size of the avatar.
+   *
+   * @default 'base'
+   */
+  size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;
+
+  /**
+   * An alternative text description that describe the image for the reader
+   * to understand what it is about or identify the user the avatar belongs to.
+   */
+  alt?: string;
+}
+
+export interface AvatarElement extends AvatarProps, Omit<HTMLElement, 'id'> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ['s-avatar']: AvatarElement;
+  }
+}
+
+declare module 'preact' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      ['s-avatar']: BaseElementPropsWithChildren<AvatarElement> & AvatarProps;
+    }
+  }
+}

package/src/surfaces/customer-account/components/StandardComponents.ts

@@ -3,6 +3,7 @@ import {AnyComponent} from '../../checkout';
 export type StandardComponents =
   | AnyComponent
   | 'Page'
+  | 'Avatar'
   | 'CustomerAccountAction'
   | 'ImageGroup';
 

package/src/surfaces/customer-account/components.d.ts

@@ -1,3 +1,5 @@
+import {Size} from './components/shared';
+
 export interface CustomerAccountActionProps {
   /**
    * Sets the heading of the Action container.
@@ -88,3 +90,68 @@ declare module 'preact' {
     }
   }
 }
+
+interface GlobalProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+}
+
+export interface AvatarProps extends GlobalProps {
+  /**
+   * Initials to display in the avatar.
+   */
+  initials?: string;
+
+  /**
+   * The URL or path to the image.
+   *
+   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+   */
+  src?: string;
+
+  /**
+   * Invoked when load of provided image completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?(): void;
+
+  /**
+   * Invoked on load error of provided image.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?(): void;
+
+  /**
+   * Size of the avatar.
+   *
+   * @default 'base'
+   */
+  size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;
+
+  /**
+   * An alternative text description that describe the image for the reader
+   * to understand what it is about or identify the user the avatar belongs to.
+   */
+  alt?: string;
+}
+
+export interface AvatarElement extends AvatarProps, Omit<HTMLElement, 'id'> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ['s-avatar']: AvatarElement;
+  }
+}
+
+declare module 'preact' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      ['s-avatar']: BaseElementPropsWithChildren<AvatarElement> & AvatarProps;
+    }
+  }
+}