Adding FullWidthTabs (#418)

src/components/Tabs/FullWidthTabs.stories.tsx

@@ -0,0 +1,54 @@
+import { Spacer, FullWidthTabs, Text } from "@/components";
+import type { StoryObj } from "@storybook/react";
+
+export default {
+  component: FullWidthTabs,
+  title: "Display/FullWidthTabs",
+  tags: ["tabs", "autodocs"],
+};
+
+type Story = StoryObj<typeof FullWidthTabs>;
+
+export const Playground: Story = {
+  args: {
+    defaultValue: "tab2",
+    onValueChange: s => console.log(s),
+    ariaLabel: "a full width simple tab component",
+    children: (
+      <div style={{ width: "700px" }}>
+        <FullWidthTabs.TriggersList>
+          <FullWidthTabs.Trigger
+            value="tab1"
+            key="tab1"
+          >
+            Tab 1
+          </FullWidthTabs.Trigger>
+          <FullWidthTabs.Trigger
+            value="tab2"
+            key="tab2"
+          >
+            Tab 2
+          </FullWidthTabs.Trigger>
+          <FullWidthTabs.Trigger
+            value="tab3"
+            key="tab3"
+          >
+            Tab 3
+          </FullWidthTabs.Trigger>
+        </FullWidthTabs.TriggersList>
+        <FullWidthTabs.Content value="tab1">
+          <Spacer />
+          <Text>Tab 1 content</Text>
+        </FullWidthTabs.Content>
+        <FullWidthTabs.Content value="tab2">
+          <Spacer />
+          <Text>Tab 2 content</Text>
+        </FullWidthTabs.Content>
+        <FullWidthTabs.Content value="tab3">
+          <Spacer />
+          <Text>Tab 3 content</Text>
+        </FullWidthTabs.Content>
+      </div>
+    ),
+  },
+};

src/components/Tabs/Tabs.test.tsx

@@ -1,6 +1,6 @@
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Tabs } from "./Tabs";
+import { Tabs, FullWidthTabs } from "./Tabs";
 import { TabsProps } from "@/components/Tabs/Tabs";
 import { renderCUI } from "@/utils/test-utils";
 
@@ -97,3 +97,42 @@ describe("Tabs", () => {
     });
   });
 });
+
+describe("FullWidthTabs", () => {
+  it("should render the FullWidthTabs", () => {
+    const { getByText } = renderCUI(
+      <FullWidthTabs>
+        <FullWidthTabs.TriggersList>
+          <FullWidthTabs.Trigger
+            value="tab1"
+            key="tab1"
+          >
+            Tab 1
+          </FullWidthTabs.Trigger>
+          <FullWidthTabs.Trigger
+            value="tab2"
+            key="tab2"
+          >
+            Tab 2
+          </FullWidthTabs.Trigger>
+          <FullWidthTabs.Trigger
+            value="tab3"
+            key="tab3"
+          >
+            Tab 3
+          </FullWidthTabs.Trigger>
+        </FullWidthTabs.TriggersList>
+        <FullWidthTabs.Content value="tab1">
+          Tab 1 content
+        </FullWidthTabs.Content>
+        <FullWidthTabs.Content value="tab2">
+          Tab 2 content
+        </FullWidthTabs.Content>
+        <FullWidthTabs.Content value="tab3">
+          Tab 3 content
+        </FullWidthTabs.Content>
+      </FullWidthTabs>
+    );
+    expect(getByText("Tab 1").textContent).toBe("Tab 1");
+  });
+});

src/components/Tabs/Tabs.tsx

@@ -69,4 +69,19 @@ Tabs.TriggersList = TriggersList;
 Tabs.Trigger = Trigger;
 Tabs.Content = Content;
 
-export { Tabs };
+const FullWidthTabs = styled(Tabs)`
+  width: 100%;
+`;
+
+FullWidthTabs.Trigger = styled(Trigger)<{ width?: string }>`
+  ${props => props.width ? `width: ${props.width};` :
+  `
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+  `};
+`;
+
+FullWidthTabs.TriggersList = TriggersList;
+
+export { Tabs, FullWidthTabs };

src/components/index.ts

@@ -52,7 +52,7 @@ export { SidebarCollapsibleTitle } from "./SidebarCollapsibleTitle/SidebarCollap
 export { Spacer } from "./Spacer/Spacer";
 export { SplitButton } from "./SplitButton/SplitButton";
 export { Switch } from "./Switch/Switch";
-export { Tabs } from "./Tabs/Tabs";
+export { Tabs, FullWidthTabs } from "./Tabs/Tabs";
 export { FileTabs, FileTabElement } from "./FileTabs/FileTabs";
 export { Table } from "./Table/Table";
 export { Text } from "./Typography/Text/Text";