feature/COR-1873-markup-links

packages/app/src/components/metadata.tsx

@@ -6,6 +6,8 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Box } from './base';
 import { InlineText, Text } from './typography';
 import { Markdown } from '~/components/markdown';
+import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
+import React from 'react';
 
 type source = {
   text: string;
@@ -59,6 +61,7 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m
           {`${dateString} - ${commonTexts.common.metadata.source}: `}
           <ExternalLink ariaLabel={source.aria_text} href={source.href}>
             {source.text}
+            <ExternalLinkIcon width={space[3]} height={space[2]} />
           </ExternalLink>
         </Text>
       )}

packages/app/src/components/page-information-block/components/metadata.tsx

@@ -1,14 +1,15 @@
 import { colors } from '@corona-dashboard/common';
-import { ChevronRight, Clock, Database, MeerInformatie } from '@corona-dashboard/icons';
+import { ChevronRight, Clock, Database, External as ExternalLinkIcon, MeerInformatie } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { ExternalLink } from '~/components/external-link';
 import { Anchor, InlineText, Text } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Link } from '~/utils/link';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+import { space } from '~/style/theme';
 
 interface Datasource {
   href: string;
@@ -112,18 +113,11 @@ interface MetadataItemProps {
 }
 
 function MetadataItem({ icon, label, items, referenceLink, accessibilityText, accessibilitySubject }: MetadataItemProps) {
-  const { commonTexts } = useIntl();
-
   return (
-    <Box display="flex" alignItems="flex-start" color="gray7">
+    <Box display="flex" alignItems="flex-start" color={colors.gray7}>
       <Icon>{icon}</Icon>
 
       <Text variant="label1">
-        {referenceLink && !items && (
-          <Link href={referenceLink} passHref>
-            <a>{commonTexts.informatie_header.meer_informatie_link}</a>
-          </Link>
-        )}
         {items && referenceLink && (
           <>
             {`${label}: `}
@@ -146,6 +140,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac
                 {item.href && (
                   <ExternalLink
                     href={item.href}
+                    underline="hover"
                     ariaLabel={
                       accessibilityText && accessibilitySubject
                         ? replaceVariablesInText(accessibilityText, {
@@ -156,6 +151,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac
                     }
                   >
                     {item.text}
+                    <ExternalLinkIcon width={space[3]} height={space[2]} />
                   </ExternalLink>
                 )}
                 {!item.href && item.text}

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

@@ -2,21 +2,21 @@ 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 { PercentageDataPoint, TableColumnWidths } from '../types';
 import { PercentageBarWithoutNumber } from './percentage-bar-without-number';
 import { Cell } from './shared-styled-components';
 
 interface PercentageDataProps {
   percentageDataPoints: PercentageDataPoint[];
+  columnWidths: TableColumnWidths;
 }
 
 // Component used to show percentages on wide screens.
-export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => {
+export const PercentageData = ({ percentageDataPoints, columnWidths }: PercentageDataProps) => {
   return (
     <>
       {percentageDataPoints.map((percentageDataPoint, index) => (
-        <Cell minWidth={tableColumnWidths.percentageColumn} border="0" key={index}>
+        <Cell minWidth={columnWidths.percentageColumn} border="0" key={index}>
           <WidePercentage
             value={
               percentageDataPoint.trendDirection ? (
@@ -31,7 +31,7 @@ export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) =>
         </Cell>
       ))}
 
-      <Cell minWidth={tableColumnWidths.percentageBarColumn} border="0">
+      <Cell minWidth={columnWidths.percentageBarColumn} border="0">
         <Box display="flex" flexDirection="column">
           {percentageDataPoints.map((percentageDataPoint, index) => (
             // In some cases, the percentage value is a string so it needs to be parsed for the progress bar to be filled properly.

packages/app/src/components/tables/types.ts

@@ -3,6 +3,12 @@ import { BehaviorTrendType } from '~/domain/behavior/logic/behavior-types';
 
 type TrendDirection = BehaviorTrendType | null;
 
+export type TableColumnWidths = {
+  labelColumn: string;
+  percentageColumn: string;
+  percentageBarColumn: string;
+};
+
 export type PercentageDataPoint = {
   title: string;
   trendDirection?: TrendDirection;
@@ -34,6 +40,7 @@ export interface TableData extends BaseTableData {
 export type BaseCoverageTable = BaseTableData;
 
 export interface CommonTableProps {
+  tableColumnWidths?: TableColumnWidths;
   tableData: SingleCoverageTableData[] | TableData[];
   percentageData: PercentageDataPoint[][];
 }

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

@@ -5,18 +5,18 @@ import { PercentageData } from './components/wide-percentage-data';
 import { Cell, HeaderCell, Table, TableHead } from './components/shared-styled-components';
 import { CommonTableProps } from './types';
 
-export const tableColumnWidths = {
+interface WideTableProps extends CommonTableProps {
+  headerText: { [key: string]: string };
+}
+
+const defaultColumnWidths = {
   labelColumn: '30%',
   percentageColumn: '20%',
   percentageBarColumn: '30%',
 };
 
-interface WideTableProps extends CommonTableProps {
-  headerText: { [key: string]: string };
-}
-
 // Component shown for tables on wide screens.
-export const WideTable = ({ tableData, headerText, percentageData }: WideTableProps) => {
+export const WideTable = ({ tableData, headerText, tableColumnWidths = defaultColumnWidths, percentageData }: WideTableProps) => {
   return (
     <Box overflow="auto">
       <Table>
@@ -47,7 +47,7 @@ export const WideTable = ({ tableData, headerText, percentageData }: WideTablePr
               <Cell minWidth={tableColumnWidths.labelColumn} border="0">
                 {item.firstColumnLabel}
               </Cell>
-              <PercentageData percentageDataPoints={percentageData[tableDataIndex]} key={`wide-${item.id}-${tableDataIndex}`} />
+              <PercentageData columnWidths={tableColumnWidths} percentageDataPoints={percentageData[tableDataIndex]} key={`wide-${item.id}-${tableDataIndex}`} />
             </Row>
           ))}
         </tbody>

packages/app/src/domain/behavior/behavior-table-tile.tsx

@@ -47,6 +47,11 @@ export const BehaviorTableTile = ({ title, description, value, annotation, setCu
           }}
           tableData={behaviorsTableData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '35%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable tableData={behaviorsTableData} percentageData={percentageData} headerText={text.basisregels.header_basisregel} />

packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx

@@ -6,6 +6,7 @@ import { Anchor } from '~/components/typography';
 import { fontWeights, mediaQueries, space } from '~/style/theme';
 import { BehaviorIdentifier } from '../logic/behavior-types';
 import { BehaviorIcon } from './behavior-icon';
+import { ChevronRight } from '@corona-dashboard/icons';
 
 type ScrollRef = { current: HTMLDivElement | null };
 
@@ -33,8 +34,9 @@ export const BehaviorIconWithLabel = ({ id, description, onClickConfig }: Behavi
       </Box>
 
       <BehaviorAnchor as="button" underline="hover" color={colors.black} onClick={() => anchorButtonClickHandler(id, onClickConfig.scrollRef)}>
-        <Box as="span" display="flex" alignItems="center" textAlign="left" flexWrap="wrap">
+        <Box as="span" display="flex" alignItems="center" textAlign="left" flexWrap="wrap" gridColumnGap={space[1]}>
           {description}
+          <ChevronRight width={space[2]} height={space[2]} />
         </Box>
       </BehaviorAnchor>
     </Box>

packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx

@@ -51,6 +51,11 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata
           }}
           tableData={sortedData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '10%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />

packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx

@@ -51,6 +51,11 @@ export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metad
           }}
           tableData={sortedData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '10%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />