COR-1135: dynamic-thermometer (#4464)

* feat: new descriptions added to thermometer * feat: fixed color mapping and changes some logic * feat: add icon direction function and type Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: VWSCoronaDashboard19 <[email protected]>
minvws · Oct 24, 2022 · b323e2a · b323e2a
1 parent 9647e20
commit b323e2a
Show file tree

Hide file tree

Showing 15 changed files with 377 additions and 322 deletions.
diff --git a/packages/app/schema/topical/icon.json b/packages/app/schema/topical/icon.json
@@ -34,6 +34,7 @@
     "Close",
     "CloseThick",
     "ContactBeroepen",
+    "Coronathermometer",
     "Coronavirus",
     "Cross",
     "Database",

diff --git a/packages/app/src/components/difference-indicator/tile-difference.tsx b/packages/app/src/components/difference-indicator/tile-difference.tsx
@@ -24,10 +24,7 @@ export function TileDifference({
   const text = commonTexts.toe_en_afname;
   const { difference } = value;
 
-  const formattedDifference = formatNumber(
-    Math.abs(difference),
-    maximumFractionDigits ? maximumFractionDigits : undefined
-  );
+  const formattedDifference = formatNumber(Math.abs(difference), maximumFractionDigits ? maximumFractionDigits : undefined);
 
   let content;
   let containerWithIcon;
@@ -41,17 +38,13 @@ export function TileDifference({
   if (difference < 0) {
     content = isAmount ? text.waarde_minder : text.waarde_lager;
 
-    containerWithIcon = (
-      <ContainerWithIcon icon={<Down />} color="primary" />
-    );
+    containerWithIcon = <ContainerWithIcon icon={<Down />} color="primary" />;
   }
 
   if (!content) {
     content = text.waarde_gelijk;
 
-    containerWithIcon = (
-      <ContainerWithIcon icon={<Dot />} color="neutral" />
-    );
+    containerWithIcon = <ContainerWithIcon icon={<Dot />} color="neutral" />;
   }
 
   return (
@@ -67,18 +60,10 @@ export function TileDifference({
           strong: (props) => <BoldText>{props.children}</BoldText>,
         }}
         content={replaceVariablesInText(
-          `${content} ${
-            showOldDateUnix
-              ? content === text.waarde_gelijk
-                ? text.vorige_waarde_geljk_datum
-                : text.vorige_waarde_datum
-              : text.vorige_waarde
-          }`,
+          `${content} ${showOldDateUnix ? (content === text.waarde_gelijk ? text.vorige_waarde_geljk_datum : text.vorige_waarde_datum) : text.vorige_waarde}`,
           {
             amount: `${formattedDifference}${isPercentage ? '%' : ''}`,
-            date: showOldDateUnix
-              ? formatDateFromSeconds(value.old_date_unix)
-              : '',
+            date: showOldDateUnix ? formatDateFromSeconds(value.old_date_unix) : '',
           }
         )}
       />

diff --git a/packages/app/src/components/severity-indicator-tile/constants.ts b/packages/app/src/components/severity-indicator-tile/constants.ts
@@ -1,4 +1,4 @@
 export const TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH = 930;
 export const SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH = 250;
 export const SEVERITY_LEVELS_LIST = ['1', '2', '3', '4'];
-export const THERMOMETER_ICON_NAME = 'Stopwatch';
+export const THERMOMETER_ICON_NAME = 'Coronathermometer';
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
@@ -0,0 +1,15 @@
+import { colors } from "@corona-dashboard/common";
+import { ICON_COLOR_GREEN, ICON_COLOR_RED } from "~/domain/topical/common";
+
+/**
+ * Match strings from Sanity to certain color codes
+ */
+
+export const mapStringToColors = (color: string | undefined) => {
+    switch (color) {
+      case ICON_COLOR_RED:
+        return colors.red2;
+      case ICON_COLOR_GREEN:
+        return colors.green3;
+    }
+  };
diff --git a/packages/app/src/components/severity-indicator-tile/logic/set-trend-icon.tsx b/packages/app/src/components/severity-indicator-tile/logic/set-trend-icon.tsx
@@ -0,0 +1,11 @@
+import { Down, Up } from '@corona-dashboard/icons';
+import { ICON_DIRECTION_DOWN } from '~/domain/topical/common';
+
+/**
+ * Set the correction icon for specific direction that is beign passed.
+ *  */
+
+export const setTrendIcon = (direction: string) => {
+  if (direction === ICON_DIRECTION_DOWN) return <Down />;
+  return <Up />;
+};
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
@@ -1,24 +1,34 @@
 import { colors } from '@corona-dashboard/common';
 import css from '@styled-system/css';
+import styled from 'styled-components';
 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 { SeverityIndicatorLabel } from './components/severity-indicator-label';
 import { SeverityIndicator } from './components/severity-indicator';
+import { SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH } from './constants';
 import { getSeverityColor } from './logic/get-severity-color';
 import { SeverityLevels } from './types';
-import { InlineText } from '../typography';
-import { SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH } from '~/components/severity-indicator-tile/constants';
+import { mapStringToColors } from './logic/map-string-to-colors';
+import { setTrendIcon } from '~/components/severity-indicator-tile/logic/set-trend-icon';
 
 interface SeverityIndicatorTileProps {
   description: string;
   label: string;
   level: SeverityLevels;
-  footerText: string;
   title: string;
+  sourceLabel: string;
+  datesLabel: string;
+  levelDescription: string;
+  trendIcon: TrendIcon | null;
 }
 
-export const SeverityIndicatorTile = ({ description, label, level, title, footerText }: SeverityIndicatorTileProps) => {
+export const SeverityIndicatorTile = ({ description, label, level, title, datesLabel, sourceLabel, levelDescription, trendIcon }: SeverityIndicatorTileProps) => {
+  const hasIconProps = trendIcon?.direction && trendIcon?.color;
+  const iconColor = trendIcon?.color.toUpperCase();
+
   return (
     <Box
       alignItems="flex-start"
@@ -29,12 +39,15 @@ export const SeverityIndicatorTile = ({ description, label, level, title, footer
       flexDirection="row"
       flexWrap="wrap"
       justifyContent="space-between"
-      p={space[4]}
+      p={4}
       mt={4}
       as="figure"
     >
       <Box flexGrow={1} width={`min(${SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH}px, 50%)`}>
-        <Markdown content={title} />
+        <BoldText>
+          <Markdown content={title} />
+        </BoldText>
+        <InlineText>{datesLabel}</InlineText>
 
         <SeverityIndicatorLabel label={label} level={level} />
 
@@ -43,10 +56,21 @@ export const SeverityIndicatorTile = ({ description, label, level, title, footer
 
       <Box flexGrow={1} width={`min(${SEVERITY_INDICATOR_TILE_COLUMN_MIN_WIDTH}px, 50%)`} as="figcaption">
         <Markdown content={description} />
+        <Box display={hasIconProps ? 'flex' : 'block'} alignItems="center" mt={3} css={css({ gap: 2 })}>
+          {hasIconProps && <TrendIconWrapper color={mapStringToColors(iconColor)}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>}
+
+          <Markdown content={levelDescription} />
+        </Box>
         <Box my={3}>
-          <InlineText color="gray7">{footerText}</InlineText>
+          <InlineText color="gray7">{sourceLabel}</InlineText>
         </Box>
       </Box>
     </Box>
   );
 };
+
+const TrendIconWrapper = styled.span`
+  color: ${({ color }) => color};
+  flex-shrink: 0;
+  width: 20px;
+`;
diff --git a/packages/app/src/domain/topical/common.ts b/packages/app/src/domain/topical/common.ts
@@ -3,3 +3,8 @@ import { colors } from '@corona-dashboard/common';
 export const COLOR_HAS_ONE_SHOT = colors.scale.blue[0];
 export const COLOR_FULLY_VACCINATED = colors.primary;
 export const COLOR_FULLY_BOOSTERED = colors.scale.blue[5];
+
+export const ICON_DIRECTION_UP = 'UP'
+export const ICON_DIRECTION_DOWN = 'DOWN'
+export const ICON_COLOR_RED = 'RED'
+export const ICON_COLOR_GREEN = 'GREEN'
diff --git a/packages/app/src/domain/topical/components/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-tile.tsx
@@ -7,16 +7,13 @@ import { TextWithIcon } from '~/components/text-with-icon';
 import { asResponsiveArray } from '~/style/utils';
 import { colors } from '@corona-dashboard/common';
 import DynamicIcon from '~/components/get-icon-by-name';
-import { ChevronRight, Down, Up } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import { Markdown } from '~/components/markdown';
 import { TopicalIcon } from '@corona-dashboard/common/src/types';
 import { KpiValue } from '~/components';
 import { useIntl } from '~/intl';
-
-type TrendIcon = {
-  direction: 'UP' | 'DOWN';
-  color: string;
-};
+import { TrendIcon } from '../types';
+import { setTrendIcon } from '~/components/severity-indicator-tile/logic/set-trend-icon';
 
 type Cta = {
   label: string;
@@ -36,6 +33,7 @@ export function TopicalTile({ title, tileIcon, trendIcon, dynamicDescription, kp
   const { formatNumber } = useIntl();
 
   const formatedKpiValue = typeof kpiValue === 'number' ? formatNumber(kpiValue) : typeof kpiValue === 'string' ? kpiValue : false;
+
   return (
     <Box
       as="a"
@@ -78,22 +76,12 @@ export function TopicalTile({ title, tileIcon, trendIcon, dynamicDescription, kp
                 })}
               >
                 {title}
-                {!formatedKpiValue && trendIcon && (
-                  <TrendIconWrapper color={trendIcon.color}>
-                    {trendIcon.direction === 'DOWN' && <Down />}
-                    {trendIcon.direction === 'UP' && <Up />}
-                  </TrendIconWrapper>
-                )}
+                {!formatedKpiValue && trendIcon && <TrendIconWrapper color={trendIcon.color}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>}
               </Heading>
               {formatedKpiValue && (
                 <Box display="flex" justifyContent="start" alignItems="center" mt={2}>
                   <KpiValue color={colors.black} text={formatedKpiValue} />
-                  {trendIcon && (
-                    <TrendIconWrapper color={trendIcon.color}>
-                      {trendIcon.direction === 'DOWN' && <Down />}
-                      {trendIcon.direction === 'UP' && <Up />}
-                    </TrendIconWrapper>
-                  )}
+                  {trendIcon && <TrendIconWrapper color={trendIcon.color}>{setTrendIcon(trendIcon.direction)}</TrendIconWrapper>}
                 </Box>
               )}
             </Box>

diff --git a/packages/app/src/domain/topical/types.ts b/packages/app/src/domain/topical/types.ts
@@ -0,0 +1,6 @@
+import { ICON_DIRECTION_DOWN, ICON_DIRECTION_UP } from '~/domain/topical/common';
+
+export type TrendIcon = {
+  direction: typeof ICON_DIRECTION_UP | typeof ICON_DIRECTION_DOWN;
+  color: string;
+};
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -14,6 +14,7 @@ import { replaceVariablesInText } from '~/utils';
 import { SeverityLevels } from '~/components/severity-indicator-tile/types';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { THERMOMETER_ICON_NAME, TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH, SEVERITY_LEVELS_LIST } from '~/components/severity-indicator-tile/constants';
+import { TrendIcon } from '~/domain/topical/types';
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   hospitalText: siteText.pages.hospital_page.nl,
@@ -80,7 +81,10 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                 })}
                 title={textNl.thermometer.indicator.title}
                 label={textNl.thermometer.indicator.label}
-                footerText={textNl.thermometer.indicator.footerText}
+                sourceLabel={textNl.thermometer.indicator.source_label}
+                datesLabel={textNl.thermometer.indicator.dates_label}
+                levelDescription={textNl.thermometer.indicator.level_description}
+                trendIcon={textNl.thermometer.indicator.trend_icon as TrendIcon}
               />
             </Box>
           )}

diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
@@ -31,3 +31,9 @@ timestamp,action,key,document_id,move_to
 2022-10-13T12:16:31.512Z,add,pages.vaccinations_page.vr.vaccination_coverage.top_level_information_block.reference.href,Hbf18OLBqHEYSTRqYPuWBB,__
 2022-10-13T12:16:32.533Z,add,pages.vaccinations_page.vr.vaccination_coverage.top_level_information_block.title,hisQZuyoPo60cR6z1YNuqw,__
 2022-10-20T08:52:25.474Z,delete,pages.intensive_care_page.nl.kpi_bedbezetting.barscale_screenreader_text,jDbv30Y7XYH5kl8ZaovZD6,__
+2022-10-19T11:41:12.347Z,add,pages.topical_page.nl.thermometer.indicator.source_label,65tvoiVcF0tDaAwdlNm7IM,__
+2022-10-19T11:41:13.292Z,add,pages.topical_page.nl.thermometer.indicator.dates_label,Z4981ecxxAauoAYZ8R2IO1,__
+2022-10-19T11:41:14.265Z,add,pages.topical_page.nl.thermometer.indicator.trend_icon.direction,Z4981ecxxAauoAYZ8R2IYZ,__
+2022-10-19T11:41:15.281Z,add,pages.topical_page.nl.thermometer.indicator.trend_icon.color,Z4981ecxxAauoAYZ8R2J0h,__
+2022-10-19T11:41:16.315Z,add,pages.topical_page.nl.thermometer.indicator.level_description,65tvoiVcF0tDaAwdlNm7cu,__
+2022-10-19T11:41:16.318Z,delete,pages.topical_page.nl.thermometer.indicator.footerText,yWf5NF9ZnuFvbcgji0hw3P,__