Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(link): added legal link #2569

Merged
merged 1 commit into from
Feb 18, 2025
Merged

feat(link): added legal link #2569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tough-games-work.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ebay/skin": minor
---

feat(link): added legal link
4 changes: 2 additions & 2 deletions dist/global/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
28 changes: 25 additions & 3 deletions dist/link/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand All @@ -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)
);
}
3 changes: 3 additions & 0 deletions dist/tokens/evo-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 3 additions & 0 deletions dist/tokens/evo-light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
114 changes: 92 additions & 22 deletions src/routes/_index/component/link/+page.marko
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/sass/global/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}

Expand Down
32 changes: 29 additions & 3 deletions src/sass/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}

Expand Down Expand Up @@ -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(
Expand All @@ -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
);
}
}
7 changes: 7 additions & 0 deletions src/sass/link/stories/link.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
3 changes: 3 additions & 0 deletions src/tokens/evo-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 3 additions & 0 deletions src/tokens/evo-light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down