Add Tabs Documentation (#2691)

Co-authored-by: Mike <[email protected]>

site/docs/components/tabs/accessibility.mdx

@@ -0,0 +1,46 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+Any focusable elements included in the Tab content will need to be checked and tested accordingly.
+
+### Keyboard interactions
+
+<KeyboardControls>
+<KeyboardControl keyOrCombos="Tab">
+-	If focus is on outside of tabs, enters focus into tabs.
+-	If focus is on a tab item, exits the tab component and place focus onto the next element within the tabbing order.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Shift + Tab">
+  - If focus is inside a tab component, moves focus to the previous element in
+  the tabbing order.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Enter or Space">
+  - If focus is on tab hover state, selects a tab item.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Arrow left or Arrow right">
+  - Moves focus between tab items in tab bar.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Arrow up or Arrow down">
+  - Moves focus between tab items in an overflow menu list.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="Home">
+  - If focus is on a tab, moves focus to the first tab.
+</KeyboardControl>
+
+<KeyboardControl keyOrCombos="End">
+  - If focus is on a tab, moves focus to the last tab.
+</KeyboardControl>
+
+</KeyboardControls>

site/docs/components/tabs/examples.mdx

@@ -0,0 +1,57 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+
+  <LivePreview componentName="tabs" exampleName="MainTabstrip" >
+
+    ### Main tabstrip (default)
+
+    The main tabstrip uses a border to separate the tabs from the rest of the page. You can align tabs inside the tabstrip can be aligned to the left, center or right. Use it to organize content across the main region of an interface under the app header.
+
+    Guidance:
+
+    The main tabstrip should span the width of the page.
+
+  </LivePreview>
+
+  <LivePreview componentName="tabs" exampleName="Inline" >
+
+    ### Inline tabstrip
+
+    The inline tabstrip has no separator between the tabs and the content below. You should use it within an area of a page to switch between related content. Like the main tabstrip, you can align the tabs to the left, center or right.
+
+    Guidance:
+
+    Don’t use inline tabs standalone outside of the content region it is nested within.
+
+  </LivePreview>
+
+  <LivePreview componentName="tabs" exampleName="WithIcon" >
+
+    ### With icon
+
+    [Icons](../icon) are optional and appear to the left of the label text. An icon can effectively signify the tab’s purpose, as it relates to its underlying content. Additional visual aid makes it easier for users to locate tabs.
+
+    Guidance:
+
+    Ensure that icon descriptors are used consistently across all tabs within the strip. This helps keep the tabs within the strip equally weighted.
+
+  </LivePreview>
+
+    <LivePreview componentName="tabs" exampleName="WithBadge" >
+
+    ### With badge
+
+    Tabs can feature a [Badge](../badge) that serves as a visual cue. They can inform users of additional context, notifications, or new content.
+
+  </LivePreview>
+
+</LivePreviewControls>

site/docs/components/tabs/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Tabs
+data:
+  description:
+    Tabs switch between different but related content. Users can move between different views without the need to leave the current page.
+    A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/src/tabs-next/TabNext.tsx"
+  package:
+    name: "@salt-ds/lab"
+  alsoKnownAs: ["Tab", "Tabstrip", "Tab bar", "Tab set"]
+  relatedComponents: [{ name: "Navigation item", relationship: "similarTo" }]
+  stickerSheet: ""
+layout: DetailComponent
+---

site/docs/components/tabs/usage.mdx

@@ -0,0 +1,49 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### Using the Tabs component
+
+#### When to use Tabs
+
+- Use tabs to organize logically related but mutually exclusive content on a single page.
+- Use tabstrips to prevent users from navigating to another page to complete a task.
+
+#### When not to use Tabs
+
+- Don’t use tabstrips when users need to compare information between views.
+- Don’t use tabstrips to communicate progress. Instead, use [`Stepped Tracker`](/salt/components/stepped-tracker).
+- Don’t use tabstrips for primary navigation, taking the user off the current page. Instead, use [`Navigation Item`](/salt/components/navigation-item).
+
+### Content
+
+- All labels should be short and concise.
+- Labels should clearly communicate the underlying view.
+- Always use sentence case in labels.
+- Always use sentence case for badge labels when nesting in a tab.
+- Do not wrap labels. Use truncation with `Tooltip` if necessary.
+- Icon and text should match each other semantically.
+
+### Import
+
+To import Tabs from the lab Salt package, use:
+
+```js
+import { TabNext, TabstripNext } from "@salt-ds/lab";
+```
+
+### Props
+
+#### TabNext
+
+<PropsTable packageName="lab" componentName="TabNext" />
+
+#### TabstripNext
+
+<PropsTable packageName="lab" componentName="TabstripNext" />

site/src/examples/tabs/Inline.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { TabstripNext, TabNext } from "@salt-ds/lab";
+
+export const Inline = (): ReactElement => {
+  const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+  return (
+    <div>
+      <TabstripNext variant="inline" defaultValue={tabs[0]}>
+        {tabs.map((label) => (
+          <TabNext value={label} key={label}>
+            {label}
+          </TabNext>
+        ))}
+      </TabstripNext>
+    </div>
+  );
+};

site/src/examples/tabs/MainTabstrip.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { TabstripNext, TabNext } from "@salt-ds/lab";
+
+export const MainTabstrip = (): ReactElement => {
+  const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+  return (
+    <div>
+      <TabstripNext defaultValue={tabs[0]}>
+        {tabs.map((label) => (
+          <TabNext value={label} key={label}>
+            {label}
+          </TabNext>
+        ))}
+      </TabstripNext>
+    </div>
+  );
+};

site/src/examples/tabs/WithBadge.tsx

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+import { TabstripNext, TabNext, Badge } from "@salt-ds/lab";
+
+export const WithBadge = (): ReactElement => {
+  const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+  return (
+    <div>
+      <TabstripNext defaultValue={tabs[0]}>
+        {tabs.map((label) => (
+          <TabNext value={label} key={label}>
+            {label}
+            {label === "Transactions" && <Badge value={2} />}
+          </TabNext>
+        ))}
+      </TabstripNext>
+    </div>
+  );
+};

site/src/examples/tabs/WithIcon.tsx

@@ -0,0 +1,36 @@
+import { ReactElement, ComponentType } from "react";
+import { TabstripNext, TabNext } from "@salt-ds/lab";
+import {
+  BankCheckIcon,
+  CreditCardIcon,
+  HomeIcon,
+  LineChartIcon,
+  ReceiptIcon,
+} from "@salt-ds/icons";
+
+export const WithIcon = (): ReactElement => {
+  const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+  const tabToIcon: Record<string, ComponentType> = {
+    Home: HomeIcon,
+    Transactions: ReceiptIcon,
+    Loans: CreditCardIcon,
+    Checks: BankCheckIcon,
+    Liquidity: LineChartIcon,
+  };
+
+  return (
+    <div>
+      <TabstripNext defaultValue={tabs[0]}>
+        {tabs.map((label) => {
+          const Icon = tabToIcon[label];
+          return (
+            <TabNext value={label} key={label}>
+              <Icon /> {label}
+            </TabNext>
+          );
+        })}
+      </TabstripNext>
+    </div>
+  );
+};

site/src/examples/tabs/index.ts

@@ -0,0 +1,4 @@
+export * from "./MainTabstrip";
+export * from "./Inline";
+export * from "./WithIcon";
+export * from "./WithBadge";