@shopify/ui-extensions 2024.4.1 → 2024.7.0

package/src/surfaces/checkout/components/BlockStack/BlockStack.ts

@@ -4,6 +4,7 @@ import type {
   BackgroundProps,
   BorderProps,
   CornerProps,
+  IdProps,
   InlineAlignment,
   SizingProps,
   Spacing,
@@ -16,6 +17,7 @@ export interface BlockStackProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -47,10 +49,6 @@ export interface BlockStackProps
    * provide them with more context.
    */
   accessibilityLabel?: string;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -63,6 +61,18 @@ export interface BlockStackProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

package/src/surfaces/checkout/components/Grid/Grid.doc.ts

@@ -51,6 +51,12 @@ const data: ReferenceEntityTemplateSchema = {
       url: 'grid',
       type: 'Component',
     },
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
   ],
 };
 

package/src/surfaces/checkout/components/Grid/Grid.ts

@@ -7,6 +7,7 @@ import type {
   BorderProps,
   Columns,
   CornerProps,
+  IdProps,
   InlineAlignment,
   Rows,
   SizingProps,
@@ -17,6 +18,7 @@ import type {
 
 export interface GridProps
   extends Pick<BackgroundProps, 'background'>,
+    IdProps,
     BorderProps,
     CornerProps,
     SizingProps,
@@ -103,10 +105,6 @@ export interface GridProps
    * provide them with more context.
    */
   accessibilityLabel?: string;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -119,6 +117,19 @@ export interface GridProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

package/src/surfaces/checkout/components/GridItem/GridItem.doc.ts

@@ -51,6 +51,12 @@ const data: ReferenceEntityTemplateSchema = {
       url: 'grid',
       type: 'Component',
     },
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
   ],
 };
 

package/src/surfaces/checkout/components/GridItem/GridItem.ts

@@ -5,6 +5,7 @@ import type {
   BackgroundProps,
   BorderProps,
   CornerProps,
+  IdProps,
   SizingProps,
   SpacingProps,
   ViewLikeAccessibilityRole,
@@ -14,6 +15,7 @@ export interface GridItemProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -37,10 +39,6 @@ export interface GridItemProps
    * - In an HTML host a `listItem` string will render: `<li>`
    */
   accessibilityRole?: ViewLikeAccessibilityRole;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -53,6 +51,19 @@ export interface GridItemProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

package/src/surfaces/checkout/components/Icon/Icon.ts

@@ -9,10 +9,12 @@ export type IconSource =
   | 'arrowUpRight'
   | 'arrowDown'
   | 'bag'
+  | 'bullet'
   | 'calendar'
   | 'camera'
   | 'caretDown'
   | 'cart'
+  | 'categories'
   | 'checkmark'
   | 'chevronLeft'
   | 'chevronRight'
@@ -59,6 +61,7 @@ export type IconSource =
   | 'reorder'
   | 'return'
   | 'savings'
+  | 'settings'
   | 'star'
   | 'starFill'
   | 'starHalf'

package/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts

@@ -55,7 +55,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

package/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts

@@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

package/src/surfaces/checkout/components/InlineStack/InlineStack.ts

@@ -6,6 +6,7 @@ import type {
   BlockAlignment,
   BorderProps,
   CornerProps,
+  IdProps,
   InlineAlignment,
   SizingProps,
   Spacing,
@@ -17,6 +18,7 @@ export interface InlineStackProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -60,10 +62,6 @@ export interface InlineStackProps
    * @defaultValue 'base'
    **/
   spacing?: MaybeResponsiveConditionalStyle<Spacing | [Spacing, Spacing]>;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -76,6 +74,19 @@ export interface InlineStackProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

package/src/surfaces/checkout/components/Link/Link.ts

@@ -15,7 +15,7 @@ export interface LinkProps
    */
   to?: string;
   /**
-   * Open the link in a new window or tab
+   * Open the link in a new window or tab. If the link points to a domain other than your Storefront, it will always open in a new tab.
    */
   external?: boolean;
   /**

package/src/surfaces/checkout/components/Pressable/Pressable.doc.ts

@@ -35,7 +35,14 @@ const data: ReferenceEntityTemplateSchema = {
       ],
     },
   },
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

package/src/surfaces/checkout/components/Pressable/Pressable.ts

@@ -14,29 +14,35 @@ import type {
   CornerProps,
   Opacity,
   BackgroundProps,
+  IdProps,
 } from '../shared';
 
 export interface PressableProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps,
     OverlayActivatorProps,
     DisclosureActivatorProps {
   /**
-   * Changes the display of the Pressable.
+   * Changes the display of the component.
    *
    *
-   * `inline` follows the direction of words in a sentence based on the document’s writing mode.
+   * `inline` the component starts on the same line as preceding inline content and allows subsequent content to continue on the same line.
    *
-   * `block` follows the direction of paragraphs based on the document’s writing mode.
+   * `block` the component starts on its own new line and fills its parent.
    *
+   * `auto` resets the component to its initial value. The actual value depends on the component and context.
    *
-   * @defaultValue 'block'
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
    */
-  display?: Display;
-
+  display?: MaybeResponsiveConditionalStyle<Display>;
   /**
    * A label that describes the purpose or contents of the element. When set,
    * it will be announced to buyers using assistive technologies and will
@@ -60,11 +66,6 @@ export interface PressableProps
    */
   disabled?: boolean;
 
-  /**
-   * A unique identifier for the Pressable.
-   */
-  id?: string;
-
   /**
    * Disables the button while loading. Unlike `Button`, no indicator is rendered while loading.
    */

package/src/surfaces/checkout/components/Progress/Progress.doc.ts

@@ -0,0 +1,89 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getExample} from '../../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Progress',
+  description: 'Use to visually represent the completion of a task or process.',
+  requires: '',
+  isVisualComponent: true,
+  thumbnail: 'progress-thumbnail.png',
+  type: '',
+  definitions: [
+    {
+      title: 'ProgressProps',
+      description: '',
+      type: 'ProgressProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Feedback',
+  defaultExample: {
+    image: 'progress-indeterminate.gif',
+    codeblock: {
+      title: 'Indeterminate state',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Progress/examples/basic-progress.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-progress.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent: `
+Use components like [TextBlock](../titles-and-text/textblock) or [Text](../titles-and-text/text), along with the Progress component, to display text indicating the status of the progress bar.
+
+### Loading states
+
+For loading states, add text to reassure the user that the progress bar is not frozen.
+
+![A progress bar with "Loading" text](/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/progress-loading.png)
+
+### Error states
+
+For error states, add text or a [Banner](./banner) to describe the error and next steps. Use the \`critical\` tone property to convey urgency.
+
+![A progress bar with error text that says "There was a problem with the file upload. Please try again."](/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/progress-error.png)
+
+### Visualize a goal
+
+Use the Progress component to visualize a goal that's valuable to the customer.
+
+Here's an example of using a progress bar to show a customer's progress toward the next rewards tier:
+
+![A progress bar in customer accounts, showing that the customer is on their way to reaching the Botanical maven rewards tier.](/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/progress-goal.png)
+
+Here's an example of using a progress bar to show how much more a customer needs to spend to get free shipping:
+
+![A progress bar at checkout, showing that the customer is $43 away from free shipping.](/assets/templated-apis-screenshots/checkout-ui-extensions/unstable/progress-free-shipping.png)
+      `,
+    },
+  ],
+  examples: {
+    description: '',
+    examples: [
+      getExample('ui-components/progress-determinate-state', ['jsx', 'js']),
+    ],
+  },
+  related: [
+    {
+      name: 'Spinner',
+      subtitle: 'Component',
+      url: 'spinner',
+      type: 'Component',
+    },
+  ],
+};
+
+export default data;

package/src/surfaces/checkout/components/Progress/Progress.ts

@@ -0,0 +1,44 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {IdProps} from '../shared';
+
+type Tone = 'auto' | 'critical';
+
+export interface ProgressProps extends IdProps {
+  /**
+   * Specify how much of the task that has been completed.
+   * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+   * When undefined, the progress bar is indeterminate;
+   * this indicates that an activity is ongoing with no indication of how long it is expected to take.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value
+   */
+  value?: number;
+
+  /**
+   * Define the maximum limit of the progress element.
+   * It must have a value greater than 0 and be a valid floating point number.
+   *
+   * @defaultValue 1
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max
+   */
+  max?: number;
+
+  /**
+   * Set the color of the progress bar.
+   *
+   * @defaultValue 'auto'
+   */
+  tone?: Tone;
+
+  /**
+   * A label to use for the Progress that will be used for buyers using assistive technologies like screen readers.
+   * It will also be used to replace the animated loading indicator when buyers prefer reduced motion.
+   *
+   */
+  accessibilityLabel?: string;
+}
+
+export const Progress = createRemoteComponent<'Progress', ProgressProps>(
+  'Progress',
+);

package/src/surfaces/checkout/components/Progress/examples/basic-progress.example.ts

@@ -0,0 +1,9 @@
+import {extension, Progress} from '@shopify/ui-extensions/checkout';
+
+export default extension('purchase.checkout.block.render', (root) => {
+  const baseProgress = root.createComponent(Progress, {
+    accessibilityLabel: 'Loading',
+  });
+
+  root.appendChild(baseProgress);
+});

package/src/surfaces/checkout/components/ScrollView/ScrollView.doc.ts

@@ -35,7 +35,14 @@ const data: ReferenceEntityTemplateSchema = {
       ],
     },
   },
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

package/src/surfaces/checkout/components/ScrollView/ScrollView.ts

@@ -4,9 +4,11 @@ import type {
   BackgroundProps,
   BorderProps,
   CornerProps,
+  IdProps,
   SizingProps,
   SpacingProps,
 } from '../shared';
+import type {MaybeResponsiveConditionalStyle} from '../../style/types';
 
 export interface ScrollViewEvent {
   /**
@@ -33,6 +35,7 @@ export interface ScrollViewProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -56,7 +59,23 @@ export interface ScrollViewProps
    */
   direction?: 'block' | 'inline';
   /**
-   * Scroll to a specific position or to an element.
+   * Scroll to a specific position or to an element when the component is first rendered.
+   *
+   * This property allows you to set an initial scroll position or scroll to a specific element
+   * when the `ScrollView` component mounts. Note that this action will only be performed once,
+   * during the initial render of the component.
+   *
+   * @example
+   * // Scroll to 100 pixels from the top on initial render
+   * <ScrollView scrollTo={100} />
+   *
+   * // Scroll to a specific element on initial render
+   * const elementRef = useRef(null);
+   * <ScrollView scrollTo={elementRef.current} />
+   *
+   * @note
+   * This property will only take effect on the first render. Subsequent updates to this property
+   * will not trigger additional scroll actions.
    */
   scrollTo?: number | HTMLElement;
   /**
@@ -74,9 +93,18 @@ export interface ScrollViewProps
    */
   onScrolledToEdge?: (args: ScrollViewEvent) => void;
   /**
-   * A unique identifier for the component.
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
    */
-  id?: string;
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

package/src/surfaces/checkout/components/Sheet/Sheet.doc.ts

@@ -0,0 +1,69 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getExample} from '../../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Sheet',
+  description:
+    'The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) to be rendered. \n\nThe library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.',
+  requires:
+    'configuration of the [Customer Privacy](/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) capability to be rendered.',
+  thumbnail: 'sheet-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'SheetProps',
+      description: '',
+      type: 'SheetProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Overlays',
+  defaultExample: {
+    image: 'sheet-default.png',
+    codeblock: {
+      title: 'Basic Sheet',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Sheet/examples/basic-sheet.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-sheet.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'shopify-controlled-surfaces',
+      title: 'Shopify-controlled surfaces',
+      sectionContent:
+        'To prevent disruptions during checkout, we maintain strict design control over key areas of the Sheet component. These Shopify-controlled elements include: \n\n<h3>Locations of elements</h3>\n\nThe Sheet elements (header, content, action buttons, and dismiss button) are strategically positioned and sized to present vital information upfront.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces1.png" />\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces2.png" />\n\n<br>\n\n<h3>Padding and spacing</h3>\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces3.png" />\n\n<br>\n\n<h3>Maximum height</h3>\n\nTo balance customer attention and task completion, a maximum height is set for the Sheet component.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces4.png" />\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces5.png" />\n\nWhen content pushes the sheet to exceed this limit, the following UI behaviors are triggered:\n\n<br>\n\n<h3>Heading and content are scrollable</h3>\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces6.png" />\n\n<br>\n\n<h3>Expand pill appears to allow customers to view the entire content</h3>\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces7.png" />\n\n<br>\n\n<h3>Actions slot and dismiss button remain fixed</h3>\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-controlled-surfaces8.png" />',
+    },
+    {
+      type: 'Generic',
+      anchorLink: 'privacy-consent-requirements',
+      title: 'Privacy consent requirements',
+      sectionContent:
+        '<h3>Content</h3>\n\nFor the best customer experience, ensure content is brief and to the point.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations1.png" />\n\nVarious strategies can be employed to avoid content scrolling.\n\n<br>\n\n<h4>Use short content</h4>\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations2.png" />\n\n<br>\n\n<h4>Use small text size</h4>\n\n <img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations3.png" />\n\n<br>\n\n<h4>Remove the header</h4>\n\n <img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations4.png" />\n\n<br>\n\n<h3>Actions slot</h3>\n\nThe actions slots allows customers to make decisions and is split into primary and secondary sections.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations5.png" />\n\n<br>\n\n<h3>Primary section</h3>\n\n Contains primary actions for customer decisions on the sheet’s prompt. Up to two buttons are allowed. Keep the button’s content brief so that it doesn’t wrap to more than one line.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations6.png" />\n\n<br>\n\n<h3>Secondary section</h3>\n\nContains action that is unrelated to the sheet’s prompt. Only one button is allowed. A modal can be activated when engaging with the secondary action. Keep the button’s content brief so that it doesn’t wrap to more than one line.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations7.png" />\n\n<br>\n\n<h3>Consent, denial of consent, and sheet dismissal</h3>\n\n <h4>Consent</h4>\n\nWhen a customer expresses consent by pressing the acceptance button, cookies will load and the sheet should not re-appear on refresh.\n\n<br>\n\n<h4>Denial of consent</h4>\n\nWhen a customer expresses denial of consent by pressing the rejection button, cookies will not load and the sheet will not re-appear on refresh.\n\n<br>\n\n<h4>Sheet dismissal</h4>\n\nWhen a customer neither grants nor denies consent by pressing the dismiss button, cookies will not load and the sheet will re-appear on refresh.\n\n<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/sheet-content-recommendations8.png" />',
+    },
+  ],
+  examples: {
+    description: '',
+    examples: [
+      getExample('ui-components/sheet-consent', ['jsx', 'js']),
+      getExample('ui-components/sheet-description-preferences', ['jsx', 'js']),
+      getExample('ui-components/sheet-icon-button-preferences', ['jsx', 'js']),
+      getExample('ui-components/sheet-layout-content', ['jsx', 'js']),
+    ],
+  },
+  related: [],
+};
+
+export default data;