Split lokalize texts into common and pages (#4119)

* Split lokalize texts into common and pages * Fixed some type issues * More type fixes * Fixed repeating_shot_information_block * Merge branch 'develop' into feature/split-lokalize-text * Fixed types and references * Corrected references * Moved lokalize texts * Renamed some variables for consistency * Fixed text replace vars
minvws · Mar 28, 2022 · f795d6c · f795d6c
1 parent 9c3b9c3
commit f795d6c
Show file tree

Hide file tree

Showing 180 changed files with 2,391 additions and 1,140 deletions.
diff --git a/packages/app/src/components/article-detail.tsx b/packages/app/src/components/article-detail.tsx
@@ -6,6 +6,7 @@ import { ContentBlock } from '~/components/cms/content-block';
 import { Heading, InlineText } from '~/components/typography';
 import { ArticleCategoryType } from '~/domain/topical/common/categories';
 import { useIntl } from '~/intl';
+import { SiteText } from '~/locale';
 import { Article } from '~/types/cms';
 import { Link } from '~/utils/link';
 import { mergeAdjacentKpiBlocks } from '~/utils/merge-adjacent-kpi-blocks';
@@ -15,15 +16,16 @@ import { LinkWithIcon } from './link-with-icon';
 import { PublicationDate } from './publication-date';
 interface ArticleDetailProps {
   article: Article;
+  text: SiteText['pages']['topicalPage']['shared'];
 }
 
 const imageSizes = [
   // viewport min-width 700px display images at max. 636px wide
   [700, 636],
 ];
 
-export function ArticleDetail({ article }: ArticleDetailProps) {
-  const { siteText } = useIntl();
+export function ArticleDetail({ article, text }: ArticleDetailProps) {
+  const { commonTexts } = useIntl();
 
   article.intro = mergeAdjacentKpiBlocks(article.intro);
   article.content = mergeAdjacentKpiBlocks(article.content);
@@ -32,7 +34,7 @@ export function ArticleDetail({ article }: ArticleDetailProps) {
     <Box bg="white" py={{ _: 4, md: 5 }}>
       <ContentBlock spacing={3}>
         <LinkWithIcon href="/artikelen" icon={<ArrowIconLeft />}>
-          {siteText.article_detail.back_link.text}
+          {commonTexts.article_detail.back_link.text}
         </LinkWithIcon>
 
         <Box spacing={2}>
@@ -72,7 +74,7 @@ export function ArticleDetail({ article }: ArticleDetailProps) {
         <ContentBlock>
           <Box pb={2} pt={4}>
             <InlineText color="annotation">
-              {siteText.pages.topicalPage.shared.secties.artikelen.tags}
+              {text.secties.artikelen.tags}
             </InlineText>
           </Box>
           <Box
@@ -97,8 +99,9 @@ export function ArticleDetail({ article }: ArticleDetailProps) {
                 >
                   <TagAnchor>
                     {
-                      siteText.pages.topicalPage.shared.secties.artikelen
-                        .categorie_filters[item as ArticleCategoryType]
+                      text.secties.artikelen.categorie_filters[
+                        item as ArticleCategoryType
+                      ]
                     }
                   </TagAnchor>
                 </Link>

diff --git a/packages/app/src/components/article-teaser.tsx b/packages/app/src/components/article-teaser.tsx
@@ -25,7 +25,7 @@ type ArticleTeaserProps = {
 
 export function ArticleTeaser(props: ArticleTeaserProps) {
   const { title, slug, summary, cover, coverSizes } = props;
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
 
   return (
     <Link passHref href={`/artikelen/${slug}`}>
@@ -42,7 +42,7 @@ export function ArticleTeaser(props: ArticleTeaserProps) {
         <Text>{summary}</Text>
 
         <InlineText aria-hidden="true" fontWeight="bold" color="link">
-          {siteText.common.read_more}
+          {commonTexts.common.read_more}
           <Arrow />
         </InlineText>
       </StyledArticleTeaser>

diff --git a/packages/app/src/components/breadcrumbs/breadcrumbs.tsx b/packages/app/src/components/breadcrumbs/breadcrumbs.tsx
@@ -10,7 +10,7 @@ import { useBreadcrumbs } from './logic/use-breadcrumbs';
 
 export function Breadcrumbs() {
   const breadcrumbs = useBreadcrumbs();
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
   const { pathname } = useRouter();
 
   return (
@@ -31,7 +31,7 @@ export function Breadcrumbs() {
           px: 4,
         })}
         as={'nav'}
-        aria-label={siteText.breadcrumbs.label}
+        aria-label={commonTexts.breadcrumbs.label}
       >
         <ol vocab="http://schema.org/" typeof="BreadcrumbList">
           {breadcrumbs.map(({ title, href, redirectLabel }, index) => (

diff --git a/packages/app/src/components/breadcrumbs/logic/use-breadcrumbs.tsx b/packages/app/src/components/breadcrumbs/logic/use-breadcrumbs.tsx
@@ -55,7 +55,7 @@ export const BreadcrumbsDataProvider = ({
 
 export function useBreadcrumbs(): Breadcrumb[] {
   const { pathname, query } = useRouter();
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
   const ctx = useContext(BreadcrumbsDataContext);
 
   return useMemo(() => {
@@ -73,7 +73,7 @@ export function useBreadcrumbs(): Breadcrumb[] {
     };
 
     const getTitle = (str: string): string => {
-      if (str === '') return siteText.breadcrumbs.paths.actueel;
+      if (str === '') return commonTexts.breadcrumbs.paths.actueel;
 
       const { key } = getQueryParameter(str);
       str = convertQueryParameter(str);
@@ -84,8 +84,8 @@ export function useBreadcrumbs(): Breadcrumb[] {
         return pageTitle ? pageTitle : str;
       }
 
-      return siteText.breadcrumbs.paths[
-        str as keyof typeof siteText.breadcrumbs.paths
+      return commonTexts.breadcrumbs.paths[
+        str as keyof typeof commonTexts.breadcrumbs.paths
       ];
     };
 
@@ -96,10 +96,10 @@ export function useBreadcrumbs(): Breadcrumb[] {
         case 'landelijk':
         case 'actueel': {
           return replaceVariablesInText(
-            siteText.breadcrumbs.redirects.template,
+            commonTexts.breadcrumbs.redirects.template,
             {
-              page: siteText.breadcrumbs.redirects[
-                str as keyof typeof siteText.breadcrumbs.redirects
+              page: commonTexts.breadcrumbs.redirects[
+                str as keyof typeof commonTexts.breadcrumbs.redirects
               ],
             }
           );
@@ -116,7 +116,7 @@ export function useBreadcrumbs(): Breadcrumb[] {
           // this is the more complex case where we have a str with a gm/vr code
           if (str.includes('GM') || str.includes('VR')) {
             const pageTemplate = replaceVariablesInText(
-              siteText.breadcrumbs.redirects[
+              commonTexts.breadcrumbs.redirects[
                 str.includes('GM') ? 'gemeente' : 'veiligheidsregio'
               ],
               {
@@ -125,7 +125,7 @@ export function useBreadcrumbs(): Breadcrumb[] {
             );
 
             return replaceVariablesInText(
-              siteText.breadcrumbs.redirects.template,
+              commonTexts.breadcrumbs.redirects.template,
               {
                 page: pageTemplate,
               }
@@ -160,5 +160,5 @@ export function useBreadcrumbs(): Breadcrumb[] {
       });
 
     return breadcrumbs;
-  }, [ctx, pathname, query, siteText]);
+  }, [ctx, pathname, query, commonTexts]);
 }
diff --git a/packages/app/src/components/chart-region-controls.tsx b/packages/app/src/components/chart-region-controls.tsx
@@ -10,24 +10,30 @@ interface ChartRegionControlsProps {
 }
 
 export function ChartRegionControls(props: ChartRegionControlsProps) {
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
 
   const { value, onChange } = props;
 
   const items: RadioGroupItem<RegionControlOption>[] = [
     {
-      label: siteText.charts.region_controls.municipal,
+      label: commonTexts.charts.region_controls.municipal,
       value: 'gm',
-      ariaLabel: replaceVariablesInText(siteText.aria_labels.map_toggle_label, {
-        label: siteText.charts.region_controls.municipal
-      }),
+      ariaLabel: replaceVariablesInText(
+        commonTexts.aria_labels.map_toggle_label,
+        {
+          label: commonTexts.charts.region_controls.municipal,
+        }
+      ),
     },
     {
-      label: siteText.charts.region_controls.region,
+      label: commonTexts.charts.region_controls.region,
       value: 'vr',
-      ariaLabel: replaceVariablesInText(siteText.aria_labels.map_toggle_label, {
-        label: siteText.charts.region_controls.region
-      }),
+      ariaLabel: replaceVariablesInText(
+        commonTexts.aria_labels.map_toggle_label,
+        {
+          label: commonTexts.charts.region_controls.region,
+        }
+      ),
     },
   ];
 

diff --git a/packages/app/src/components/chart-time-controls.tsx b/packages/app/src/components/chart-time-controls.tsx
@@ -23,25 +23,25 @@ export function ChartTimeControls(props: ChartTimeControlsProps) {
       TimeframeOption.LAST_YEAR,
     ],
   } = props;
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
 
   const selectOptions = useMemo(
     () =>
       timeframeOptions.map((key) => ({
-        label: siteText.charts.time_controls[key],
+        label: commonTexts.charts.time_controls[key],
         value: key,
         content: (
           <Box>
-            <Text>{siteText.charts.time_controls[key]}</Text>
+            <Text>{commonTexts.charts.time_controls[key]}</Text>
           </Box>
         ),
       })),
-    [siteText.charts.time_controls, timeframeOptions]
+    [commonTexts.charts.time_controls, timeframeOptions]
   );
 
   return (
     <RichContentSelect
-      label={siteText.pages.vaccinationsPage.nl.age_group_dropdown.label}
+      label={commonTexts.common.age_group_dropdown.label}
       visuallyHiddenLabel
       initialValue={timeframe}
       options={selectOptions}

diff --git a/packages/app/src/components/choropleth/components/canvas-choropleth-map.tsx b/packages/app/src/components/choropleth/components/canvas-choropleth-map.tsx
@@ -4,6 +4,7 @@ import Konva from 'konva';
 import {
   memo,
   MouseEvent,
+  MutableRefObject,
   RefObject,
   useCallback,
   useEffect,
@@ -37,6 +38,7 @@ export type CanvasChoroplethMapProps = {
   anchorEventHandlers: AnchorEventHandler;
   annotations: AccessibilityAnnotations;
   choroplethFeatures: ChoroplethFeatures;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
   dataOptions: DataOptions;
   featureOutHandler: ChoroplethTooltipHandlers[1];
   featureOverHandler: ChoroplethTooltipHandlers[0];
@@ -62,6 +64,7 @@ export const CanvasChoroplethMap = (props: CanvasChoroplethMapProps) => {
     anchorEventHandlers,
     annotations,
     choroplethFeatures,
+    containerRef,
     dataOptions,
     featureOutHandler,
     featureOverHandler,
@@ -165,6 +168,7 @@ export const CanvasChoroplethMap = (props: CanvasChoroplethMapProps) => {
         handleMouseOver={handleMouseOver}
       />
       <div
+        ref={containerRef}
         style={{
           minHeight: height,
           maxHeight: '75vh',

diff --git a/packages/app/src/components/choropleth/components/choropleth-map.tsx b/packages/app/src/components/choropleth/components/choropleth-map.tsx
@@ -147,6 +147,7 @@ export const ChoroplethMap: <T extends ChoroplethDataItem>(
             anchorEventHandlers={anchorEventHandlers}
             isTabInteractive={isTabInteractive}
             getFeatureName={getFeatureName}
+            containerRef={containerRef}
           />
         </>
       )}

diff --git a/packages/app/src/components/choropleth/index.tsx b/packages/app/src/components/choropleth/index.tsx
@@ -219,16 +219,16 @@ export function Choropleth<T extends ChoroplethDataItem>({
   ...props
 }: ChoroplethProps<T>) {
   const [tooltip, setTooltip] = useState<TooltipSettings<T>>();
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
   const tooltipRef = useRef<HTMLDivElement>(null);
 
   /** Close the tooltip when a click outside of the component occurs */
   useOnClickOutside([tooltipRef], () => setTooltip(undefined));
 
   const { isTabInteractive, tabInteractiveButton, anchorEventHandlers } =
     useTabInteractiveButton(
-      replaceVariablesInText(siteText.choropleth.a11y.tab_navigatie_button, {
-        subject: siteText.choropleth[props.map].plural,
+      replaceVariablesInText(commonTexts.choropleth.a11y.tab_navigatie_button, {
+        subject: commonTexts.choropleth[props.map].plural,
       })
     );
 

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -18,7 +18,7 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(
 ) {
   const { data, dataFormatters } = props;
   const {
-    siteText,
+    commonTexts,
     formatNumber,
     formatPercentage,
     formatDate,
@@ -28,7 +28,7 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(
     formatDateSpan,
   } = useIntl();
 
-  const text = siteText.choropleth_tooltip;
+  const text = commonTexts.choropleth_tooltip;
 
   const subject = (
     text as unknown as Record<string, Record<string, Record<string, string>>>

diff --git a/packages/app/src/components/cms/inline-age-demographic.tsx b/packages/app/src/components/cms/inline-age-demographic.tsx
@@ -27,7 +27,7 @@ interface InlineAgeDemographicProps {
 export function InlineAgeDemographic(props: InlineAgeDemographicProps) {
   const { configuration, startDate, endDate } = props;
 
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
 
   const dateUrl = getDataUrl(startDate, endDate, configuration);
 
@@ -39,8 +39,8 @@ export function InlineAgeDemographic(props: InlineAgeDemographicProps) {
     return <InlineLoader />;
   }
 
-  const source = get(siteText, configuration.sourceKey.split('.'), '');
-  const text = get(siteText, configuration.text.split('.'), '');
+  const source = get(commonTexts, configuration.sourceKey.split('.'), '');
+  const text = get(commonTexts, configuration.text.split('.'), '');
 
   return (
     <ErrorBoundary>

diff --git a/packages/app/src/components/cms/inline-choropleth.tsx b/packages/app/src/components/cms/inline-choropleth.tsx
@@ -30,7 +30,7 @@ interface InlineChoroplethProps {
 export function InlineChoropleth(props: InlineChoroplethProps) {
   const { configuration } = props;
 
-  const { siteText } = useIntl();
+  const { commonTexts } = useIntl();
 
   const dateUrl = getDataUrl(undefined, undefined, configuration, 'choropleth');
 
@@ -50,7 +50,7 @@ export function InlineChoropleth(props: InlineChoroplethProps) {
       : undefined,
     tooltipVariables: parseTooltipVariables(
       configuration.tooltipVariables,
-      siteText
+      commonTexts
     ),
     highlightSelection: configuration.highlightSelection,
     isPercentage: configuration.isPercentage,
@@ -70,7 +70,7 @@ export function InlineChoropleth(props: InlineChoroplethProps) {
     noDataFillColor: getColor(configuration.noDataFillColor),
   };
 
-  const source = get(siteText, configuration.sourceKey.split('.'), '');
+  const source = get(commonTexts, configuration.sourceKey.split('.'), '');
 
   return (
     <ErrorBoundary>
@@ -90,7 +90,7 @@ export function InlineChoropleth(props: InlineChoroplethProps) {
 
 function parseTooltipVariables(
   tooltipVarsJson: string | undefined,
-  siteText: SiteText
+  commonTexts: SiteText['common']
 ) {
   if (!tooltipVarsJson?.length) {
     return undefined;
@@ -99,10 +99,10 @@ function parseTooltipVariables(
     const varsObject = JSON.parse(tooltipVarsJson);
     return Object.fromEntries(
       Object.entries(varsObject).map(([name, value]) => {
-        if (isString(value) && value.startsWith('siteText')) {
+        if (isString(value) && value.startsWith('commonTexts')) {
           return [
             name,
-            get(siteText, value.replace('siteText.', ''), undefined),
+            get(commonTexts, value.replace('commonTexts.', ''), undefined),
           ];
         }
         return [name, value];