@shopify/ui-extensions 2023.10.0 → 2023.10.2

package/src/surfaces/checkout/style/style.ts

@@ -1,5 +1,11 @@
 import {memoize} from './memoize';
-import {Conditions, ConditionalStyle, BaseConditions} from './types';
+import {
+  Conditions,
+  ConditionalStyle,
+  BaseConditions,
+  StylesConditions,
+  StylesConditionalStyle,
+} from './types';
 import {isEqual} from './isEqual';
 
 const MAX_CACHE_SIZE = 50;
@@ -80,9 +86,30 @@ const when: WhenFunction = function when<
   ) as WhenReturnType<T, TContext, AcceptedConditions>;
 };
 
+// This interface is only used to provide documentation for the Style helper.
+// It is not used in the implementation.
 export interface DocsStyle {
-  default: <T>(defaultValue: T) => ConditionalStyle<T>;
-  when: <T>(conditions: Conditions, value: T) => ConditionalStyle<T>;
+  /**
+   * Sets an optional default value to use when no other condition is met.
+   *
+   * @param defaultValue The default value
+   * @returns The chainable condition style
+   */
+  default: <T>(defaultValue: T) => StylesConditionalStyle<T>;
+  /**
+   * Adjusts the style based on different conditions. All conditions, expressed
+   * as a literal object, must be met for the associated value to be applied.
+   *
+   * The `when` method can be chained together to build more complex styles.
+   *
+   * @param conditions The condition(s)
+   * @param value The conditional value that can be applied if the conditions are met
+   * @returns The chainable condition style
+   */
+  when: <T>(
+    conditions: StylesConditions,
+    value: T,
+  ) => StylesConditionalStyle<T>;
 }
 
 /**

package/src/surfaces/checkout/style/types.ts

@@ -26,6 +26,57 @@ export type BaseConditions = AtLeastOne<
   DefaultConditions & ResolutionCondition
 >;
 
+// This interface is only used to provide documentation for the Style helper.
+// It is not used in the implementation.
+export interface StylesBaseConditions {
+  viewportInlineSize?: {min: 'small' | 'medium' | 'large'};
+  hover?: true;
+  focus?: true;
+  resolution?: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
+}
+
+// This interface is only used to provide documentation for the Style helper.
+// It is not used in the implementation.
+export interface StylesConditions {
+  viewportInlineSize?: {min: 'small' | 'medium' | 'large'};
+  hover?: true;
+  focus?: true;
+}
+
+// This interface is only used to provide documentation for the Style helper.
+// It is not used in the implementation.
+export interface StylesConditionalValue<
+  T,
+  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
+> {
+  /**
+   * The conditions that must be met for the value to be applied. At least one
+   * condition must be specified.
+   */
+  conditions: AcceptedConditions;
+  /**
+   * The value that will be applied if the conditions are met.
+   */
+  value: T;
+}
+
+// This interface is only used to provide documentation for the Style helper.
+// It is not used in the implementation.
+export interface StylesConditionalStyle<
+  T,
+  AcceptedConditions extends StylesBaseConditions = StylesBaseConditions,
+> {
+  /**
+   * The default value applied when none of the conditional values
+   * specified in `conditionals` are met.
+   */
+  default?: T;
+  /**
+   * An array of conditional values.
+   */
+  conditionals: StylesConditionalValue<T, AcceptedConditions>[];
+}
+
 export interface ConditionalValue<
   T,
   AcceptedConditions extends BaseConditions = Conditions,
@@ -66,7 +117,6 @@ export type MaybeConditionalStyle<
   AcceptedConditions extends BaseConditions = Conditions,
 > = T | ConditionalStyle<T, AcceptedConditions>;
 
-export type MaybeResponsiveConditionalStyle<T> = MaybeConditionalStyle<
-  T,
-  ViewportSizeCondition
->;
+export type MaybeResponsiveConditionalStyle<T> =
+  | T
+  | ConditionalStyle<T, ViewportSizeCondition>;

package/src/surfaces/checkout/targets.ts

@@ -81,6 +81,7 @@ export interface ExtensionTargets {
   /**
    * A static extension target that renders on every bundle line item, inside the details
    * under the line item properties element. It replaces the default bundle products rendering.
+   * @private
    */
   'purchase.cart-line-item.line-components.render': RenderExtension<
     CartLineItemApi &
@@ -92,6 +93,7 @@ export interface ExtensionTargets {
    * under the line item properties element. It replaces the default bundle products rendering.
    *
    * @deprecated Use `purchase.cart-line-item.line-components.render` instead.
+   * @private
    */
   'Checkout::CartLineDetails::RenderLineComponents': RenderExtension<
     CartLineItemApi &
@@ -180,7 +182,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Thank You Page.
+   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.
    * Unlike static extension targets, block extension targets render where the merchant
    * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
    *
@@ -193,7 +195,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Thank You Page.
+   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.
    * Unlike static extension targets, block extension targets render where the merchant
    * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
    *
@@ -208,7 +210,7 @@ export interface ExtensionTargets {
   >;
   /**
    * A static extension target that renders on every line item, inside the details
-   * under the line item properties element on the Thank You Page.
+   * under the line item properties element on the **Thank you** page.
    */
   'purchase.thank-you.cart-line-item.render-after': RenderExtension<
     CartLineItemApi &
@@ -217,7 +219,7 @@ export interface ExtensionTargets {
   >;
   /**
    * A static extension target that renders on every line item, inside the details
-   * under the line item properties element on the Thank You Page.
+   * under the line item properties element on the **Thank you** page.
    *
    * @deprecated Use `purchase.thank-you.cart-line-item.render-after` instead.
    */
@@ -227,14 +229,14 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after all line items on the Thank You page.
+   * A static extension target that is rendered after all line items on the **Thank you** page.
    */
   'purchase.thank-you.cart-line-list.render-after': RenderExtension<
     StandardApi<'purchase.thank-you.cart-line-list.render-after'>,
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after all line items on the Thank You page.
+   * A static extension target that is rendered after all line items on the **Thank you** page.
    *
    * @deprecated Use `purchase.thank-you.cart-line-list.render-after` instead.
    */
@@ -243,14 +245,14 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after a purchase below the customer information on the Thank You page.
+   * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
    */
   'purchase.thank-you.customer-information.render-after': RenderExtension<
     StandardApi<'purchase.thank-you.customer-information.render-after'>,
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after a purchase below the customer information on the Thank You page.
+   * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.
    *
    * @deprecated Use `purchase.thank-you.customer-information.render-after` instead.
    */
@@ -259,7 +261,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page.
+   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Order status** page.
    * Unlike static extension targets, block extension targets render where the merchant
    * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
    *
@@ -274,7 +276,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page.
+   * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Order status** page.
    * Unlike static extension targets, block extension targets render where the merchant
    * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
    *
@@ -290,7 +292,7 @@ export interface ExtensionTargets {
   >;
   /**
    * A static extension target that renders on every line item, inside the details
-   * under the line item properties element on the Order Status Page.
+   * under the line item properties element on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.cart-line-item.render-after` from `@shopify/ui-extension/customer-account` instead.
    */
@@ -302,7 +304,7 @@ export interface ExtensionTargets {
   >;
   /**
    * A static extension target that renders on every line item, inside the details
-   * under the line item properties element on the Order Status Page.
+   * under the line item properties element on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.cart-line-item.render-after` instead.
    */
@@ -313,7 +315,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after all line items on the Order Status page.
+   * A static extension target that is rendered after all line items on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.cart-line-list.render-after` from `@shopify/ui-extension/customer-account` instead.
    */
@@ -323,7 +325,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after all line items on the Order Status page.
+   * A static extension target that is rendered after all line items on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.cart-line-list.render-after` from `@shopify/ui-extension/customer-account` instead.
    */
@@ -333,7 +335,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after a purchase below the customer information on the Order Status page.
+   * A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.customer-information.render-after` from `@shopify/ui-extension/customer-account` instead.
    */
@@ -343,7 +345,7 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after a purchase below the customer information on the Order Status page.
+   * A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
    *
    * @deprecated Use `customer-account.order-status.customer-information.render-after` from `@shopify/ui-extension/customer-account` instead.
    */
@@ -678,7 +680,7 @@ export type ArgumentsForExtension<Target extends keyof ExtensionTargets> =
 
 /**
  * A union type containing all of the extension targets that follow the pattern of
- * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-ui/tree/main/packages/core)
+ * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core)
  * and an additional `api` argument, and using those arguments to render
  * UI.
  */

package/src/surfaces/customer-account/targets.ts

@@ -14,7 +14,7 @@ import type {RenderExtension} from './extension';
  */
 export interface ExtensionTargets {
   /**
-   * A [dynamic extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the Order Status Page.
+   * A [dynamic extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#dynamic-extension-targets) that renders exclusively on the **Order status** page.
    * Unlike static extension targets, dynamic extension targets render where the merchant
    * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
    *
@@ -27,7 +27,7 @@ export interface ExtensionTargets {
   >;
   /**
    * A static extension target that renders on every line item, inside the details
-   * under the line item properties element on the Order Status Page.
+   * under the line item properties element on the **Order status** page.
    */
   'customer-account.order-status.cart-line-item.render-after': RenderExtension<
     CartLineItemApi &
@@ -35,14 +35,14 @@ export interface ExtensionTargets {
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after all line items on the Order Status page.
+   * A static extension target that is rendered after all line items on the **Order status** page.
    */
   'customer-account.order-status.cart-line-list.render-after': RenderExtension<
     OrderStatusApi<'customer-account.order-status.cart-line-list.render-after'>,
     AnyComponent
   >;
   /**
-   * A static extension target that is rendered after a purchase below the customer information on the Order Status page.
+   * A static extension target that is rendered after a purchase below the customer information on the **Order status** page.
    */
   'customer-account.order-status.customer-information.render-after': RenderExtension<
     OrderStatusApi<'customer-account.order-status.cart-line-list.render-after'>,
@@ -68,7 +68,7 @@ export type ArgumentsForExtension<Target extends keyof ExtensionTargets> =
 
 /**
  * A union type containing all of the extension targets that follow the pattern of
- * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-ui/tree/main/packages/core)
+ * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core)
  * and an additional `api` argument, and using those arguments to render
  * UI.
  */