feat: add Heading and HeadingGroup components to admin surface

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -4,6 +4,10 @@ export {Divider} from './components/Divider/Divider';
 export type {DividerProps} from './components/Divider/Divider';
 export {EmailField} from './components/EmailField/EmailField';
 export type {EmailFieldProps} from './components/EmailField/EmailField';
+export {Heading} from './components/Heading/Heading';
+export type {HeadingProps} from './components/Heading/Heading';
+export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
+export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
 export {HorizontalStack} from './components/HorizontalStack/HorizontalStack';
 export type {HorizontalStackProps} from './components/HorizontalStack/HorizontalStack';
 export {Icon} from './components/Icon/Icon';

packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts

@@ -0,0 +1,5 @@
+import {Heading as BaseHeading} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const Heading = createRemoteReactComponent(BaseHeading);
+export type {HeadingProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts

@@ -0,0 +1,5 @@
+import {HeadingGroup as BaseHeadingGroup} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup);
+export type {HeadingGroupProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -4,6 +4,10 @@ export {Divider} from './components/Divider/Divider';
 export type {DividerProps} from './components/Divider/Divider';
 export {EmailField} from './components/EmailField/EmailField';
 export type {EmailFieldProps} from './components/EmailField/EmailField';
+export {Heading} from './components/Heading/Heading';
+export type {HeadingProps} from './components/Heading/Heading';
+export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
+export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
 export {HorizontalStack} from './components/HorizontalStack/HorizontalStack';
 export type {HorizontalStackProps} from './components/HorizontalStack/HorizontalStack';
 export {Icon} from './components/Icon/Icon';

packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.ts

@@ -0,0 +1,23 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {AccessibilityRole} from '../shared';
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface HeadingProps {
+  /** A unique identifier for the field. */
+  id?: string;
+
+  /** The visual level of the heading. */
+  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'>;
+}
+
+export const Heading = createRemoteComponent<'Heading', HeadingProps>(
+  'Heading',
+);

packages/ui-extensions/src/surfaces/admin/components/Heading/README.md

@@ -0,0 +1,9 @@
+# Heading
+
+Headings communicate the organization of the content on the page.
+
+## Note
+
+:exclamation: The `level` affects the visual level, but not the actual semantic heading HTML element (`<h1>`,`<h2>`, etc) that gets rendered by the browser. :exclamation:
+
+The specific heading element that gets rendered will be dynamically determined by the `HeadingGroup` component.

packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts

@@ -0,0 +1,8 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface HeadingGroupProps {}
+
+export const HeadingGroup = createRemoteComponent<
+  'HeadingGroup',
+  HeadingGroupProps
+>('HeadingGroup');

packages/ui-extensions/src/surfaces/admin/components/HeadingGroup/README.md

@@ -0,0 +1,5 @@
+# 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.