Coronathermometer component extension with collapsible (#4470)

* 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]> * Feature/cor 1159 collapsible thermometer description (#4468) * imported CollapsibleSection and imported IndicatorLevelDescription component * Sanity keys added for this ticket * added component structure and elements * Responsive and sizes * Adjusted to the right colors * Update packages/app/src/components/collapsible/collapsible-section.tsx Co-authored-by: VWSCoronaDashboard25 <[email protected]> * Update packages/app/src/domain/topical/components/indicator-level-description.tsx Co-authored-by: VWSCoronaDashboard25 <[email protected]> * fix: resolve review feedback * fix: solved PR feedback * chore: fix single character variable Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard25 <[email protected]> * Merging sanity changes from both branches * sanity changes * Fix: fixing stuck focus-state * FIX: Fixing breakpoint glitching * FIX: no user selecting * FEAT: Move the article link outside the collapsible * FIX: variable typo Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: VWSCoronaDashboard27 <[email protected]> Co-authored-by: J <[email protected]> Co-authored-by: VWSCoronaDashboard21 <[email protected]> Co-authored-by: VWSCoronaDashboard25 <[email protected]>
minvws · Oct 26, 2022 · 67be469 · 67be469
1 parent 9647e20
commit 67be469
Show file tree

Hide file tree

Showing 19 changed files with 533 additions and 394 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/collapsible/collapsible-section.tsx b/packages/app/src/components/collapsible/collapsible-section.tsx
@@ -6,20 +6,18 @@ import { isAtBottomOfPage } from '~/utils/is-at-bottom-of-page';
 import { isElementAtTopOfViewport } from '~/utils/is-element-at-top-of-viewport';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { Anchor } from '../typography';
+import { colors } from '@corona-dashboard/common';
 
 interface CollapsibleSectionProps extends BoxProps {
   summary: string;
   children: ReactNode;
   id?: string;
   hideBorder?: boolean;
+  textColor?: string;
+  borderColor?: string;
 }
 
-export const CollapsibleSection = ({
-  summary,
-  children,
-  id,
-  hideBorder,
-}: CollapsibleSectionProps) => {
+export const CollapsibleSection = ({ summary, children, id, hideBorder, textColor = colors.blue8, borderColor = colors.gray2 }: CollapsibleSectionProps) => {
   const section = useRef<HTMLElement>(null);
 
   const collapsible = useCollapsible();
@@ -53,75 +51,65 @@ export const CollapsibleSection = ({
   }, [toggle, id]);
 
   return (
-    <Box
-      as="section"
-      borderTop={hideBorder ? undefined : '1px solid'}
-      borderTopColor={hideBorder ? undefined : 'gray2'}
-      id={id}
-      ref={section}
-    >
-      {collapsible.button(
-        <Summary>
-          <Box width="100%">
-            {summary}
-            {id && (
-              <StyledAnchor
-                aria-hidden="true"
-                tabIndex={-1}
-                onClick={(e) => e.stopPropagation()}
-                href={`#${id}`}
-              >
-                #
-              </StyledAnchor>
-            )}
-          </Box>
-          {collapsible.chevron}
-        </Summary>
-      )}
-
+    <Box as="section" borderTop={hideBorder ? undefined : '1px solid'} borderTopColor={hideBorder ? undefined : borderColor} id={id} ref={section}>
+      <Summary textColor={textColor} onClick={() => collapsible.toggle()}>
+        <Box width="100%">
+          {summary}
+          {id && (
+            <StyledAnchor aria-hidden="true" tabIndex={-1} onClick={(event) => event.stopPropagation()} href={`#${id}`}>
+              #
+            </StyledAnchor>
+          )}
+        </Box>
+        {collapsible.button()}
+      </Summary>
       {collapsible.content(<Box px={3}>{children}</Box>)}
     </Box>
   );
 };
 
 const StyledAnchor = styled(Anchor)(
   css({
-    color: 'gray2',
+    color: colors.gray2,
     px: 3,
     py: 1,
     width: 0,
     textDecoration: 'none',
     position: 'absolute',
     right: '100%',
     '&:hover, &:focus': {
-      color: 'blue',
+      color: colors.blue1,
     },
   })
 );
 
-const Summary = styled.button(
+interface SummaryProps {
+  textColor: string;
+}
+const Summary = styled.div((summaryProps: SummaryProps) =>
   css({
     display: 'flex',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     justifyContent: 'space-between',
     overflow: 'visible',
     width: '100%',
-    m: 0,
-    p: 3,
+    margin: 0,
+    padding: 3,
     bg: 'transparent',
     border: 'none',
-    color: 'blue8',
+    color: summaryProps.textColor,
     fontFamily: 'body',
     fontWeight: 'bold',
     fontSize: '1.25rem',
     textAlign: 'left',
     position: 'relative',
     cursor: 'pointer',
+    userSelect: 'none',
 
     '&:focus': {
       outlineWidth: '1px',
       outlineStyle: 'dashed',
-      outlineColor: 'blue8',
+      outlineColor: colors.blue8,
     },
 
     [StyledAnchor]: { opacity: 0 },

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/components/severity-indicator-label.tsx b/packages/app/src/components/severity-indicator-tile/components/severity-indicator-label.tsx
@@ -12,29 +12,19 @@ interface SeverityIndicatorLabelProps {
   level: SeverityLevel;
 }
 
-export const SeverityIndicatorLabel = ({
-  label,
-  level,
-}: SeverityIndicatorLabelProps) => {
+export const SeverityIndicatorLabel = ({ label, level }: SeverityIndicatorLabelProps) => {
   return (
-    <Box
-      alignItems="center"
-      display="flex"
-      justifyContent="flex-start"
-      my={space[3]}
-      css={css({ gap: `0 ${space[2]}` })}
-    >
+    <Box alignItems="center" display="flex" justifyContent="flex-start" my={space[3]} css={css({ gap: `0 ${space[2]}` })}>
       <SeverityIndicatorLevel level={level}>{level}</SeverityIndicatorLevel>
 
       <Text variant="h3">{label}</Text>
     </Box>
   );
 };
 
-const SeverityIndicatorLevel = styled.div`
+export const SeverityIndicatorLevel = styled.div`
   align-items: center;
-  background-color: ${({ level }: { level: SeverityLevel }) =>
-    getSeverityColor(level as SeverityLevels)};
+  background-color: ${({ level }: { level: SeverityLevel }) => getSeverityColor(level as SeverityLevels)};
   border-radius: 50%;
   color: ${colors.white};
   display: flex;

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/indicator-level-description.tsx b/packages/app/src/domain/topical/components/indicator-level-description.tsx
@@ -0,0 +1,37 @@
+import css from '@styled-system/css';
+import { SeverityIndicatorLevel } from '~/components/severity-indicator-tile/components/severity-indicator-label';
+import { SeverityLevel } from '~/components/severity-indicator-tile/types';
+import { replaceVariablesInText } from '~/utils';
+import { asResponsiveArray } from '~/style/utils';
+import { Text, BoldText } from '~/components/typography';
+import { space } from '~/style/theme';
+import { Box } from '~/components/base';
+
+interface IndicatorLevelDescriptionProps {
+  level: SeverityLevel;
+  label: string;
+  description: string;
+}
+
+export const IndicatorLevelDescription = ({ level, label, description }: IndicatorLevelDescriptionProps) => {
+  return (
+    <li value={level}>
+      <Box
+        display="grid"
+        gridTemplateRows="auto"
+        gridTemplateColumns={`${space[4]} auto`}
+        alignItems="center"
+        marginBottom={4}
+        css={css({ columnGap: 3, rowGap: asResponsiveArray({ _: 3, sm: 1 }) })}
+      >
+        <SeverityIndicatorLevel level={level}>{level}</SeverityIndicatorLevel>
+        <BoldText>{label}</BoldText>
+        <Text css={css({ gridColumnStart: asResponsiveArray({ _: 1, sm: 2 }), gridColumnEnd: 3 })}>
+          {replaceVariablesInText(description.split('**').join(''), {
+            label: label.toLowerCase(),
+          })}
+        </Text>
+      </Box>
+    </li>
+  );
+};