Feature/COR-1263-table-consistency-implementations

packages/app/src/components/age-groups/age-group.tsx

@@ -0,0 +1,29 @@
+import { Box } from '~/components/base';
+import { BoldText, InlineText } from '~/components/typography';
+import { useIntl } from '~/intl';
+import { formatAgeGroupString } from '~/utils/format-age-group-string';
+import { formatBirthyearRangeString } from '~/utils/format-birthyear-range-string';
+import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+
+interface AgeGroupProps {
+  range: string;
+  peopleInAgeGroup?: number;
+  birthYearRange: string;
+}
+
+export function AgeGroup({ range, peopleInAgeGroup, birthYearRange }: AgeGroupProps) {
+  const { commonTexts, formatNumber } = useIntl();
+  const ageRange = formatAgeGroupString(range, commonTexts.common.agegroup);
+  const yearOfBirthRange = formatBirthyearRangeString(birthYearRange, commonTexts.common.birthyears);
+
+  const totalText = replaceVariablesInText(commonTexts.common.agegroup.total_people, {
+    total: formatNumber(peopleInAgeGroup),
+  });
+
+  return (
+    <Box display="flex" flexDirection="column">
+      <BoldText>{ageRange}</BoldText>
+      <InlineText variant="label1">{`${yearOfBirthRange}${peopleInAgeGroup ? `: ${totalText}` : ''}`}</InlineText>
+    </Box>
+  );
+}

packages/app/src/components/percentage-bar.tsx

@@ -1,7 +1,7 @@
-import { css } from '@styled-system/css';
-import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { colors } from '@corona-dashboard/common';
+import styled from 'styled-components';
+import { space } from '~/style/theme';
 
 interface PercentageProps {
   percentage: number;
@@ -11,69 +11,45 @@ interface PercentageProps {
   backgroundColor?: string;
 }
 
-export function PercentageBar({
-  percentage,
-  height,
-  color,
-  backgroundColor = colors.gray2,
-  backgroundStyle = 'normal',
-}: PercentageProps) {
+export function PercentageBar({ percentage, height, color, backgroundColor = colors.gray2, backgroundStyle = 'normal' }: PercentageProps) {
   const minWidth = percentage > 0 ? '2px' : undefined;
-
-  backgroundColor =
-    backgroundStyle === 'normal'
-      ? backgroundColor
-        ? backgroundColor
-        : 'gray2'
-      : backgroundColor;
+  backgroundColor = backgroundStyle === 'normal' ? backgroundColor ? backgroundColor : 'gray2' : backgroundColor;
 
   return (
-    <Wrapper>
-      <Bar
-        style={{ width: `${percentage}%` }}
-        height={height}
-        minWidth={minWidth}
-        color={color}
-      />
-
-      <Box
-        // Created by https://stripesgenerator.com/
-        css={css(
-          backgroundStyle === 'hatched'
-            ? {
-                backgroundImage: `linear-gradient(45deg, ${backgroundColor} 30%, #ffffff 30%, #ffffff 50%, ${backgroundColor} 50%, ${backgroundColor} 80%, #ffffff 80%, #ffffff 100%)`,
-                backgroundSize: '7.07px 7.07px',
-              }
-            : {
-                backgroundColor,
-              }
-        )}
-        flex={1}
-        height={height}
-        top={0}
-        left={0}
-      />
-    </Wrapper>
+    <Box display="flex" position="relative" width="100%">
+      <Bar style={{ width: `${percentage}%` }} height={height} minWidth={minWidth} color={color} />
+      <StyledDiv backgroundStyle={backgroundStyle} backgroundColor={backgroundColor} height={height} />
+    </Box>
   );
 }
 
-const Wrapper = styled.div(
-  css({
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-  })
-);
+interface StyledDivProps {
+  backgroundStyle: string;
+  backgroundColor: string;
+  height?: string | number;
+}
+
+const StyledDiv = styled.div<StyledDivProps>`
+  /* Created by https://stripesgenerator.com/ */
+  background-color: ${({backgroundStyle, backgroundColor}) => backgroundStyle !== 'hatched' ? backgroundColor : undefined };
+  background-image: ${({backgroundStyle, backgroundColor}) => backgroundStyle === 'hatched' ? `linear-gradient(45deg, ${backgroundColor} 30%, #ffffff 30%, #ffffff 50%, ${backgroundColor} 50%, ${backgroundColor} 80%, #ffffff 80%, #ffffff 100%)` : undefined };
+  background-size: ${({backgroundStyle}) => backgroundStyle === 'hatched' ? '7.07px 7.07px' : undefined };
+  flex: 1;
+  height: ${({height}) => height ? height : undefined};
+  left: ${space[0]};
+  top: ${space[0]};
+`;
 
-const Bar = styled.div<{
+interface BarProps {
   height?: number | string;
   minWidth?: string;
   color?: string;
-}>((x) =>
-  css({
-    backgroundColor: x.color ? x.color : 'currentcolor',
-    height: x.height ?? '0.8em',
-    minWidth: x.minWidth,
-    zIndex: 3,
-  })
-);
+}
+
+const Bar = styled.div<BarProps>`
+  background-color: ${({color}) => color ? color : 'currentcolor'};
+  height: ${({height}) => height ??  '0.8em'};
+  min-width: ${({minWidth}) => minWidth};
+  transition: width .3s;
+  z-index: 3;
+`

packages/app/src/components/tables/components/narrow-percentage-data.tsx

@@ -0,0 +1,41 @@
+import { Box } from '~/components/base';
+import { BehaviorTrend } from '~/domain/behavior/components/behavior-trend';
+import { NarrowPercentage } from '~/components/tables/components/narrow-percentage';
+import { space } from '~/style/theme';
+import { PercentageDataPoint } from '../types';
+import { PercentageBarWithoutNumber } from './percentage-bar-without-number';
+
+interface PercentageDataProps {
+  percentageDataPoints: PercentageDataPoint[];
+}
+
+// Component used to show percentage data on narrow screens.
+export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => {
+  return (
+    <>
+      {percentageDataPoints.map((percentageDataPoint, index) => (
+        <Box display="flex" flexDirection="column" marginBottom={index === 0 ? space[2] : undefined} key={index}>
+          <Box display="flex" marginBottom={space[1]}>
+            <NarrowPercentage
+              value={
+                percentageDataPoint.trendDirection ? (
+                  <BehaviorTrend trend={percentageDataPoint.trendDirection} text={`${percentageDataPoint.percentage.value}%`} />
+                ) : (
+                  percentageDataPoint.percentage.value
+                )
+              }
+              color={percentageDataPoint.percentage.color}
+              textLabel={percentageDataPoint.title}
+            />
+          </Box>
+
+          {/* In some cases, the percentage value is a string so it needs to be parsed for the progress bar to be filled properly. */}
+          <PercentageBarWithoutNumber
+            percentage={typeof percentageDataPoint.percentage.value === 'number' ? percentageDataPoint.percentage.value : parseFloat(percentageDataPoint.percentage.value)}
+            color={percentageDataPoint.percentage.color}
+          />
+        </Box>
+      ))}
+    </>
+  );
+};

packages/app/src/components/tables/components/narrow-percentage.tsx

@@ -0,0 +1,24 @@
+import { Box } from '~/components/base';
+import { InlineText } from '~/components/typography';
+import { space } from '~/style/theme';
+
+interface NarrowPercentageProps {
+  value: number | React.ReactNode;
+  color: string;
+  textLabel: string;
+}
+
+export function NarrowPercentage({ value, color, textLabel }: NarrowPercentageProps) {
+  return (
+    <Box display="grid" gridTemplateColumns="auto 2fr" width="100%">
+      <Box paddingRight={space[3]} minWidth="190px" textAlign="left">
+        <InlineText>{textLabel}:</InlineText>
+      </Box>
+
+      <Box display="flex" alignItems="center">
+        <Box width="10px" height="10px" backgroundColor={color} borderRadius="50%" marginRight={space[2]} />
+        {value}
+      </Box>
+    </Box>
+  );
+}

packages/app/src/components/tables/components/percentage-bar-without-number.tsx

@@ -0,0 +1,18 @@
+import { Box } from '~/components/base';
+import { PercentageBar } from '~/components/percentage-bar';
+
+interface PercentageBarWithoutNumberProps { 
+  color: string;
+  percentage: number;
+  marginBottom?: string;
+}
+
+export const PercentageBarWithoutNumber = ({ color, percentage, marginBottom }: PercentageBarWithoutNumberProps) => {
+  return (
+    <Box display="flex" alignItems="center" spacingHorizontal={2} marginBottom={marginBottom}>
+      <Box color={color} flexGrow={1}>
+        <PercentageBar percentage={isNaN(percentage) ? 0 : percentage} height="8px" />
+      </Box>
+    </Box>
+  );
+}

packages/app/src/components/tables/components/shared-styled-components.tsx

@@ -0,0 +1,45 @@
+import { colors } from '@corona-dashboard/common';
+import styled from 'styled-components';
+import { border, BorderProps, compose, display, DisplayProps, minWidth, MinWidthProps, width, WidthProps } from 'styled-system';
+import { fontWeights, mediaQueries, space } from '~/style/theme';
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+`;
+
+export const TableHead = styled.thead`
+  border-bottom: 1px solid ${colors.gray2};
+`;
+
+type RowProps = DisplayProps;
+
+export const Row = styled.tr<RowProps>`
+  flex-wrap: wrap;
+  justify-content: space-between;
+  ${compose(display)};
+`;
+
+type HeaderCellProps = WidthProps & DisplayProps & MinWidthProps;
+
+export const HeaderCell = styled.th<HeaderCellProps>`
+  border-bottom: 1px solid ${colors.gray2};
+  font-weight: ${fontWeights.bold};
+  padding-bottom: ${space[2]};
+  text-align: left;
+  vertical-align: middle;
+  ${compose(display, width, minWidth)};
+
+  @media ${mediaQueries.lg} {
+    padding-right: ${space[2]};
+  }
+`;
+
+type CellProps = MinWidthProps & BorderProps;
+
+export const Cell = styled.td<CellProps>`
+  border-bottom: 1px solid ${colors.gray2};
+  padding-block: ${space[3]};
+  vertical-align: middle;
+  ${compose(border, minWidth)};
+`;

packages/app/src/components/tables/components/wide-percentage-data.tsx

@@ -0,0 +1,48 @@
+import { Box } from '~/components/base';
+import { BehaviorTrend } from '~/domain/behavior/components/behavior-trend';
+import { WidePercentage } from '~/components/tables/components/wide-percentage';
+import { space } from '~/style/theme';
+import { PercentageDataPoint } from '../types';
+import { tableColumnWidths } from '../wide-table';
+import { PercentageBarWithoutNumber } from './percentage-bar-without-number';
+import { Cell } from './shared-styled-components';
+
+interface PercentageDataProps {
+  percentageDataPoints: PercentageDataPoint[];
+}
+
+// Component used to show percentages on wide screens.
+export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => {
+  return (
+    <>
+      {percentageDataPoints.map((percentageDataPoint, index) => (
+        <Cell minWidth={tableColumnWidths.percentageColumn} border="0" key={index}>
+          <WidePercentage
+            value={
+              percentageDataPoint.trendDirection ? (
+                <BehaviorTrend trend={percentageDataPoint.trendDirection} text={`${percentageDataPoint.percentage.value}%`} />
+              ) : (
+                percentageDataPoint.percentage.value
+              )
+            }
+            color={percentageDataPoint.percentage.color}
+            justifyContent="flex-start"
+          />
+        </Cell>
+      ))}
+
+      <Cell minWidth={tableColumnWidths.percentageBarColumn} border="0">
+        <Box display="flex" flexDirection="column">
+          {percentageDataPoints.map((percentageDataPoint, index) => (
+            <PercentageBarWithoutNumber
+              key={index}
+              percentage={typeof percentageDataPoint.percentage.value === 'number' ? percentageDataPoint.percentage.value : parseFloat(percentageDataPoint.percentage.value)}
+              color={percentageDataPoint.percentage.color}
+              marginBottom={index === 0 ? space[2] : undefined}
+            />
+          ))}
+        </Box>
+      </Cell>
+    </>
+  );
+};

packages/app/src/components/tables/components/wide-percentage.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Box } from '~/components/base';
+import { InlineText } from '~/components/typography';
+import { fontSizes, lineHeights, space } from '~/style/theme';
+
+interface PercentageWideNumberProps {
+  value: string | React.ReactNode;
+  color: string;
+  justifyContent: string;
+}
+
+export function WidePercentage({ value, color, justifyContent }: PercentageWideNumberProps) {
+  return (
+    <StyledInlineText justifyContent={justifyContent}>
+      <Box minWidth="10px" width="10px" height="10px" backgroundColor={color} borderRadius="50%" mr={2} />
+      <span>{value}</span>
+    </StyledInlineText>
+  );
+}
+
+interface StyledInlineTextProps {
+  justifyContent: string;
+}
+
+const StyledInlineText = styled(InlineText)<StyledInlineTextProps>`
+  align-items: center;
+  display: flex;
+  font-size: ${fontSizes[2]};
+  justify-content: ${({ justifyContent }) => justifyContent};
+  line-height: ${lineHeights[2]};
+  padding-right: ${space[4]};
+  text-align: left;
+`;