Link: Add inline prop to tag links inside a text block (#3946)

* wip

* cleanup code, add story and test

* add muted to story

* update snapshots

* Create selfish-beans-cheat.md

* split inline story into feature and dev

* add inline to docs.json

* Add Link e2e snapshots

* oops, left a debug!

* omg, remove debug statement

* use dev story for tests

* update snapshots for dev tests

* can't have hover state with multiple links

* oops duplicate

* remove outdated snapshots

.changeset/selfish-beans-cheat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Link: Add `inline` prop to tag links inside a text block, underlined with accessibility setting `[data-a11y-link-underlines]`

e2e/components/Link.test.ts

@@ -128,4 +128,38 @@ test.describe('Link', () => {
       })
     }
   })
+
+  test.describe('Dev: Inline', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Link.Inline.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

src/Link/Link.dev.stories.tsx

@@ -0,0 +1,83 @@
+import Link from '.'
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ComponentProps} from '../utils/types'
+
+export default {
+  title: 'Components/Link/DevOnly',
+  component: Link,
+} as Meta<ComponentProps<typeof Link>>
+
+export const Inline = () => (
+  <div>
+    <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="true">
+      [data-a11y-link-underlines=true] (inline always underlines)
+      <Link href="#">inline: undefined, underline: undefined</Link>
+      <Link underline={true} href="#">
+        inline: undefined, underline: true
+      </Link>
+      <Link underline={false} href="#">
+        inline: undefined, underline: false
+      </Link>
+      <br />
+      <Link inline={true} href="#">
+        inline: true, underline: undefined
+      </Link>
+      <Link inline={false} href="#">
+        inline: false, underline: undefined
+      </Link>
+      <br />
+      <Link inline={true} underline={true} href="#">
+        inline: true, underline: true
+      </Link>
+      <Link inline={true} underline={false} href="#">
+        inline: true, underline: false
+      </Link>
+      <Link inline={false} underline={true} href="#">
+        inline: false, underline: true
+      </Link>
+      <Link inline={false} underline={false} href="#">
+        inline: false, underline: false
+      </Link>
+      <br />
+      <Link muted={true} inline={true} href="#">
+        inline: true, muted: true
+      </Link>
+    </div>
+    <br />
+    <div style={{display: 'flex', flexDirection: 'column'}} data-a11y-link-underlines="false">
+      [data-a11y-link-underlines=false] (inline does nothing)
+      <Link href="#">inline: undefined, underline: undefined</Link>
+      <Link underline={true} href="#">
+        inline: undefined, underline: true
+      </Link>
+      <Link underline={false} href="#">
+        inline: undefined, underline: false
+      </Link>
+      <br />
+      <Link inline={true} href="#">
+        inline: true, underline: undefined
+      </Link>
+      <Link inline={false} href="#">
+        inline: false, underline: undefined
+      </Link>
+      <br />
+      <Link inline={true} underline={true} href="#">
+        inline: true, underline: true
+      </Link>
+      <Link inline={true} underline={false} href="#">
+        inline: true, underline: false
+      </Link>
+      <Link inline={false} underline={true} href="#">
+        inline: false, underline: true
+      </Link>
+      <Link inline={false} underline={false} href="#">
+        inline: false, underline: false
+      </Link>
+      <br />
+      <Link muted={true} inline={true} href="#">
+        inline: true, muted: true
+      </Link>
+    </div>
+  </div>
+)

src/Link/Link.docs.json

@@ -17,6 +17,12 @@
       "defaultValue": "false",
       "description": "Uses a less prominent shade for Link color, and the default link shade on hover"
     },
+    {
+      "name": "inline",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Tag link inside a text block"
+    },
     {
       "name": "underline",
       "type": "boolean",
@@ -44,4 +50,4 @@
     }
   ],
   "subcomponents": []
-}
+}

src/Link/Link.features.stories.tsx

@@ -19,3 +19,11 @@ export const Underline = () => (
     Link
   </Link>
 )
+
+export const Inline = () => (
+  <div data-a11y-link-underlines="true">
+    <Link inline={true} href="#">
+      Link
+    </Link>
+  </div>
+)

src/Link/Link.stories.tsx

@@ -14,6 +14,7 @@ Playground.args = {
   href: '#',
   muted: false,
   underline: false,
+  inline: false,
 }
 
 export const Default = () => <Link href="#">Link</Link>

src/Link/Link.tsx

@@ -11,6 +11,8 @@ type StyledLinkProps = {
   hoverColor?: string
   muted?: boolean
   underline?: boolean
+  // Link inside a text block
+  inline?: boolean
 } & SxProp
 
 const hoverColor = system({
@@ -22,7 +24,19 @@ const hoverColor = system({
 
 const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
-  text-decoration: ${props => (props.underline ? 'underline' : 'none')};
+
+  /* By default, Link does not have underline */
+  text-decoration: none;
+
+  /* You can add one by setting underline={true} */
+  text-decoration: ${props => (props.underline ? 'underline' : undefined)};
+
+  /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */
+  /* Note: setting underline={false} does not override this */
+  [data-a11y-link-underlines='true'] &[data-inline='true'] {
+    text-decoration: underline;
+  }
+
   &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
@@ -72,6 +86,7 @@ const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
   return (
     <StyledLink
       as={Component}
+      data-inline={props.inline}
       {...props}
       // @ts-ignore shh
       ref={innerRef}