feat(link): added legal link (#2569)

eBay · Feb 18, 2025 · 2acf205 · 2acf205
1 parent 097513e
commit 2acf205
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 32 deletions.
diff --git a/.changeset/tough-games-work.md b/.changeset/tough-games-work.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(link): added legal link
diff --git a/dist/global/global.css b/dist/global/global.css
@@ -21,13 +21,13 @@ legend {
 a {
     color: var(
         --link-foreground-color-default,
-        var(--color-foreground-primary)
+        var(--color-foreground-link-primary)
     );
 }
 a:visited {
     color: var(
         --link-foreground-color-visited,
-        var(--color-foreground-visited)
+        var(--color-foreground-link-visited)
     );
 }
 a:hover {

diff --git a/dist/link/link.css b/dist/link/link.css
@@ -1,13 +1,16 @@
 a.nav-link,
 a.standalone-link {
-    color: var(--nav-link-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --nav-link-foreground-color,
+        var(--color-foreground-link-primary)
+    );
     text-decoration: none;
 }
 a.nav-link:visited,
 a.standalone-link:visited {
     color: var(
         --link-foreground-color-default,
-        var(--color-foreground-primary)
+        var(--color-foreground-link-primary)
     );
 }
 a.nav-link:hover,
@@ -32,7 +35,10 @@ a.standalone-link[aria-disabled="true"] {
 button.fake-link {
     background-color: initial;
     border: 0;
-    color: var(--fake-link-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --fake-link-foreground-color,
+        var(--color-foreground-link-primary)
+    );
     font-family: inherit;
     font-size: inherit;
     padding: 0;
@@ -51,3 +57,19 @@ button.fake-link[disabled] {
         var(--color-foreground-disabled)
     );
 }
+
+a.legal-link,
+button.legal-link {
+    text-decoration: underline;
+}
+a.legal-link,
+a.legal-link:hover,
+a.legal-link:visited,
+button.legal-link,
+button.legal-link:hover,
+button.legal-link:visited {
+    color: var(
+        --legal-link-foreground-color,
+        var(--color-foreground-link-legal)
+    );
+}
diff --git a/dist/tokens/evo-dark.css b/dist/tokens/evo-dark.css
@@ -32,6 +32,9 @@
         --color-foreground-on-confirmation: var(--color-neutral-800);
         --color-foreground-on-information: var(--color-neutral-800);
         --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-link-legal: var(--color-foreground-accent);
+        --color-foreground-link-primary: var(--color-foreground-primary);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
         --color-stroke-on-accent: var(--color-neutral-800);

diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -31,6 +31,9 @@
     --color-foreground-on-confirmation: var(--color-neutral-100);
     --color-foreground-on-information: var(--color-neutral-100);
     --color-foreground-on-strong: var(--color-neutral-100);
+    --color-foreground-link-visited: var(--color-pink-600);
+    --color-foreground-link-legal: var(--color-foreground-accent);
+    --color-foreground-link-primary: var(--color-foreground-primary);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
     --color-stroke-on-accent: var(--color-neutral-100);

diff --git a/src/routes/_index/component/link/+page.marko b/src/routes/_index/component/link/+page.marko
@@ -15,7 +15,7 @@
     <p>
         When nested amongst paragraphs of text, the anchor tag's default underline gives visual affordance that this selection of text is a${" "}
         <em>hyperlink</em>
-        . The color of the link alone would not be sufficient affordance in this context and therefore the underline is required and must not be removed.
+        ${" "}. The color of the link alone would not be sufficient affordance in this context and therefore the underline is required and must not be removed.
     </p>
 
     <div class="demo">
@@ -38,10 +38,22 @@
         </div>
     </div>
 
-    <highlight-code
-        type="html"
-        >
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="https://www.ebay.com">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <a href="https://www.ebay.com">ullamco laboris</a> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="https://www.ebay.com">voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
+    <highlight-code type="html">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod${" "}
+            <a href="https://www.ebay.com">
+                tempor incididunt
+            </a>
+            ${" "}ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation${" "}
+            <a href="https://www.ebay.com">
+                ullamco laboris
+            </a>
+            ${" "}nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in${" "}
+            <a href="https://www.ebay.com">
+                voluptate velit esse cillum
+            </a>
+             dolore eu fugiat nulla pariatur.
+        </p>
     </highlight-code>
     <!--
     <h3>Action Link</h3>
@@ -107,19 +119,77 @@
         </div>
     </div>
 
-    <highlight-code
-        type="html"
-        >
-<nav aria-labelledby="nav-link-heading" role="navigation">
-    <h2 id="nav-link-heading">Navigation</h2>
-    <ul>
-        <li><a class="nav-link" href="#link1">Link 1</a></li>
-        <li><a class="nav-link" href="#link2">Link 2</a></li>
-        <li><a class="nav-link" href="#link3">Link 3</a></li>
-        <li><a class="nav-link" href="#link4">Link 4</a></li>
-        <li><a class="nav-link" href="#link5">Link 5</a></li>
-    </ul>
-</nav>
+    <highlight-code type="html">
+        <nav aria-labelledby="nav-link-heading" role="navigation">
+            <h2 id="nav-link-heading">
+                Navigation
+            </h2>
+            <ul>
+                <li>
+                    <a class="nav-link" href="#link1">
+                        Link 1
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-link" href="#link2">
+                        Link 2
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-link" href="#link3">
+                        Link 3
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-link" href="#link4">
+                        Link 4
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-link" href="#link5">
+                        Link 5
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </highlight-code>
+
+    <h3 id="link-legal">
+        Legal Link
+    </h3>
+    <p>
+        For a link used in legal text (such as Terms & Conditions), use the
+        <span class="highlight">
+            legal-link
+        </span>
+        .
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <div>
+                <a class="legal-link" href="https://www.ebay.com">
+                    Terms & Conditions
+                </a>
+            </div>
+            <div>
+                <button class="fake-link legal-link" type="button">
+                    Privacy Policy
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+        <div>
+            <a class="legal-link" href="https://www.ebay.com">
+                Terms & Conditions
+            </a>
+        </div>
+        <div>
+            <button class="fake-link legal-link" type="button">
+                Privacy Policy
+            </button>
+        </div>
     </highlight-code>
 
     <h3 id="link-fake">
@@ -141,10 +211,10 @@
         </div>
     </div>
 
-    <highlight-code
-        type="html"
-        >
-<button class="fake-link" type="button">Button</button>
+    <highlight-code type="html">
+        <button class="fake-link" type="button">
+            Button
+        </button>
     </highlight-code>
     <!--
     <p>To style a button to look like an <em>action</em> link, use the <span class="highlight">fake-link--action</span> modifier.</p>

diff --git a/src/sass/global/global.scss b/src/sass/global/global.scss
@@ -23,13 +23,13 @@ legend {
 a {
     @include color-token(
         link-foreground-color-default,
-        color-foreground-primary
+        color-foreground-link-primary
     );
 
     &:visited {
         @include color-token(
             link-foreground-color-visited,
-            color-foreground-visited
+            color-foreground-link-visited
         );
     }
 

diff --git a/src/sass/link/link.scss b/src/sass/link/link.scss
@@ -3,14 +3,17 @@
 
 a.nav-link,
 a.standalone-link {
-    @include color-token(nav-link-foreground-color, color-foreground-primary);
+    @include color-token(
+        nav-link-foreground-color,
+        color-foreground-link-primary
+    );
 
     text-decoration: none;
 
     &:visited {
         @include color-token(
             link-foreground-color-default,
-            color-foreground-primary
+            color-foreground-link-primary
         );
     }
 
@@ -41,7 +44,10 @@ button.fake-link {
     font-size: inherit;
     padding: 0;
     text-decoration: underline;
-    @include color-token(fake-link-foreground-color, color-foreground-primary);
+    @include color-token(
+        fake-link-foreground-color,
+        color-foreground-link-primary
+    );
 
     &:hover {
         @include color-token(
@@ -58,3 +64,23 @@ button.fake-link {
         );
     }
 }
+
+a.legal-link,
+button.legal-link {
+    @include color-token(
+        legal-link-foreground-color,
+        color-foreground-link-legal
+    );
+
+    text-decoration: underline;
+
+    // At the moment there is no hover state for legal links.
+    // This is done so that the link does not inherit the hover and visited state defined in global
+    &:hover,
+    &:visited {
+        @include color-token(
+            legal-link-foreground-color,
+            color-foreground-link-legal
+        );
+    }
+}
diff --git a/src/sass/link/stories/link.stories.js b/src/sass/link/stories/link.stories.js
@@ -29,6 +29,13 @@ export const nav = () =>
         Math.random() * Math.floor(1000),
     )}">Link 1</a></li>`;
 
+export const legal = () => `
+<a class="legal-link" href="https://www.ebay.com/urw/ZTE-AXON-7-Mini-32GB-Ion-Gold-Unlocked-Smartphone/product-reviews/230215749?_itm=222972816761">Link</a>
+`;
+
+export const legalFake = () =>
+    `<button class="fake-link legal-link" type="button">Button</button>`;
+
 export const textSpacing = () => `
 <a class="action-link demo-a11y-text-spacing" href="https://www.ebay.com/?r=${Math.floor(
     Math.random() * Math.floor(1000),

diff --git a/src/tokens/evo-dark.css b/src/tokens/evo-dark.css
@@ -32,6 +32,9 @@
         --color-foreground-on-confirmation: var(--color-neutral-800);
         --color-foreground-on-information: var(--color-neutral-800);
         --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-link-legal: var(--color-foreground-accent);
+        --color-foreground-link-primary: var(--color-foreground-primary);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
         --color-stroke-on-accent: var(--color-neutral-800);

diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css
@@ -31,6 +31,9 @@
     --color-foreground-on-confirmation: var(--color-neutral-100);
     --color-foreground-on-information: var(--color-neutral-100);
     --color-foreground-on-strong: var(--color-neutral-100);
+    --color-foreground-link-visited: var(--color-pink-600);
+    --color-foreground-link-legal: var(--color-foreground-accent);
+    --color-foreground-link-primary: var(--color-foreground-primary);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
     --color-stroke-on-accent: var(--color-neutral-100);