fix: revert changes, replace with empty div and pass optional props (#…

…4263)

packages/app/src/components/two-kpi-section.tsx

@@ -1,24 +1,37 @@
-import React, { Children } from 'react';
+import React from 'react';
+import css from '@styled-system/css';
 import { asResponsiveArray } from '~/style/utils';
 import { Box } from './base';
 
 interface TwoKpiSectionProps {
   children: React.ReactNode;
   spacing?: number;
+  hasBorder?: boolean;
+  hasPadding?: boolean;
 }
 
-export function TwoKpiSection({ children, spacing }: TwoKpiSectionProps) {
-  const hasOnlyOneChild = Children.toArray(children).length === 1;
-
+export function TwoKpiSection({
+  children,
+  spacing,
+  hasBorder = false,
+  hasPadding = false,
+}: TwoKpiSectionProps) {
   return (
     <Box
-      display="grid"
-      gridTemplateColumns={asResponsiveArray({ _: '1fr', lg: '1fr 1fr' })}
-      gridColumnGap={asResponsiveArray({ _: 0, lg: spacing ?? '10rem' })}
-      gridRowGap={asResponsiveArray({ _: '3rem', lg: spacing ?? '8rem' })}
-      borderTop={hasOnlyOneChild ? 'solid 2px lightGray' : undefined}
-      pt={hasOnlyOneChild ? 4 : undefined}
-      pb={hasOnlyOneChild ? asResponsiveArray({ _: 3, sm: 4 }) : undefined}
+      display="flex"
+      flexDirection={{ _: 'column', lg: 'row' }}
+      css={css({
+        borderTop: hasBorder ? 'solid 2px lightGray' : undefined,
+        pt: hasPadding ? 4 : undefined,
+        pb: hasPadding ? asResponsiveArray({ _: 3, sm: 4 }) : undefined,
+        '& > *': {
+          flex: 1,
+        },
+        '& > *:not(:last-child)': {
+          mr: asResponsiveArray({ _: 0, lg: spacing ?? 5 }),
+          mb: asResponsiveArray({ _: spacing ?? 4, lg: 0 }),
+        },
+      })}
     >
       {children}
     </Box>

packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx

@@ -1,10 +1,13 @@
-import { KpiTile } from '~/components/kpi-tile';
-import { KpiValue } from '~/components/kpi-value';
-import { Markdown } from '~/components/markdown';
-import { TwoKpiSection } from '~/components/two-kpi-section';
 import { useIntl } from '~/intl';
-import { Metadata } from '~/components/metadata';
-import { Message } from '~/components/message';
+import {
+  KpiTile,
+  KpiValue,
+  Markdown,
+  TwoKpiSection,
+  Metadata,
+  Message,
+} from '~/components';
+import { Box } from '~/components/base';
 
 type SourceType = {
   text: string;
@@ -33,7 +36,7 @@ export function VaccinationsShotKpiSection({
   const { formatNumber } = useIntl();
 
   return (
-    <TwoKpiSection>
+    <TwoKpiSection hasBorder hasPadding>
       <KpiTile title={text.title} hasNoBorder>
         <KpiValue text={formatNumber(value)} />
         <Markdown content={text.description} />
@@ -47,6 +50,7 @@ export function VaccinationsShotKpiSection({
           }}
         />
       </KpiTile>
+      <Box />
     </TwoKpiSection>
   );
 }