fix: update gov banner to uswds version 2.7.0

trussworks · May 22, 2020 · c5bd62c · c5bd62c
1 parent 85a1780
commit c5bd62c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/components/GovBanner/GovBanner.stories.tsx b/src/components/GovBanner/GovBanner.stories.tsx
@@ -3,4 +3,6 @@ import { GovBanner } from './GovBanner'
 
 export default { title: 'GovBanner', component: GovBanner }
 
-export const govBanner = (): React.ReactElement => <GovBanner />
+export const govBanner = (): React.ReactElement => (
+  <GovBanner aria-label="Official government website" />
+)
diff --git a/src/components/GovBanner/GovBanner.test.tsx b/src/components/GovBanner/GovBanner.test.tsx
@@ -8,4 +8,11 @@ describe('GovBanner component', () => {
     const { queryByTestId } = render(<GovBanner />)
     expect(queryByTestId('govBanner')).toBeInTheDocument()
   })
+
+  it('renders section attributes passed in through props', () => {
+    const { queryByTestId } = render(
+      <GovBanner aria-label="Official government website" />
+    )
+    expect(queryByTestId('govBanner')).toHaveAttribute('aria-label')
+  })
 })
diff --git a/src/components/GovBanner/GovBanner.tsx b/src/components/GovBanner/GovBanner.tsx
@@ -1,15 +1,21 @@
 import React, { useState } from 'react'
+import classnames from 'classnames'
 
 // assets
 import flagImg from 'uswds/src/img/us_flag_small.png'
 import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
 import httpsIcon from 'uswds/src/img/icon-https.svg'
 
-export const GovBanner = (): React.ReactElement => {
+export const GovBanner = (
+  props: React.HTMLAttributes<HTMLElement>
+): React.ReactElement => {
+  const { className, ...sectionProps } = props
   const [isOpen, setOpenState] = useState(false)
 
+  const classes = classnames('usa-banner', className)
+
   return (
-    <div className="usa-banner" data-testid="govBanner">
+    <section className={classes} data-testid="govBanner" {...sectionProps}>
       <div className="usa-accordion">
         <header className="usa-banner__header">
           <div className="usa-banner__inner">
@@ -82,7 +88,7 @@ export const GovBanner = (): React.ReactElement => {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }