Revert "Remove the CSS modules feature flag from the Link component (#…

…5019)"

This reverts commit c2f64aa.

e2e/components/Link.test.ts

@@ -31,6 +31,9 @@ test.describe('Link', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_ga: true,
+                },
               },
             })
 
@@ -47,6 +50,39 @@ test.describe('Link', () => {
           })
 
           test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_ga: true,
+                },
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+
+          test('default (styled-component) @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`)
+
+            // Hover state
+            await page.getByRole('link').hover()
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`)
+
+            // Focus state
+            await page.keyboard.press('Tab')
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`)
+          })
+
+          test('axe (styled-component) @aat', async ({page}) => {
             await visit(page, {
               id: story.id,
               globals: {

packages/react/src/Link/Link.tsx

@@ -1,8 +1,13 @@
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
+import styled from 'styled-components'
+import {system} from 'styled-system'
+import {get} from '../constants'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {SxProp} from '../sx'
+import sx from '../sx'
 import classes from './Link.module.css'
+import {useFeatureFlag} from '../FeatureFlags'
 import Box from '../Box'
 import type {ComponentProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
@@ -16,7 +21,49 @@ type StyledLinkProps = {
   inline?: boolean
 } & SxProp
 
+const hoverColor = system({
+  hoverColor: {
+    property: 'color',
+    scale: 'colors',
+  },
+})
+
+const StyledLink = styled.a<StyledLinkProps>`
+  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
+
+  /* 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)}` : '')};
+  }
+  &:is(button) {
+    display: inline-block;
+    padding: 0;
+    font-size: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    appearance: none;
+  }
+  ${sx};
+`
+
 const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_ga')
+
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -44,10 +91,24 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
     }, [innerRef])
   }
 
-  if (props.sx) {
+  if (enabled) {
+    if (props.sx) {
+      return (
+        <Box
+          as={Component}
+          className={clsx(className, classes.Link)}
+          data-muted={props.muted}
+          data-inline={inline}
+          data-underline={underline}
+          {...props}
+          // @ts-ignore shh
+          ref={innerRef}
+        />
+      )
+    }
+
     return (
-      <Box
-        as={Component}
+      <Component
         className={clsx(className, classes.Link)}
         data-muted={props.muted}
         data-inline={inline}
@@ -60,11 +121,11 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
   }
 
   return (
-    <Component
-      className={clsx(className, classes.Link)}
-      data-muted={props.muted}
+    <StyledLink
+      as={Component}
+      className={className}
       data-inline={inline}
-      data-underline={underline}
+      underline={underline}
       {...props}
       // @ts-ignore shh
       ref={innerRef}

packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap

@@ -1,41 +1,203 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Link applies button styles when rendering a button element 1`] = `
+.c1 {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <button
-  className="Link"
+  className="c0 c1"
 />
 `;
 
 exports[`Link passes href down to link element 1`] = `
+.c1 {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
-  className="Link"
+  className="c0 c1"
   href="https://github.com"
 />
 `;
 
 exports[`Link respects hoverColor prop 1`] = `
+.c1 {
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c1:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
-  className="Link"
-  hoverColor="accent.fg"
+  className="c0 c1"
 />
 `;
 
 exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
-.c0 {
+.c1 {
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-text-decoration: none;
+  text-decoration: none;
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
 }
 
+[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c1:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
-  className="c0 Link"
-  data-muted={true}
+  className="c0 c1"
   muted={true}
 />
 `;
 
 exports[`Link respects the "muted" prop 1`] = `
+.c1 {
+  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+[data-a11y-link-underlines='true'] .c0[data-inline='true'] {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+}
+
+.c1:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
-  className="Link"
-  data-muted={true}
+  className="c0 c1"
   muted={true}
 />
 `;