From feea593d8a64d446ddc18297299c142f9596f50d Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Tue, 2 Feb 2021 17:46:14 +0000
Subject: [PATCH] feat(link): text decoration and focus state

---
 src/components/footer.js |  3 ++-
 src/components/link.js   | 24 +++++++++++++++++++-----
 src/pages/contact.js     |  5 +++--
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/footer.js b/src/components/footer.js
index 9b685ee..2f62229 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -40,7 +40,7 @@ export default function Footer() {
               <Icon color="dark" size="lg">
                 <Phone />
               </Icon>
-              <Link color="dark" size="lg" to="tel:+447539051512">
+              <Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
                 07539 051512
               </Link>
             </IconWithContent>
@@ -54,6 +54,7 @@ export default function Footer() {
                 color="dark"
                 size="md"
                 to="mailto:quotations@abcprojectdesign.com"
+                noDecoration
               >
                 quotations@abcprojectdesign.com
               </Link>
diff --git a/src/components/link.js b/src/components/link.js
index 819b89c..1c7a934 100644
--- a/src/components/link.js
+++ b/src/components/link.js
@@ -9,12 +9,26 @@ const StyledLink = styled.a`
     css`
       font-size: var(--font-size-${props.size});
     `}
+  color: var(--color-dark);
   ${props =>
-    props.color &&
-    css`
-      color: var(--theme-color-${props.color});
-    `}
-  text-decoration: none;
+    props.noDecoration
+      ? css`
+          text-decoration: none;
+        `
+      : css`
+          text-decoration-color: var(--color-primary);
+          text-decoration-thickness: 2px;
+          text-underline-offset: 3px;
+        `}
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px var(--color-dark);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 `;
 
 export default function Link({ children, to, ...other }) {
diff --git a/src/pages/contact.js b/src/pages/contact.js
index d5ea4e0..b8a6737 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -110,7 +110,7 @@ export default function Index({ data }) {
               <Icon color="dark" size="lg">
                 <Phone />
               </Icon>
-              <Link color="dark" size="lg" to="tel:+447539051512">
+              <Link color="dark" size="lg" to="tel:+447539051512" noDecoration>
                 07539 051512
               </Link>
             </IconWithContent>
@@ -118,7 +118,7 @@ export default function Index({ data }) {
               <Icon color="dark" size="lg">
                 <Phone />
               </Icon>
-              <Link color="dark" size="lg" to="tel:+441708938455">
+              <Link color="dark" size="lg" to="tel:+441708938455" noDecoration>
                 01708 938455
               </Link>
             </IconWithContent>
@@ -130,6 +130,7 @@ export default function Index({ data }) {
                 color="dark"
                 size="md"
                 to="mailto:quotations@abcprojectdesign.com"
+                noDecoration
               >
                 quotations@abcprojectdesign.com
               </Link>