feat(components): add underline prop to Link component

.changeset/link-underline-prop.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": minor
+---
+
+Add `underline` prop to Link component with `'always' | 'hover' | 'none'` values

packages/components/__tests__/Link.spec.tsx

@@ -30,4 +30,18 @@ describe('Link', () => {
 		expect(screen.getByRole('link')).toBeVisible();
 		expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com');
 	});
+
+	it('renders with underline="always"', () => {
+		const navigate = vi.fn();
+		render(
+			<RouterProvider navigate={navigate} useHref={useHref}>
+				<MemoryRouter>
+					<Link href="/test" underline="always">
+						Link
+					</Link>
+				</MemoryRouter>
+			</RouterProvider>,
+		);
+		expect(screen.getByRole('link')).toBeVisible();
+	});
 });

packages/components/src/Link.tsx

@@ -16,14 +16,22 @@ const linkStyles = cva(styles.base, {
 			default: styles.default,
 			subtle: styles.subtle,
 		},
+		underline: {
+			always: styles.underlineAlways,
+			hover: styles.underlineHover,
+			none: styles.underlineNone,
+		},
 	},
 	defaultVariants: {
 		variant: 'default',
+		underline: 'hover',
 	},
 });
 
 interface LinkProps extends AriaLinkProps, VariantProps<typeof linkStyles>, DOMProps {
 	ref?: Ref<HTMLAnchorElement>;
+	/** Controls when the link is underlined. */
+	underline?: 'always' | 'hover' | 'none';
 }
 
 const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
@@ -35,14 +43,14 @@ const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(nu
  */
 const Link = ({ ref, ...props }: LinkProps) => {
 	[props, ref] = useLPContextProps(props, ref, LinkContext);
-	const { variant = 'default' } = props;
+	const { variant = 'default', underline = 'hover' } = props;
 
 	return (
 		<AriaLink
 			{...props}
 			ref={ref}
 			className={composeRenderProps(props.className, (className, renderProps) =>
-				linkStyles({ ...renderProps, variant, className }),
+				linkStyles({ ...renderProps, variant, underline, className }),
 			)}
 		/>
 	);

packages/components/src/styles/Link.module.css

@@ -41,3 +41,18 @@
 	composes: link;
 	color: var(--lp-color-text-ui-secondary);
 }
+
+.underlineAlways {
+	text-decoration: underline;
+}
+
+.underlineHover {
+}
+
+.underlineNone {
+	text-decoration: none;
+
+	&[data-hovered] {
+		text-decoration: none;
+	}
+}

packages/components/stories/Link.stories.tsx

@@ -35,6 +35,22 @@ export const Subtle: Story = {
 	},
 };
 
+export const UnderlineAlways: Story = {
+	args: {
+		children: 'Link',
+		href: '/test',
+		underline: 'always',
+	},
+};
+
+export const UnderlineNone: Story = {
+	args: {
+		children: 'Link',
+		href: '/test',
+		underline: 'none',
+	},
+};
+
 export const States: Story = {
 	render: (args) => {
 		const styles = { width: 'fit-content' };