diff --git a/packages/ui-extensions-react/src/surfaces/customer-account/components/Page/Page.ts b/packages/ui-extensions-react/src/surfaces/customer-account/components/Page/Page.ts index 86500b03d..2bfaeae42 100644 --- a/packages/ui-extensions-react/src/surfaces/customer-account/components/Page/Page.ts +++ b/packages/ui-extensions-react/src/surfaces/customer-account/components/Page/Page.ts @@ -7,5 +7,5 @@ import { export type PageProps = ReactPropsFromRemoteComponentType; export const Page = createRemoteReactComponent(BasePage, { - fragmentProps: ['actions', 'backAction'], + fragmentProps: ['primaryAction', 'secondaryAction'], }); diff --git a/packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts b/packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts index caf7ac107..05741ceda 100644 --- a/packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts +++ b/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'; diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.ts b/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.ts index fb42a8d9d..0bc2b0f0f 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.ts +++ b/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'); diff --git a/packages/ui-extensions/src/surfaces/customer-account/components/index.ts b/packages/ui-extensions/src/surfaces/customer-account/components/index.ts index caf7ac107..05741ceda 100644 --- a/packages/ui-extensions/src/surfaces/customer-account/components/index.ts +++ b/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';