Merge pull request #2121 from Shopify/arigny/sectionheader-docs

Add docs for pos ui extension SectionHeader component

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/Section.doc.ts

@@ -24,9 +24,9 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   category: 'Components',
   related: [],
-  thumbnail: 'section-header-thumbnail.png',
+  thumbnail: 'section-thumbnail.png',
   defaultExample: {
-    image: 'section-header-default.png',
+    image: 'section-default.png',
     codeblock: generateCodeBlockForComponent('Section', 'default.example'),
   },
 };

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/SectionHeader.doc.ts

@@ -0,0 +1,30 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'SectionHeader',
+  description:
+    'A heading style text component with an optional divider line to structure content.',
+  isVisualComponent: true,
+  type: 'component',
+  definitions: [
+    {
+      title: 'SectionHeader',
+      description: '',
+      type: 'SectionHeaderProps',
+    },
+  ],
+  category: 'Components',
+  related: [],
+  thumbnail: 'section-header-thumbnail.png',
+  defaultExample: {
+    image: 'section-header-default.png',
+    codeblock: generateCodeBlock(
+      'SectionHeader',
+      'section-header',
+      'default.example',
+    ),
+  },
+};
+
+export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/section-header/default.example.ts

@@ -0,0 +1,62 @@
+import {
+  extension,
+  Screen,
+  ScrollView,
+  Stack,
+  Navigator,
+  SectionHeader,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.home.modal.render',
+  (root, api) => {
+    const screen = root.createComponent(Screen, {
+      name: 'SectionHeader',
+      title: 'SectionHeader',
+    });
+
+    const scrollView =
+      root.createComponent(ScrollView);
+
+    const defaultSectionHeader = root.createComponent(
+      SectionHeader,
+      {
+        title: 'Default',
+      },
+    );
+
+    const actionSectionHeader =
+      root.createComponent(SectionHeader, {
+        title: 'With action',
+        action: {
+          label: 'Show toast',
+          onPress: () =>
+            api.toast.show('Hello world!'),
+        },
+      });
+
+    const noDividerSectionHeader =
+      root.createComponent(SectionHeader, {
+        title: 'Without divider',
+        hideDivider: true,
+      });
+
+    const rootStack = root.createComponent(
+      Stack,
+      {
+        paddingHorizontal: 'HalfPoint',
+        direction: 'vertical',
+      },
+    );
+    rootStack.append(defaultSectionHeader);
+    rootStack.append(actionSectionHeader);
+    rootStack.append(noDividerSectionHeader);
+
+    scrollView.append(rootStack);
+    screen.append(scrollView);
+    const navigator =
+      root.createComponent(Navigator);
+    navigator.append(screen);
+    root.append(navigator);
+  },
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/section-header/default.example.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Navigator, Screen, ScrollView, Stack, reactExtension, useApi, SectionHeader } from '@shopify/ui-extensions-react/point-of-sale'
+
+const ModalComponent = () => {
+  const api = useApi<'pos.home.modal.render'>();
+
+  return (
+    <Navigator>
+      <Screen title="SectionHeader" name="SectionHeader">
+        <ScrollView>
+          <Stack direction="vertical" paddingHorizontal="HalfPoint">
+            <SectionHeader title='Default' />
+            <SectionHeader title='With action' action={{label: 'Action', onPress: () => { }}} />
+            <SectionHeader title='Without divider' hideDivider />
+          </Stack>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  )
+}
+
+export default reactExtension('pos.home.modal.render', () => {
+  return <ModalComponent />
+}) 

packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pages/versions.doc.ts

@@ -24,6 +24,7 @@ const data: LandingTemplateSchema = {
 
 ### Features
 
+- Introduced a [SectionHeader component](/docs/api/pos-ui-extensions/components/sectionheader). It can be used to title sections and structure content.
 - Removed \`subtitle\` property to the [FormattedTextField](/docs/api/pos-ui-extensions/apis/formatted-text-field) component.
 - Removed \`subtitle\` property to the [TextField](/docs/api/pos-ui-extensions/apis/text-field) component.
 - Renamed the \`OrderAPIContent\` interface to \`OrderApiContent\`.