fix: Add className handling to header and footer subcomponents (#735)

src/components/Footer/Address/Address.test.tsx

@@ -26,6 +26,13 @@ describe('Address component', () => {
     expect(getByText('thisnotfake@emailaddress.com')).toBeInTheDocument()
   })
 
+  it('renders custom styles', () => {
+    const { container } = render(
+      <Address className="custom-class" items={addressItems} />
+    )
+    expect(container.querySelector('address')).toHaveClass('custom-class')
+  })
+
   describe('renders with size prop', () => {
     beforeEach(() => {
       jest.clearAllMocks()

src/components/Footer/Address/Address.tsx

@@ -24,6 +24,7 @@ type AddressProps = {
 
 export const Address = ({
   size,
+  className,
   big,
   medium,
   slim,
@@ -42,12 +43,14 @@ export const Address = ({
   const isMedium = size ? size === 'medium' : medium
   const isSlim = size ? size === 'slim' : slim
 
+  const addressClasses = classnames('usa-footer__address', className)
+
   const itemClasses = classnames({
     'grid-col-auto': isBig || isMedium,
     'grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto': isSlim,
   })
   return (
-    <address className="usa-footer__address">
+    <address className={addressClasses}>
       {isSlim ? (
         <div className="grid-row grid-gap">
           {items.map((item, i) => (

src/components/Footer/SocialLinks/SocialLinks.test.tsx

@@ -21,6 +21,15 @@ describe('SocialLinks component', () => {
     ).toBeInTheDocument()
   })
 
+  it('renders custom styles', () => {
+    const { container } = render(
+      <SocialLinks className="custom-class" links={links} />
+    )
+    expect(container.querySelector('.usa-footer__social-links')).toHaveClass(
+      'custom-class'
+    )
+  })
+
   it('renders social links', () => {
     const { getByText } = render(<SocialLinks links={links} />)
     expect(getByText('Facebooked')).toBeInTheDocument()

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -1,15 +1,21 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
+import classnames from 'classnames'
 
 type SocialLinksProps = {
   links: React.ReactNode[]
 }
 
-export const SocialLinks = (props: SocialLinksProps): React.ReactElement => {
-  const { links } = props
-
+export const SocialLinks = (
+  props: SocialLinksProps & JSX.IntrinsicElements['div']
+): React.ReactElement => {
+  const { className, links } = props
+  const classes = classnames(
+    'usa-footer__social-links grid-row grid-gap-1',
+    className
+  )
   return (
-    <div className="usa-footer__social-links grid-row grid-gap-1">
+    <div className={classes}>
       {links.map((link, i) => (
         <div key={`socialLink${i}`} className="grid-col-auto">
           {link}

src/components/header/MegaMenu/MegaMenu.test.tsx

@@ -29,6 +29,13 @@ describe('MegaMenu component', () => {
     expect(container.querySelector('.usa-megamenu')).toBeInTheDocument()
   })
 
+  it('renders custom styles', () => {
+    const { container } = render(
+      <MegaMenu className="custom-class" items={testItems} isOpen={true} />
+    )
+    expect(container.querySelector('.usa-megamenu')).toHaveClass('custom-class')
+  })
+
   it('renders all test items when open', () => {
     const { getByText } = render(<MegaMenu items={testItems} isOpen={true} />)
     expect(getByText('Simple link one')).toBeInTheDocument()

src/components/header/MegaMenu/MegaMenu.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 
 import { NavList, NavListProps } from '../NavList/NavList'
 
@@ -10,12 +11,11 @@ type MegaMenuProps = {
 export const MegaMenu = (
   props: MegaMenuProps & NavListProps
 ): React.ReactElement => {
-  const { items, isOpen, ...navListProps } = props
+  const { items, isOpen, className, ...navListProps } = props
+  const classes = classnames('usa-nav__submenu usa-megamenu', className)
+
   return (
-    <div
-      className="usa-nav__submenu usa-megamenu"
-      hidden={!isOpen}
-      data-testid="megamenu">
+    <div className={classes} hidden={!isOpen} data-testid="megamenu">
       <div className="grid-row grid-gap-4">
         {items.map((listItems, i) => (
           <div className="usa-col" key={`subnav_col_${i}`}>

src/components/header/Menu/Menu.test.tsx

@@ -18,6 +18,15 @@ describe('Menu component', () => {
     expect(container.querySelector('.usa-nav__submenu')).toBeInTheDocument()
   })
 
+  it('renders custom styles', () => {
+    const { container } = render(
+      <Menu className="custom-class" items={testItems} isOpen={true} />
+    )
+    expect(container.querySelector('.usa-nav__submenu')).toHaveClass(
+      'custom-class'
+    )
+  })
+
   it('renders all test items when open', () => {
     const { getByText } = render(<Menu items={testItems} isOpen={true} />)
     expect(getByText('Simple link one')).toBeInTheDocument()

src/components/header/Menu/Menu.tsx

@@ -7,9 +7,16 @@ type MenuProps = {
 }
 
 export const Menu = (props: MenuProps & NavListProps): React.ReactElement => {
-  const { items, isOpen, ...navListProps } = props
+  const { className, items, isOpen, ...navListProps } = props
+
   return (
-    <NavList items={items} type="subnav" hidden={!isOpen} {...navListProps} />
+    <NavList
+      className={className}
+      items={items}
+      type="subnav"
+      hidden={!isOpen}
+      {...navListProps}
+    />
   )
 }
 

src/components/header/NavCloseButton/NavCloseButton.test.tsx

@@ -9,6 +9,11 @@ describe('NavCloseButton component', () => {
     expect(getByTestId('navCloseButton')).toBeInTheDocument()
   })
 
+  it('renders custom styles', () => {
+    const { getByTestId } = render(<NavCloseButton className="custom-class" />)
+    expect(getByTestId('navCloseButton')).toHaveClass('custom-class')
+  })
+
   it('implements an onClick handler', () => {
     const onClickFn = jest.fn()
     const { getByTestId } = render(<NavCloseButton onClick={onClickFn} />)

src/components/header/NavCloseButton/NavCloseButton.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
-
+import classnames from 'classnames'
 // assets
 import closeImg from 'uswds/src/img/close.svg'
 
 export const NavCloseButton = (
   props: JSX.IntrinsicElements['button']
 ): React.ReactElement => {
-  const { onClick, ...buttonProps } = props
+  const { onClick, className, ...buttonProps } = props
+
+  const classes = classnames('usa-nav__close', className)
 
   return (
     <button
-      className="usa-nav__close"
+      className={classes}
       onClick={onClick}
       data-testid="navCloseButton"
       {...buttonProps}