diff --git a/packages/app/src/components/rich-content-select/rich-content-select.tsx b/packages/app/src/components/rich-content-select/rich-content-select.tsx index 143b07fb7d..61c95fb57c 100644 --- a/packages/app/src/components/rich-content-select/rich-content-select.tsx +++ b/packages/app/src/components/rich-content-select/rich-content-select.tsx @@ -29,7 +29,7 @@ type RichContentSelectProps = { * https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html */ export const RichContentSelect = (props: RichContentSelectProps) => { - const { label, options, onChange, initialValue, visuallyHiddenLabel, useContentForSelectedOption: richContentForSelectedValue } = props; + const { label, options, onChange, initialValue, visuallyHiddenLabel, useContentForSelectedOption: richContentForSelectedValue, ...rest } = props; const { labelId, selectedOption, getComboboxProps, getListBoxProps, getListBoxOptionsProps } = useRichContentSelect(options, onChange, initialValue); @@ -40,7 +40,7 @@ export const RichContentSelect = (props: RichContentSelectProp const selectedOptionView = isPresent(selectedOption) && (richContentForSelectedValue ? selectedOption?.content : {selectedOption.label}); return ( - + {visuallyHiddenLabel ? ( {typeof label === 'string' ? {label} : label} diff --git a/packages/app/src/domain/vaccine/components/age-group-select.tsx b/packages/app/src/domain/vaccine/components/age-group-select.tsx index 6a3c6de0bd..b015e75421 100644 --- a/packages/app/src/domain/vaccine/components/age-group-select.tsx +++ b/packages/app/src/domain/vaccine/components/age-group-select.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { isPresent } from 'ts-is-present'; -import { Box } from '~/components/base'; +import { Box, BoxProps } from '~/components/base'; import { RichContentSelect } from '~/components/rich-content-select'; import { Option } from '~/components/rich-content-select/types'; import { Text } from '~/components/typography'; @@ -29,10 +29,10 @@ type AgeGroupSelectProps = { onChange: (value: AgeGroup) => void; initialValue?: AgeGroup; shownAgeGroups?: AgeGroup[]; -}; +} & BoxProps; export function AgeGroupSelect(props: AgeGroupSelectProps) { - const { onChange, initialValue = '18', shownAgeGroups } = props; + const { onChange, initialValue = '18', shownAgeGroups, ...rest } = props; const { commonTexts } = useIntl(); @@ -65,6 +65,7 @@ export function AgeGroupSelect(props: AgeGroupSelectProps) { initialValue={initialValue} options={options} onChange={(option) => onChange(option.value)} + {...rest} /> ); } diff --git a/packages/app/src/domain/vaccine/components/vaccination-coverage-kind-select.tsx b/packages/app/src/domain/vaccine/components/vaccination-coverage-kind-select.tsx index e516ed9230..6ab680bdad 100644 --- a/packages/app/src/domain/vaccine/components/vaccination-coverage-kind-select.tsx +++ b/packages/app/src/domain/vaccine/components/vaccination-coverage-kind-select.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { isPresent } from 'ts-is-present'; -import { Box } from '~/components/base'; +import { Box, BoxProps } from '~/components/base'; import { RichContentSelect } from '~/components/rich-content-select'; import { Option } from '~/components/rich-content-select/types'; import { Text } from '~/components/typography'; @@ -14,10 +14,10 @@ const COVERAGE_KINDS: CoverageKindProperty[] = ['autumn_2022', 'primary_series'] type VaccinationCoverageKindSelectProps = { onChange: (value: CoverageKindProperty) => void; initialValue?: CoverageKindProperty; -}; +} & BoxProps; export function VaccinationCoverageKindSelect(props: VaccinationCoverageKindSelectProps) { - const { onChange, initialValue = 'primary_series' } = props; + const { onChange, initialValue = 'primary_series', ...rest } = props; const { commonTexts } = useIntl(); @@ -44,6 +44,7 @@ export function VaccinationCoverageKindSelect(props: VaccinationCoverageKindSele initialValue={initialValue} options={options} onChange={(option) => onChange(option.value)} + {...rest} /> ); } diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index 4def68de8b..dffe944a39 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -24,6 +24,8 @@ interface VaccineCoverageChoroplethProps { text: { title: string; description: string; + vaccinationKindLabel?: string; + ageGroupLabel?: string; }; } @@ -62,12 +64,14 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo {commonTexts.choropleth.vaccination_coverage.shared.dropdowns_title} - - - + + + {text.vaccinationKindLabel && {text.vaccinationKindLabel}} + - - + + {text.ageGroupLabel && {text.ageGroupLabel}} + diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx index eae1bf8975..709782292c 100644 --- a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx +++ b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx @@ -208,6 +208,8 @@ export const VaccinationsGmPage = (props: StaticProps) => text={{ title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.title, { municipalityName: municipalityName }), description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.description, { municipalityName: municipalityName }), + vaccinationKindLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_vaccination_coverage_kind_select, + ageGroupLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_age_group_select, }} /> diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx index 321534d04a..f57f2ddcb7 100644 --- a/packages/app/src/pages/landelijk/vaccinaties.tsx +++ b/packages/app/src/pages/landelijk/vaccinaties.tsx @@ -265,6 +265,8 @@ function VaccinationPage(props: StaticProps) { text={{ title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.title, variables), description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.description, variables), + vaccinationKindLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_vaccination_coverage_kind_select, + ageGroupLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_age_group_select, }} />