From f914ff8376dd91c4f6f8ca149e1cb6becb622d88 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 2 Oct 2023 18:45:30 +0200
Subject: refactor(components): rewrite Link component

* rename `external` prop to `isExternal`
* rename `download` prop to `isDownload`
* rewrite CSS to reduce code length and complexity
* move link styles in Sass placeholders to avoid repeats because of WordPress
articles
* move NavLink component to molecules
---
 src/styles/abstracts/_placeholders.scss       |   1 +
 src/styles/abstracts/functions/_encode.scss   |   2 +-
 src/styles/abstracts/placeholders/_links.scss | 102 ++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/abstracts/placeholders/_links.scss

(limited to 'src/styles/abstracts')

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index c978f96..04522d7 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -3,4 +3,5 @@
 @forward "./placeholders/clearfix";
 @forward "./placeholders/headings";
 @forward "./placeholders/layout";
+@forward "./placeholders/links";
 @forward "./placeholders/lists";
diff --git a/src/styles/abstracts/functions/_encode.scss b/src/styles/abstracts/functions/_encode.scss
index 4350185..388d106 100644
--- a/src/styles/abstracts/functions/_encode.scss
+++ b/src/styles/abstracts/functions/_encode.scss
@@ -4,7 +4,7 @@
 /// @param {String} $svg A complete svg (`<svg>...</svg>`).
 /// @return The encoded svg, ready to use for background-image.
 @function encode-svg($svg) {
-  $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23"));
+  $svg-encoding: (('"', "'"), ("<", "%3C"), (">", "%3E"), ("#", "%23"));
 
   @each $char, $encoded in $svg-encoding {
     $svg: fun.str-replace($svg, $char, $encoded);
diff --git a/src/styles/abstracts/placeholders/_links.scss b/src/styles/abstracts/placeholders/_links.scss
new file mode 100644
index 0000000..a230e70
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_links.scss
@@ -0,0 +1,102 @@
+@use "../../abstracts/functions" as fun;
+@use "../../abstracts/variables" as var;
+
+%link {
+  background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
+    0 0 / 100% 201% no-repeat;
+  color: var(--color-primary);
+  text-decoration-thickness: 0.15em;
+  text-underline-offset: 20%;
+  transition:
+    all 0.3s linear 0s,
+    text-decoration 0.18s ease-in-out 0s;
+
+  &:hover {
+    color: var(--color-primary-light);
+    text-decoration-thickness: 0.25em;
+  }
+
+  &:focus {
+    background-position: 0 100%;
+    color: var(--color-fg-inverted);
+  }
+
+  &:active {
+    background-position: 0 0;
+    color: var(--color-primary-dark);
+    text-decoration-thickness: 18%;
+  }
+}
+
+%link-with-icon {
+  &::after {
+    display: inline-block;
+    content: var(--is-lang-hidden, "\0000a0" var(--lang-icon, ""))
+      var(--is-icon-hidden, "\0000a0" var(--link-icon, ""));
+    font-size: var(--font-size-sm);
+  }
+}
+
+%link-with-lang {
+  --lang-icon: "[" attr(hreflang) "]";
+}
+
+%light-download-link {
+  // Prettier is removing spacing between attributes.
+  // prettier-ignore
+  --download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
+
+  &:focus:not(:active) {
+    // Prettier is removing spacing between attributes.
+    // prettier-ignore
+    --download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
+  }
+}
+
+%dark-download-link {
+  // Prettier is removing spacing between attributes.
+  // prettier-ignore
+  --download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
+
+  &:focus:not(:active) {
+    // Prettier is removing spacing between attributes.
+    // prettier-ignore
+    --download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
+  }
+}
+
+%light-external-link {
+  // Prettier is removing spacing between attributes.
+  // prettier-ignore
+  --external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
+
+  &:focus:not(:active) {
+    // Prettier is removing spacing between attributes.
+    // prettier-ignore
+    --external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
+  }
+}
+
+%dark-external-link {
+  // Prettier is removing spacing between attributes.
+  // prettier-ignore
+  --external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
+
+  &:focus:not(:active) {
+    // Prettier is removing spacing between attributes.
+    // prettier-ignore
+    --external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
+  }
+}
+
+%download-link {
+  --link-icon: var(--download-icon);
+}
+
+%external-link {
+  --link-icon: var(--external-icon);
+}
+
+%external-download-link {
+  --link-icon: var(--download-icon) "\0000a0" var(--external-icon);
+}
-- 
cgit v1.2.3