feat: solving all the PR feedback

minvws · Nov 9, 2022 · 9f86088 · 9f86088
1 parent a179028
commit 9f86088
Show file tree

Hide file tree

Showing 20 changed files with 137 additions and 155 deletions.
diff --git a/packages/app/src/components/severity-indicator-tile/logic/map-string-to-colors.ts b/packages/app/src/components/severity-indicator-tile/logic/map-string-to-colors.ts
@@ -5,7 +5,7 @@ import { ICON_COLOR_GREEN, ICON_COLOR_RED } from '~/domain/topical/common';
  * Match strings from Sanity to certain color codes
  */
 
-export const mapStringToColors = (color: typeof ICON_COLOR_RED | typeof ICON_COLOR_GREEN | undefined) => {
+export const mapStringToColors = (color: typeof ICON_COLOR_RED | typeof ICON_COLOR_GREEN) => {
   switch (color) {
     case ICON_COLOR_RED:
       return colors.red2;

diff --git a/packages/app/src/components/severity-indicator-tile/severity-indicator-tile.tsx b/packages/app/src/components/severity-indicator-tile/severity-indicator-tile.tsx
@@ -5,7 +5,7 @@ import { space } from '~/style/theme';
 import { Box } from '~/components/base';
 import { Markdown } from '~/components/markdown';
 import { BoldText, InlineText } from '~/components/typography';
-import { TrendIcon } from '~/domain/topical/types';
+import { TrendIcon, TrendIconColor } from '~/domain/topical/types';
 import { SeverityIndicatorLabel } from './components/severity-indicator-label';
 import { SeverityIndicator } from './components/severity-indicator';
 import { SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH } from './constants';
@@ -27,7 +27,7 @@ interface SeverityIndicatorTileProps {
 
 export const SeverityIndicatorTile = ({ description, label, level, title, datesLabel, sourceLabel, levelDescription, trendIcon }: SeverityIndicatorTileProps) => {
   const hasIconProps = trendIcon?.direction && trendIcon?.color;
-  const iconColor = trendIcon?.color?.toUpperCase();
+  const iconColor = trendIcon?.color?.toUpperCase() as TrendIconColor;
 
   return (
     <Box
@@ -57,9 +57,7 @@ export const SeverityIndicatorTile = ({ description, label, level, title, datesL
       <Box flexGrow={1} width={`min(${SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH}px, 50%)`} as="figcaption">
         {description && <Markdown content={description} />}
         <Box display={hasIconProps ? 'flex' : 'block'} alignItems="center" mt={3} css={css({ gap: 2 })}>
-          {trendIcon?.direction && trendIcon?.color && hasIconProps && (
-            <TrendIconWrapper color={mapStringToColors(iconColor)}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>
-          )}
+          {trendIcon?.direction && iconColor && hasIconProps && <TrendIconWrapper color={mapStringToColors(iconColor)}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>}
           {levelDescription && <Markdown content={levelDescription} />}
         </Box>
         <Box my={3}>

diff --git a/packages/app/src/domain/topical/components/topical-header.tsx b/packages/app/src/domain/topical/components/topical-header.tsx
@@ -2,6 +2,7 @@ import { Box } from '~/components/base';
 import { Heading } from '~/components/typography';
 import { RichContent } from '~/components/cms/rich-content';
 import { PortableTextEntry } from '@sanity/block-content-to-react';
+import { fontSizes } from '~/style/theme';
 
 interface TopicalHeaderProps {
   title: string;
@@ -12,7 +13,7 @@ export const TopicalHeader = ({ title, description }: TopicalHeaderProps) => {
   return (
     <Box spacing={4}>
       <Heading level={1}>{title}</Heading>
-      <Box spacing={3} fontSize={3}>
+      <Box spacing={3} fontSize={fontSizes[3]}>
         <RichContent blocks={description} elementAlignment="start" />
       </Box>
     </Box>

diff --git a/packages/app/src/domain/topical/components/topical-links-list.tsx b/packages/app/src/domain/topical/components/topical-links-list.tsx
@@ -13,7 +13,7 @@ interface TopicalLinksListProps {
     DESKTOP: string | null;
     MOBILE: string | null;
   };
-  links: ThemeLink[] | null;
+  links: ThemeLink[];
 }
 
 export const TopicalLinksList = ({ labels, links }: TopicalLinksListProps) => {
@@ -49,23 +49,17 @@ export const TopicalLinksList = ({ labels, links }: TopicalLinksListProps) => {
           padding: 0,
         })}
       >
-        {links &&
-          links.length &&
-          links.map((link, index) => {
-            {
-              console.log(link.cta.href);
-              console.log(link.cta.title);
-            }
-            {
-              link.cta.href && link.cta.title && (
-                <li key={index}>
-                  <LinkWithIcon href={link.cta.href} icon={<ChevronRight />} iconPlacement="right" showAsButton={breakpoints.sm}>
-                    {link.cta.title}
-                  </LinkWithIcon>
-                </li>
-              );
-            }
-          })}
+        {links.map(
+          (link, index) =>
+            link.cta.title &&
+            link.cta.href && (
+              <li key={index}>
+                <LinkWithIcon href={link.cta.href} icon={<ChevronRight />} iconPlacement="right" showAsButton={breakpoints.sm}>
+                  {link.cta.title}
+                </LinkWithIcon>
+              </li>
+            )
+        )}
       </ul>
     </Box>
   );

diff --git a/packages/app/src/domain/topical/components/topical-theme-header.tsx b/packages/app/src/domain/topical/components/topical-theme-header.tsx
@@ -7,6 +7,7 @@ import DynamicIcon from '~/components/get-icon-by-name';
 import theme from '~/style/theme';
 import { PortableTextEntry } from '@sanity/block-content-to-react';
 import { Markdown } from '~/components';
+import { fontSizes } from '~/style/theme';
 
 interface TopicalThemeHeaderProps {
   title: string;
@@ -27,7 +28,7 @@ export const TopicalThemeHeader = ({ title, subtitle, subtitleThermometer, icon
         <Heading level={2}>{title}</Heading>
       </Box>
       {subtitle && (
-        <Box fontSize={3}>
+        <Box fontSize={fontSizes[3]}>
           <RichContent blocks={subtitle} />
         </Box>
       )}

diff --git a/packages/app/src/domain/topical/components/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-tile.tsx
@@ -38,8 +38,8 @@ export function TopicalTile({ title, tileIcon, trendIcon, description, kpiValue,
 
   return (
     <Box
-      as="a"
-      href={cta?.href}
+      as={cta.href ? 'a' : 'div'}
+      href={cta.href ?? undefined}
       borderColor={colors.gray3}
       borderWidth="1px"
       borderStyle="solid"
@@ -107,7 +107,7 @@ export function TopicalTile({ title, tileIcon, trendIcon, description, kpiValue,
           </Box>
         </Box>
 
-        {cta.href && cta.title && (
+        {cta.title && (
           <Box display="flex" justifyContent="center" alignItems="center" bg={colors.blue1} color={colors.blue8} padding={3} className="topical-tile-cta">
             <TextWithIcon text={cta.title} icon={<ChevronRight />} />
           </Box>

diff --git a/packages/app/src/domain/topical/types.ts b/packages/app/src/domain/topical/types.ts
@@ -1,6 +1,9 @@
 import { ICON_DIRECTION_DOWN, ICON_DIRECTION_UP, ICON_COLOR_RED, ICON_COLOR_GREEN } from '~/domain/topical/common';
 
+export type TrendIconColor = typeof ICON_COLOR_RED | typeof ICON_COLOR_GREEN;
+export type TrendIconDirection = typeof ICON_DIRECTION_UP | typeof ICON_DIRECTION_DOWN;
+
 export type TrendIcon = {
-  direction: typeof ICON_DIRECTION_UP | typeof ICON_DIRECTION_DOWN | null;
-  color: typeof ICON_COLOR_RED | typeof ICON_COLOR_GREEN | null;
+  direction: TrendIconDirection | null;
+  color: TrendIconColor | null;
 };
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -20,26 +20,24 @@ import { createGetStaticProps, StaticProps } from '~/static-props/create-get-sta
 import { getTopicalStructureQuery, getThermometerEvents } from '~/queries/get-topical-structure-query';
 import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
-import { colors, MetricName } from '@corona-dashboard/common';
-import { iconName2filename } from '@corona-dashboard/icons';
+import { colors } from '@corona-dashboard/common';
 import { SeverityIndicatorTile } from '~/components/severity-indicator-tile/severity-indicator-tile';
-import { replaceVariablesInText } from '~/utils';
+import { replaceVariablesInText, getFilenameToIconName } from '~/utils';
 import { SeverityLevel, SeverityLevels } from '~/components/severity-indicator-tile/types';
 import { THERMOMETER_ICON_NAME, TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH } from '~/components/severity-indicator-tile/constants';
 import { TrendIcon } from '~/domain/topical/types';
 import { CollapsibleSection } from '~/components/collapsible';
 import { Timeline } from '~/components/severity-indicator-tile/components/timeline/timeline';
-import { ElementsQueryResult, getElementsQuery } from '~/queries/get-elements-query';
 import { GetStaticPropsContext } from 'next';
 import { getTimelineRangeDates } from '~/components/severity-indicator-tile/components/timeline/logic/get-timeline-range-dates';
-import { IconName } from '~/components/get-icon-by-name';
 import { TimelineMarker } from '~/components/time-series-chart/components/timeline';
 import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
 import { ArticleParts, LinkParts, PagePartQueryResult, RichTextParts } from '~/types/cms';
 import { TopicalSanityData } from '~/queries/query-types';
 import { TopicalIcon } from '@corona-dashboard/common/src/types';
 import { SEVERITY_LEVELS_LIST } from '~/components/severity-indicator-tile/constants';
 import { RichContent } from '~/components/cms/rich-content';
+import { space } from '~/style/theme';
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   hospitalText: siteText.pages.hospital_page.nl,
@@ -57,21 +55,18 @@ export const getStaticProps = createGetStaticProps(
   getLastGeneratedDate,
   async (context: GetStaticPropsContext) => {
     const { content } = await createGetContent<{
-      elements: ElementsQueryResult;
       parts: PagePartQueryResult<ArticleParts | LinkParts | RichTextParts>;
       topicalStructure: TopicalSanityData;
     }>((context) => {
       const { locale } = context;
       return `{
         "parts": ${getPagePartsQuery('topical_page')},
-        "elements": ${getElementsQuery('nl', ['' as MetricName], locale)},
-        "topicalStructure": ${getTopicalStructureQuery('nl')}
+        "topicalStructure": ${getTopicalStructureQuery(locale)}
       }`;
     })(context);
     return {
       content: {
-        elements: content.elements, //Todo check if is removable
-        articles: getArticleParts(content.parts.pageParts, 'topicalPageArticles'), //Todo check if is movable to line 62
+        articles: getArticleParts(content.parts.pageParts, 'topicalPageArticles'),
         topicalStructure: content.topicalStructure,
       },
     };
@@ -106,28 +101,30 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
 
   const { startDate, endDate } = getTimelineRangeDates(thermometerEvents);
 
-  const filename2IconName = (filename: string) =>
-    Object.keys(iconName2filename).find((iconName) => {
-      const typedIconName = iconName as IconName;
-      return iconName2filename[typedIconName] === filename;
-    });
-
   return (
     <Layout {...metadata} lastGenerated={lastGenerated}>
       <Box bg={colors.white}>
         <MaxWidth id="content">
-          <Box marginBottom={{ _: 4, md: 5 }} pt={{ _: 3, md: 5 }} px={{ _: 3, sm: 4 }} maxWidth={TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH}>
+          <Box
+            marginBottom={{ _: space[4], md: space[5] }}
+            paddingTop={{ _: space[3], md: space[5] }}
+            paddingX={{ _: space[3], sm: space[4] }}
+            maxWidth={TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH}
+          >
             <TopicalHeader title={topicalConfig.title} description={topicalConfig.description} />
           </Box>
 
           {currentSeverityLevelTexts && (
-            <Box my={5} px={{ _: 3, sm: 4 }} maxWidth={TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH}>
+            <Box marginY={space[5]} paddingX={{ _: space[3], sm: space[4] }} maxWidth={TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH}>
               <TopicalThemeHeader
                 title={thermometer.title}
-                subtitleThermometer={replaceVariablesInText(thermometer.levelDescription, {
-                  level: currentSeverityLevel,
-                  label: currentSeverityLevelTexts.label,
-                })}
+                subtitleThermometer={
+                  thermometer.levelDescription &&
+                  replaceVariablesInText(thermometer.levelDescription, {
+                    level: currentSeverityLevel,
+                    label: currentSeverityLevelTexts.label,
+                  })
+                }
                 icon={THERMOMETER_ICON_NAME}
               />
 
@@ -167,9 +164,9 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                 />
               )}
 
-              <Box my={{ _: 3, md: 4 }} borderBottom={'1px solid'} borderBottomColor={colors.gray3}>
+              <Box marginY={{ _: space[3], md: space[4] }} borderBottom={'1px solid'} borderBottomColor={colors.gray3}>
                 <CollapsibleSection summary={thermometer.collapsibleTitle} textColor={colors.black} borderColor={colors.gray3}>
-                  <Box my={3}>
+                  <Box marginY={space[3]}>
                     <OrderedList>
                       {SEVERITY_LEVELS_LIST.map((severityLevel, index) => {
                         const indicatorTexts = thermometer.thermometerLevels.find((thermometerLevel) => thermometerLevel.level === severityLevel);
@@ -192,20 +189,26 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
             </Box>
           )}
 
-          <Box spacing={{ _: 5, md: 6 }} px={{ _: 3, sm: 4 }}>
+          <Box spacing={{ _: 5, md: 6 }} paddingX={{ _: space[3], sm: space[4] }}>
             {topicalStructure.topicalConfig.themes.map((theme) => {
               return (
                 <Box key={theme.title}>
                   <Box marginBottom={4}>
-                    <TopicalThemeHeader title={theme.title} subtitle={theme.subTitle} icon={filename2IconName(theme.themeIcon) as TopicalIcon} />
+                    <TopicalThemeHeader title={theme.title} subtitle={theme.subTitle} icon={getFilenameToIconName(theme.themeIcon) as TopicalIcon} />
                   </Box>
-                  <Box display="grid" gridTemplateColumns={tileGridTemplate} gridColumnGap={{ _: 4, md: 5 }} gridRowGap={{ _: 4, md: 5 }} marginBottom={{ _: 4, sm: 5 }}>
+                  <Box
+                    display="grid"
+                    gridTemplateColumns={tileGridTemplate}
+                    gridColumnGap={{ _: space[4], md: space[5] }}
+                    gridRowGap={{ _: space[4], md: space[5] }}
+                    marginBottom={{ _: space[4], sm: space[5] }}
+                  >
                     {theme.tiles.map((themeTile) => {
                       return (
                         <TopicalTile
                           trendIcon={themeTile.trendIcon}
                           title={themeTile.title}
-                          tileIcon={filename2IconName(themeTile.tileIcon) as TopicalIcon}
+                          tileIcon={getFilenameToIconName(themeTile.tileIcon) as TopicalIcon}
                           description={themeTile.description}
                           cta={themeTile.cta}
                           key={themeTile.title}
@@ -229,29 +232,29 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
 
             <Box>
               <Box marginBottom={4}>
-                <TopicalThemeHeader title={measureTheme.title} subtitle={measureTheme.subTitle} icon={filename2IconName(measureTheme.themeIcon) as TopicalIcon} />
+                <TopicalThemeHeader title={measureTheme.title} subtitle={measureTheme.subTitle} icon={getFilenameToIconName(measureTheme.themeIcon) as TopicalIcon} />
               </Box>
-              <Box display="grid" gridTemplateColumns={tileGridTemplate} gridColumnGap={{ _: 4, md: 5 }} gridRowGap={{ _: 4, md: 5 }} marginBottom={5}>
+              <Box display="grid" gridTemplateColumns={tileGridTemplate} gridColumnGap={{ _: space[4], md: space[5] }} gridRowGap={{ _: space[4], md: space[5] }} marginBottom={5}>
                 {measureTheme.tiles.map((measureTile, index) => {
-                  return <TopicalMeasureTile icon={filename2IconName(measureTile.tileIcon) as TopicalIcon} title={measureTile.description} key={index} />;
+                  return <TopicalMeasureTile icon={getFilenameToIconName(measureTile.tileIcon) as TopicalIcon} title={measureTile.description} key={index} />;
                 })}
               </Box>
             </Box>
           </Box>
         </MaxWidth>
 
-        <Spacer mb={5} />
+        <Spacer marginBottom={space[5]} />
 
-        <Box width="100%" backgroundColor="gray1" py={5}>
-          <Box py={4} px={{ _: 3, sm: 4 }}>
+        <Box width="100%" backgroundColor="gray1" paddingY={space[5]}>
+          <Box paddingY={4} paddingX={{ _: space[3], sm: space[4] }}>
             <Search title={textShared.secties.search.title.nl} />
           </Box>
         </Box>
 
-        <Spacer mb={5} />
+        <Spacer marginBottom={5} />
 
-        <Box width="100%" pb={5}>
-          <MaxWidth spacing={4} pt={{ _: 3, md: 5 }} px={{ _: 3, sm: 4, md: 3, lg: 4 }}>
+        <Box width="100%" paddingBottom={5}>
+          <MaxWidth spacing={4} paddingTop={{ _: space[3], md: space[5] }} paddingX={{ _: space[3], sm: space[4], md: space[3], lg: space[4] }}>
             <TopicalSectionHeader
               title={textShared.secties.meer_lezen.titel}
               description={textShared.secties.meer_lezen.omschrijving}

diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts
@@ -42,7 +42,7 @@ export function getTopicalStructureQuery(locale: string) {
         _type == 'measureTheme' && !(_id in path("drafts.**"))
       ][0]{
         'title': title.${locale},
-        tileIcon,
+        themeIcon,
         'subTitle': subTitle.${locale},
         'tiles': tiles[]->{
           tileIcon,

diff --git a/packages/app/src/style/theme.ts b/packages/app/src/style/theme.ts
@@ -28,7 +28,7 @@ const fonts = {
 } as const;
 
 // prettier-ignore
-const fontSizes = [
+export const fontSizes = [
   '0.75rem',    // 0 -> 12px
   '0.875rem',   // 1 -> 14px
   '1rem',       // 2 -> 16px

diff --git a/packages/app/src/utils/get-filename-to-icon-name.ts b/packages/app/src/utils/get-filename-to-icon-name.ts
@@ -0,0 +1,13 @@
+import { iconName2filename } from '@corona-dashboard/icons';
+import { IconName } from '@corona-dashboard/icons/src/icon-name2filename';
+
+/**
+ * Return the iconName by passing in the name of the file name.
+ * For example pass in: 'afstand_sporten.svg' and outputs: afstandSporten
+ */
+
+export const getFilenameToIconName = (filename: string) =>
+  Object.keys(iconName2filename).find((iconName) => {
+    const typedIconName = iconName as IconName;
+    return iconName2filename[typedIconName] === filename;
+  });
diff --git a/packages/app/src/utils/index.ts b/packages/app/src/utils/index.ts
@@ -11,3 +11,4 @@ export { getBoundaryDateStartUnix } from './get-boundary-date-start-unix';
 export { trimNullValues } from './trim-null-values';
 export { getAverageSplitPoints } from './get-avarage-split-points';
 export { keys } from './keys';
+export { getFilenameToIconName } from './get-filename-to-icon-name';