Refactor Link component to use CSS modules (#4828)

* Refactor Link to use CSS modules

* Remove needless disable

* Add newline

* Create quick-adults-buy.md

* Run tests inside fhte feature flag also

* Fix naming

* Rails interpolation got me

* test(e2e): update e2e tests for link (#4825)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Remove example-nextjs

---------

Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

Author: jonrohan

.changeset/pre.json

@@ -6,7 +6,6 @@
     "codesandbox": "0.0.0",
     "example-app-router": "0.0.0",
     "example-consumer-test": "0.0.0",
-    "example-nextjs": "0.0.0",
     "@primer/react": "36.27.0",
     "rollup-plugin-import-css": "0.0.0",
     "postcss-preset-primer": "0.0.0"
@@ -28,4 +27,4 @@
     "twelve-tables-leave",
     "young-meals-worry"
   ]
-}
+}

.changeset/quick-adults-buy.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Refactor Link component to use CSS modules using the feature flag `primer_react_css_modules`

.eslintrc.js

@@ -42,7 +42,6 @@ module.exports = {
     'types/**/*',
     'consumer-test/**/*',
     'contributor-docs/adrs/*',
-    'examples/nextjs/**',
     'examples/codesandbox/**',
     // Note: this file is inlined from an external dependency
     'packages/react/src/utils/polymorphic.ts',

contributor-docs/CONTRIBUTING.md

@@ -1,25 +1,29 @@
 # Contribution guidelines
 
-1. [Roadmap](#roadmap)
-2. [Before Getting Started](#before-getting-started)
-3. [Discussing non-public features or products](#discussing-non-public-features-or-products)
-4. [Developing Components](#developing-components)
-   - [Tools we use](#tools-we-use)
-   - [File Structure](#file-structure)
-   - [Component patterns](#component-patterns)
-   - [SSR compatibility](#ssr-compatibility)
-   - [Adding the sx prop](#adding-the-sx-prop)
-   - [Linting](#linting)
-   - [TypeScript support](#typescript-support)
-   - [Additional resources](#additional-resources)
-5. [Writing documentation](#writing-documentation)
-6. [Creating a pull request](#creating-a-pull-request)
-   - [Adding changeset to your pull request](#adding-changeset-to-your-pull-request)
-   - [What to expect after opening a pull request](#what-to-expect-after-opening-a-pull-request)
-     - [What we look for in reviews](#what-we-look-for-in-reviews)
-   - [Previewing your changes](#previewing-your-changes)
-7. [Deploying](#deploying)
-8. [Troubleshooting](#troubleshooting)
+- [Contribution guidelines](#contribution-guidelines)
+  - [Roadmap](#roadmap)
+  - [Before Getting Started](#before-getting-started)
+    - [Proposing new components](#proposing-new-components)
+  - [Discussing non-public features or products](#discussing-non-public-features-or-products)
+  - [Developing components](#developing-components)
+    - [Tools we use](#tools-we-use)
+    - [File structure](#file-structure)
+    - [Component patterns](#component-patterns)
+    - [SSR compatibility](#ssr-compatibility)
+    - [Adding the `sx` prop](#adding-the-sx-prop)
+    - [Linting](#linting)
+      - [ESLint](#eslint)
+      - [Markdownlint](#markdownlint)
+    - [TypeScript support](#typescript-support)
+    - [Additional resources](#additional-resources)
+  - [Writing documentation](#writing-documentation)
+  - [Creating a pull request](#creating-a-pull-request)
+    - [Adding changeset to your pull request](#adding-changeset-to-your-pull-request)
+    - [What to expect after opening a pull request](#what-to-expect-after-opening-a-pull-request)
+      - [What we look for in reviews](#what-we-look-for-in-reviews)
+    - [Previewing your changes](#previewing-your-changes)
+  - [Deploying](#deploying)
+  - [Troubleshooting](#troubleshooting)
 
 ## Roadmap
 
@@ -148,8 +152,6 @@ We consider a component SSR-compatible if it...
 
 We use [`eslint-plugin-ssr-friendly`](https://github.com/kopiro/eslint-plugin-ssr-friendly) to prevent misuse of DOM globals. If you see an error from this plugin, please fix it before merging your PR.
 
-If your component doesn't use DOM globals, it likely won't cause layout shift during hydration. However, if you suspect that your component might cause layout shift, you can use the example Next.js app (`examples/nextjs`) to debug. Import and render your component in `examples/nextjs/src/pages/index.js` then run the example app with `cd examples/nextjs && npm run develop`.
-
 ### Adding the `sx` prop
 
 Each component should accept a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/react/overriding-styles) doc for more information on using the prop.

e2e/components/Link.test.ts

@@ -31,6 +31,9 @@ test.describe('Link', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules: 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: 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: {