Feature/cor 1563 refactor text keys in kpi to markdown (#4867)

* fix: deleted unused component * fix: Create markdown consistency in KPI tiles
minvws · Sep 19, 2023 · f75b51b · f75b51b
1 parent 45e5544
commit f75b51b
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 176 deletions.
diff --git a/packages/app/src/components/kpi/bordered-kpi-section.tsx b/packages/app/src/components/kpi/bordered-kpi-section.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { mediaQueries, space } from '~/style/theme';
 import { KpiTile } from '../kpi-tile';
-import { Metadata, MetadataProps } from '../metadata';
+import { MetadataProps } from '../metadata';
 import { TwoKpiSection } from '../two-kpi-section';
-import { Text } from '../typography';
 import { KpiContent } from './components/kpi-content';
 import { BorderedKpiSectionProps } from './types';
+import { Markdown } from '../markdown';
 
 export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData }: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {
@@ -16,16 +16,15 @@ export const BorderedKpiSection = ({ title, description, source, dateOrRange, ti
   };
 
   return (
-    <KpiTile title={title} hasNoPaddingBottom>
-      <Text>{description}</Text>
+    <KpiTile title={title} hasNoPaddingBottom metadata={metadata}>
+      <Markdown content={description} />
       <TwoKpiSection spacing={5}>
         <KpiContentContainer>
           {tilesData.map((tile, index) => (
             <KpiContent key={index} {...tile} />
           ))}
         </KpiContentContainer>
       </TwoKpiSection>
-      <Metadata {...metadata} isTileFooter />
     </KpiTile>
   );
 };

diff --git a/packages/app/src/domain/vaccine/index.ts b/packages/app/src/domain/vaccine/index.ts
@@ -3,7 +3,6 @@ export { BoosterShotCoveragePerAgeGroup } from './booster-shot-coverage-per-age-
 export { Autumn2022ShotCoveragePerAgeGroup } from './autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group';
 export { VaccinationsOverTimeTile } from './vaccinations-over-time-tile';
 export { VaccineBoosterAdministrationsKpiSection } from './vaccine-booster-administrations-kpi-section';
-export { VaccineAdministrationsKpiSection } from './vaccine-administrations-kpi-section';
 export { VaccinationsShotKpiSection } from './vaccinations-shot-kpi-section';
 export { VaccinationsKpiHeader } from './vaccinations-kpi-header';
 export { VaccineCoverageChoropleth } from './vaccine-coverage-choropleth';

diff --git a/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx b/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx
@@ -1,13 +1,5 @@
 import { useIntl } from '~/intl';
-import {
-  KpiTile,
-  KpiValue,
-  Markdown,
-  TwoKpiSection,
-  Metadata,
-  Message,
-  MetadataProps,
-} from '~/components';
+import { KpiTile, KpiValue, TwoKpiSection, Message, MetadataProps } from '~/components';
 import { Box } from '~/components/base';
 
 type SourceType = {
@@ -29,19 +21,13 @@ interface VaccinationsShotKpiSectionProps {
   metadata: MetadataProps;
 }
 
-export function VaccinationsShotKpiSection({
-  text,
-  value,
-  metadata,
-}: VaccinationsShotKpiSectionProps) {
+export function VaccinationsShotKpiSection({ text, value, metadata }: VaccinationsShotKpiSectionProps) {
   const { formatNumber } = useIntl();
   return (
     <TwoKpiSection hasBorder hasPadding>
-      <KpiTile title={text.title} hasNoBorder hasNoPaddingBottom>
+      <KpiTile title={text.title} hasNoBorder hasNoPaddingBottom description={text.description} metadata={metadata}>
         <KpiValue text={formatNumber(value)} />
-        <Markdown content={text.description} />
         {text.warning && <Message variant="warning">{text.warning}</Message>}
-        <Metadata {...metadata} isTileFooter />
       </KpiTile>
       <Box />
     </TwoKpiSection>

diff --git a/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx b/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx
diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx
@@ -71,7 +71,7 @@ export function VaccineCoverageToggleTile({
   };
 
   return (
-    <KpiTile title={title}>
+    <KpiTile title={title} metadata={metadata}>
       <Box css={css({ '& div': { justifyContent: 'flex-start' } })} marginBottom={space[3]}>
         <RadioGroup
           value={selectedTab}

diff --git a/packages/app/src/pages/gemeente/[code]/rioolwater.tsx b/packages/app/src/pages/gemeente/[code]/rioolwater.tsx
@@ -5,7 +5,6 @@ import { GetStaticPropsContext } from 'next';
 import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
-import { Markdown } from '~/components/markdown';
 import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
@@ -124,6 +123,7 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
                 date: { start: sewerAverages.last_value.date_start_unix, end: sewerAverages.last_value.date_end_unix },
                 source: textGm.bronnen.rivm,
               }}
+              description={textGm.extra_uitleg}
             >
               <KpiValue
                 absolute={sewerAverages.last_value.average}
@@ -137,8 +137,6 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
                   populationCountConnectedToRWZIS: <strong>{formatNumber(populationCountConnectedToRWZIS)}</strong>,
                 })}
               </Text>
-
-              <Markdown content={textGm.extra_uitleg} />
             </KpiTile>
 
             <KpiTile

diff --git a/packages/app/src/pages/gemeente/[code]/sterfte.tsx b/packages/app/src/pages/gemeente/[code]/sterfte.tsx
@@ -6,14 +6,12 @@ import { ChartTile } from '~/components/chart-tile';
 import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
-import { Markdown } from '~/components/markdown';
 import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block/page-information-block';
 import { TileList } from '~/components/tile-list';
 import { TimeSeriesChart } from '~/components/time-series-chart/time-series-chart';
 import { TwoKpiSection } from '~/components/two-kpi-section';
-import { Text } from '~/components/typography';
 import { WarningTile } from '~/components/warning-tile';
 import { GmLayout, Layout } from '~/domain/layout';
 import { useIntl } from '~/intl';
@@ -123,9 +121,9 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
                 date: data.deceased_rivm_archived_20221231.last_value.date_unix,
                 source: textGm.section_deceased_rivm.bronnen.rivm,
               }}
+              description={textGm.section_deceased_rivm.kpi_covid_daily_description}
             >
               <KpiValue absolute={data.deceased_rivm_archived_20221231.last_value.covid_daily} difference={data.difference.deceased_rivm__covid_daily_archived_20221231} isAmount />
-              <Markdown content={textGm.section_deceased_rivm.kpi_covid_daily_description} />
             </KpiTile>
 
             <KpiTile
@@ -134,9 +132,9 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
                 date: data.deceased_rivm_archived_20221231.last_value.date_unix,
                 source: textGm.section_deceased_rivm.bronnen.rivm,
               }}
+              description={textGm.section_deceased_rivm.kpi_covid_total_description}
             >
               <KpiValue absolute={data.deceased_rivm_archived_20221231.last_value.covid_total} />
-              <Text>{textGm.section_deceased_rivm.kpi_covid_total_description}</Text>
             </KpiTile>
           </TwoKpiSection>
 

diff --git a/packages/app/src/pages/landelijk/reproductiegetal.tsx b/packages/app/src/pages/landelijk/reproductiegetal.tsx
@@ -3,7 +3,6 @@ import { Reproductiegetal } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { InView } from '~/components/in-view';
 import { IllustrationTile } from '~/components/illustration-tile';
-import { Markdown } from '~/components/markdown';
 import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
@@ -114,6 +113,7 @@ const ReproductionIndex = (props: StaticProps<typeof getStaticProps>) => {
                 obtainedAt: reproductionLastValue.date_of_insertion_unix,
               }}
               hasNoBorder
+              description={textNl.barscale_toelichting}
             >
               <KpiValue
                 absolute={reproductionLastValue.index_average}
@@ -122,7 +122,6 @@ const ReproductionIndex = (props: StaticProps<typeof getStaticProps>) => {
                 showOldDateUnixForDifference
                 isAmount
               />
-              <Markdown content={textNl.barscale_toelichting} />
             </KpiTile>
 
             <IllustrationTile image={'/images/reproductie-explainer.svg'} alt={textNl.reproductie_explainer_alt} description={textNl.extra_uitleg} hasNoBorder />

diff --git a/packages/app/src/pages/landelijk/sterfte.tsx b/packages/app/src/pages/landelijk/sterfte.tsx
@@ -8,14 +8,12 @@ import { ChartTile } from '~/components/chart-tile';
 import { InView } from '~/components/in-view';
 import { KpiTile } from '~/components/kpi-tile';
 import { KpiValue } from '~/components/kpi-value';
-import { Markdown } from '~/components/markdown';
 import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
 import { TileList } from '~/components/tile-list';
 import { TimeSeriesChart } from '~/components/time-series-chart';
 import { TwoKpiSection } from '~/components/two-kpi-section';
-import { Text } from '~/components/typography';
 import { WarningTile } from '~/components/warning-tile';
 import { DeceasedMonitorSection } from '~/domain/deceased';
 import { Layout, NlLayout } from '~/domain/layout';
@@ -160,19 +158,19 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
                     date: dataRivm.last_value.date_unix,
                     source: textNl.section_deceased_rivm.bronnen.rivm,
                   }}
+                  description={textNl.section_deceased_rivm.kpi_covid_daily_description}
                 >
                   <KpiValue absolute={dataRivm.last_value.covid_daily} difference={archivedData.difference.deceased_rivm__covid_daily_archived_20221231} isAmount />
-                  <Markdown content={textNl.section_deceased_rivm.kpi_covid_daily_description} />
                 </KpiTile>
                 <KpiTile
                   title={textNl.section_deceased_rivm.kpi_covid_total_title}
                   metadata={{
                     date: dataRivm.last_value.date_unix,
                     source: textNl.section_deceased_rivm.bronnen.rivm,
                   }}
+                  description={textNl.section_deceased_rivm.kpi_covid_total_description}
                 >
                   <KpiValue absolute={dataRivm.last_value.covid_total} />
-                  <Text>{textNl.section_deceased_rivm.kpi_covid_total_description}</Text>
                 </KpiTile>
               </TwoKpiSection>