bugfix/COR-1555-fix-whitespace-add-titles

packages/app/src/components/rich-content-select/rich-content-select.tsx

@@ -29,7 +29,7 @@ type RichContentSelectProps<T extends string> = {
  * https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
  */
 export const RichContentSelect = <T extends string>(props: RichContentSelectProps<T>) => {
-  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 = <T extends string>(props: RichContentSelectProp
   const selectedOptionView = isPresent(selectedOption) && (richContentForSelectedValue ? selectedOption?.content : <Text>{selectedOption.label}</Text>);
 
   return (
-    <Box ref={containerRef}>
+    <Box ref={containerRef} {...rest}>
       {visuallyHiddenLabel ? (
         <VisuallyHidden as="label" id={labelId}>
           {typeof label === 'string' ? <InlineText>{label}</InlineText> : label}

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}
     />
   );
 }

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}
     />
   );
 }

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}
             </BoldText>
 
-            <Box display="flex" width="100%" spacingHorizontal={{ xs: 2 }} flexWrap="wrap" flexDirection={{ _: 'column', xs: 'row' }}>
-              <Box flex="1">
-                <VaccinationCoverageKindSelect onChange={setSelectedCoverageKindAndAge} initialValue={selectedCoverageKind} />
+            <Box display="grid" gridTemplateColumns={{ _: '1 fr', lg: 'repeat(2, 1fr)' }} gridGap={{ _: '24px', lg: '${space[2]}' }} margin="24px 0" minWidth="100%">
+              <Box>
+                {text.vaccinationKindLabel && <BoldText>{text.vaccinationKindLabel}</BoldText>}
+                <VaccinationCoverageKindSelect marginTop={space[2]} onChange={setSelectedCoverageKindAndAge} initialValue={selectedCoverageKind} />
               </Box>
-              <Box flex="1">
-                <AgeGroupSelect onChange={setSelectedAgeGroup} initialValue={selectedAgeGroup} shownAgeGroups={matchingAgeGroups[selectedCoverageKind]} />
+              <Box>
+                {text.ageGroupLabel && <BoldText>{text.ageGroupLabel}</BoldText>}
+                <AgeGroupSelect marginTop={space[2]} onChange={setSelectedAgeGroup} initialValue={selectedAgeGroup} shownAgeGroups={matchingAgeGroups[selectedCoverageKind]} />
               </Box>
             </Box>
           </Box>

packages/app/src/pages/gemeente/[code]/vaccinaties.tsx

@@ -208,6 +208,8 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
             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,
             }}
           />
           <Divider />

packages/app/src/pages/landelijk/vaccinaties.tsx

@@ -265,6 +265,8 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             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,
             }}
           />
           <Autumn2022ShotCoveragePerAgeGroup

packages/cms/src/lokalize/key-mutations.csv

@@ -474,3 +474,5 @@ timestamp,action,key,document_id,move_to
 2023-04-03T15:45:47.784Z,delete,pages.behavior_page.nl.tooltip_labels.compliance,uFGMarfssEPhdNlk3s6Avk,__
 2023-04-03T15:45:47.785Z,delete,pages.behavior_page.nl.tooltip_labels.support,EaUS1FZKh46VBcUuh47mI4,__
 2023-03-29T10:43:54.266Z,delete,common.choropleth.choropleth_vaccination_coverage.shared.vr,G6M7GhzH8XbtdKiRrez14Y,__
+2023-04-12T10:11:37.825Z,add,common.choropleth.vaccination_coverage.shared.dropdown_label_vaccination_coverage_kind_select,mt9hMqvnezW3fDtFvUjLNr,__
+2023-04-12T10:11:38.807Z,add,common.choropleth.vaccination_coverage.shared.dropdown_label_age_group_select,eamHKzD43YGGBYDBd2rfcD,__