From c92159e08eb4b3975859942bca0378f12241e28c Mon Sep 17 00:00:00 2001
From: Arianna Kellogg <ari@truss.works>
Date: Fri, 5 Feb 2021 11:45:42 -0800
Subject: [PATCH] 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                | 3 ++-
 src/components/Link/Link.stories.tsx | 9 +++++++++
 src/components/Link/Link.test.tsx    | 9 +++++++++
 src/components/Link/Link.tsx         | 7 +++----
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/example/tsconfig.json b/example/tsconfig.json
index f2850b7161..fbce9be234 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index 2dd55c5591..44f0307f80 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/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={'#'}>
diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx
index 260bf726b7..a7500608e7 100644
--- a/src/components/Link/Link.test.tsx
+++ b/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">
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index cb460cec85..12a7574716 100644
--- a/src/components/Link/Link.tsx
+++ b/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
       )
 }