Feature/COR-1392-text-gm-positive-tests-is-in-bold-should-be-normal-t…

…ext (#4662)

* feat: Make only variable bold and convert to markdown component.

* feat: Delete old keys

* feat: Revert addition of new keys.

* feat: One more conversion to markdown.

* feat: removed key mutations.

* feat: Delete unused keys, remove barrel file imports

* feat: Remove mutations, again.

---------

Co-authored-by: VWSCoronaDashboard28 <[email protected]>
(cherry picked from commit a799daf)

packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx

@@ -1,36 +1,34 @@
 import { colors, TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common';
-import { useState } from 'react';
 import { GgdTesten } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
+import { useState } from 'react';
 import { Box } from '~/components/base';
-import { Text, InlineText, BoldText } from '~/components/typography';
-import {
-  ChartTile,
-  DynamicChoropleth,
-  TwoKpiSection,
-  ChoroplethTile,
-  TimeSeriesChart,
-  TileList,
-  InView,
-  CollapsibleContent,
-  KpiTile,
-  KpiValue,
-  Markdown,
-  PageInformationBlock,
-} from '~/components';
+import { ChartTile } from '~/components/chart-tile';
+import { DynamicChoropleth } from '~/components/choropleth';
+import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
-import { Layout, GmLayout } from '~/domain/layout';
+import { CollapsibleContent } from '~/components/collapsible/collapsible-content';
+import { InView } from '~/components/in-view';
+import { KpiTile } from '~/components/kpi-tile';
+import { KpiValue } from '~/components/kpi-value';
+import { Markdown } from '~/components/markdown';
+import { PageInformationBlock } from '~/components/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 { GmLayout, Layout } from '~/domain/layout';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
 import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
 import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
 import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
-import { createGetChoroplethData, createGetContent, getLastGeneratedDate, selectGmData, getLokalizeTexts } from '~/static-props/get-data';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectGmData } from '~/static-props/get-data';
 import { filterByRegionMunicipalities } from '~/static-props/utils/filter-by-region-municipalities';
 import { ArticleParts, PagePartQueryResult } from '~/types/cms';
-import { replaceComponentsInText, replaceVariablesInText, getVrForMunicipalityCode, useReverseRouter } from '~/utils';
-import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
+import { getVrForMunicipalityCode, replaceComponentsInText, replaceVariablesInText, useReverseRouter } from '~/utils';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
+import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 
 export { getStaticPaths } from '~/static-paths/gm';
 
@@ -66,8 +64,8 @@ export const getStaticProps = createGetStaticProps(
     }>((context) => {
       const { locale } = context;
       return `{
-       "parts": ${getPagePartsQuery('positive_tests_page')},
-       "elements": ${getElementsQuery('gm', ['tested_overall'], locale)}
+        "parts": ${getPagePartsQuery('positive_tests_page')},
+        "elements": ${getElementsQuery('gm', ['tested_overall'], locale)}
       }`;
     })(context);
     return {
@@ -143,12 +141,12 @@ function PositivelyTestedPeople(props: StaticProps<typeof getStaticProps>) {
               <Markdown content={textGm.infected_kpi.description} />
 
               <Box spacing={3}>
-                <BoldText variant="body2">
-                  {replaceComponentsInText(textGm.infected_kpi.last_value_text, {
-                    infected: <InlineText color="data.primary">{`${formatNumber(lastValue.infected)}`}</InlineText>,
+                <Markdown
+                  content={replaceVariablesInText(textGm.infected_kpi.last_value_text, {
+                    infected: formatNumber(lastValue.infected),
                     dateTo: formatDateFromSeconds(lastValue.date_unix, 'weekday-long'),
                   })}
-                </BoldText>
+                />
                 {textGm.infected_kpi.link_cta && <Markdown content={textGm.infected_kpi.link_cta} />}
               </Box>
             </KpiTile>
@@ -219,18 +217,18 @@ function PositivelyTestedPeople(props: StaticProps<typeof getStaticProps>) {
               description={
                 <>
                   <Markdown content={textGm.map_toelichting} />
-                  <BoldText variant="body2">
-                    {replaceComponentsInText(textGm.map_last_value_text, {
-                      infected_per_100k: <InlineText color="data.primary">{`${formatNumber(lastValue.infected_per_100k)}`}</InlineText>,
+                  <Markdown
+                    content={replaceVariablesInText(textGm.map_last_value_text, {
+                      infected_per_100k: formatNumber(lastValue.infected_per_100k),
                       municipality: municipalityName,
                     })}
-                  </BoldText>
-                  <BoldText variant="body2">
-                    {replaceComponentsInText(textGm.map_safety_region_last_value_text, {
-                      infected_per_100k: <InlineText color="data.primary">{`${formatNumber(vrData?.infected_per_100k)}`}</InlineText>,
+                  />
+                  <Markdown
+                    content={replaceVariablesInText(textGm.map_safety_region_last_value_text, {
+                      infected_per_100k: formatNumber(vrData?.infected_per_100k),
                       safetyRegion: vrForMunicipality?.name,
                     })}
-                  </BoldText>
+                  />
                 </>
               }
               legend={{