Merge pull request #1338 from Shopify/page-component

Add Page component

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

@@ -0,0 +1,11 @@
+import {Page as BasePage} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type PageProps = ReactPropsFromRemoteComponentType<typeof BasePage>;
+
+export const Page = createRemoteReactComponent(BasePage, {
+  fragmentProps: ['primaryAction', 'secondaryAction'],
+});

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

@@ -0,0 +1,2 @@
+export {Page} from './Page';
+export type {PageProps} from './Page';

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

@@ -1,4 +1,5 @@
 export * from './Card';
 export * from './CustomerAccountAction';
+export * from './Page';
 export * from './PolicyModal';
 export * from './shared-checkout-components';

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

@@ -0,0 +1,49 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {RemoteFragment} from '@remote-ui/core';
+
+export interface PageProps {
+  /**
+   * The text to be used as title.
+   */
+  title: string;
+
+  /**
+   * The text to be used as subtitle.
+   */
+  subtitle?: string;
+
+  /**
+   * The action grouping, provided as button(s), that is placed in the primary position of the page.
+   */
+  primaryAction?: RemoteFragment;
+
+  /**
+   * Label for the primary action grouping.
+   *
+   * @defaultValue "More actions"
+   */
+  primaryActionLabel?: string;
+
+  /**
+   * Accessibility label for the primary action grouping.
+   *
+   * @defaultValue "More actions"
+   */
+  primaryActionAccessibilityLabel?: string;
+
+  /**
+   * The secondary action provided as a button, that is placed in the secondary position of the page.
+   */
+  secondaryAction?: RemoteFragment;
+
+  /**
+   * 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
+   */
+  loading?: boolean;
+}
+
+export const Page = createRemoteComponent<'Page', PageProps>('Page');

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

@@ -0,0 +1,2 @@
+export {Page} from './Page';
+export type {PageProps} from './Page';

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

@@ -1,4 +1,5 @@
 export * from './Card';
 export * from './CustomerAccountAction';
+export * from './Page';
 export * from './PolicyModal';
 export * from './shared-checkout-components';