Fix underline size on Link component when arrowDirection='none' (#887)

* fix bug where Link underline doesn't take full width when there's no arrow

* add changeset

* refactored Link stories

* update snapshots

* add new exports to changeset

Author: joshfarrant

.changeset/curly-guests-sell.md

@@ -0,0 +1,10 @@
+---
+'@primer/react-brand': patch
+---
+
+`Link` component improvements.
+
+- Fixed a bug in the `Link` component where the underline wouldn't take the full width when `arrowDirection='none'`.
+- Prop options are also now exported from the package root, specifically:
+  - `LinkSizes`
+  - `LinkArrowDirections`

packages/react/src/Link/Link.features.stories.tsx

@@ -1,35 +1,37 @@
-import React from 'react'
-import {Meta, StoryFn} from '@storybook/react'
-import {Link} from '.'
+import type {Meta, StoryObj} from '@storybook/react'
 
-const meta: Meta<typeof Link> = {
-  title: 'Components/Link/features',
-  component: Link,
-}
+import {type LinkProps} from '.'
+import baseMeta from './Link.stories'
 
+const meta: Meta<LinkProps> = {...baseMeta, title: 'Components/Link/Features'}
 export default meta
 
-const Template: StoryFn<typeof Link> = args => <Link {...args} />
+type Story = StoryObj<LinkProps>
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    href: '#',
+    children: 'Large size',
+  },
+}
 
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-  href: '#',
-  children: 'Large size',
+export const ArrowStart: Story = {
+  args: {
+    children: 'Back to schedule',
+    arrowDirection: 'start',
+  },
 }
 
-export const Reversed = Template.bind({})
-Reversed.args = {
-  size: 'medium',
-  href: '#',
-  children: 'Back to schedule',
-  arrowDirection: 'start',
+export const NoArrow: Story = {
+  args: {
+    arrowDirection: 'none',
+  },
 }
 
-export const Accent = Template.bind({})
-Accent.args = {
-  size: 'medium',
-  variant: 'accent',
-  href: '#',
-  children: 'Accent color',
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    children: 'Accent variant',
+  },
 }

packages/react/src/Link/Link.module.css

@@ -78,3 +78,7 @@
   margin-left: auto;
   margin-right: 4px;
 }
+
+.Link.Link--arrow-none::after {
+  width: 100%;
+}

packages/react/src/Link/Link.module.css.d.ts

@@ -6,6 +6,7 @@ declare const styles: {
   readonly "Link-arrow": string;
   readonly "Link--large": string;
   readonly "Link--arrow-start": string;
+  readonly "Link--arrow-none": string;
 };
 export = styles;
 

packages/react/src/Link/Link.stories.tsx

@@ -1,17 +1,37 @@
-import React from 'react'
-import {Meta, StoryFn} from '@storybook/react'
-import {Link} from '.'
+import type {Meta, StoryObj} from '@storybook/react'
 
-export default {
+import {Link, LinkArrowDirections, LinkSizes, LinkVariants, type LinkProps} from '.'
+
+const meta: Meta<LinkProps> = {
   title: 'Components/Link',
   component: Link,
-} as Meta<typeof Link>
+  args: {
+    children: 'Learn more',
+    size: 'medium',
+    arrowDirection: 'end',
+    variant: 'default',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    arrowDirection: {
+      options: LinkArrowDirections,
+      control: {type: 'inline-radio'},
+    },
+    size: {
+      options: LinkSizes,
+      control: {type: 'inline-radio'},
+    },
+    variant: {
+      options: LinkVariants,
+      control: {type: 'inline-radio'},
+    },
+  },
+}
 
-const Template: StoryFn<typeof Link> = args => <Link {...args} />
+export default meta
 
-export const Default = Template.bind({})
-Default.args = {
-  // size: 'medium',
-  href: '#',
-  children: 'Primary action',
-}
+type Story = StoryObj<LinkProps>
+
+export const Default: Story = {}

packages/react/src/Link/Link.tsx

@@ -7,16 +7,18 @@ import styles from './Link.module.css'
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'
 
 export const LinkVariants = ['default', 'accent'] as const
+export const LinkSizes = ['medium', 'large'] as const
+export const LinkArrowDirections = ['start', 'end', 'none'] as const
 
 export type LinkProps = {
   /**
    * The size variations available in Link
    */
-  size?: 'medium' | 'large'
+  size?: (typeof LinkSizes)[number]
   /**
    * Position of the arrow.
    */
-  arrowDirection?: 'start' | 'end' | 'none'
+  arrowDirection?: (typeof LinkArrowDirections)[number]
   /**
    * Specify alternative link appearance
    */

packages/react/src/Link/Link.visual.spec.ts

@@ -21,8 +21,15 @@ test.describe('Visual Comparison: Link', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
-  test('Link / Reversed', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-link-features--reversed&viewMode=story')
+  test('Link / Arrow Start', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-link-features--arrow-start&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
+
+  test('Link / No Arrow', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-link-features--no-arrow&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()