@shopify/ui-extensions 2.0.0-alpha.2 → 2022.10.1

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

@@ -0,0 +1,37 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {Status} from '../shared';
+
+export interface BannerProps {
+  /**
+   * Banners have an optional title. Use a title to grab the buyer’s attention
+   * with a short, concise message. Banners with no title should have child elements
+   * to convey the banner’s purpose to the buyer.
+   */
+  title?: string;
+  /**
+   * Sets the status of the banner.
+   *
+   * @defaultValue 'info'
+   */
+  status?: Status;
+  /**
+   * Makes the content collapsible. A collapsible banner will conceal child
+   * elements initially, but allow the user to expand the banner to see them.
+   *
+   * @defaultValue false
+   */
+  collapsible?: boolean;
+  /**
+   * Callback when banner is dismissed. This component is
+   * [controlled](https://reactjs.org/docs/forms.html#controlled-components),
+   * so you must manage the visibility of the banner in state by using
+   * the onDismiss callback.
+   */
+  onDismiss?(): void;
+}
+
+/**
+ * Use banners to communicate important messages to customers in a prominent way.
+ */
+export const Banner = createRemoteComponent<'Banner', BannerProps>('Banner');

package/src/surfaces/checkout/components/Banner/README.md

@@ -0,0 +1,14 @@
+# Banner
+
+Use banners to communicate important messages to customers in a prominent way.
+
+## Props
+
+optional = ?
+
+| Name         | Type                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ------------ | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title?       | <code>string</code>                                                     | Banners have an optional title. Use a title to grab the buyer’s attention with a short, concise message. Banners with no title should have child elements to convey the banner’s purpose to the buyer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| status?      | <code>"info" &#124; "success" &#124; "warning" &#124; "critical"</code> | Sets the status of the banner.<br /><br /><code>"info"</code>: Use to convey general information or actions that aren’t critical or tied to a particular action.<br /><br /><code>"success"</code>: Use rarely, only if you need additional visual confirmation that a non-standard action has been completed successfully, for example adding an item to an order as an upsell.<br /><br /><code>"warning"</code>: Use to display information that needs attention or that customers should take action on. Seeing these banners can be stressful for customers so be cautious about using them. Should not block progress to next step.<br /><br /><code>"critical"</code>: Use to communicate problems that have to be resolved immediately for customers to complete a task. For example, using a different payment method if card details couldn't be processed. Seeing these banners can be stressful for customers so be cautious about using them.<br /><br />Default value: <code>'info'</code> |
+| collapsible? | <code>boolean</code>                                                    | Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.<br /><br />Default value: <code>false</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| onDismiss?   | <code>() => void</code>                                                 | Callback when banner is dismissed. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must manage the visibility of the banner in state by using the onDismiss callback.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |

package/src/surfaces/checkout/components/Banner/content/guidelines.md

@@ -0,0 +1,9 @@
+## Best practices
+
+- Use banners thoughtfully and sparingly, and only for the most important information. Too many banners distract customers from completing checkout.
+- Banners are typically displayed at the top of a page or a section, if they relate to specific content. Place banners below the relevant page or section header.
+- Include a [`Button`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Button) component with next steps when possible.
+- Make banners dismissible, unless they contain critical information or an important step that customers need to take.
+- Use the `info` banner to update customers about a change or to give them advice.
+- Use the `warning` banner to display information that needs attention or that customers need to take action on. Warning banners can be stressful for customers, so be cautious about using them.
+- Use the `critical` banner to communicate problems that customers need to resolve immediately to complete checkout.

package/src/surfaces/checkout/components/Banner/examples/basic-banner.example.ts

@@ -0,0 +1,11 @@
+import {extend, Banner} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const banner = root.createComponent(Banner, {
+    status: 'critical',
+    title:
+      'Your payment details couldn’t be verified. Check your card details and try again.',
+  });
+
+  root.appendChild(banner);
+});

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

@@ -0,0 +1,43 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {MaybeResponsiveConditionalStyle} from '../../style';
+import type {Rows} from '../shared';
+import type {GridProps} from '../Grid/Grid';
+
+export interface BlockLayoutProps extends Omit<GridProps, 'columns' | 'rows'> {
+  /**
+   * Sizes for each row of the layout.
+   *
+   *
+   * `auto`: intrinsic size of the element.
+   *
+   * `fill`: fills the remaining available space. When multiple elements are set to `fill`, the remaining space is shared equally.
+   *
+   * `` `${number}%` ``: size in percentages.
+   *
+   * `` `${number}fr` ``: size in fractions.
+   *
+   * `number`: size in pixels.
+   *
+   *
+   * - When the sum of the defined sizes is larger than the available space, elements will shrink to avoid overflow.
+   *
+   * - When the size of an element is not explicitly set, it will fill the remaining space available.
+   *
+   * - When only one size is set and outside of an array, all elements of the layout will take that size.
+   *
+   *
+   * @defaultValue 'fill'
+   */
+  rows?: MaybeResponsiveConditionalStyle<Rows>;
+}
+
+/**
+ * BlockLayout is used to lay out content over multiple rows.
+ *
+ * By default, all rows fill the available block space, sharing it equally.
+ */
+export const BlockLayout = createRemoteComponent<
+  'BlockLayout',
+  BlockLayoutProps
+>('BlockLayout');

package/src/surfaces/checkout/components/BlockLayout/README.md

@@ -0,0 +1,101 @@
+# BlockLayout
+
+BlockLayout is used to lay out content over multiple rows.
+
+By default, all rows fill the available block space, sharing it equally.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| rows?               | <code><a href="#rows">Rows</a> &#124; ConditionalStyle<<wbr><a href="#rows">Rows</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                                 | Sizes for each row of the layout.<br /><br />`auto`: intrinsic size of the element.<br /><br />`fill`: fills the remaining available space. When multiple elements are set to `fill`, the remaining space is shared equally.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`` `${number}fr` ``: size in fractions.<br /><br />`number`: size in pixels.<br /><br />- When the sum of the defined sizes is larger than the available space, elements will shrink to avoid overflow.<br /><br />- When the size of an element is not explicitly set, it will fill the remaining space available.<br /><br />- When only one size is set and outside of an array, all elements of the layout will take that size.<br /><br />Default value: <code>'fill'</code> |
+| spacing?            | <code><a href="#spacing">Spacing</a> &#124; [<a href="#spacing">Spacing</a>, <a href="#spacing">Spacing</a>] &#124; ConditionalStyle<<wbr><a href="#spacing">Spacing</a> &#124; [<a href="#spacing">Spacing</a>, <a href="#spacing">Spacing</a>], AcceptedConditions<wbr>></code>                     | Adjust spacing between children.<br /><br />- `base` means the space between rows and columns is `base`.<br /><br />- [`base`, `none`] means the space between rows is `base`, space between columns is `none`.<br /><br />Default value: <code>'none'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| blockAlignment?     | <code><a href="#blockalignment">BlockAlignment</a> &#124; ConditionalStyle<<wbr><a href="#blockalignment">BlockAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                         | Position children along the cross axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| accessibilityRole?  | <code><a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a> &#124; [<a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>, <a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>]</code>                 | Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help buyers navigate the page.<br /><br />For example:<br /><br />- In an HTML host a `['listItem', 'separator']` tuple will render: &lt;li role='separator'&gt;<br /><br />- In an HTML host a `listItem` string will render: &lt;li&gt;                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| accessibilityLabel? | <code>string</code>                                                                                                                                                                                                                                                                                   | A label that describes the purpose or contents of the element. When set, it will be announced to buyers using assistive technologies and will provide them with more context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| border?             | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`                                                                                                                                                                |
+| borderWidth?        | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base`                                                                                                                                                        |
+| borderRadius?       | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`                                                                                                                                                                |
+| maxBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| maxInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| minInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| minBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| padding?            | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                                                                                                                                                                                    |
+
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code>
+<a name="NonPresentationalAccessibilityRole"></a>
+
+### NonPresentationalAccessibilityRole
+
+| Value                        | Description                                                                                                            |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| <code>"main"</code>          | Used to indicate the primary content.                                                                                  |
+| <code>"header"</code>        | Used to indicate the component is a header.                                                                            |
+| <code>"footer"</code>        | Used to display information such as copyright information, navigation links, and privacy statements.                   |
+| <code>"section"</code>       | Used to indicate a generic section.                                                                                    |
+| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content.                                               |
+| <code>"navigation"</code>    | Used to identify major groups of links used for navigating.                                                            |
+| <code>"orderedList"</code>   | Used to identify a list of ordered items.                                                                              |
+| <code>"listItem"</code>      | Used to identify an item inside a list of items.                                                                       |
+| <code>"unorderedList"</code> | Used to identify a list of unordered items.                                                                            |
+| <code>"separator"</code>     | Used to indicates the component acts as a divider that separates and distinguishes sections of content.                |
+| <code>"status"</code>        | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |
+| <code>"alert"</code>         | Used for important, and usually time-sensitive, information.                                                           |
+
+<a name="InlineAlignment"></a>
+
+### InlineAlignment
+
+<code>"start" &#124; "center" &#124; "end"</code>
+<a name="BlockAlignment"></a>
+
+### BlockAlignment
+
+<code><a href="#alignment">Alignment</a> &#124; "baseline"</code>
+<a name="Alignment"></a>
+
+### Alignment
+
+<code>"start" &#124; "center" &#124; "end"</code>
+<a name="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<a name="Rows"></a>
+
+### Rows
+
+<code><a href="#griditemsize">GridItemSize</a>[] &#124; <a href="#griditemsize">GridItemSize</a></code>
+<a name="GridItemSize"></a>
+
+### GridItemSize
+
+<code>"auto" &#124; "fill" &#124; number &#124; &#96;&dollar;{number}fr&#96; &#124; &#96;&dollar;{number}%&#96;</code>

package/src/surfaces/checkout/components/BlockLayout/examples/basic-blockLayout.example.ts

@@ -0,0 +1,16 @@
+import {extend, BlockLayout, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const blockLayout = root.createComponent(
+    BlockLayout,
+    {
+      rows: [60, 'fill'],
+    },
+    [
+      root.createComponent(View, {border: 'base', padding: 'base'}, '60'),
+      root.createComponent(View, {border: 'base', padding: 'base'}, 'fill'),
+    ],
+  );
+
+  root.appendChild(blockLayout);
+});

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

@@ -0,0 +1,25 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {MaybeResponsiveConditionalStyle} from '../../style';
+import type {Spacing} from '../shared';
+
+export interface BlockSpacerProps {
+  /**
+   * Adjust size of the spacer
+   *
+   * @defaultValue 'base'
+   **/
+  spacing?: MaybeResponsiveConditionalStyle<Exclude<Spacing, 'none'>>;
+}
+
+/**
+ * BlockSpacer is used to create empty block space, typically when variable spacing
+ * is needed between multiple elements.
+ *
+ * Note that you should favor BlockStack when spacing between all elements is the same.
+ */
+export const BlockSpacer = createRemoteComponent<
+  'BlockSpacer',
+  BlockSpacerProps,
+  false
+>('BlockSpacer');

package/src/surfaces/checkout/components/BlockSpacer/README.md

@@ -0,0 +1,14 @@
+# BlockSpacer
+
+BlockSpacer is used to create empty block space, typically when variable spacing
+is needed between multiple elements.
+
+Note that you should favor BlockStack when spacing between all elements is the same.
+
+## Props
+
+optional = ?
+
+| Name     | Type                                                                                                                                                                                                                          | Description                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| spacing? | <code>"extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose" &#124; ConditionalStyle<<wbr>"extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose", AcceptedConditions<wbr>></code> | Adjust size of the spacer<br /><br />Default value: <code>'base'</code> |

package/src/surfaces/checkout/components/BlockSpacer/examples/basic-blockspacer.example.ts

@@ -0,0 +1,11 @@
+import {extend, BlockSpacer, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const blockSpacer = root.createComponent(View, undefined, [
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(BlockSpacer, {spacing: 'loose'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+  ]);
+
+  root.appendChild(blockSpacer);
+});

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

@@ -0,0 +1,53 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {
+  BorderProps,
+  InlineAlignment,
+  SizingProps,
+  Spacing,
+  SpacingProps,
+  ViewLikeAccessibilityRole,
+} from '../shared';
+import {MaybeResponsiveConditionalStyle} from '../../style';
+
+export interface BlockStackProps
+  extends BorderProps,
+    SizingProps,
+    SpacingProps {
+  /**
+   * Position children along the main axis
+   */
+  inlineAlignment?: MaybeResponsiveConditionalStyle<InlineAlignment>;
+  /**
+   * Adjust spacing between children
+   *
+   * @defaultValue 'base'
+   */
+  spacing?: MaybeResponsiveConditionalStyle<Spacing>;
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help buyers
+   * navigate the page.
+   *
+   *
+   * For example:
+   *
+   * - In an HTML host a `['listItem', 'separator']` tuple will render: <li role='separator'>
+   *
+   * - In an HTML host a `listItem` string will render: <li>
+   */
+  accessibilityRole?: ViewLikeAccessibilityRole;
+  /**
+   * A label that describes the purpose or contents of the element. When set,
+   * it will be announced to buyers using assistive technologies and will
+   * provide them with more context.
+   */
+  accessibilityLabel?: string;
+}
+
+/**
+ * BlockStack is used to vertically stack elements.
+ */
+export const BlockStack = createRemoteComponent<'BlockStack', BlockStackProps>(
+  'BlockStack',
+);

package/src/surfaces/checkout/components/BlockStack/README.md

@@ -0,0 +1,77 @@
+# BlockStack
+
+BlockStack is used to vertically stack elements.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| inlineAlignment?    | <code><a href="#inlinealignment">InlineAlignment</a> &#124; ConditionalStyle<<wbr><a href="#inlinealignment">InlineAlignment</a>, AcceptedConditions<wbr>></code>                                                                                                                                     | Position children along the main axis                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| spacing?            | <code><a href="#spacing">Spacing</a> &#124; ConditionalStyle<<wbr><a href="#spacing">Spacing</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                     | Adjust spacing between children<br /><br />Default value: <code>'base'</code>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| accessibilityRole?  | <code><a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a> &#124; [<a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>, <a href="#nonpresentationalaccessibilityrole">NonPresentationalAccessibilityRole</a>]</code>                 | Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help buyers navigate the page.<br /><br />For example:<br /><br />- In an HTML host a `['listItem', 'separator']` tuple will render: &lt;li role='separator'&gt;<br /><br />- In an HTML host a `listItem` string will render: &lt;li&gt;                                                                                                                                                                                                                                                           |
+| accessibilityLabel? | <code>string</code>                                                                                                                                                                                                                                                                                   | A label that describes the purpose or contents of the element. When set, it will be announced to buyers using assistive technologies and will provide them with more context.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| border?             | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderstyle">BorderStyle</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border style.<br /><br />To shorten the code, it is possible to specify all the border style properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border styles are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border styles are `base`, inlineStart and inlineEnd border styles are `none`<br /><br />- `['base', 'none', 'dotted', 'base']` means blockStart border style is `base`, inlineEnd border style is `none`, blockEnd border style is `dotted` and blockStart border style is `base`         |
+| borderWidth?        | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderwidth">BorderWidth</a><wbr>>, AcceptedConditions<wbr>></code>     | Adjust the border width.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border widths are `base`<br /><br />- `['base', 'medium']` means blockStart and blockEnd border widths are `base`, inlineStart and inlineEnd border widths are `medium`<br /><br />- `['base', 'medium', 'medium', 'base']` means blockStart border width is `base`, inlineEnd border width is `medium`, blockEnd border width is `medium` and blockStart border width is `base` |
+| borderRadius?       | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#borderradius">BorderRadius</a><wbr>>, AcceptedConditions<wbr>></code> | Adjust the border radius.<br /><br />To shorten the code, it is possible to specify all the border width properties in one property.<br /><br />For example:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart border radii are `base`<br /><br />- `['base', 'none']` means blockStart and blockEnd border radii are `base`, inlineStart and inlineEnd border radii are `none`<br /><br />- `['base', 'none', 'tight', 'base']` means blockStart border radius is `base`, inlineEnd border radius is `none`, blockEnd border radius is `tight` and blockStart border radius is `base`         |
+| maxBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| maxInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the maximum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minInlineSize?      | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the minimum inline size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| minBlockSize?       | <code>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill" &#124; ConditionalStyle<<wbr>number &#124; &#96;&dollar;{number}%&#96; &#124; "fill", AcceptedConditions<wbr>></code>                                                                                                                   | Adjust the block size.<br /><br />`number`: size in pixels.<br /><br />`` `${number}%` ``: size in percentages.<br /><br />`fill`: takes all the available space.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| padding?            | <code><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>> &#124; ConditionalStyle<<wbr><a href="#maybeshorthandproperty">MaybeShorthandProperty</a><<wbr><a href="#spacing">Spacing</a><wbr>>, AcceptedConditions<wbr>></code>                     | Adjust the padding.<br /><br />To shorten the code, it is possible to specify all the padding properties in one property.<br /><br />Examples:<br /><br />- `base` means blockStart, inlineEnd, blockEnd and inlineStart paddings are `base`<br /><br />- [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`<br /><br />- [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`                                                             |
+
+<a name="BorderRadius"></a>
+
+### BorderRadius
+
+<code>"base" &#124; "tight" &#124; "loose" &#124; "fullyRounded" &#124; "none"</code>
+<a name="BorderWidth"></a>
+
+### BorderWidth
+
+<code>"base" &#124; "medium"</code>
+<a name="MaybeShorthandProperty"></a>
+
+### MaybeShorthandProperty
+
+<code>T &#124; <a href="#shorthandproperty">ShorthandProperty</a><<wbr>T<wbr>></code>
+<a name="ShorthandProperty"></a>
+
+### ShorthandProperty
+
+<code>[T, T] &#124; [T, T, T, T]</code>
+<a name="BorderStyle"></a>
+
+### BorderStyle
+
+<code>"base" &#124; "dotted" &#124; "none"</code>
+<a name="NonPresentationalAccessibilityRole"></a>
+
+### NonPresentationalAccessibilityRole
+
+| Value                        | Description                                                                                                            |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| <code>"main"</code>          | Used to indicate the primary content.                                                                                  |
+| <code>"header"</code>        | Used to indicate the component is a header.                                                                            |
+| <code>"footer"</code>        | Used to display information such as copyright information, navigation links, and privacy statements.                   |
+| <code>"section"</code>       | Used to indicate a generic section.                                                                                    |
+| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content.                                               |
+| <code>"navigation"</code>    | Used to identify major groups of links used for navigating.                                                            |
+| <code>"orderedList"</code>   | Used to identify a list of ordered items.                                                                              |
+| <code>"listItem"</code>      | Used to identify an item inside a list of items.                                                                       |
+| <code>"unorderedList"</code> | Used to identify a list of unordered items.                                                                            |
+| <code>"separator"</code>     | Used to indicates the component acts as a divider that separates and distinguishes sections of content.                |
+| <code>"status"</code>        | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |
+| <code>"alert"</code>         | Used for important, and usually time-sensitive, information.                                                           |
+
+<a name="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<a name="InlineAlignment"></a>
+
+### InlineAlignment
+
+<code>"start" &#124; "center" &#124; "end"</code>

package/src/surfaces/checkout/components/BlockStack/examples/basic-blockstack.example.ts

@@ -0,0 +1,11 @@
+import {extend, BlockStack, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const blockStack = root.createComponent(BlockStack, undefined, [
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+  ]);
+
+  root.appendChild(blockStack);
+});

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

@@ -0,0 +1,87 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {
+  Appearance,
+  InlineAlignment,
+  ButtonAccessibilityRole,
+  OverlayActivatorProps,
+} from '../shared';
+
+export interface ButtonProps extends OverlayActivatorProps {
+  /**
+   * The type of button that will be rendered. The visual presentation of the button type
+   * is controlled by merchants through the Branding API.
+   *
+   *
+   * `primary`: button used for main actions. For example: "Continue to next step".
+   *
+   * `secondary`: button used for secondary actions not blocking user progress. For example: "Download Shop app".
+   *
+   * `plain`: renders a button that visually looks like a link.
+   *
+   *
+   * @defaultValue 'primary'
+   */
+  kind?: 'primary' | 'secondary' | 'plain';
+  /**
+   * Specify the color treatment of the Button.
+   */
+  appearance?: Extract<Appearance, 'monochrome' | 'critical'>;
+  /**
+   * Allows the button to submit a form.
+   * @deprecated use `accessibilityRole="submit"` instead
+   */
+  submit?: boolean;
+  /**
+   * Destination URL to link to. If this value is set, the button will render as a Link.
+   */
+  to?: string;
+  /**
+   * Specifies the inline alignment of the content.
+   *
+   * @defaultValue 'center'
+   */
+  inlineAlignment?: InlineAlignment;
+  /**
+   * Replaces content with a loading indicator.
+   *
+   * @defaultValue false
+   */
+  loading?: boolean;
+  /**
+   * Accessible label for the loading indicator when user prefers reduced motion. This value is
+   * only used if `loading` is true.
+   */
+  loadingLabel?: string;
+  /**
+   * A label used for buyers using assistive technologies. When set, any
+   * `children` supplied to this component are hidden from being seen for
+   * accessibility purposes to prevent duplicate content from being read.
+   */
+  accessibilityLabel?: string;
+  /**
+   * The role of the button that will be rendered.
+   *
+   * `button`: renders a regular button.
+   *
+   * `submit`: renders a button that submits a form.
+   *
+   * @defaultValue 'button'
+   */
+  accessibilityRole?: ButtonAccessibilityRole;
+  /**
+   * Disables the button, disallowing any interaction.
+   *
+   * @defaultValue false
+   */
+  disabled?: boolean;
+  /**
+   * Callback that is run when the button is pressed.
+   */
+  onPress?(): void;
+}
+
+/**
+ * Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.
+ */
+export const Button = createRemoteComponent<'Button', ButtonProps>('Button');