From 42f63c5de128210e7eeb5fb704e28955e8af178d Mon Sep 17 00:00:00 2001
From: Robert Niznik <rniznik@launchdarkly.com>
Date: Thu, 7 Nov 2024 09:32:39 -0500
Subject: [PATCH] feat(components): style `Tabs` as links (#1473)

---
 .changeset/pretty-lamps-speak.md              |  5 +++
 .../components/src/styles/Tabs.module.css     |  1 +
 packages/components/stories/Tabs.stories.tsx  | 36 +++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 .changeset/pretty-lamps-speak.md

diff --git a/.changeset/pretty-lamps-speak.md b/.changeset/pretty-lamps-speak.md
new file mode 100644
index 000000000..144b6b020
--- /dev/null
+++ b/.changeset/pretty-lamps-speak.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Style `Tabs` as links
diff --git a/packages/components/src/styles/Tabs.module.css b/packages/components/src/styles/Tabs.module.css
index ea827c3cc..ab5192098 100644
--- a/packages/components/src/styles/Tabs.module.css
+++ b/packages/components/src/styles/Tabs.module.css
@@ -22,6 +22,7 @@
 	border-bottom: 2px solid transparent;
 	position: relative;
 	outline: none;
+	text-decoration: none;
 
 	&[data-hovered] {
 		background-color: var(--lp-color-bg-interactive-secondary-hover);
diff --git a/packages/components/stories/Tabs.stories.tsx b/packages/components/stories/Tabs.stories.tsx
index 6b16deaf1..358de6234 100644
--- a/packages/components/stories/Tabs.stories.tsx
+++ b/packages/components/stories/Tabs.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Tab, TabList, TabPanel, Tabs } from '../src';
 
 import { userEvent, within } from '@storybook/test';
+import { Route, Routes, useLocation } from 'react-router-dom';
 
 const meta: Meta<typeof Tabs> = {
 	component: Tabs,
@@ -64,3 +65,38 @@ export const States: Story = {
 		await userEvent.hover(tabs[2]);
 	},
 };
+
+export const Links: Story = {
+	render: (args) => {
+		const { pathname } = useLocation();
+		return (
+			<Tabs selectedKey={pathname} {...args}>
+				<TabList aria-label="tabs">
+					<Tab id="/tab1" href="/tab1">
+						Tab 1
+					</Tab>
+					<Tab id="/tab2" href="/tab2">
+						Tab 2
+					</Tab>
+					<Tab id="/tab3" href="/tab3">
+						Tab 3
+					</Tab>
+				</TabList>
+				<TabPanel id={pathname}>
+					<Routes>
+						<Route path="/tab1" element={<>Tab body 1</>} />
+						<Route path="/tab2" element={<>Tab body 2</>} />
+						<Route path="/tab3" element={<>Tab body 3</>} />
+					</Routes>
+				</TabPanel>
+			</Tabs>
+		);
+	},
+	decorators: [
+		(Story) => (
+			<Routes>
+				<Route path="/*" element={<Story />} />
+			</Routes>
+		),
+	],
+};