Name of Agency
} + heading={Name of Agency
} />Name of Agency
} + heading={Name of Agency
} />Swoosh Branding
+const heading =Swoosh Branding
const logoImage = (@@ -168,7 +177,9 @@ export const GovBanner = ({
diff --git a/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap index 71e6548566..88db8748b1 100644 --- a/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap +++ b/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap @@ -65,8 +65,10 @@ exports[`GovBanner component static content renders consistently in English for className="usa-banner__guidance tablet:grid-col-6" >
)
@@ -196,8 +202,10 @@ exports[`GovBanner component static content renders consistently in English for
className="usa-banner__guidance tablet:grid-col-6"
>
)
@@ -327,8 +339,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
className="usa-banner__guidance tablet:grid-col-6"
>
)
@@ -459,8 +477,10 @@ exports[`GovBanner component static content renders consistently in Spanish for
className="usa-banner__guidance tablet:grid-col-6"
>
)
@@ -591,8 +615,10 @@ exports[`GovBanner component static content renders consistently with default pr
className="usa-banner__guidance tablet:grid-col-6"
>
)
diff --git a/src/components/Identifier/Identifier/Identifier.stories.tsx b/src/components/Identifier/Identifier/Identifier.stories.tsx
index 78e2efd723..f1177577f5 100644
--- a/src/components/Identifier/Identifier/Identifier.stories.tsx
+++ b/src/components/Identifier/Identifier/Identifier.stories.tsx
@@ -3,11 +3,15 @@ import React from 'react'
import { Identifier } from './Identifier'
import { IdentifierMasthead } from '../IdentifierMasthead/IdentifierMasthead'
+import { IdentifierIdentity } from '../IdentifierIdentity/IdentifierIdentity'
import { IdentifierLinks } from '../IdentifierLinks/IdentifierLinks'
import { IdentifierGov } from '../IdentifierGov/IdentifierGov'
import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
import { IdentifierLink } from '../IdentifierLink/IdentifierLink'
import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'
+import { IdentifierLogos } from '../IdentifierLogos/IdentifierLogos'
+
+import { Link } from '../../Link/Link'
import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
@@ -92,57 +96,39 @@ const testLinksSpanish = [
]
const testIdentifierGovContent = [
-
-
+ <>
+
,
+
+ ,
]
const testIdentifierGovContentSpanish = [
-
Looking for U.S. government information and services?
-
+
Visit USA.gov
-
-
-
-
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+
{testLinks}
@@ -156,21 +142,13 @@ export const identifierDefault = (): React.ReactElement => (
export const identifierSpanish = (): React.ReactElement => (
-
+ {testIdentifierLogoSpanish}
+
+
+ {`Un sitio web oficial de `}
+ Test Agency Name Spanish
+
{testLinksSpanish}
@@ -184,24 +162,16 @@ export const identifierSpanish = (): React.ReactElement => (
export const multipleParentsAndLogos = (): React.ReactElement => (
-
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {` and the `}
+ Other Test Agency Name
+
{testLinks}
@@ -215,24 +185,16 @@ export const multipleParentsAndLogos = (): React.ReactElement => (
export const multipleParentsAndLogosSpanish = (): React.ReactElement => (
-
+ {testIdentifierLogoSpanish}
+ {testIdentifierLogoSpanish}
+
+
+ {`Un sitio web oficial de `}
+ Test Agency Name
+ {` y `}
+ Other Test Agency Name
+
{testLinksSpanish}
@@ -244,27 +206,19 @@ export const multipleParentsAndLogosSpanish = (): React.ReactElement => (
export const moreThanTwoParentsAndLogos = (): React.ReactElement => (
-
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`, `}
+ Second Test Agency Name
+ {`, and the `}
+ Third Test Agency Name
+
{testLinks}
@@ -278,18 +232,10 @@ export const moreThanTwoParentsAndLogos = (): React.ReactElement => (
export const noLogosEnglish = (): React.ReactElement => (
-
+ {`An official website of the `}
+ Test Agency Name
+
{testLinks}
@@ -303,18 +249,10 @@ export const noLogosEnglish = (): React.ReactElement => (
export const noLogosSpanish = (): React.ReactElement => (
-
+ {`Un sitio web oficial de `}
+ Test Agency Name Spanish
+
{testLinksSpanish}
@@ -328,22 +266,14 @@ export const noLogosSpanish = (): React.ReactElement => (
export const taxDisclaimerEnglish = (): React.ReactElement => (
-
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`. Produced and published at taxpayer expense.`}
+
{testLinks}
@@ -357,22 +287,14 @@ export const taxDisclaimerEnglish = (): React.ReactElement => (
export const taxDisclaimerSpanish = (): React.ReactElement => (
-
+ {testIdentifierLogoSpanish}
+
+
+ {`Un sitio web oficial de `}
+ Test Agency Name Spanish
+ {`. Producido y publicado con dinero de los contribuyentes de impuestos.`}
+
{testLinksSpanish}
@@ -386,25 +308,17 @@ export const taxDisclaimerSpanish = (): React.ReactElement => (
export const taxDisclaimerAndMultipleParentsAndLogos = (): React.ReactElement => (
-
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {` and the `}
+ Other Test Agency Name
+ {`. Produced and published at taxpayer expense.`}
+
{testLinks}
diff --git a/src/components/Identifier/Identifier/Identifier.test.tsx b/src/components/Identifier/Identifier/Identifier.test.tsx
index 55e21c6a74..5eda2eb847 100644
--- a/src/components/Identifier/Identifier/Identifier.test.tsx
+++ b/src/components/Identifier/Identifier/Identifier.test.tsx
@@ -3,11 +3,14 @@ import { render } from '@testing-library/react'
import { Identifier } from './Identifier'
import { IdentifierMasthead } from '../IdentifierMasthead/IdentifierMasthead'
+import { IdentifierLogos } from '../IdentifierLogos/IdentifierLogos'
import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'
+import { IdentifierIdentity } from '../IdentifierIdentity/IdentifierIdentity'
import { IdentifierLinks } from '../IdentifierLinks/IdentifierLinks'
import { IdentifierLink } from '../IdentifierLink/IdentifierLink'
import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
import { IdentifierGov } from '../IdentifierGov/IdentifierGov'
+import { Link } from '../../Link/Link'
import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
@@ -76,37 +79,27 @@ const testLinksSpanish = [
]
const testIdentifierGovContent = [
-
+ <>
+
,
+
+ ,
]
export const identifierDefault = (): React.ReactElement => (
¿Necesita información y servicios del Gobierno?
-
+
Visite USAGov en Español
-
-
-
+
- {testIdentifierLogo}
-
-
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name -
-
-
+
- {testIdentifierLogoSpanish}
-
-
-
- domain.edu.mil.gov
-- {`Un sitio web oficial de `} - Test Agency Name Spanish -
-
-
+
- {testIdentifierLogo}
- {testIdentifierLogo}
-
-
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name - {` and the `} - Other Test Agency Name -
-
-
+
- {testIdentifierLogoSpanish}
- {testIdentifierLogoSpanish}
-
-
-
- domain.edu.mil.gov
-- {`Un sitio web oficial de `} - Test Agency Name - {` y `} - Other Test Agency Name -
-
-
+
- {testIdentifierLogo}
- {testIdentifierLogo}
- {testIdentifierLogo}
-
-
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name - {`, `} - Second Test Agency Name - {`, and the `} - Third Test Agency Name -
-
-
+
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name -
-
-
+
-
- domain.edu.mil.gov
-- {`Un sitio web oficial de `} - Test Agency Name Spanish -
-
-
+
- {testIdentifierLogo}
-
-
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name - {`. Produced and published at taxpayer expense.`} -
-
-
+
- {testIdentifierLogoSpanish}
-
-
-
- domain.edu.mil.gov
-- {`Un sitio web oficial de `} - Test Agency Name Spanish - {`. Producido y publicado con dinero de los contribuyentes de impuestos.`} -
-
-
+
- {testIdentifierLogo}
- {testIdentifierLogo}
-
-
-
- domain.edu.mil.gov
-- {`An official website of the `} - Test Agency Name - {` and the `} - Other Test Agency Name - {`. Produced and published at taxpayer expense.`} -
-
-
+ <>
+
,
+
+ ,
]
const testIdentifierGovContentSpanish = [
-
Looking for U.S. government information and services?
-
+
Visit USA.gov
-
-
-
-
+
+ {testIdentifierLogo}
+
+
+
+ {`An official website of the `}
+ Test Agency Name
+
{testLinks}
@@ -154,25 +137,15 @@ describe('Identifier component', () => {
const { getAllByRole, queryByText } = render(
-
+
+ {testIdentifierLogoSpanish}
+
+
+
+ {`Un sitio web oficial de `}
+ Test Agency Name Spanish
+
{testLinksSpanish}
@@ -192,20 +165,13 @@ describe('Identifier component', () => {
const { getAllByRole, getByTestId, queryByText } = render(
-
+ {`An official website of the `}
+ Test Agency Name
+
{testLinks}
@@ -227,29 +193,19 @@ describe('Identifier component', () => {
const { getAllByRole, queryByText } = render(
-
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`, `}
+ Second Test Agency Name
+ {`, and the `}
+ Third Test Agency Name
+
{testLinks}
@@ -269,24 +225,16 @@ describe('Identifier component', () => {
const { getByTestId } = render(
-
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`. Produced and published at taxpayer expense.`}
+
{testLinks}
diff --git a/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx b/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx
index 797b8eaec8..397abb555f 100644
--- a/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx
+++ b/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx
@@ -25,20 +25,13 @@ describe('IdentifierGov component', () => {
const tree = renderer
.create(
-
+ <>
+
,
+
+ ,
]
describe('Identifier component', () => {
@@ -114,25 +107,15 @@ describe('Identifier component', () => {
const { getByRole, getAllByRole, queryByTestId } = render(
¿Necesita información y servicios del Gobierno?
-
+
Visite USAGov en Español
-
-
-
+
-
- {testIdentifierLogo}
-
-
-
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name -
-
-
+
-
- {testIdentifierLogoSpanish}
-
-
-
-
- - domain.edu.mil.gov -
-- {`Un sitio web oficial de `} - Test Agency Name Spanish -
-
-
+
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name -
-
-
+
- {testIdentifierLogo}
- {testIdentifierLogo}
- {testIdentifierLogo}
-
-
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name - {`, `} - Second Test Agency Name - {`, and the `} - Third Test Agency Name -
-
-
+
- {testIdentifierLogo}
-
-
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name - {`. Produced and published at taxpayer expense.`} -
-
-
- {children}
+
)
}
diff --git a/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap b/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap
index faba90b55e..7822ee34dd 100644
--- a/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap
+++ b/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap
@@ -10,14 +10,12 @@ exports[`IdentifierGov component renders consistently in Spanish 1`] = `
>
+ {`An official website of the `}
+ Test Agency Name
+
+ )
+
+ const testIdQuery = queryByTestId('identifierIdentity')
+ expect(testIdQuery).toBeInTheDocument()
+ expect(testIdQuery).toHaveClass('usa-identifier__identity')
+ })
+
+ it('can apply attributes passed in as props', () => {
+ const { queryByTestId } = render(
+
+ {`An official website of the `}
+ Test Agency Name
+
+ )
+ const testIdQuery = queryByTestId('identifierIdentity')
+ expect(testIdQuery).toHaveClass('usa-identifier__identity custom-class')
+ expect(testIdQuery).toHaveAttribute('aria-label', 'Test aria label')
+ })
+})
diff --git a/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.tsx b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.tsx
new file mode 100644
index 0000000000..9e3228b97c
--- /dev/null
+++ b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface IdentifierIdentityProps {
+ children: React.ReactNode
+ domain: string
+ className?: string
+}
+
+export const IdentifierIdentity = ({
+ children,
+ domain,
+ className,
+ ...divProps
+}: IdentifierIdentityProps &
+ JSX.IntrinsicElements['div']): React.ReactElement => {
+ const classes = classnames('usa-identifier__identity', className)
+ return (
+ 
+)
+
+describe('IdentifierLogos component', () => {
+ it('renders without errors', () => {
+ const { getByRole } = render(
+ {testIdentifierLogo}
+ )
+
+ expect(getByRole('img')).toBeInTheDocument()
+ })
+
+ it('can apply attributes passed in as props', () => {
+ const { queryByTestId } = render(
+
+ {testIdentifierLogo}
+
+ )
+
+ const testIdQuery = queryByTestId('identifierLogos')
+ expect(testIdQuery).toHaveClass('usa-identifier__logos custom-class')
+ expect(testIdQuery).toHaveAttribute('aria-label', 'Test aria label')
+ })
+})
diff --git a/src/components/Identifier/IdentifierLogos/IdentifierLogos.tsx b/src/components/Identifier/IdentifierLogos/IdentifierLogos.tsx
new file mode 100644
index 0000000000..e99e87bd45
--- /dev/null
+++ b/src/components/Identifier/IdentifierLogos/IdentifierLogos.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface IdentifierLogosProps {
+ children: React.ReactNode
+ className?: string
+}
+
+export const IdentifierLogos = ({
+ children,
+ className,
+ ...divProps
+}: IdentifierLogosProps & JSX.IntrinsicElements['div']): React.ReactElement => {
+ const classes = classnames('usa-identifier__logos', className)
+ return (
+ ![]()
{
-
+
+ {testIdentifierLogo}
+
+
+
+ {`An official website of the `}
+ Test Agency Name
+
)
@@ -75,29 +68,19 @@ describe('IdentifierMasthead component', () => {
it('renders with more than two logos passed in', () => {
const { getAllByRole, queryByText } = render(
-
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`, `}
+ Second Test Agency Name
+ {`, and the `}
+ Third Test Agency Name
+
)
expect(getAllByRole('img')).toHaveLength(3)
diff --git a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
index b974631a17..db3d1fe55d 100644
--- a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
+++ b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
@@ -22,7 +22,7 @@ export const IdentifierMasthead = ({
data-testid="identifierMasthead"
className={classes}
{...sectionProps}>
- {children}
+
+ {additionalContext}
+
+)
+
+export const standardEmergencySiteAlert = (): React.ReactElement => (
+
+ {additionalContext}
+
+)
+
+export const informationalAlertWithNoHeader = (): React.ReactElement => (
+ {shortAlertContent}
+)
+
+export const emergencyAlertWithNoHeader = (): React.ReactElement => (
+ {shortAlertContent}
+)
+
+export const informationalAlertWithList = (): React.ReactElement => (
+
+ {infoWithList}
+
+)
+
+export const emergencyAlertWithList = (): React.ReactElement => (
+
+ {emergencyWithList}
+
+)
+
+export const slimEmergencyAlert = (): React.ReactElement => (
+
+ {shortAlertContent}
+
+)
+
+export const emergencyAlertNoIcon = (): React.ReactElement => (
+
+ {shortAlertContent}
+
+)
+
+export const alertWithCustomControls = (argTypes): React.ReactElement => (
+
+ {shortAlertContent}
+
+)
diff --git a/src/components/SiteAlert/SiteAlert.test.tsx b/src/components/SiteAlert/SiteAlert.test.tsx
new file mode 100644
index 0000000000..4bc9fc2d45
--- /dev/null
+++ b/src/components/SiteAlert/SiteAlert.test.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, react/jsx-key */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Link } from '../Link/Link'
+
+import { SiteAlert } from './SiteAlert'
+
+const testChildren = (
+ {testChildren}
+ )
+
+ expect(getByRole('link')).toBeInTheDocument()
+ expect(getByRole('link')).toHaveClass('usa-link')
+ })
+
+ it('renders a passed in list', () => {
+ const { getAllByRole } = render(
+ {testChildrenWithList}
+ )
+ expect(getAllByRole('link')).toHaveLength(2)
+ })
+
+ it('renders slim and no icon when passed both, and does not apply no-header class', () => {
+ const { getByTestId } = render(
+
+ {testChildren}
+
+ )
+ expect(getByTestId('siteAlert')).toHaveClass(
+ 'usa-site-alert usa-site-alert--info usa-site-alert--no-icon usa-site-alert--slim'
+ )
+ expect(getByTestId('siteAlert')).not.toHaveClass(
+ 'usa-site-alert--no-heading'
+ )
+ })
+})
diff --git a/src/components/SiteAlert/SiteAlert.tsx b/src/components/SiteAlert/SiteAlert.tsx
new file mode 100644
index 0000000000..67639a75b6
--- /dev/null
+++ b/src/components/SiteAlert/SiteAlert.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface SiteAlertProps {
+ variant: 'info' | 'emergency'
+ children: React.ReactNode
+ heading?: string
+ showIcon?: boolean
+ slim?: boolean
+ className?: string
+}
+
+export const SiteAlert = ({
+ variant,
+ children,
+ heading,
+ showIcon = true,
+ slim = false,
+ className,
+ ...sectionProps
+}: SiteAlertProps & JSX.IntrinsicElements['section']): React.ReactElement => {
+ const classes = classnames(
+ 'usa-site-alert',
+ {
+ 'usa-site-alert--info': variant === 'info',
+ 'usa-site-alert--emergency': variant === 'emergency',
+ 'usa-site-alert--no-heading': heading === undefined && !slim,
+ 'usa-site-alert--no-icon': !showIcon,
+ 'usa-site-alert--slim': slim,
+ },
+ className
+ )
+ return (
+
+
+ )
+}
+
+export default SiteAlert
diff --git a/src/components/forms/ComboBox/ComboBox.stories.tsx b/src/components/forms/ComboBox/ComboBox.stories.tsx
index 3318003b4c..774bb38af7 100644
--- a/src/components/forms/ComboBox/ComboBox.stories.tsx
+++ b/src/components/forms/ComboBox/ComboBox.stories.tsx
@@ -71,8 +71,16 @@ export const withLabel = (): React.ReactElement => {
return (
)
}
diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 97fdb0096e..0696046929 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -40,12 +40,10 @@ describe('ComboBox component', () => {
defaultValue="apple"
/>
)
- expect(getByTestId('combo-box-select')).toBeInstanceOf(HTMLSelectElement)
- expect(getByTestId('combo-box-select')).toHaveAttribute(
- 'aria-hidden',
- 'true'
- )
- expect(getByTestId('combo-box-select')).toHaveClass('usa-sr-only')
+ const comboBoxSelect = getByTestId('combo-box-select')
+ expect(comboBoxSelect).toBeInstanceOf(HTMLSelectElement)
+ expect(comboBoxSelect).toHaveAttribute('aria-hidden', 'true')
+ expect(comboBoxSelect).toHaveClass('usa-sr-only')
})
it('renders input element', () => {
@@ -57,8 +55,10 @@ describe('ComboBox component', () => {
onChange={jest.fn()}
/>
)
- expect(getByRole('combobox')).toBeInTheDocument()
- expect(getByRole('combobox')).toBeInstanceOf(HTMLInputElement)
+
+ const comboBox = getByRole('combobox')
+ expect(comboBox).toBeInTheDocument()
+ expect(comboBox).toBeInstanceOf(HTMLInputElement)
})
it('renders hidden options list on load', () => {
@@ -216,9 +216,9 @@ describe('ComboBox component', () => {
selectProps={{ required: true, role: 'testing' }}
/>
)
-
- expect(getByTestId('combo-box-select')).toHaveAttribute('required')
- expect(getByTestId('combo-box-select')).toHaveAttribute('role', 'testing')
+ const comboBoxSelect = getByTestId('combo-box-select')
+ expect(comboBoxSelect).toHaveAttribute('required')
+ expect(comboBoxSelect).toHaveAttribute('role', 'testing')
})
it('renders input with custom props if passed in', () => {
@@ -232,8 +232,27 @@ describe('ComboBox component', () => {
/>
)
- expect(getByTestId('combo-box-input')).toHaveAttribute('required')
- expect(getByTestId('combo-box-input')).toHaveAttribute('role', 'testing')
+ const comboBoxInput = getByTestId('combo-box-input')
+ expect(comboBoxInput).toHaveAttribute('required')
+ expect(comboBoxInput).toHaveAttribute('role', 'testing')
+ })
+
+ it('renders input with custom props if passed in', () => {
+ const { getByTestId } = render(
+
@@ -392,7 +404,7 @@ export const Calendar = ({
onClick={handleNextMonthClick}
ref={nextMonthEl}
className="usa-date-picker__calendar__next-month"
- aria-label="Navigate forward one month"
+ aria-label={forwardOneMonth}
disabled={nextButtonsDisabled}>
@@ -404,7 +416,7 @@ export const Calendar = ({
onClick={handleNextYearClick}
ref={nextYearEl}
className="usa-date-picker__calendar__next-year"
- aria-label="Navigate forward one year"
+ aria-label={forwardOneYear}
disabled={nextButtonsDisabled}>
@@ -413,11 +425,11 @@ export const Calendar = ({
- ¿Necesita información y servicios del Gobierno?
-
-
-
- Visite USAGov en Español
-
+
+ ¿Necesita información y servicios del Gobierno?
+
+
+ Visite USAGov en Español
+
)
.toJSON()
diff --git a/src/components/Identifier/IdentifierGov/IdentifierGov.tsx b/src/components/Identifier/IdentifierGov/IdentifierGov.tsx
index 27798945f1..b5f96932bf 100644
--- a/src/components/Identifier/IdentifierGov/IdentifierGov.tsx
+++ b/src/components/Identifier/IdentifierGov/IdentifierGov.tsx
@@ -19,7 +19,7 @@ export const IdentifierGov = ({
return (
{children}
¿Necesita información y servicios del Gobierno?
Visite USAGov en Español
diff --git a/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx
new file mode 100644
index 0000000000..3ad24e635d
--- /dev/null
+++ b/src/components/Identifier/IdentifierIdentity/IdentifierIdentity.test.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { IdentifierIdentity } from './IdentifierIdentity'
+import { Link } from '../../Link/Link'
+
+describe('IdentifierIdentity component', () => {
+ it('renders without errors', () => {
+ const { queryByTestId } = render(
+
+
+ )
+}
+
+export default IdentifierIdentity
diff --git a/src/components/Identifier/IdentifierLogos/IdentifierLogos.test.tsx b/src/components/Identifier/IdentifierLogos/IdentifierLogos.test.tsx
new file mode 100644
index 0000000000..ca67bbc050
--- /dev/null
+++ b/src/components/Identifier/IdentifierLogos/IdentifierLogos.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { render } from '@testing-library/react'
+import { IdentifierLogos } from './IdentifierLogos'
+
+import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+
+const testIdentifierLogo = (
+ {domain}
+{children}
+
+ {children}
+
+ )
+}
+
+export default IdentifierLogos
diff --git a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx
index 126d1146c3..e308ae5d88 100644
--- a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx
+++ b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx
@@ -5,6 +5,9 @@ import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
import { IdentifierMasthead } from './IdentifierMasthead'
import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'
+import { IdentifierLogos } from '../IdentifierLogos/IdentifierLogos'
+import { IdentifierIdentity } from '../IdentifierIdentity/IdentifierIdentity'
+import { Link } from '../../Link/Link'
const testIdentifierLogo = [
-
+
-
- {testIdentifierLogo}
-
-
-
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name -
-
-
+
- {testIdentifierLogo}
- {testIdentifierLogo}
- {testIdentifierLogo}
-
-
-
- - domain.edu.mil.gov -
-- {`An official website of the `} - Test Agency Name - {`, `} - Second Test Agency Name - {`, and the `} - Third Test Agency Name -
-{children}
)
}
diff --git a/src/components/SiteAlert/SiteAlert.stories.tsx b/src/components/SiteAlert/SiteAlert.stories.tsx
new file mode 100644
index 0000000000..83bcff27d5
--- /dev/null
+++ b/src/components/SiteAlert/SiteAlert.stories.tsx
@@ -0,0 +1,149 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react'
+
+import { SiteAlert } from './SiteAlert'
+import { Link } from '../Link/Link'
+
+export default {
+ title: 'Components/SiteAlert',
+ component: SiteAlert,
+ parameters: {
+ docs: {
+ description: {
+ component: `
+### USWDS 2.0 SiteAlert component
+
+Source: http://designsystem.digital.gov/components/site-alert
+`,
+ },
+ },
+ },
+ argTypes: {
+ slim: {
+ control: {
+ type: 'boolean',
+ },
+ },
+ showIcon: {
+ control: {
+ type: 'boolean',
+ },
+ },
+ variant: {
+ control: {
+ type: 'select',
+ options: ['info', 'emergency'],
+ },
+ defaultValue: 'info',
+ },
+ },
+}
+
+const infoHeading = 'Short alert message'
+
+const additionalContext = (
+ + Additional context and followup information including{' '} + + a link + + . +
+) + +const emergencyHeading = 'Emergency alert message' + +const infoWithList = ( +-
+
- + The primary informational message and{` `} + a link + {` `}for supporting context. + +
- + Another message,{` `} + and another link. + +
- A final informational message. +
-
+
- + The primary emergency message and{` `} + a link + {` `}for supporting context. + +
- + Another message,{` `} + and another link. + +
- A final emergency message. +
+ Short alert message. + Additional context and followup information including + a link. +
+) + +export const standardInformationalSiteAlert = (): React.ReactElement => ( ++ some default text + with a link. +
+) + +const testDefaultProps = { + heading: 'test heading', + children: testChildren, +} + +const testChildrenWithList = ( +-
+
- + some default text + with a link + +
- + another list item + with a link + +
- another list item, no link +
+
+
+ {heading &&
+