feat: moved overlay into header component (#2701)

trussworks · Jan 18, 2024 · 3433eac · 3433eac
1 parent bdbe69e
commit 3433eac
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/src/components/header/Header/Header.stories.tsx b/src/components/header/Header/Header.stories.tsx
@@ -84,8 +84,7 @@ export const BasicHeader = (): React.ReactElement => {
 
   return (
     <>
-      <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
-      <Header basic={true}>
+      <Header basic={true} showMobileOverlay={expanded}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
             <Title>Project Title</Title>
@@ -191,8 +190,10 @@ export const BasicHeaderWithMegaMenu = (): React.ReactElement => {
 
   return (
     <>
-      <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
-      <Header basic={true} basicWithMegaMenu={true}>
+      <Header
+        basic={true}
+        basicWithMegaMenu={true}
+        showMobileOverlay={expanded}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
             <Title>Project Title</Title>
@@ -251,8 +252,7 @@ export const extendedHeader = (): React.ReactElement => {
   ]
   return (
     <>
-      <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
-      <Header extended={true}>
+      <Header extended={true} showMobileOverlay={expanded}>
         <div className="usa-navbar">
           <Title>Project Title</Title>
           <NavMenuButton onClick={onClick} label="Menu" />
@@ -330,8 +330,7 @@ export const extendedHeaderWithMegaMenu = (): React.ReactElement => {
   ]
   return (
     <>
-      <div className={`usa-overlay ${expanded ? 'is-visible' : ''}`}></div>
-      <Header extended={true}>
+      <Header extended={true} showMobileOverlay={expanded}>
         <div className="usa-navbar">
           <Title>Project Title</Title>
           <NavMenuButton onClick={onClick} label="Menu" />

diff --git a/src/components/header/Header/Header.test.tsx b/src/components/header/Header/Header.test.tsx
@@ -13,4 +13,11 @@ describe('Header component', () => {
     const { getByText } = render(<Header>My Header</Header>)
     expect(getByText('My Header')).toBeInTheDocument()
   })
+
+  it('renders overlay if toggled', () => {
+    const { queryByTestId } = render(
+      <Header showMobileOverlay={true}>My Header</Header>
+    )
+    expect(queryByTestId('overlay')).toBeInTheDocument()
+  })
 })
diff --git a/src/components/header/Header/Header.tsx b/src/components/header/Header/Header.tsx
@@ -6,13 +6,15 @@ type HeaderProps = {
   extended?: boolean
   basicWithMegaMenu?: boolean
   children: React.ReactNode
+  showMobileOverlay?: boolean
 }
 
 export const Header = ({
   basic,
   extended,
   basicWithMegaMenu,
   children,
+  showMobileOverlay,
   className,
   ...headerProps
 }: HeaderProps & JSX.IntrinsicElements['header']): React.ReactElement => {
@@ -25,10 +27,18 @@ export const Header = ({
     },
     className
   )
+  const overlayClasses = classnames('usa-overlay', {
+    'is-visible': showMobileOverlay,
+  })
 
   return (
-    <header data-testid="header" className={classes} {...headerProps}>
-      {children}
-    </header>
+    <>
+      {showMobileOverlay !== undefined && (
+        <div className={overlayClasses} data-testid="overlay"></div>
+      )}
+      <header data-testid="header" className={classes} {...headerProps}>
+        {children}
+      </header>
+    </>
   )
 }
diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx
@@ -196,8 +196,7 @@ export const DocumentationPage = (): React.ReactElement => {
         Skip to main content
       </a>
       <GovBanner />
-      <div className={`usa-overlay ${mobileNavOpen ? 'is-visible' : ''}`}></div>
-      <Header basic>
+      <Header basic showMobileOverlay={mobileNavOpen}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
             <Title id="basic-logo">

diff --git a/src/stories/templates/landing.stories.tsx b/src/stories/templates/landing.stories.tsx
@@ -167,8 +167,7 @@ export const LandingPage = (): React.ReactElement => {
         Skip to main content
       </a>
       <GovBanner />
-      <div className={`usa-overlay ${mobileNavOpen ? 'is-visible' : ''}`}></div>
-      <Header extended>
+      <Header extended showMobileOverlay={mobileNavOpen}>
         <div className="usa-navbar">
           <Title id="extended-logo">
             <a href="/" title="Home" aria-label="Home">

diff --git a/src/stories/templates/notfound.stories.tsx b/src/stories/templates/notfound.stories.tsx
@@ -187,8 +187,7 @@ export const NotFoundPage = (): React.ReactElement => {
         Skip to main content
       </a>
       <GovBanner />
-      <div className={`usa-overlay ${mobileNavOpen ? 'is-visible' : ''}`}></div>
-      <Header basic>
+      <Header basic showMobileOverlay={mobileNavOpen}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
             <Title id="basic-logo">