feat: Add nav variant to Link component (#846)

* Unexpected change, according to Suz this is likely the result of running yarn start in the example app triggering an auto-update of the typescript config

* Add 'nav' variant, add test checking for nav classname

* Adding nav variant prop via nested ternary

* Adding NavLink example to Storybook

* Simplifying conditional className application based off of Hana's feedback

* Adding second underscore to match USWDS website (thank you again Hana)

example/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"

src/components/Link/Link.stories.tsx

@@ -44,6 +44,15 @@ export const ExternalLink = (): React.ReactElement => (
   </p>
 )
 
+export const NavLink = (): React.ReactElement => (
+  <p>
+    This is a&nbsp;
+    <Link variant="nav" href={'#'}>
+      NavLink
+    </Link>
+  </p>
+)
+
 export const StyledAsButton = (): React.ReactElement => (
   <p>
     <Link className="usa-button" variant="unstyled" href={'#'}>

src/components/Link/Link.test.tsx

@@ -38,6 +38,15 @@ describe('Link component', () => {
       expect(container.querySelector('a')).toHaveClass('custom-class')
     })
 
+    it('renders navlink', () => {
+      const { container } = render(
+        <Link href="#" variant="nav">
+          Click Me
+        </Link>
+      )
+      expect(container.querySelector('a')).toHaveClass('usa-link usa-nav__link')
+    })
+
     it('renders link with optional anchor tag attributes', () => {
       const { container } = render(
         <Link href="#" target="_blank" title="Test Link" variant="unstyled">

src/components/Link/Link.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 // These props we want to require always, even on custom components
 type StyledLinkProps<T> = {
-  variant?: 'external' | 'unstyled'
+  variant?: 'external' | 'unstyled' | 'nav'
   className?: string
   children: React.ReactNode
 } & T
@@ -40,14 +40,13 @@ function linkClasses<T>(
 ): string | undefined {
   const unstyled = variant === 'unstyled'
   const isExternalLink = variant === 'external'
+  const isNavLink = variant === 'nav'
 
   return unstyled
     ? className
     : classnames(
         'usa-link',
-        {
-          'usa-link--external': isExternalLink,
-        },
+        { 'usa-link--external': isExternalLink, 'usa-nav__link': isNavLink },
         className
       )
 }