feat(SideNav): Convert SideNav to CSS modules behind feature flag

.changeset/plenty-planes-fix.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert SideNav component to CSS Modules behind team feature flag

e2e/components/SideNav.test.ts

@@ -0,0 +1,56 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'deprecated-components-sidenav-dev--default',
+  },
+  {
+    title: 'Full Variant',
+    id: 'deprecated-components-sidenav-dev--full-variant',
+  },
+  {
+    title: 'Lightweight Variant',
+    id: 'deprecated-components-sidenav-dev--lightweight-variant',
+  },
+  {
+    title: 'Lightweight Nested Variant',
+    id: 'deprecated-components-sidenav-dev--lightweight-nested-variant',
+  },
+] as const
+
+test.describe('SideNav', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `SideNav.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/src/SideNav.module.css

@@ -0,0 +1,114 @@
+.SideNav {
+  background-color: var(--bgColor-muted);
+}
+
+.SideNavBordered {
+  border-color: var(--borderColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
+
+  /*  Remove duplicate borders from nested SideNavs */
+  & > & {
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+  }
+}
+
+.SideNavLink {
+  position: relative;
+  display: block;
+  width: 100%;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 14px;
+  text-align: left;
+  text-decoration: none;
+
+  & > .SideNav {
+    border-bottom: none;
+  }
+
+  .SideNav.SideNavVariant-normal > & {
+    padding: var(--base-size-16);
+    color: var(--fgColor-default);
+    border: 0;
+    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
+
+    &:first-child {
+      border-top: 0;
+      border-top-left-radius: var(--borderRadius-medium);
+      border-top-right-radius: var(--borderRadius-medium);
+    }
+
+    &:last-child {
+      border-bottom-right-radius: var(--borderRadius-medium);
+      border-bottom-left-radius: var(--borderRadius-medium);
+    }
+
+    /* Bar on the left */
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 3px;
+      pointer-events: none;
+      content: '';
+    }
+
+    &:hover {
+      text-decoration: none;
+      background-color: var(--bgColor-neutral-muted);
+    }
+
+    &:focus {
+      z-index: 1;
+      text-decoration: none;
+      background-color: var(--bgColor-neutral-muted);
+      outline: solid 2px var(--fgColor-accent);
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      background-color: var(--bgColor-default);
+
+      /* Bar on the left */
+      /* stylelint-disable-next-line selector-max-specificity */
+      &::before {
+        /* stylelint-disable-next-line primer/colors */
+        background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));
+      }
+    }
+  }
+
+  .SideNav.SideNavVariant-lightweight > & {
+    padding: var(--base-size-4) 0;
+    color: var(--fgColor-accent);
+
+    &:hover {
+      color: var(--fgColor-default);
+      text-decoration: none;
+    }
+
+    &:focus {
+      z-index: 1;
+      color: var(--fgColor-default);
+      text-decoration: none;
+      outline: solid 1px var(--fgColor-accent);
+    }
+
+    &[aria-current='page'],
+    &[aria-selected='true'] {
+      font-weight: var(--base-text-weight-medium);
+      color: var(--fgColor-default);
+    }
+  }
+}
+
+.SideNavLinkFull {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}