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

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

@@ -0,0 +1,105 @@
+# Grid
+
+Grid is used to lay out content in a matrix of rows and columns.
+
+## Props
+
+optional = ?
+
+| Name                | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| columns?            | <code><a href="#columns">Columns</a> &#124; ConditionalStyle<<wbr><a href="#columns">Columns</a>, AcceptedConditions<wbr>></code>                                                                                                                                                                     | Sizes for each column of the layout.<br /><br />`auto`: intrinsic size of the content.<br /><br />`fill`: fills the remaining available space. When multiple columns 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. - Except when in scrollview, where the grid will fill the space with the defined sizes.<br /><br />- When only one size is set and outside of an array, the grid will have one column of that size.<br /><br />Default value: <code>'fill'</code> |
+| 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 content.<br /><br />`fill`: fills the remaining available space. When multiple rows 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 only one size is set and outside of an array, the grid will have one row of 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="Columns"></a>
+
+### Columns
+
+<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/Grid/content/guidelines.md

@@ -0,0 +1,3 @@
+## Related components
+
+- [`GridItem`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/GridItem): Used as children of the `Grid` component. The `GridItem` offers a way to span the element across a number of columns and rows.

package/src/surfaces/checkout/components/Grid/examples/basic-grid.example.ts

@@ -0,0 +1,45 @@
+import {extend, Grid, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const grid = root.createComponent(
+    Grid,
+    {
+      columns: ['20%', 'fill', 'auto'],
+      rows: [300, 'auto'],
+    },
+    [
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        '20% / 300',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'fill / 300',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'auto / 300',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        '20% / auto',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'fill / auto',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'auto / auto',
+      ),
+    ],
+  );
+
+  root.appendChild(grid);
+});

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

@@ -0,0 +1,42 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {MaybeResponsiveConditionalStyle} from '../../style';
+import type {
+  BorderProps,
+  SizingProps,
+  SpacingProps,
+  ViewLikeAccessibilityRole,
+} from '../shared';
+
+export interface GridItemProps extends BorderProps, SizingProps, SpacingProps {
+  /**
+   * Number of columns the item will span across
+   */
+  columnSpan?: MaybeResponsiveConditionalStyle<number>;
+  /**
+   * Number of rows the item will span across
+   */
+  rowSpan?: MaybeResponsiveConditionalStyle<number>;
+  /**
+   * 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;
+}
+
+/**
+ * GridItem can be used as children of Grid.
+ *
+ * It offers a way to span the element across a number of columns and rows.
+ */
+export const GridItem = createRemoteComponent<'GridItem', GridItemProps>(
+  'GridItem',
+);

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

@@ -0,0 +1,72 @@
+# GridItem
+
+GridItem can be used as children of Grid.
+
+It offers a way to span the element across a number of columns and rows.
+
+## Props
+
+optional = ?
+
+| Name               | Type                                                                                                                                                                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| columnSpan?        | <code>number &#124; ConditionalStyle<<wbr>number, AcceptedConditions<wbr>></code>                                                                                                                                                                                                                     | Number of columns the item will span across                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| rowSpan?           | <code>number &#124; ConditionalStyle<<wbr>number, AcceptedConditions<wbr>></code>                                                                                                                                                                                                                     | Number of rows the item will span across                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| 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;                                                                                                                                                                                                                                                           |
+| 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="Spacing"></a>
+
+### Spacing
+
+<code>"none" &#124; "extraTight" &#124; "tight" &#124; "base" &#124; "loose" &#124; "extraLoose"</code>
+<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.                                                           |

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

@@ -0,0 +1,3 @@
+## Related components
+
+- [`Grid`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Grid): Used to lay out content in a matrix of rows and columns. It should always be the parent of `GridItem` components.

package/src/surfaces/checkout/components/GridItem/examples/basic-griditem.example.ts

@@ -0,0 +1,42 @@
+import {extend, Grid, GridItem, View} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const grid = root.createComponent(
+    Grid,
+    {
+      columns: ['20%', 'fill', 'auto'],
+      rows: [300, 'auto'],
+    },
+    [
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        '20% / 300',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'fill / 300',
+      ),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'auto / 300',
+      ),
+      root.createComponent(GridItem, {columnSpan: 2}, [
+        root.createComponent(
+          View,
+          {border: 'base', padding: 'base'},
+          '20% + fill / auto',
+        ),
+      ]),
+      root.createComponent(
+        View,
+        {border: 'base', padding: 'base'},
+        'auto / auto',
+      ),
+    ],
+  );
+
+  root.appendChild(grid);
+});

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

@@ -0,0 +1,44 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {InlineAlignment, AccessibilityRole} from '../shared';
+
+type Level = 1 | 2 | 3;
+
+export interface HeadingProps {
+  /**
+   * Unique identifier.
+   * Typically used to make the heading a target that another component
+   * can refer to in order to provide an alternative accessibility label.
+   */
+  id?: string;
+  /**
+   * The visual level of the heading. When not set, the heading will use
+   * its “automatic” heading level, which is determined by the level of nesting
+   * within ancestor `HeadingGroup`s. No matter what value you provide here,
+   * the semantic level (e.g., how the heading contributes to the document outline)
+   * is determined exclusively by the “automatic” heading level.
+   */
+  level?: Level;
+  /**
+   * 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.
+   */
+  accessibilityRole?: Extract<AccessibilityRole, 'presentation'>;
+  /**
+   * Align text along the main axis.
+   */
+  inlineAlignment?: InlineAlignment;
+}
+
+/**
+ * Headings control the visual style of headings. Use headings to introduce major
+ * sections, like Contact information, Shipping address, or Shipping method.
+ *
+ * Unlike HTML headings, you don’t explicitly specify the position of the heading in the
+ * document outline. Nest headings within the heading group component to control
+ * the document outline structure used by assistive technologies.
+ */
+export const Heading = createRemoteComponent<'Heading', HeadingProps>(
+  'Heading',
+);

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

@@ -0,0 +1,19 @@
+# Heading
+
+Headings control the visual style of headings. Use headings to introduce major
+sections, like Contact information, Shipping address, or Shipping method.
+
+Unlike HTML headings, you don’t explicitly specify the position of the heading in the
+document outline. Nest headings within the heading group component to control
+the document outline structure used by assistive technologies.
+
+## Props
+
+optional = ?
+
+| Name               | Type                                              | Description                                                                                                                                                                                                                                                                                                                                                       |
+| ------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| id?                | <code>string</code>                               | Unique identifier. Typically used to make the heading a target that another component can refer to in order to provide an alternative accessibility label.                                                                                                                                                                                                        |
+| level?             | <code>1 &#124; 2 &#124; 3</code>                  | The visual level of the heading. When not set, the heading will use its “automatic” heading level, which is determined by the level of nesting within ancestor `HeadingGroup`s. No matter what value you provide here, the semantic level (e.g., how the heading contributes to the document outline) is determined exclusively by the “automatic” heading level. |
+| accessibilityRole? | <code>"presentation"</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 /><code>"presentation"</code>: Used to strip the semantic meaning of an element, but leave the visual styling intact.                                                                                  |
+| inlineAlignment?   | <code>"start" &#124; "center" &#124; "end"</code> | Align text along the main axis.                                                                                                                                                                                                                                                                                                                                   |

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

@@ -0,0 +1,10 @@
+## Best practices
+
+- Add a heading at the top of each section that clearly describe what’s below.
+- Use the heading to highlight the most important concepts or pieces of information that customers need to know.
+
+## Related components
+
+- [`HeadingGroup`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/HeadingGroup): Controls the H level of headings when nested within the group, like H1, H2, and H3.
+- [`Text`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Text): Styles and provides semantic value for a specific piece of text content.
+- [`TextBlock`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/TextBlock): Renders a block of text that occupies the full width available, like a paragraph.

package/src/surfaces/checkout/components/Heading/examples/basic-heading.example.ts

@@ -0,0 +1,7 @@
+import {extend, Heading} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const heading = root.createComponent(Heading, undefined, 'Store name');
+
+  root.appendChild(heading);
+});

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

@@ -0,0 +1,15 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface HeadingGroupProps {}
+
+/**
+ * Heading group controls the heading level of headings nested within it, like H1, H2, H3.
+ *
+ * Use a heading group whenever you use a heading to ensure the experience is the same
+ * for screen reader users. When using a heading, any children related to that
+ * heading should be nested within the same heading group.
+ */
+export const HeadingGroup = createRemoteComponent<
+  'HeadingGroup',
+  HeadingGroupProps
+>('HeadingGroup');

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

@@ -0,0 +1,7 @@
+# HeadingGroup
+
+Heading group controls the heading level of headings nested within it, like H1, H2, H3.
+
+Use a heading group whenever you use a heading to ensure the experience is the same
+for screen reader users. When using a heading, any children related to that
+heading should be nested within the same heading group.

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

@@ -0,0 +1,9 @@
+## Best practices
+
+- Use this component to create a content hierarchy within the document outline.
+
+## Related components
+
+- [`Heading`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Heading): Controls the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method.
+- [`Text`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/Text): Used to visually style and provide semantic value for a specific piece of text content.
+- [`TextBlock`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions/src/components/TextBlock): Used to render a block of text that occupies the full width available, like a paragraph.

package/src/surfaces/checkout/components/HeadingGroup/examples/basic-headinggroup.example.ts

@@ -0,0 +1,20 @@
+import {
+  extend,
+  HeadingGroup,
+  Heading,
+  View,
+} from '@shopify/checkout-ui-extensions';
+
+extend('Checkout::Dynamic::Render', (root) => {
+  const headingGroup = root.createComponent(View, undefined, [
+    root.createComponent(Heading, undefined, 'Heading <h1>'),
+    root.createComponent(HeadingGroup, undefined, [
+      root.createComponent(Heading, undefined, 'Heading <h2>'),
+      root.createComponent(HeadingGroup, undefined, [
+        root.createComponent(Heading, undefined, 'Heading <h3>'),
+      ]),
+    ]),
+  ]);
+
+  root.appendChild(headingGroup);
+});

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

@@ -0,0 +1,91 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {Appearance, Size} from '../shared';
+
+export type IconSource =
+  | 'arrowLeft'
+  | 'arrowRight'
+  | 'arrowUp'
+  | 'arrowUpRight'
+  | 'arrowDown'
+  | 'bag'
+  | 'calendar'
+  | 'camera'
+  | 'caretDown'
+  | 'cart'
+  | 'checkmark'
+  | 'chevronDown'
+  | 'chevronUp'
+  | 'chevronRight'
+  | 'chevronLeft'
+  | 'close'
+  | 'critical'
+  | 'discount'
+  | 'delivered'
+  | 'delivery'
+  | 'disabled'
+  | 'email'
+  | 'errorFill'
+  | 'geolocation'
+  | 'grid'
+  | 'hamburger'
+  | 'horizontalDots'
+  | 'info'
+  | 'infoFill'
+  | 'list'
+  | 'lock'
+  | 'magnify'
+  | 'map'
+  | 'marker'
+  | 'minus'
+  | 'mobile'
+  | 'note'
+  | 'pen'
+  | 'verticalDots'
+  | 'plus'
+  | 'questionFill'
+  | 'reorder'
+  | 'store'
+  | 'success'
+  | 'truck'
+  | 'warning'
+  | 'warningFill'
+  | 'giftFill'
+  | 'external'
+  | 'profile';
+
+export interface IconProps {
+  /**
+   * A label that describes the purpose or contents of the icon. When set,
+   * it will be announced to buyers using assistive technologies and will
+   * provide them with more context.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Sets the appearance (color) of the icon.
+   *
+   * By default the icon will inherit the color of its parent.
+   *
+   * @defaultValue 'monochrome'
+   */
+  appearance?: Appearance;
+
+  /**
+   * Adjusts the size of the icon.
+   *
+   * @defaultValue 'base'
+   */
+  size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>;
+
+  /**
+   * Specifies which icon to display
+   */
+  source: IconSource;
+}
+
+/**
+ * Icons are pictograms or graphic symbols.
+ * They can act as wayfinding tools or as a means of communicating functionality.
+ */
+export const Icon = createRemoteComponent<'Icon', IconProps>('Icon');