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/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(
+ (null)
const prevMonthEl = useRef(null)
@@ -97,7 +96,15 @@ export const Calendar = ({
const focusedMonth = dateToDisplay.getMonth()
const focusedYear = dateToDisplay.getFullYear()
- const monthLabel = MONTH_LABELS[parseInt(`${focusedMonth}`)]
+ const monthLabel = i18n.months[parseInt(`${focusedMonth}`)]
+ const dayOfWeekShortLabels = i18n.daysOfWeekShort
+ const dayOfWeekLabels = i18n.daysOfWeek
+ const backOneYear = i18n.backOneYear
+ const backOneMonth = i18n.backOneMonth
+ const clickToSelectMonth = `${monthLabel}. ${i18n.clickToSelectMonth}`
+ const clickToSelectYear = `${focusedYear}. ${i18n.clickToSelectYear}`
+ const forwardOneMonth = i18n.forwardOneMonth
+ const forwardOneYear = i18n.forwardOneYear
useEffect(() => {
calendarWasHidden = false
@@ -137,8 +144,10 @@ export const Calendar = ({
if (calendarWasHidden) {
const newStatuses = [`${monthLabel} ${focusedYear}`]
- if (selectedDate && isSameDay(focusedDate, selectedDate))
- newStatuses.unshift('Selected date')
+ if (selectedDate && isSameDay(focusedDate, selectedDate)) {
+ const selectedDateText = i18n.selectedDate
+ newStatuses.unshift(selectedDateText)
+ }
setStatuses(newStatuses)
}
}, [dateToDisplay])
@@ -150,6 +159,7 @@ export const Calendar = ({
minDate={minDate}
maxDate={maxDate}
handleSelectMonth={handleSelectMonth}
+ i18n={i18n}
/>
)
} else if (mode === CalendarModes.YEAR_PICKER) {
@@ -282,7 +292,8 @@ export const Calendar = ({
const handleToggleMonthSelection = (): void => {
setMode(CalendarModes.MONTH_PICKER)
- setStatuses(['Select a month.'])
+ const selectAMonth = i18n.selectAMonth
+ setStatuses([selectAMonth])
}
const handleToggleYearSelection = (): void => {
@@ -325,6 +336,7 @@ export const Calendar = ({
withinRangeEndDate
)
}
+ i18n={i18n}
/>
)
dateIterator = addDays(dateIterator, 1)
@@ -348,7 +360,7 @@ export const Calendar = ({
onClick={handlePreviousYearClick}
ref={prevYearEl}
className="usa-date-picker__calendar__previous-year"
- aria-label="Navigate back one year"
+ aria-label={backOneYear}
disabled={prevButtonsDisabled}>
@@ -360,7 +372,7 @@ export const Calendar = ({
onClick={handlePreviousMonthClick}
ref={prevMonthEl}
className="usa-date-picker__calendar__previous-month"
- aria-label="Navigate back one month"
+ aria-label={backOneMonth}
disabled={prevButtonsDisabled}>
@@ -372,7 +384,7 @@ export const Calendar = ({
onClick={handleToggleMonthSelection}
ref={selectMonthEl}
className="usa-date-picker__calendar__month-selection"
- aria-label={`${monthLabel}. Click to select month`}>
+ aria-label={clickToSelectMonth}>
{monthLabel}
@@ -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 = ({
| {d} | diff --git a/src/components/forms/DatePicker/DatePicker.stories.tsx b/src/components/forms/DatePicker/DatePicker.stories.tsx index 477b3655ab..36538f2cc3 100644 --- a/src/components/forms/DatePicker/DatePicker.stories.tsx +++ b/src/components/forms/DatePicker/DatePicker.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import { DatePicker } from './DatePicker' +import { sampleLocalization } from './i18n' import { Form } from '../Form/Form' import { FormGroup } from '../FormGroup/FormGroup' import { Label } from '../Label/Label' @@ -109,3 +110,7 @@ export const withRangeDate = (): React.ReactElement => ( rangeDate="2021-01-08" /> ) + +export const withLocalizations = (): React.ReactElement => ( +
|---|