docs(tabs-primitive): add usage guidelines

Author: SiTaggart

packages/paste-website/package.json

@@ -64,6 +64,8 @@
     "@twilio-paste/style-props": "^1.8.6",
     "@twilio-paste/styling-library": "^0.1.4",
     "@twilio-paste/table": "^0.1.5",
+    "@twilio-paste/tabs-primitive": "^0.1.9",
+    "@twilio-paste/tabs":"^0.3.16",
     "@twilio-paste/text": "^2.3.13",
     "@twilio-paste/textarea": "^1.1.7",
     "@twilio-paste/theme": "^3.2.27",

packages/paste-website/src/component-examples/TabsPrimitiveExamples.ts

@@ -0,0 +1,112 @@
+export const horizontalExample = `
+const HorizontalExample = () => {
+  const tab = useTabPrimitiveState();
+  return (
+    <>
+      <TabPrimitiveList {...tab} aria-label="My tabs">
+        <TabPrimitive {...tab}>
+          Tab 1
+        </TabPrimitive>
+        <TabPrimitive {...tab} disabled>
+          Tab 2 (disabled)
+        </TabPrimitive>
+        <TabPrimitive {...tab}>
+          Tab 3
+        </TabPrimitive>
+      </TabPrimitiveList>
+      <TabPrimitivePanel {...tab}>Tab 1</TabPrimitivePanel>
+      <TabPrimitivePanel {...tab}>Tab 2</TabPrimitivePanel>
+      <TabPrimitivePanel {...tab}>Tab 3</TabPrimitivePanel>
+    </>
+  )
+};
+
+render(
+  <HorizontalExample />
+)
+`.trim();
+
+export const verticalExample = `
+const VerticalExample = () => {
+  const tab = useTabPrimitiveState({orientation: 'vertical'});
+  return (
+    <Stack orientation="horizontal" spacing="space40">
+      <Box>
+        <TabPrimitiveList {...tab} aria-label="My tabs">
+          <Stack orientation="vertical" spacing="space20">
+            <TabPrimitive {...tab}>
+              Tab 1
+            </TabPrimitive>
+            <TabPrimitive {...tab}>
+              Tab 2
+            </TabPrimitive>
+            <TabPrimitive {...tab}>
+              Tab 3
+            </TabPrimitive>
+          </Stack>
+        </TabPrimitiveList>
+      </Box>
+      <Box>
+        <TabPrimitivePanel {...tab}>Tab 1</TabPrimitivePanel>
+        <TabPrimitivePanel {...tab}>Tab 2</TabPrimitivePanel>
+        <TabPrimitivePanel {...tab}>Tab 3</TabPrimitivePanel>
+      </Box>
+    </Stack>
+  )
+};
+render(
+  <VerticalExample />
+)
+`.trim();
+
+export const styledExample = `
+const CustomTab = React.forwardRef((props, ref) => (
+  <Box
+    as="div"
+    ref={ref}
+    borderBottomColor="transparent"
+    borderRadius="borderRadius0"
+    borderBottomStyle="solid"
+    borderBottomWidth="borderWidth20"
+    cursor="pointer"
+    padding="space20"
+    outline="none"
+    _selected={{
+      borderColor:"colorBorderPrimary"
+    }}
+    _focus={{
+      textDecoration: 'underline'
+    }}
+    _disabled={{
+      color: 'colorTextWeaker'
+    }}
+    {...props}
+  />
+));
+const StyledExample = () => {
+  const tab = useTabPrimitiveState();
+  return (
+    <>
+      <TabPrimitiveList {...tab} aria-label="My tabs">
+        <Stack orientation="horizontal" spacing="space20">
+          <TabPrimitive {...tab} as={CustomTab}>
+            Tab 1
+          </TabPrimitive>
+          <TabPrimitive {...tab} disabled as={CustomTab}>
+            Tab 2
+          </TabPrimitive>
+          <TabPrimitive {...tab} as={CustomTab}>
+            Tab 3
+          </TabPrimitive>
+        </Stack>
+      </TabPrimitiveList>
+      <TabPrimitivePanel {...tab}>Tab 1</TabPrimitivePanel>
+      <TabPrimitivePanel {...tab}>Tab 2</TabPrimitivePanel>
+      <TabPrimitivePanel {...tab}>Tab 3</TabPrimitivePanel>
+    </>
+  )
+};
+render(
+  <StyledExample />
+)
+`.trim();