Updates to bring in-line with API design proposal

packages/ui-extensions-react/src/surfaces/customer-account/components/Page/Page.ts

@@ -7,5 +7,5 @@ import {
 export type PageProps = ReactPropsFromRemoteComponentType<typeof BasePage>;
 
 export const Page = createRemoteReactComponent(BasePage, {
-  fragmentProps: ['actions', 'backAction'],
+  fragmentProps: ['primaryAction', 'secondaryAction'],
 });

packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts

@@ -1,7 +1,6 @@
 export * from './Card';
 export * from './CustomerAccountAction';
 export * from './Page';
-export * from './PaymentIcon';
 export * from './PolicyModal';
 export * from './Thumbnail';
 export * from './shared-checkout-components';

packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.ts

@@ -3,48 +3,47 @@ import type {RemoteFragment} from '@remote-ui/core';
 
 export interface PageProps {
   /**
-   * The text to be used as title, in large type
+   * The text to be used as title.
    */
   title: string;
 
   /**
-   * The content of the page.
-   * We will adopt what is decided as type in this discussion:
-   * https://github.com/Shopify/ui-api-design/issues/139
+   * The text to be used as subtitle.
    */
-  children: RemoteFragment;
+  subtitle?: string;
 
   /**
-   * Flag that indicates if the page skeleton should be displayed. Optional.
-   * Defaults to false. When true, a Skeleton component will be rendered as header.
+   * The action grouping, provided as button(s), that is placed in the primary position of the page.
    */
-  loading?: boolean;
+  primaryAction?: RemoteFragment;
 
   /**
-   * The text to be used as subtitle, in regular type. Optional
+   * Label for the primary action grouping.
+   *
+   * @defaultValue "More actions"
    */
-  subtitle?: string;
+  primaryActionLabel?: string;
 
   /**
-   * The action to be used as the back button. Optional. Expected to be a Button.
-   * When provided, only `to`, `onPress` and `accessibilityLabel` will be used. The rest will be ignored by the Customer Account.
+   * Accessibility label for the primary action grouping.
+   *
+   * @defaultValue "More actions"
    */
-  backAction?: RemoteFragment;
+  primaryActionAccessibilityLabel?: string;
 
   /**
-   * The list of actions. Optional. Expected to be a fragment with a list of Buttons.
-   * Customer Account implementation details:
-   * When provided, the first 2 actions will always be displayed.
-   * When there are 3 or more, the first one is displayed and the rest will be displayed in a dropdown.
+   * The secondary action provided as a button, that is placed in the secondary position of the page.
    */
-  actions?: RemoteFragment;
+  secondaryAction?: RemoteFragment;
 
   /**
-   * The label to be used in the dropdown that contains the actions when ther are 3 or more actions.
-   * Optional.
-   * Defaults to "More actions".
+   * Indicates that the page is in a loading state.
+   *
+   * When `true`, the page will be replaced by loading indicators (for example: skeletons or spinners).
+   *
+   * @defaultValue false
    */
-  actionsLabel?: string;
+  loading?: boolean;
 }
 
 export const Page = createRemoteComponent<'Page', PageProps>('Page');

packages/ui-extensions/src/surfaces/customer-account/components/index.ts

@@ -1,7 +1,6 @@
 export * from './Card';
 export * from './CustomerAccountAction';
 export * from './Page';
-export * from './PaymentIcon';
 export * from './PolicyModal';
 export * from './Thumbnail';
 export * from './shared-checkout-components';