From cdb0e5666d7aab4589cd0e8af66da2b7d736a755 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard21 Date: Wed, 12 Apr 2023 12:13:47 +0200 Subject: [PATCH 1/4] fix(vaccination coverage dropdowns): fixed white space and added titles --- .../rich-content-select.tsx | 4 +- .../vaccine/components/age-group-select.tsx | 7 ++-- .../vaccination-coverage-kind-select.tsx | 7 ++-- .../vaccine/vaccine-coverage-choropleth.tsx | 42 ++++++++++++++++--- .../src/pages/gemeente/[code]/vaccinaties.tsx | 2 + .../app/src/pages/landelijk/vaccinaties.tsx | 2 + packages/cms/src/lokalize/key-mutations.csv | 2 + 7 files changed, 53 insertions(+), 13 deletions(-) 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..37f21c7ed8 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/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,6 +17,7 @@ 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[]; @@ -24,6 +25,8 @@ interface VaccineCoverageChoroplethProps { 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} - + - + {text?.vaccinationKindLabel} + - + {text?.ageGroupLabel} + - + } @@ -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 = { data: TooltipData; selectedCoverageKind: CoverageKindProperty; 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, }} /> Date: Wed, 12 Apr 2023 17:06:14 +0200 Subject: [PATCH 2/4] fix(vaccination coverage dropdowns): refactored code --- .../vaccine/vaccine-coverage-choropleth.tsx | 40 +++---------------- 1 file changed, 6 insertions(+), 34 deletions(-) diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index 37f21c7ed8..6dcc321e49 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/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 { mediaQueries, space } from '~/style/theme'; +import { space } from '~/style/theme'; import { Box } from '~/components/base'; import { DataOptions, DynamicChoropleth } from '~/components/choropleth'; import { ChoroplethTile } from '~/components/choropleth-tile'; @@ -17,7 +17,6 @@ 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[]; @@ -65,16 +64,16 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo {commonTexts.choropleth.vaccination_coverage.shared.dropdowns_title} - - - {text?.vaccinationKindLabel} + + + {text.vaccinationKindLabel && {text.vaccinationKindLabel}} - + {text?.ageGroupLabel} - + } @@ -103,33 +102,6 @@ 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 = { data: TooltipData; selectedCoverageKind: CoverageKindProperty; From 738b98f140a85084edd85d5a4124df3d6f4a5ef7 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard21 Date: Wed, 12 Apr 2023 17:08:19 +0200 Subject: [PATCH 3/4] fix(vaccination coverage dropdowns): wrapped BoldText in a guard --- packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index 6dcc321e49..4bb7f55cd7 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -70,7 +70,7 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo - {text?.ageGroupLabel} + {text.ageGroupLabel && {text.ageGroupLabel}} From 4bd459a71bf55960c1371b0f48f17dfd6cac2e9c Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard21 Date: Thu, 13 Apr 2023 09:55:04 +0200 Subject: [PATCH 4/4] fix(vaccination coverage dropdowns): fixed gridGap --- packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index 4bb7f55cd7..dffe944a39 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -64,7 +64,7 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo {commonTexts.choropleth.vaccination_coverage.shared.dropdowns_title} - + {text.vaccinationKindLabel && {text.vaccinationKindLabel}}