Adding new icons and fixing all icons to be compliant (#4367)

* Adding new icons and fixing all icons to be compiant * PR feedback (cherry picked from commit 3b3ee5b)
minvws · Aug 24, 2022 · 85d601d · 85d601d
1 parent 8a401ca
commit 85d601d
Show file tree

Hide file tree

Showing 282 changed files with 358 additions and 927 deletions.
diff --git a/packages/app/src/components/anchor-tile.tsx b/packages/app/src/components/anchor-tile.tsx
@@ -6,6 +6,7 @@ import { Anchor, Heading } from '~/components/typography';
 import { asResponsiveArray } from '~/style/utils';
 import { Link } from '~/utils/link';
 import { ExternalLink } from './external-link';
+
 interface AnchorTileProps {
   title: string;
   href: string;

diff --git a/packages/app/src/components/arrow-icon.tsx b/packages/app/src/components/arrow-icon.tsx
@@ -1,4 +1,4 @@
-import { Arrow, Chevron } from '@corona-dashboard/icons';
+import { Arrow, ChevronRight } from '@corona-dashboard/icons';
 import styled from 'styled-components';
 
 export const ArrowIconRight = styled(Arrow)`
@@ -9,8 +9,8 @@ export const ArrowIconLeft = styled(Arrow)`
   transform: rotate(90deg);
 `;
 
-export const ArrowIconThinRight = Chevron;
+export const ArrowIconThinRight = ChevronRight;
 
-export const ArrowIconThinLeft = styled(Chevron)`
+export const ArrowIconThinLeft = styled(ChevronRight)`
   transform: scaleX(-1);
 `;
diff --git a/packages/app/src/components/aside/title.tsx b/packages/app/src/components/aside/title.tsx
@@ -1,6 +1,6 @@
 import css from '@styled-system/css';
 import React, { ReactNode } from 'react';
-import { Chevron } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import { Box } from '../base';
 import { Text } from '../typography';
 
@@ -42,7 +42,11 @@ export function AsideTitle(props: TitleProps) {
           >
             {title}
             {showArrow && (
-              <Chevron width={10} height={14} css={css({ color: 'blue' })} />
+              <ChevronRight
+                width={10}
+                height={14}
+                css={css({ color: 'blue' })}
+              />
             )}
           </span>
         </Text>

diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
@@ -1,4 +1,4 @@
-import { Locatie } from '@corona-dashboard/icons';
+import { Location } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
@@ -25,7 +25,7 @@ export function TooltipContent(props: IProps) {
       <TooltipHeader href={link}>
         <Text variant="choroplethTooltipHeader">
           <StyledLocationIcon>
-            <Locatie />
+            <Location />
           </StyledLocationIcon>
           {title}
         </Text>

diff --git a/packages/app/src/components/difference-indicator/sidebar-difference.tsx b/packages/app/src/components/difference-indicator/sidebar-difference.tsx
@@ -1,5 +1,5 @@
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
-import { Gelijk } from '@corona-dashboard/icons';
+import { Dot } from '@corona-dashboard/icons';
 import { Up } from '@corona-dashboard/icons';
 import { Down } from '@corona-dashboard/icons';
 import { Container, IconContainer } from './containers';
@@ -34,7 +34,7 @@ export function SidebarDifference({
   return (
     <Container>
       <IconContainer color="data.neutral">
-        <Gelijk />
+        <Dot />
       </IconContainer>
     </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,6 +1,6 @@
 import css from '@styled-system/css';
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
-import { Down, Gelijk, Up } from '@corona-dashboard/icons';
+import { Down, Dot, Up } from '@corona-dashboard/icons';
 import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Container, IconContainer } from './containers';
@@ -52,7 +52,7 @@ export function TileAverageDifference({
     content = text.zeven_daags_gemiddelde_waarde_gelijk;
 
     containerWithIcon = (
-      <ContainerWithIcon icon={<Gelijk />} color="data.neutral" />
+      <ContainerWithIcon icon={<Dot />} color="data.neutral" />
     );
   }
 

diff --git a/packages/app/src/components/difference-indicator/tile-difference.tsx b/packages/app/src/components/difference-indicator/tile-difference.tsx
@@ -1,6 +1,6 @@
 import css from '@styled-system/css';
 import { DifferenceDecimal, DifferenceInteger } from '@corona-dashboard/common';
-import { Down, Gelijk, Up } from '@corona-dashboard/icons';
+import { Down, Dot, Up } from '@corona-dashboard/icons';
 import { Markdown } from '~/components/markdown';
 import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
@@ -50,7 +50,7 @@ export function TileDifference({
     content = text.waarde_gelijk;
 
     containerWithIcon = (
-      <ContainerWithIcon icon={<Gelijk />} color="data.neutral" />
+      <ContainerWithIcon icon={<Dot />} color="data.neutral" />
     );
   }
 
@@ -64,9 +64,7 @@ export function TileDifference({
       <Markdown
         renderersOverrides={{
           paragraph: 'span',
-          strong: (props) => (
-            <BoldText>{props.children}</BoldText>
-          ),
+          strong: (props) => <BoldText>{props.children}</BoldText>,
         }}
         content={replaceVariablesInText(
           `${content} ${

diff --git a/packages/app/src/components/fullscreen-chart-tile.tsx b/packages/app/src/components/fullscreen-chart-tile.tsx
@@ -79,7 +79,7 @@ export function FullscreenChartTile({
               ref={isFullscreen ? undefined : buttonRef}
               title={label}
               onClick={() => setIsFullscreen((x) => !x)}
-              size={36}
+              size={16}
             >
               {isFullscreen ? <Close /> : <Expand />}
             </IconButton>

diff --git a/packages/app/src/components/layout/app-footer.tsx b/packages/app/src/components/layout/app-footer.tsx
@@ -112,7 +112,7 @@ function Item({
       {isExternal ? (
         <>
           <IconContainer>
-            <External />
+            <External aria-hidden="true" />
           </IconContainer>
           <ExternalLink color="white" href={href} underline="hover">
             {children}
@@ -149,12 +149,12 @@ const ListItem = styled.li<{ isExternal?: boolean }>((x) =>
 const IconContainer = styled.div(
   css({
     position: 'absolute',
-    left: '-10px',
+    left: '-3px',
     top: 0,
 
     svg: {
-      width: 24,
-      height: 24,
+      width: 10,
+      height: 10,
     },
   })
 );
diff --git a/packages/app/src/components/notification-banner.tsx b/packages/app/src/components/notification-banner.tsx
@@ -30,7 +30,7 @@ export function NotificationBanner({
         spacingHorizontal={3}
       >
         <Box display="flex" minWidth="1.6rem">
-          <Warning fill="black" />
+          <Warning />
         </Box>
 
         <Box maxWidth="maxWidthText">

diff --git a/packages/app/src/components/page-information-block/components/articles.tsx b/packages/app/src/components/page-information-block/components/articles.tsx
@@ -1,7 +1,7 @@
 import css from '@styled-system/css';
 import { Fragment } from 'react';
 import styled from 'styled-components';
-import { Chevron } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import { ArticleSummary } from '~/components/article-teaser';
 import { Box } from '~/components/base';
 import { SanityImage } from '~/components/cms/sanity-image';
@@ -68,7 +68,7 @@ function ArticleItem({ slug, cover, title }: ArticleItemProps) {
                     })}
                   >
                     {word}
-                    <Chevron />
+                    <ChevronRight />
                   </InlineText>
                 ) : (
                   <InlineText>{`${word} `}</InlineText>

diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx
@@ -1,13 +1,13 @@
 import { colors } from '@corona-dashboard/common';
 import {
-  Chevron,
+  ChevronRight,
   Clock,
   Database,
   MeerInformatie,
 } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import { Fragment } from 'react';
-import styled from 'styled-components'
+import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { ExternalLink } from '~/components/external-link';
 import { Anchor, InlineText, Text } from '~/components/typography';
@@ -236,7 +236,7 @@ function MetadataReference({ icon, referenceLink }: metadataReferenceProps) {
                   })}
                 >
                   {word}&nbsp;
-                  <Chevron width={10} height={10} />
+                  <ChevronRight width={10} height={10} />
                 </span>
               ) : (
                 <span>{`${word} `}</span>

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
@@ -1,5 +1,5 @@
 import {
-  ChevronLarge,
+  ChevronRight,
   External as ExternalIcon,
 } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
@@ -44,7 +44,7 @@ export function PageLinks({ links }: pageLinksProps) {
             ) : (
               <Link href={link.href} passHref>
                 <Anchor underline="hover" ariaLabel={link.title}>
-                  <TitleWithIcon title={link.title} icon={<ChevronLarge />} />
+                  <TitleWithIcon title={link.title} icon={<ChevronRight />} />
                 </Anchor>
               </Link>
             )}
@@ -94,12 +94,12 @@ const ListItem = styled.li(
 const IconContainer = styled.span(
   css({
     position: 'absolute',
-    right: -20,
+    right: -13,
     top: 0,
 
     svg: {
-      width: 24,
-      height: 24,
+      width: 11,
+      height: 11,
     },
   })
 );
diff --git a/packages/app/src/components/pie-chart.tsx b/packages/app/src/components/pie-chart.tsx
@@ -1,4 +1,4 @@
-import { Chevron } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import { Group } from '@visx/group';
 import Pie from '@visx/shape/lib/shapes/Pie';
@@ -282,7 +282,7 @@ export function PieChart<T>({
               link && !isEmpty(link.text) && (
                 <LinkWithIcon
                   href={link.href}
-                  icon={<Chevron />}
+                  icon={<ChevronRight />}
                   iconPlacement="right"
                 >
                   {link.text}

diff --git a/packages/app/src/components/search-input.tsx b/packages/app/src/components/search-input.tsx
@@ -2,7 +2,7 @@ import css from '@styled-system/css';
 import { useRef } from 'react';
 import styled from 'styled-components';
 import { Close } from '@corona-dashboard/icons';
-import { Search } from '@corona-dashboard/icons';
+import { SearchIcon } from '@corona-dashboard/icons';
 import { Box } from '~/components/base';
 import { VisuallyHidden } from '~/components/visually-hidden';
 import { useIntl } from '~/intl';
@@ -26,7 +26,7 @@ export function SearchInput({
   return (
     <Box position="relative" width="15rem">
       <IconContainer align="left">
-        <Search />
+        <SearchIcon />
       </IconContainer>
 
       {value.length > 0 && (

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
@@ -1,4 +1,4 @@
-import { Chevron } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import { MouseEvent, TouchEvent } from 'react';
 import { isDefined } from 'ts-is-present';
 import { Box } from '~/components/base';
@@ -118,7 +118,7 @@ function ChevronButton({
       style={{ transform: rotate ? 'rotate(180deg)' : undefined }}
     >
       <IconButton title={title} onClick={onClick} size={13} padding={2}>
-        <Chevron aria-hidden={true} />
+        <ChevronRight aria-hidden={true} />
       </IconButton>
     </Box>
   );

diff --git a/packages/app/src/components/warning-tile.tsx b/packages/app/src/components/warning-tile.tsx
@@ -87,7 +87,6 @@ const IconWrapper = styled(Box)(
     svg: {
       borderRadius: 1,
       display: 'block',
-      fill: 'black',
       width: 24,
       height: 24,
       mx: '10px',

diff --git a/packages/app/src/domain/behavior/behavior-table-tile.tsx b/packages/app/src/domain/behavior/behavior-table-tile.tsx
@@ -3,7 +3,7 @@ import {
   NlBehaviorValue,
   VrBehaviorValue,
 } from '@corona-dashboard/common';
-import { Chevron } from '@corona-dashboard/icons';
+import { ChevronRight } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import React, { useMemo } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -225,7 +225,7 @@ function DescriptionWithIcon({
               <InlineText css={css({ display: 'flex', position: 'relative' })}>
                 {word}
                 <Box position="absolute" right={-14} top={0}>
-                  <Chevron width="7px" />
+                  <ChevronRight width="7px" />
                 </Box>
               </InlineText>
             ) : (

diff --git a/packages/app/src/domain/behavior/components/behavior-icon.tsx b/packages/app/src/domain/behavior/components/behavior-icon.tsx
@@ -1,33 +1,32 @@
 import {
-  AvoidCrowds,
-  Curfew,
+  BasisregelsDrukte,
+  Avondklok,
   FrisseLucht,
-  KeepDistance,
+  BasisregelsAfstand,
   MaxVisitors,
-  SneezeCoughElbow,
-  SymptomsGetTested,
-  SymptomsStayHome,
-  WashHands,
-  WearMaskPublicIndoors,
-  WearMaskPublicTransport,
-  WorkFromHome,
+  BasisregelsElleboog,
+  BasisregelsTesten,
+  Klachten,
+  BasisregelsHandenwassen,
+  BasisregelsMondkapje,
+  OnderwijsEnKinderopvangOpAfstand,
 } from '@corona-dashboard/icons';
 import { BehaviorIdentifier } from '../logic/behavior-types';
 
-const icons: Record<BehaviorIdentifier, typeof Curfew> = {
-  curfew: Curfew,
-  wash_hands: WashHands,
-  keep_distance: KeepDistance,
-  work_from_home: WorkFromHome,
-  avoid_crowds: AvoidCrowds,
-  symptoms_stay_home_if_mandatory: SymptomsStayHome,
-  symptoms_get_tested: SymptomsGetTested,
-  wear_mask_public_indoors: WearMaskPublicIndoors,
-  wear_mask_public_transport: WearMaskPublicTransport,
-  sneeze_cough_elbow: SneezeCoughElbow,
+const icons: Record<BehaviorIdentifier, typeof Avondklok> = {
+  curfew: Avondklok,
+  wash_hands: BasisregelsHandenwassen,
+  keep_distance: BasisregelsAfstand,
+  work_from_home: OnderwijsEnKinderopvangOpAfstand,
+  avoid_crowds: BasisregelsDrukte,
+  symptoms_stay_home_if_mandatory: Klachten,
+  symptoms_get_tested: BasisregelsTesten,
+  wear_mask_public_indoors: BasisregelsMondkapje,
+  wear_mask_public_transport: BasisregelsMondkapje,
+  sneeze_cough_elbow: BasisregelsElleboog,
   max_visitors: MaxVisitors,
   ventilate_home: FrisseLucht,
-  selftest_visit: SymptomsGetTested,
+  selftest_visit: BasisregelsTesten,
 };
 
 interface BehaviorIconProps {

diff --git a/packages/app/src/domain/behavior/components/behavior-trend.tsx b/packages/app/src/domain/behavior/components/behavior-trend.tsx
@@ -1,5 +1,5 @@
 import { colors } from '@corona-dashboard/common';
-import { Down, Gelijk, Up } from '@corona-dashboard/icons';
+import { Down, Dot, Up } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
@@ -46,7 +46,7 @@ export function BehaviorTrend({ trend, color, text }: BehaviorTrendProps) {
   if (trend === 'equal') {
     return (
       <Trend color={colors.data.neutral}>
-        <Gelijk />
+        <Dot />
         {text.basisregels.trend_gelijk}
       </Trend>
     );