feat: header component #83

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## UNRELEASED
 
+- Added components for the header and extended header (Header, NavList, MegaMenu, Menu, NavButton, NavDropDown, PrimaryNav, Title,  ExtendedNav)
 - Added yarn audit check to dangerfile (on package change)
 - Added search component
 

src/components/forms/Checkbox/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Checkbox } from './Checkbox'
 
 export default {
-  title: 'Checkbox',
+  title: 'Forms/Checkbox',
   parameters: {
     info: `
 USWDS 2.0 Checkbox component

src/components/forms/Dropdown/Dropdown.stories.tsx

@@ -4,7 +4,7 @@ import { Dropdown } from './Dropdown'
 import { Label } from '../Label/Label'
 
 export default {
-  title: 'Dropdown',
+  title: 'Forms/Dropdown',
   parameters: {
     info: `
 USWDS 2.0 Dropdown component

src/components/forms/ErrorMessage/ErrorMessage.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ErrorMessage } from './ErrorMessage'
 
 export default {
-  title: 'ErrorMessage',
+  title: 'Forms/ErrorMessage',
   parameters: {
     info: `
 USWDS 2.0 ErrorMessage component

src/components/forms/Fieldset/Fieldset.stories.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from '../Checkbox/Checkbox'
 import { Radio } from '../Radio/Radio'
 
 export default {
-  title: 'Fieldset',
+  title: 'Forms/Fieldset',
   parameters: {
     info: `
 USWDS 2.0 Fieldset component

src/components/forms/Form/Form.stories.tsx

@@ -13,7 +13,7 @@ import { TextInput } from '../TextInput/TextInput'
 import { Textarea } from '../Textarea/Textarea'
 
 export default {
-  title: 'Form',
+  title: 'Forms/Form',
   parameters: {
     info: `
 USWDS 2.0 Form component

src/components/forms/FormGroup/FormGroup.stories.tsx

@@ -6,7 +6,7 @@ import { TextInput } from '../TextInput/TextInput'
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
 
 export default {
-  title: 'FormGroup',
+  title: 'Forms/FormGroup',
   parameters: {
     info: `
 USWDS 2.0 FormGroup component

src/components/forms/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Label } from './Label'
 
 export default {
-  title: 'Label',
+  title: 'Forms/Label',
   parameters: {
     info: `
 USWDS 2.0 Label component

src/components/forms/Radio/Radio.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Radio } from './Radio'
 
 export default {
-  title: 'Radio',
+  title: 'Forms/Radio',
   parameters: {
     info: `
 USWDS 2.0 Radio component

src/components/forms/TextInput/TextInput.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { TextInput } from './TextInput'
 
 export default {
-  title: 'TextInput',
+  title: 'Forms/TextInput',
   parameters: {
     info: `
 USWDS 2.0 TextInput component

src/components/forms/Textarea/Textarea.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Textarea } from './Textarea'
 
 export default {
-  title: 'Textarea',
+  title: 'Forms/Textarea',
   parameters: {
     info: `
 USWDS 2.0 Textarea component

src/components/header/ExtendedNav/ExtendedNav.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { ExtendedNav } from './ExtendedNav'
+
+export default {
+  title: 'Header/ExtendedNav',
+  parameters: {
+    info: `
+USWDS 2.0 ExtendedNav component
+
+Source: https://designsystem.digital.gov/components/header/
+`,
+  },
+}
+
+const mockToggle = (): void => {
+  /* mock submit fn */
+}
+
+const testPrimaryItems = [
+  <a href="#linkOne" key="one" className="usa-nav__link">
+    <span>Simple link</span>
+  </a>,
+  <a href="#linkTwo" key="two" className="usa-nav__link">
+    <span>Simple link Two</span>
+  </a>,
+]
+
+const testSecondaryItems = [
+  <a href="#linkOne" key="one">
+    Simple link
+  </a>,
+  <a href="#linkTwo" key="two">
+    Simple link Two
+  </a>,
+]
+
+export const defaultExtendedNav = (): React.ReactElement => (
+  <ExtendedNav
+    onToggleMobileNav={mockToggle}
+    primaryItems={testPrimaryItems}
+    secondaryItems={testSecondaryItems}
+  />
+)

src/components/header/ExtendedNav/ExtendedNav.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import { ExtendedNav } from './ExtendedNav'
+
+const testPrimaryItems = [
+  <a className="usa-current" href="#linkOne" key="one">
+    Simple link one
+  </a>,
+  <a href="#linkTwo" key="two">
+    Simple link two
+  </a>,
+]
+
+const testSecondaryItems = [
+  <a className="usa-current" href="#linkThree" key="three">
+    <span>Simple link three</span>
+  </a>,
+  <a href="#linkFour" key="four">
+    <span>Simple link four</span>
+  </a>,
+]
+
+const onToggleMobileNav = (): void => {
+  /* mock submit fn */
+}
+
+describe('ExtendedNav component', () => {
+  it('renders without errors', () => {
+    const { queryByRole } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+      />
+    )
+    expect(queryByRole('navigation')).toBeInTheDocument()
+  })
+
+  it('renders primary items', () => {
+    const { getByText } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+      />
+    )
+    expect(getByText('Simple link one')).toBeInTheDocument()
+    expect(getByText('Simple link two')).toBeInTheDocument()
+  })
+
+  it('renders secondary items', () => {
+    const { getByText } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+      />
+    )
+    expect(getByText('Simple link three')).toBeInTheDocument()
+    expect(getByText('Simple link four')).toBeInTheDocument()
+  })
+
+  it('renders nav button', () => {
+    const { getByTestId } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+      />
+    )
+    expect(getByTestId('navButton')).toBeInTheDocument()
+  })
+
+  it('implements an onClick handler', () => {
+    const onToggleMobileNav = jest.fn()
+    const { getByTestId } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+      />
+    )
+
+    fireEvent.click(getByTestId('navButton'))
+    expect(onToggleMobileNav).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the is-visible class when mobileExpanded is true', () => {
+    const { container } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+        mobileExpanded={true}
+      />
+    )
+    expect(container.querySelector('.is-visible')).toBeInTheDocument()
+  })
+
+  it('does not render the is-visible class when mobileExpanded is false', () => {
+    const { container } = render(
+      <ExtendedNav
+        onToggleMobileNav={onToggleMobileNav}
+        primaryItems={testPrimaryItems}
+        secondaryItems={testSecondaryItems}
+        mobileExpanded={false}
+      />
+    )
+    expect(container.querySelector('.is-visible')).toEqual(null)
+  })
+})

src/components/header/ExtendedNav/ExtendedNav.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { NavButton } from '../NavButton/NavButton'
+import { NavList } from '../NavList/NavList'
+
+// assets
+import closeImg from 'uswds/src/img/close.svg'
+
+type ExtendedNavProps = {
+  primaryItems: React.ReactNode[]
+  secondaryItems: React.ReactNode[]
+  onToggleMobileNav:
+    | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
+    | undefined
+  mobileExpanded?: boolean
+}
+
+export const ExtendedNav = (
+  props: ExtendedNavProps & React.HTMLAttributes<HTMLElement>
+): React.ReactElement => {
+  const {
+    primaryItems,
+    secondaryItems,
+    mobileExpanded = false,
+    children,
+    className,
+    onToggleMobileNav,
+    ...navProps
+  } = props
+
+  const classes = classnames(
+    'usa-nav',
+    {
+      'is-visible': mobileExpanded,
+    },
+    className
+  )
+
+  return (
+    <nav className={classes} {...navProps}>
+      <div className="usa-nav__inner">
+        <NavButton className="usa-nav__close" onClick={onToggleMobileNav}>
+          <img src={closeImg} alt="close" />
+        </NavButton>
+        <NavList items={primaryItems} primary={true} />
+        <div className="usa-nav__secondary">
+          <NavList items={secondaryItems} secondary={true} />
+          {children}
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default ExtendedNav