fix: resolve review feedback

minvws · Oct 24, 2022 · b7fdc19 · b7fdc19
1 parent 1e545ad
commit b7fdc19
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 33 deletions.
diff --git a/packages/app/src/components/collapsible/collapsible-section.tsx b/packages/app/src/components/collapsible/collapsible-section.tsx
@@ -13,11 +13,11 @@ interface CollapsibleSectionProps extends BoxProps {
   children: ReactNode;
   id?: string;
   hideBorder?: boolean;
-  textColorOverride?: string;
-  borderColorOverride?: string;
+  textColor?: string;
+  borderColor?: string;
 }
 
-export const CollapsibleSection = ({ summary, children, id, hideBorder, textColorOverride = colors.blue8, borderColorOverride = colors.gray2 }: CollapsibleSectionProps) => {
+export const CollapsibleSection = ({ summary, children, id, hideBorder, textColor = colors.blue8, borderColor = colors.gray2 }: CollapsibleSectionProps) => {
   const section = useRef<HTMLElement>(null);
 
   const collapsible = useCollapsible();
@@ -51,9 +51,9 @@ export const CollapsibleSection = ({ summary, children, id, hideBorder, textColo
   }, [toggle, id]);
 
   return (
-    <Box as="section" borderTop={hideBorder ? undefined : '1px solid'} borderTopColor={hideBorder ? undefined : borderColorOverride} id={id} ref={section}>
+    <Box as="section" borderTop={hideBorder ? undefined : '1px solid'} borderTopColor={hideBorder ? undefined : borderColor} id={id} ref={section}>
       {collapsible.button(
-        <Summary textColor={textColorOverride}>
+        <Summary textColor={textColor}>
           <Box width="100%">
             {summary}
             {id && (
@@ -89,15 +89,15 @@ const StyledAnchor = styled(Anchor)(
 interface SummaryProps {
   textColor: string;
 }
-const Summary = styled.button((summaryProps: SummaryPropsType) =>
+const Summary = styled.button((summaryProps: SummaryProps) =>
   css({
     display: 'flex',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
     overflow: 'visible',
     width: '100%',
-    m: 0,
-    p: 3,
+    margin: 0,
+    padding: 3,
     bg: 'transparent',
     border: 'none',
     color: summaryProps.textColor,

diff --git a/packages/app/src/domain/topical/components/indicator-level-description.tsx b/packages/app/src/domain/topical/components/indicator-level-description.tsx
@@ -1,35 +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 } from '~/components/typography';
-import { Box } from '~/components/base';
-import css from '@styled-system/css';
+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) => {
+export const IndicatorLevelDescription = ({ level, label, description }: IndicatorLevelDescriptionProps) => {
   return (
-    <Box
-      display="grid"
-      gridTemplateRows="auto"
-      gridTemplateColumns={`${space[4]} auto`}
-      alignItems="center"
-      mb={4}
-      css={css({ columnGap: 3, rowGap: asResponsiveArray({ _: 3, sm: 1 }) })}
-    >
-      <SeverityIndicatorLevel level={level}>{level}</SeverityIndicatorLevel>
-      <Text fontWeight="bold">{label}</Text>
-      <Text css={css({ gridColumnStart: asResponsiveArray({ _: 1, sm: 2 }), gridColumnEnd: 3 })}>
-        {replaceVariablesInText(description.split('**').join(''), {
-          label: label.toLowerCase(),
-        })}
-      </Text>
-    </Box>
+    <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 fontWeight="bold">{label}</BoldText>
+        <Text css={css({ gridColumnStart: asResponsiveArray({ _: 1, sm: 2 }), gridColumnEnd: 3 })}>
+          {replaceVariablesInText(description.split('**').join(''), {
+            label: label.toLowerCase(),
+          })}
+        </Text>
+      </Box>
+    </li>
   );
 };
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -1,4 +1,6 @@
 import { Box, Spacer } from '~/components/base';
+import styled from 'styled-components';
+import { css } from '@styled-system/css';
 import { Markdown, MaxWidth } from '~/components';
 import { Layout } from '~/domain/layout';
 import {
@@ -94,12 +96,16 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
                 footerText={textNl.thermometer.indicator.footerText}
               />
               <Box my={{ _: 3, md: 4 }} borderBottom={'1px solid'} borderBottomColor={colors.gray3}>
-                <CollapsibleSection summary={textNl.thermometer.collapsible_title} textColorOverride={colors.black} borderColorOverride={colors.gray3}>
+                <CollapsibleSection summary={textNl.thermometer.collapsible_title} textColor={colors.black} borderColor={colors.gray3}>
                   <Box my={3}>
-                    {Object.values(SeverityLevels).map((severityLevel, index) => {
-                      const indicatorTexts = textNl.thermometer[`indicator_for_level_${severityLevel}`];
-                      return <IndicatorLevelDescription key={index} level={severityLevel as SeverityLevel} label={indicatorTexts.label} description={indicatorTexts.description} />;
-                    })}
+                    <OrderedList>
+                      {Object.values(SeverityLevels).map((severityLevel, index) => {
+                        const indicatorTexts = textNl.thermometer[`indicator_for_level_${severityLevel}`];
+                        return (
+                          <IndicatorLevelDescription key={index} level={severityLevel as SeverityLevel} label={indicatorTexts.label} description={indicatorTexts.description} />
+                        );
+                      })}
+                    </OrderedList>
                     <Markdown content={textNl.thermometer.article_reference} />
                   </Box>
                 </CollapsibleSection>
@@ -190,4 +196,12 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
   );
 };
 
+const OrderedList = styled.ol(
+  css({
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+  })
+);
+
 export default Home;