Semantic adjustments (#4186)

* feat(cor-510): semantic strong tags instead of bold * feat(cor-511): remove heading from links * fix: removed unused import
minvws · Apr 15, 2022 · d3c4aa3 · d3c4aa3
1 parent 55183ca
commit d3c4aa3
Show file tree

Hide file tree

Showing 49 changed files with 184 additions and 227 deletions.
diff --git a/packages/app/src/components/age-demographic/age-demographic-tooltip-content.tsx b/packages/app/src/components/age-demographic/age-demographic-tooltip-content.tsx
@@ -1,7 +1,7 @@
 import type { Color, KeysOfType } from '@corona-dashboard/common';
 import css from '@styled-system/css';
 import styled from 'styled-components';
-import { InlineText, Text } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Box } from '../base';
 import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
@@ -33,25 +33,25 @@ export function AgeDemographicTooltipContent<
   return (
     <>
       <Box px={3} py={2}>
-        <Text variant="h3" fontWeight="bold">
+        <BoldText variant="h3">
           {replaceVariablesInText(text.age_group_range_tooltip, {
             ageGroupRange: formatAgeGroupRange(value.age_group_range),
           })}
-        </Text>
+        </BoldText>
       </Box>
       <Legend>
         <LegendItem color={rightColor}>
-          <InlineText fontWeight="bold">
+          <BoldText>
             {formatValue(value[rightMetricProperty] as unknown as number)}
-          </InlineText>{' '}
+          </BoldText>{' '}
           {replaceVariablesInText(text.right_tooltip, {
             ageGroupRange: formatAgeGroupRange(value.age_group_range),
           })}
         </LegendItem>
         <LegendItem color={leftColor}>
-          <InlineText fontWeight="bold">
+          <BoldText>
             {formatValue(value[leftMetricProperty] as unknown as number)}
-          </InlineText>{' '}
+          </BoldText>{' '}
           {replaceVariablesInText(text.left_tooltip, {
             ageGroupRange: formatAgeGroupRange(value.age_group_range),
           })}

diff --git a/packages/app/src/components/article-teaser.tsx b/packages/app/src/components/article-teaser.tsx
@@ -8,7 +8,7 @@ import { Article, Block, ImageBlock } from '~/types/cms';
 import { Link } from '~/utils/link';
 import { BackgroundImage } from './background-image';
 import { Box } from './base';
-import { Anchor, Heading, InlineText, Text } from './typography';
+import { Anchor, Heading, Text, BoldText } from './typography';
 
 export type ArticleSummary = Pick<
   Article,
@@ -41,10 +41,10 @@ export function ArticleTeaser(props: ArticleTeaserProps) {
         </Heading>
         <Text>{summary}</Text>
 
-        <InlineText aria-hidden="true" fontWeight="bold" color="link">
+        <BoldText aria-hidden="true" color="link">
           {commonTexts.common.read_more}
           <Arrow />
-        </InlineText>
+        </BoldText>
       </StyledArticleTeaser>
     </Link>
   );

diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
@@ -3,7 +3,7 @@ import { css } from '@styled-system/css';
 import { ReactNode } from 'react';
 import { isDefined, isPresent } from 'ts-is-present';
 import { Box } from '~/components/base';
-import { Text } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { getThresholdValue } from '~/utils/get-threshold-value';
 
 interface TooltipSubjectProps {
@@ -30,7 +30,7 @@ export function TooltipSubject({
 
   return (
     <Box spacing={1}>
-      {subject && <Text fontWeight="bold">{subject}</Text>}
+      {subject && <BoldText>{subject}</BoldText>}
       <Box
         m={0}
         spacingHorizontal={2}

diff --git a/packages/app/src/components/content-teaser.tsx b/packages/app/src/components/content-teaser.tsx
@@ -3,7 +3,7 @@ import { BackgroundImage } from '~/components/background-image';
 import { Box } from '~/components/base';
 import { HeadingLinkWithIcon } from '~/components/link-with-icon';
 import { PublicationDate } from '~/components/publication-date';
-import { Heading, Text } from '~/components/typography';
+import { Text } from '~/components/typography';
 import { SiteText } from '~/locale';
 import { ImageBlock } from '~/types/cms';
 import { isAbsoluteUrl } from '~/utils/is-absolute-url';
@@ -61,24 +61,22 @@ export function ContentTeaser({
             category
           )}
         </Text>
-        <Heading level={variant === 'normal' ? 4 : 5} as="h2" color="blue">
-          <HeadingLinkWithIcon
-            href={
-              isAbsoluteUrl(slug)
-                ? slug
-                : isWeeklyHighlight
-                ? `/weekberichten/${slug}`
-                : isArticle
-                ? `/artikelen/${slug}`
-                : slug
-            }
-            icon={<ArrowIconRight />}
-            iconPlacement="right"
-            underline
-          >
-            {title}
-          </HeadingLinkWithIcon>
-        </Heading>
+        <HeadingLinkWithIcon
+          href={
+            isAbsoluteUrl(slug)
+              ? slug
+              : isWeeklyHighlight
+              ? `/weekberichten/${slug}`
+              : isArticle
+              ? `/artikelen/${slug}`
+              : slug
+          }
+          icon={<ArrowIconRight />}
+          iconPlacement="right"
+          underline
+        >
+          {title}
+        </HeadingLinkWithIcon>
       </Box>
     </Box>
   );

diff --git a/packages/app/src/components/data-driven-text/components/difference.tsx b/packages/app/src/components/data-driven-text/components/difference.tsx
@@ -6,7 +6,7 @@ import {
 import { get } from 'lodash';
 import { isDefined } from 'ts-is-present';
 import { InlineDifference } from '~/components/difference-indicator';
-import { InlineText } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { replaceComponentsInText } from '~/utils/replace-components-in-text';
 import { Content, DataFile, DataKeys } from '..';
@@ -35,9 +35,7 @@ export function Difference<T extends DataKeys, K = DataFile<T>>(
           <InlineDifference isAmount={isAmount} value={differenceValue} />
         ),
         differenceAverage: (
-          <InlineText fontWeight="bold">
-            {formatNumber(differenceValue.old_value)}
-          </InlineText>
+          <BoldText>{formatNumber(differenceValue.old_value)}</BoldText>
         ),
         ...(additionalData || {}),
       })}

diff --git a/packages/app/src/components/data-driven-text/components/metric.tsx b/packages/app/src/components/data-driven-text/components/metric.tsx
@@ -2,7 +2,7 @@ import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
 import { get } from 'lodash';
 import { isDefined } from 'ts-is-present';
 import { RelativeDate } from '~/components/relative-date';
-import { InlineText } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { assert } from '~/utils/assert';
 import { replaceComponentsInText } from '~/utils/replace-components-in-text';
@@ -60,9 +60,9 @@ export function Metric<T extends DataKeys, K = DataFile<T>>({
           />
         ),
         propertyValue: (
-          <InlineText fontWeight="bold">
+          <BoldText>
             {`${formatNumber(propertyValue)}${isPercentage ? '%' : ''}`}
-          </InlineText>
+          </BoldText>
         ),
         ...(additionalData || {}),
       })}

diff --git a/packages/app/src/components/difference-indicator/inline-difference.tsx b/packages/app/src/components/difference-indicator/inline-difference.tsx
@@ -1,6 +1,6 @@
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
 import { Down, Up } from '@corona-dashboard/icons';
-import { InlineText } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Container, IconContainer } from './containers';
 
@@ -17,9 +17,7 @@ export function InlineDifference({
   if (value.difference > 0)
     return (
       <Container>
-        <InlineText fontWeight="bold">
-          {isAmount ? text.trend_meer : text.trend_hoger}
-        </InlineText>
+        <BoldText>{isAmount ? text.trend_meer : text.trend_hoger}</BoldText>
         <IconContainer color="red">
           <Up />
         </IconContainer>
@@ -28,9 +26,7 @@ export function InlineDifference({
   if (value.difference < 0)
     return (
       <Container>
-        <InlineText fontWeight="bold">
-          {isAmount ? text.trend_minder : text.trend_lager}
-        </InlineText>
+        <BoldText>{isAmount ? text.trend_minder : text.trend_lager}</BoldText>
         <IconContainer color="data.primary">
           <Down />
         </IconContainer>
@@ -39,7 +35,7 @@ export function InlineDifference({
 
   return (
     <Container>
-      <InlineText fontWeight="bold">{text.trend_gelijk}</InlineText>
+      <BoldText>{text.trend_gelijk}</BoldText>
     </Container>
   );
 }
diff --git a/packages/app/src/components/difference-indicator/tile-average-difference.tsx b/packages/app/src/components/difference-indicator/tile-average-difference.tsx
@@ -1,7 +1,7 @@
+import css from '@styled-system/css';
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
 import { Down, Gelijk, Up } from '@corona-dashboard/icons';
-import { InlineText } from '~/components/typography';
-import css from '@styled-system/css';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Container, IconContainer } from './containers';
 import { Markdown } from '~/components/markdown';
@@ -66,9 +66,7 @@ export function TileAverageDifference({
       <Markdown
         renderersOverrides={{
           paragraph: 'span',
-          strong: (props) => (
-            <InlineText fontWeight="bold">{props.children}</InlineText>
-          ),
+          strong: (props) => <BoldText>{props.children}</BoldText>,
         }}
         content={replaceVariablesInText(content, {
           amount: `${formattedDifference}${isPercentage ? '%' : ''}`,

diff --git a/packages/app/src/components/difference-indicator/tile-difference.tsx b/packages/app/src/components/difference-indicator/tile-difference.tsx
@@ -1,8 +1,8 @@
+import css from '@styled-system/css';
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
 import { Down, Gelijk, Up } from '@corona-dashboard/icons';
-import css from '@styled-system/css';
 import { Markdown } from '~/components/markdown';
-import { InlineText } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Container, IconContainer } from './containers';
@@ -65,7 +65,7 @@ export function TileDifference({
         renderersOverrides={{
           paragraph: 'span',
           strong: (props) => (
-            <InlineText fontWeight="bold">{props.children}</InlineText>
+            <BoldText>{props.children}</BoldText>
           ),
         }}
         content={replaceVariablesInText(

diff --git a/packages/app/src/components/interactive-legend.tsx b/packages/app/src/components/interactive-legend.tsx
@@ -1,7 +1,7 @@
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { isDefined } from 'ts-is-present';
-import { Text } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Box } from './base';
 
@@ -34,9 +34,7 @@ export function InteractiveLegend<T = string>({
 
   return (
     <Box>
-      <Text variant="label1" fontWeight="bold">
-        {helpText}
-      </Text>
+      <BoldText variant="label1">{helpText}</BoldText>
       <Legend>
         <List>
           {selectOptions.map((item) => {

diff --git a/packages/app/src/components/link-with-icon.tsx b/packages/app/src/components/link-with-icon.tsx
@@ -74,9 +74,9 @@ export function HeadingLinkWithIcon({
   const isSingleWord = words.length === 1;
 
   return (
-    <Box as="span" display="inline-block" position="relative">
+    <Box display="inline-block" position="relative">
       <Link href={href} passHref locale={false}>
-        <Anchor color="inherit" hoverColor="blue">
+        <Anchor variant="h5" color="blue" hoverColor="blue">
           <Box
             paddingRight={isSingleWord ? `calc(0.5rem + 18px)` : ''}
             css={css({

diff --git a/packages/app/src/components/notification-banner.tsx b/packages/app/src/components/notification-banner.tsx
@@ -4,7 +4,7 @@ import { Box, Spacer } from '~/components/base';
 import { Markdown } from '~/components/markdown';
 import { MaxWidth } from '~/components/max-width';
 import { useCollapsible } from '~/utils/use-collapsible';
-import { InlineText } from './typography';
+import { InlineText, BoldText } from './typography';
 
 interface NotificationBannerProps {
   title: string;
@@ -52,19 +52,19 @@ export function NotificationBanner({
                   mt: 1,
                 })}
               >
-                <InlineText fontWeight="bold">
+                <BoldText>
                   {titleWithoutLastWord}{' '}
                   <Box display="inline-flex" position="relative">
                     <InlineText>
                       {lastWord}
                       {collapsible.chevron}
                     </InlineText>
                   </Box>
-                </InlineText>
+                </BoldText>
               </Box>
             )
           ) : (
-            <InlineText fontWeight="bold">{title}</InlineText>
+            <BoldText>{title}</BoldText>
           )}
 
           {hasDescription &&

diff --git a/packages/app/src/components/page-information-block/components/page-links.tsx b/packages/app/src/components/page-information-block/components/page-links.tsx
@@ -6,7 +6,7 @@ import css from '@styled-system/css';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { ExternalLink } from '~/components/external-link';
-import { Anchor, InlineText, Text } from '~/components/typography';
+import { Anchor, InlineText, BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { spacingStyle } from '~/style/functions/spacing';
 import { space } from '~/style/theme';
@@ -26,9 +26,7 @@ export function PageLinks({ links }: pageLinksProps) {
 
   return (
     <Box spacing={2}>
-      <Text fontWeight="bold">
-        {commonTexts.informatie_header.handige_links}
-      </Text>
+      <BoldText>{commonTexts.informatie_header.handige_links}</BoldText>
       <OrderedList>
         {links.map((link, index) => (
           <ListItem key={index}>

diff --git a/packages/app/src/components/pie-chart.tsx b/packages/app/src/components/pie-chart.tsx
@@ -9,7 +9,7 @@ import { Box, Spacer } from '~/components/base';
 import { ErrorBoundary } from '~/components/error-boundary';
 import { LinkWithIcon } from '~/components/link-with-icon';
 import { Markdown } from '~/components/markdown';
-import { InlineText } from '~/components/typography';
+import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { WithTooltip } from '~/lib/tooltip';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
@@ -215,14 +215,13 @@ export function PieChart<T>({
 
           <Box spacing={2}>
             {title && (
-              <InlineText
-                fontWeight="bold"
+              <BoldText
                 css={css({
                   display: 'block',
                 })}
               >
                 {title}
-              </InlineText>
+              </BoldText>
             )}
             <Box
               spacing={2}

diff --git a/...s/app/src/components/time-series-chart/components/timeline/components/tooltip-content.tsx b/...s/app/src/components/time-series-chart/components/timeline/components/tooltip-content.tsx
@@ -3,7 +3,7 @@ import { MouseEvent, TouchEvent } from 'react';
 import { isDefined } from 'ts-is-present';
 import { Box } from '~/components/base';
 import { IconButton } from '~/components/icon-button';
-import { Anchor, InlineText, Text } from '~/components/typography';
+import { Anchor, InlineText, Text, BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { useIsTouchDevice } from '~/utils/use-is-touch-device';
 import { TimelineEventConfig } from '../logic';
@@ -80,9 +80,7 @@ export function TimelineTooltipContent({
           </Text>
         )}
 
-        <Text variant="label1" fontWeight="bold">
-          {config.title}
-        </Text>
+        <BoldText variant="label1">{config.title}</BoldText>
         <Text variant="label1">{config.description}</Text>
       </Box>