Create consistent links on all pages

packages/app/src/components/anchor-tile.tsx

@@ -31,26 +31,34 @@ export function AnchorTile({
       </Content>
 
       <LinkContainer>
-        {!external && (
+        {external ? (
+          <ExternalLink href={href}>
+            <ExternalLinkIconContainer>
+              <IconContainer>
+                <ExternalLinkIcon />
+              </IconContainer>
+              {label}
+            </ExternalLinkIconContainer>
+          </ExternalLink>
+        ) : (
           <Link href={href} passHref>
             <StyledAnchor>
               <span>{label}</span>
             </StyledAnchor>
           </Link>
         )}
-        {external && (
-          <>
-            <IconContainer>
-              <ExternalLinkIcon />
-            </IconContainer>
-            <ExternalLink href={href}>{label}</ExternalLink>
-          </>
-        )}
       </LinkContainer>
     </Container>
   );
 }
 
+const ExternalLinkIconContainer = styled.div(
+  css({
+    display: 'flex',
+    alignItems: 'center',
+  })
+);
+
 const Container = styled.article(
   css({
     display: 'flex',

packages/app/src/components/cms/rich-content.tsx

@@ -38,6 +38,11 @@ import { InlineChoropleth } from './inline-choropleth';
 import { InlineDonutChart } from './inline-donut-chart';
 import { InlineKpi } from './inline-kpi';
 import { InlineTimeSeriesCharts } from './inline-time-series-charts';
+import {
+  ChevronRight,
+  Download,
+  External as ExternalLinkIcon,
+} from '@corona-dashboard/icons';
 
 interface RichContentProps {
   blocks: PortableTextEntry[];
@@ -56,7 +61,11 @@ interface AgeDemographicConfigNode {
   title: string;
   startDate?: string;
   endDate?: string;
-  config: AgeDemographicConfiguration<DataScopeKey, MetricKeys<DataScope>, AccessibilityDefinition['key']>;
+  config: AgeDemographicConfiguration<
+    DataScopeKey,
+    MetricKeys<DataScope>,
+    AccessibilityDefinition['key']
+  >;
 }
 
 interface ChoroplethConfigNode {
@@ -295,8 +304,12 @@ function InlineAttachmentMark(props: {
   if (!props.mark.asset) return <>{props.children}</>;
 
   return (
-    <a download href={getFileSrc(props.mark.asset)}>
-      {props.children}
+    <a
+      css={css({ textDecoration: 'underline' })}
+      download
+      href={getFileSrc(props.mark.asset)}
+    >
+      {props.children} <Download width={15} height={11} />
     </a>
   );
 }
@@ -309,10 +322,20 @@ function InlineLinkMark(props: { children: ReactNode; mark: InlineLink }) {
   if (!mark.href) return <>{children}</>;
 
   return isAbsoluteUrl(mark.href) ? (
-    <ExternalLink href={mark.href}>{children}</ExternalLink>
+    <ExternalLink
+      href={mark.href}
+      width="max-content"
+      display="inline-block"
+      underline
+    >
+      {children}
+      <ExternalLinkIcon width={20} height={11} />
+    </ExternalLink>
   ) : (
     <Link href={mark.href} passHref locale={locale}>
-      <a>{children}</a>
+      <a css={css({ textDecoration: 'underline' })}>
+        {children} <ChevronRight width={10} height={10} />
+      </a>
     </Link>
   );
 }

packages/app/src/components/markdown.tsx

@@ -10,6 +10,10 @@ import { Link } from '~/utils/link';
 import { DisplayOnMatchingQueryCode } from './display-on-matching-query-code';
 import { Message } from './message';
 import { Anchor } from './typography';
+import {
+  ChevronRight,
+  External as ExternalLinkIcon,
+} from '@corona-dashboard/icons';
 
 interface MarkdownProps {
   content: string;
@@ -23,13 +27,17 @@ interface LinkProps {
 const renderers = {
   link: (props: LinkProps) =>
     isAbsoluteUrl(props.href) ? (
-      <ExternalLink href={props.href}>{props.children}</ExternalLink>
+      <ExternalLink href={props.href} display="inline-block">
+        {props.children}
+        <ExternalLinkIcon width={20} height={11} />
+      </ExternalLink>
     ) : (
       <Link href={props.href} passHref>
-        <Anchor underline>{props.children}</Anchor>
+        <Anchor underline>
+          {props.children} <ChevronRight width={10} height={10} />
+        </Anchor>
       </Link>
     ),
-
   /**
    * The code element is hijacked to display context-aware pieces of content.
    * usage:

packages/app/src/components/typography.tsx

@@ -16,6 +16,8 @@ export interface TextProps {
 export interface AnchorProps extends TextProps {
   underline?: boolean | 'hover';
   hoverColor?: TextProps['color'];
+  display?: string;
+  width?: string | number;
 }
 
 export interface HeadingProps extends TextProps {
@@ -24,9 +26,9 @@ export interface HeadingProps extends TextProps {
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5;
 
-function textStyle(x: TextProps & { as?: string }) {
+function textStyle(props: TextProps & { as?: string }) {
   return css({
-    ...(x.as === 'button'
+    ...(props.as === 'button'
       ? {
           m: 0,
           p: 0,
@@ -37,13 +39,15 @@ function textStyle(x: TextProps & { as?: string }) {
         }
       : undefined),
 
-    ...(x.variant ? preset.typography[x.variant] : undefined),
+    ...(props.variant ? preset.typography[props.variant] : undefined),
 
-    ...(x.fontWeight ? { fontWeight: x.fontWeight } : undefined),
-    ...(x.color ? { color: x.color } : undefined),
-    ...(x.textTransform ? { textTransform: x.textTransform } : undefined),
-    ...(x.textAlign ? { textAlign: x.textAlign } : undefined),
-    ...(x.hyphens ? { hyphens: x.hyphens } : undefined),
+    ...(props.fontWeight ? { fontWeight: props.fontWeight } : undefined),
+    ...(props.color ? { color: props.color } : undefined),
+    ...(props.textTransform
+      ? { textTransform: props.textTransform }
+      : undefined),
+    ...(props.textAlign ? { textAlign: props.textAlign } : undefined),
+    ...(props.hyphens ? { hyphens: props.hyphens } : undefined),
   });
 }
 
@@ -55,23 +59,31 @@ export const BoldText = styled.strong<TextProps>(textStyle);
 
 export const Anchor = styled.a<AnchorProps>(
   textStyle,
-  (x) =>
-    x.underline &&
+  (props) =>
+    props.underline &&
     css({
-      textDecoration: x.underline === 'hover' ? 'none' : 'underline',
+      textDecoration: props.underline === 'hover' ? 'none' : 'underline',
       '&:hover, &:focus': { textDecoration: 'underline' },
     }),
-  (x) =>
-    x.hoverColor &&
+  (props) =>
+    props.hoverColor &&
     css({
       '&:hover,&:focus': { color: 'blue' },
-    })
+    }),
+  (props) =>
+    props.display &&
+    css({
+      display: props.display,
+    }),
+  (props) => props.width && css({ width: props.width })
 );
 
-export const Heading = styled.h1.attrs((x: HeadingProps & { as?: string }) => ({
-  as: x.as ?? (`h${x.level}` as const),
-  variant: x.variant ?? (`h${x.level}` as const),
-}))<HeadingProps>(textStyle);
+export const Heading = styled.h1.attrs(
+  (props: HeadingProps & { as?: string }) => ({
+    as: props.as ?? (`h${props.level}` as const),
+    variant: props.variant ?? (`h${props.level}` as const),
+  })
+)<HeadingProps>(textStyle);
 
 export function styledTextVariant(variant: string, as?: string) {
   return styled.p.attrs(() => ({

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

@@ -6,6 +6,7 @@ import {
   TwoKpiSection,
   Metadata,
   Message,
+  MetadataProps,
 } from '~/components';
 import { Box } from '~/components/base';
 
@@ -24,31 +25,23 @@ type TextTypes = {
 
 interface VaccinationsShotKpiSectionProps {
   text: TextTypes;
-  dateUnix: number;
   value: number;
+  metadata: MetadataProps;
 }
 
 export function VaccinationsShotKpiSection({
   text,
-  dateUnix,
   value,
+  metadata,
 }: VaccinationsShotKpiSectionProps) {
   const { formatNumber } = useIntl();
-
   return (
     <TwoKpiSection hasBorder hasPadding>
       <KpiTile title={text.title} hasNoBorder>
         <KpiValue text={formatNumber(value)} />
         <Markdown content={text.description} />
         {text.warning && <Message variant="warning">{text.warning}</Message>}
-        <Metadata
-          date={dateUnix}
-          datumsText={text.datums}
-          source={{
-            href: text.sources.href ? text.sources.href : '',
-            text: text.sources.text,
-          }}
-        />
+        <Metadata {...metadata} isTileFooter />
       </KpiTile>
       <Box />
     </TwoKpiSection>

packages/app/src/pages/landelijk/vaccinaties.tsx

@@ -377,10 +377,18 @@ const VaccinationPage = (props: StaticProps<typeof getStaticProps>) => {
 
               <VaccinationsShotKpiSection
                 text={textNl.repeating_shot_kpi}
-                dateUnix={repeatingShotAdministeredLastValue.date_unix}
                 value={
                   repeatingShotAdministeredLastValue.ggd_administered_total
                 }
+                metadata={{
+                  datumsText: textNl.repeating_shot_kpi.datums,
+                  date: repeatingShotAdministeredLastValue.date_unix,
+                  source: {
+                    href: textNl.repeating_shot_kpi.sources.href,
+                    text: textNl.repeating_shot_kpi.sources.text,
+                  }
+
+                }}
               />
 
               <VaccinationsOverTimeTile