Add docs for POS > PWC > Tab components

packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs/Tabs.doc.ts

@@ -0,0 +1,92 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Tabs',
+  description:
+    'The `Tabs` component organizes content into separate views, allowing merchants to switch between related information without leaving the current page. Use tabs when you need to present multiple categories of content in a space-efficient manner.' +
+    '\n\nTabs consist of a tab list containing clickable tab buttons and corresponding tab panels that display the content. Only one panel is visible at a time, reducing cognitive load and keeping the interface clean.',
+  thumbnail: 'tab-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'Tabs Properties',
+      description:
+        'Configure the following properties on the `Tabs` component.',
+      type: 'Tabs',
+    },
+    {
+      title: 'Tabs Events',
+      description:
+        'The `Tabs` component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).',
+      type: 'TabsEvents',
+    },
+    {
+      title: 'TabList',
+      description:
+        'The `TabList` component contains the tab buttons. It must be a direct child of the `Tabs` component.',
+      type: 'TabListJSXProps',
+    },
+    {
+      title: 'Tab',
+      description:
+        'The `Tab` component represents an individual tab button. It must be placed within a `TabList` and should use the `controls` property to associate it with a corresponding `TabPanel`.',
+      type: 'Tab',
+    },
+    {
+      title: 'TabPanel',
+      description:
+        'The `TabPanel` component contains the content for each tab. It must have an `id` that matches the `controls` property of the corresponding `Tab`.',
+      type: 'TabPanel',
+    },
+  ],
+  category: 'Polaris web components',
+  subCategory: 'Layout and structure',
+  defaultExample: {
+    image: 'tab-default.png',
+    description:
+      'Organize content into tabs using the `Tabs` component with `TabList`, `Tab`, and `TabPanel` components. This example shows a basic tabbed interface with two tabs.',
+    codeblock: {
+      title: 'Create a tabbed interface',
+      tabs: [
+        {
+          code: './examples/default.html',
+          language: 'html',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'accessibility',
+      title: 'Accessibility',
+      sectionContent: `
+- **Provide accessibility labels:** Use the \`accessibilityLabel\` prop on the \`Tabs\` component to describe the purpose of the tab group.
+- **Ensure keyboard navigation:** The component supports arrow key navigation between tabs and Enter/Space to activate tabs.
+- **Connect tabs and panels:** Always use matching \`controls\` (on Tab) and \`id\` (on TabPanel) properties to maintain proper ARIA relationships.
+`,
+    },
+  ],
+  related: [],
+  examples: {
+    description: 'Learn how to handle tab change events.',
+    examples: [
+      {
+        description:
+          'Subscribe to the `onChange` event to respond when merchants select different tabs. This example shows how to handle tab changes and capture the selected tab value in real time, enabling dynamic behavior based on which tab is active.',
+        codeblock: {
+          title: 'Handle tab change events',
+          tabs: [
+            {
+              code: './examples/event-handling.html',
+              language: 'html',
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+
+export default data;

packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs/examples/default.html

@@ -0,0 +1,14 @@
+<s-tabs defaultValue="tab1">
+  <s-tab-list>
+    <s-tab controls="tab1">Tab 1</s-tab>
+    <s-tab controls="tab2">Tab 2</s-tab>
+  </s-tab-list>
+
+  <s-tab-panel id="tab1">
+    <s-text>Content for Tab 1</s-text>
+  </s-tab-panel>
+
+  <s-tab-panel id="tab2">
+    <s-text>Content for Tab 2</s-text>
+  </s-tab-panel>
+</s-tabs>

packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs/examples/event-handling.html

@@ -0,0 +1,22 @@
+<s-tabs
+  defaultValue="details"
+  onChange={(event) => console.log('Tab changed to:', event.currentTarget.value)}
+>
+  <s-tab-list>
+    <s-tab controls="details">Details</s-tab>
+    <s-tab controls="history">History</s-tab>
+    <s-tab controls="notes">Notes</s-tab>
+  </s-tab-list>
+
+  <s-tab-panel id="details">
+    <s-text>Customer details and information</s-text>
+  </s-tab-panel>
+
+  <s-tab-panel id="history">
+    <s-text>Order and purchase history</s-text>
+  </s-tab-panel>
+
+  <s-tab-panel id="notes">
+    <s-text>Customer notes and comments</s-text>
+  </s-tab-panel>
+</s-tabs>