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

@@ -3,7 +3,7 @@ import { SiteText } from '~/locale';
 import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common';
 import css from '@styled-system/css';
 import { useState } from 'react';
-import { space } from '~/style/theme';
+import { mediaQueries, space } from '~/style/theme';
 import { Box } from '~/components/base';
 import { DataOptions, DynamicChoropleth } from '~/components/choropleth';
 import { ChoroplethTile } from '~/components/choropleth-tile';
@@ -17,13 +17,16 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { AgeGroup, AgeGroupSelect } from './components/age-group-select';
 import { CoverageKindProperty, VaccinationCoverageKindSelect } from './components/vaccination-coverage-kind-select';
 import { parseVaccinatedPercentageLabel } from './logic/parse-vaccinated-percentage-label';
+import styled from 'styled-components';
 
 interface VaccineCoverageChoroplethProps {
   data: GmCollectionVaccineCoveragePerAgeGroup[];
   dataOptions: DataOptions;
   text: {
     title: string;
     description: string;
+    vaccinationKindLabel?: string;
+    ageGroupLabel?: string;
   };
 }
 
@@ -62,14 +65,16 @@ 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' }}>
+            <SelectBoxes>
               <Box flex="1">
-                <VaccinationCoverageKindSelect onChange={setSelectedCoverageKindAndAge} initialValue={selectedCoverageKind} />
+                <BoldText>{text?.vaccinationKindLabel}</BoldText>
+                <VaccinationCoverageKindSelect marginTop={space[2]} onChange={setSelectedCoverageKindAndAge} initialValue={selectedCoverageKind} />
               </Box>
               <Box flex="1">
-                <AgeGroupSelect onChange={setSelectedAgeGroup} initialValue={selectedAgeGroup} shownAgeGroups={matchingAgeGroups[selectedCoverageKind]} />
+                <BoldText>{text?.ageGroupLabel}</BoldText>
+                <AgeGroupSelect marginTop={space[2]} onChange={setSelectedAgeGroup} initialValue={selectedAgeGroup} shownAgeGroups={matchingAgeGroups[selectedCoverageKind]} />
               </Box>
-            </Box>
+            </SelectBoxes>
           </Box>
         </>
       }
@@ -98,6 +103,33 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo
   );
 };
 
+const SelectBoxes = styled(Box)`
+  column-gap: 24px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 24px;
+  margin-top: 24px;
+  row-gap: 24px;
+
+  @media ${mediaQueries.lg} {
+    flex-direction: row;
+    row-gap: ${space[2]};
+  }
+
+  > ${Box} {
+    min-width: 207px;
+    flex: 1 0;
+    @media ${mediaQueries.lg} {
+      flex: 0 33%;
+    }
+    @media ${mediaQueries.xl} {
+      flex: 0 25%;
+    }
+  }
+`;
+
 type ChoroplethTooltipProps<T extends VaccineCoverageData> = {
   data: TooltipData<T>;
   selectedCoverageKind: CoverageKindProperty;

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,__