@shopify/ui-extensions 2025.10.0-rc.6 → 2025.10.0-rc.8

package/src/surfaces/checkout/shared.ts

@@ -13,23 +13,31 @@ export type AnyComponent =
    * @private
    */
   | 'Chat'
+  | 'Checkbox'
   | 'ClipboardItem'
   | 'DropZone'
+  | 'EmailField'
   | 'Form'
   | 'Heading'
   | 'Icon'
   | 'Image'
   | 'Link'
   | 'ListItem'
+  | 'Map'
+  | 'MapMarker'
+  | 'Modal'
+  | 'NumberField'
   | 'OrderedList'
   | 'Paragraph'
   | 'PaymentIcon'
+  | 'PhoneField'
   | 'Progress'
   | 'QRCode'
   | 'Section'
   | 'Spinner'
   | 'Stack'
   | 'Text'
+  | 'TextArea'
   | 'TextField'
   | 'Time'
   | 'UnorderedList';

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/CustomerAccountAction/examples/basic-CustomerAccountAction-js.example.ts

@@ -1,4 +1,4 @@
-export default function extension() {
+export default async () => {
   const accountAction = document.createElement('s-customer-account-action');
 
   const closeButton = document.createElement('s-button');

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

@@ -1,6 +1,6 @@
 import {render} from 'preact';
 
-export default function extension() {
+export default async () => {
   render(<App />, document.body);
 }
 

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

@@ -1,4 +1,4 @@
-export default function extension() {
+export default async () => {
   const imageGroup = document.createElement('s-image-group');
   const firstImage = document.createElement('s-image');
   firstImage.src = '../assets/flower.jpg';

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

@@ -1,6 +1,6 @@
 import {render} from 'preact';
 
-export default function extension() {
+export default async () => {
   render(<App />, document.body);
 }
 

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

@@ -1,4 +1,4 @@
-export default function extension() {
+export default async () => {
   const page = document.createElement('s-page');
 
   const primaryAction = document.createElement('s-button');

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

@@ -1,6 +1,6 @@
 import {render} from 'preact';
 
-export default function extension() {
+export default async () => {
   render(<App />, document.body);
 }
 

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;
+    }
+  }
+}