bugfix/COR-1239-adjust-choropleth-tooltip-width (#4549)

* bugfix(choropleth-tooltip): Fix the width so that it is always the same regardless of the length of the name of the region.

* bugfix(choropleth-tooltip): Refactor preset.ts according to conventions.

* bugfix: Adjust negative margin to use space array.

* bugfix: PR feedback.

* bugfix: PR feedback.

* bugfix: Rename ml.

packages/app/src/components/choropleth/tooltips/tooltip-content.tsx

@@ -3,7 +3,7 @@ import { ChevronRight, Location } from '@corona-dashboard/icons';
 import { MouseEventHandler, ReactNode } from 'react';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
-import { InlineText, Text } from '~/components/typography';
+import { Text } from '~/components/typography';
 import { space } from '~/style/theme';
 import { useIsTouchDevice } from '~/utils/use-is-touch-device';
 
@@ -19,12 +19,8 @@ export const TooltipContent = ({ title, link, children }: TooltipContentProps) =
   return (
     <StyledTooltipContent as={link ? 'a' : 'div'} href={link ? link : undefined} isInteractive={isTouch} aria-live="polite">
       <StyledTooltipHeader>
-        <Text variant="choroplethTooltipHeader">
-          <StyledLocationIcon>
-            <Location />
-          </StyledLocationIcon>
-          {title}
-        </Text>
+        <LocationIcon />
+        <Text variant="choroplethTooltipHeader">{title}</Text>
         {link && <StyledChevronRight />}
       </StyledTooltipHeader>
 
@@ -52,7 +48,6 @@ const StyledTooltipHeader = styled(Box)`
   display: flex;
   justify-content: space-between;
   padding: ${space[2]} ${space[3]};
-  white-space: nowrap;
 `;
 
 const StyledChevronRight = styled(ChevronRight)`
@@ -66,14 +61,9 @@ const StyledTooltipInfo = styled(Box)`
   padding: ${space[2]} ${space[3]};
 `;
 
-const StyledLocationIcon = styled(InlineText)`
-  color: ${colors.black};
-  margin-right: ${space[2]};
-  white-space: nowrap;
-
-  svg {
-    height: 18px;
-    padding-top: 3px;
-    width: 18px;
-  }
+const LocationIcon = styled(Location)`
+  fill: ${colors.black};
+  height: 18px;
+  max-width: 18px;
+  min-width: 18px;
 `;

packages/app/src/style/preset.ts

@@ -1,93 +1,95 @@
+import { colors } from '@corona-dashboard/common';
 import { spacingStyle } from './functions/spacing';
+import { fontSizes, fontWeights, lineHeights, space } from './theme';
 import { asResponsiveArray } from './utils';
 
 export type Preset = typeof preset;
 
 export const preset = {
   typography: {
     h1: {
-      fontSize: asResponsiveArray({ _: 8, md: 9 }),
-      lineHeight: 0,
-      fontWeight: 'bold',
+      fontSize: asResponsiveArray({ _: fontSizes[8], md: fontSizes[9] }),
+      lineHeight: lineHeights[0],
+      fontWeight: fontWeights.bold,
     },
     h2: {
-      fontSize: asResponsiveArray({ _: 6, md: 7 }),
-      lineHeight: 1,
-      fontWeight: 'bold',
+      fontSize: asResponsiveArray({ _: fontSizes[6], md: fontSizes[7] }),
+      lineHeight: lineHeights[1],
+      fontWeight: fontWeights.bold,
     },
     h3: {
-      fontSize: asResponsiveArray({ _: 5, md: 6 }),
-      lineHeight: 1,
-      fontWeight: 'bold',
+      fontSize: asResponsiveArray({ _: fontSizes[5], md: fontSizes[6] }),
+      lineHeight: lineHeights[1],
+      fontWeight: fontWeights.bold,
     },
     h4: {
-      fontSize: asResponsiveArray({ _: 3, md: 4 }),
-      lineHeight: 1,
-      fontWeight: 'bold',
+      fontSize: asResponsiveArray({ _: fontSizes[3], md: fontSizes[4] }),
+      lineHeight: lineHeights[1],
+      fontWeight: fontWeights.bold,
     },
     h5: {
-      fontSize: 2,
-      lineHeight: 1,
-      fontWeight: 'bold',
+      fontSize: fontSizes[2],
+      lineHeight: lineHeights[1],
+      fontWeight: fontWeights.bold,
     },
     subtitle1: {
-      fontSize: 2,
-      lineHeight: 2,
-      fontWeight: 'bold',
+      fontSize: fontSizes[2],
+      lineHeight: lineHeights[2],
+      fontWeight: fontWeights.bold,
     },
     subtitle2: {
-      fontSize: 2,
-      lineHeight: 2,
-      fontWeight: 'bold',
-      color: 'gray6',
+      fontSize: fontSizes[2],
+      lineHeight: lineHeights[2],
+      fontWeight: fontWeights.bold,
+      color: colors.gray6,
     },
     body1: {
-      fontSize: 3,
+      fontSize: fontSizes[3],
     },
     body2: {
       /** body2 is the default body styling */
-      fontSize: 2,
-      lineHeight: 2,
+      fontSize: fontSizes[2],
+      lineHeight: lineHeights[2],
     },
     button1: {
-      fontSize: 3,
+      fontSize: fontSizes[3],
     },
     button2: {
-      fontSize: 2,
+      fontSize: fontSizes[2],
     },
     button3: {
-      fontSize: 1,
+      fontSize: fontSizes[1],
     },
     overline1: {
-      fontSize: asResponsiveArray({ _: 3, md: 6 }),
+      fontSize: asResponsiveArray({ _: fontSizes[3], md: fontSizes[6] }),
     },
     overline2: {
-      fontSize: 0,
-      fontWeight: 'bold',
+      fontSize: fontSizes[0],
+      fontWeight: fontWeights.bold,
       textTransform: 'uppercase',
       letterSpacing: '0.05em',
     },
     label1: {
-      fontSize: 1,
-      lineHeight: 1,
+      fontSize: fontSizes[1],
+      lineHeight: lineHeights[1],
     },
     label2: {
-      fontSize: 0,
-      lineHeight: 1,
+      fontSize: fontSizes[0],
+      lineHeight: lineHeights[1],
     },
     datadriven: {
-      fontSize: asResponsiveArray({ _: 3, md: 5 }),
+      fontSize: asResponsiveArray({ _: fontSizes[3], md: fontSizes[5] }),
     },
     choroplethTooltipHeader: {
-      fontSize: asResponsiveArray({ _: 5, md: 6 }),
-      lineHeight: 1,
-      fontWeight: 'bold',
+      flex: 1,
+      fontSize: asResponsiveArray({ _: fontSizes[5], md: fontSizes[6] }),
+      lineHeight: lineHeights[1],
+      fontWeight: fontWeights.bold,
+      marginInline: space[2],
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      mt: 0,
     },
     loaderText: {
-      lineHeight: 1,
+      lineHeight: lineHeights[1],
     },
   },
 } as const;
@@ -102,18 +104,17 @@ export const nestedHtml = {
   h4: preset.typography.h4,
   h5: preset.typography.h5,
 
-  strong: { fontWeight: 'bold' },
+  strong: { fontWeight: fontWeights.bold },
   em: { fontStyle: 'italic' },
-  ul: { ml: 4 },
-  ol: { ml: 4 },
+  ul: { marginLeft: space[4] },
+  ol: { marginLeft: space[4] },
   a: { textDecoration: 'underline' },
 
   /**
    * Apply some special margin styles to "stick" headings to their content.
    */
   'h1, h2, h3, h4, h5, h6': {
-    mt: 4,
-    mb: -2,
+    margin: `${space[4]} 0 ${-space[2]}`,
   },
 };
 

packages/app/src/style/theme.ts

@@ -47,7 +47,7 @@ export const fontWeights = {
   heavy: 700,
 } as const;
 
-const lineHeights = [1.2, 1.3, 1.5] as const;
+export const lineHeights = [1.2, 1.3, 1.5] as const;
 
 /**
  * Breakpoints used in original code and their em equivalent