feat: Create primary and inline link variants

visualize-admin · Oct 14, 2021 · 9337c66 · 9337c66
1 parent 85e6ed3
commit 9337c66
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 50 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -52,26 +52,11 @@ export const ChartFootnotes = ({
             <>
               <Box sx={{ display: "inline", mx: 1 }}>·</Box>
               <Link
+                variant="inline"
+                sx={{ mt: 2 }}
                 href={shareUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                sx={{
-                  display: "inline",
-                  textDecoration: "none",
-                  color: "primary",
-                  textAlign: "left",
-                  fontFamily: "body",
-                  lineHeight: [1, 2, 2],
-                  fontWeight: "regular",
-                  fontSize: [1, 2, 2],
-                  border: "none",
-                  cursor: "pointer",
-                  mt: 2,
-                  p: 0,
-                  "&:hover": {
-                    textDecoration: "underline",
-                  },
-                }}
               >
                 <Trans id="metadata.link.created.with.visualize">
                   Created with visualize.admin.ch

diff --git a/app/components/data-download.tsx b/app/components/data-download.tsx
@@ -1,8 +1,8 @@
 import { Trans } from "@lingui/macro";
-import { Box, Button, Link } from "theme-ui";
 import { csvFormat } from "d3";
 import { saveAs } from "file-saver";
 import { memo, ReactNode, useMemo } from "react";
+import { Box, Button, Link } from "theme-ui";
 import { ChartConfig, ChartFields } from "../configurator";
 import { Observation } from "../domain/data";
 import {
@@ -58,23 +58,8 @@ export const DataDownload = memo(
             <>
               <Box sx={{ display: "inline", mx: 1 }}>·</Box>
               <Link
-                sx={{
-                  display: "inline",
-                  textDecoration: "none",
-                  color: "primary",
-                  textAlign: "left",
-                  fontFamily: "body",
-                  lineHeight: [1, 2, 2],
-                  fontWeight: "regular",
-                  fontSize: [1, 2, 2],
-                  border: "none",
-                  cursor: "pointer",
-                  mt: 2,
-                  p: 0,
-                  "&:hover": {
-                    textDecoration: "underline",
-                  },
-                }}
+                variant="inline"
+                sx={{ mt: 2 }}
                 href={observations.sparqlEditorUrl}
                 target="_blank"
                 rel="noopener noreferrer"

diff --git a/app/configurator/components/dataset-metadata.tsx b/app/configurator/components/dataset-metadata.tsx
@@ -132,19 +132,7 @@ const DatasetMetadataLink = ({
   href: string;
   label: string;
 }) => (
-  <Link
-    sx={{
-      color: "primary",
-      textDecoration: "none",
-      wordBreak: "break-word",
-      "&:hover": {
-        textDecoration: "underline",
-      },
-    }}
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
+  <Link variant="primary" href={href} target="_blank" rel="noopener noreferrer">
     {label}
   </Link>
 );
diff --git a/app/themes/federal.ts b/app/themes/federal.ts
@@ -70,8 +70,7 @@ export const theme: Theme = {
     warningLight: "#fffab2",
   },
   fonts: {
-    body:
-      "FrutigerNeue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
+    body: "FrutigerNeue, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
     monospace: "Menlo, monospace",
   },
   fontSizes: [
@@ -362,6 +361,31 @@ export const theme: Theme = {
       },
     },
   },
+  links: {
+    primary: {
+      color: "primary",
+      textDecoration: "none",
+      wordBreak: "break-word",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    inline: {
+      display: "inline",
+      textDecoration: "none",
+      color: "primary",
+      textAlign: "left",
+      fontFamily: "body",
+      lineHeight: [1, 2, 2],
+      fontWeight: "regular",
+      fontSize: [1, 2, 2],
+      border: "none",
+      cursor: "pointer",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+  },
 };
 
 /**