Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 2acf205

Browse files
agligaagliga
authored
feat(link): added legal link (#2569)
1 parent 097513e commit 2acf205

File tree

11 files changed

+174
-32
lines changed

11 files changed

+174
-32
lines changed

‎.changeset/tough-games-work.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
feat(link): added legal link

‎dist/global/global.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ legend {
2121
a {
2222
color: var(
2323
--link-foreground-color-default,
24-
var(--color-foreground-primary)
24+
var(--color-foreground-link-primary)
2525
);
2626
}
2727
a:visited {
2828
color: var(
2929
--link-foreground-color-visited,
30-
var(--color-foreground-visited)
30+
var(--color-foreground-link-visited)
3131
);
3232
}
3333
a:hover {

‎dist/link/link.css‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
a.nav-link,
22
a.standalone-link {
3-
color: var(--nav-link-foreground-color, var(--color-foreground-primary));
3+
color: var(
4+
--nav-link-foreground-color,
5+
var(--color-foreground-link-primary)
6+
);
47
text-decoration: none;
58
}
69
a.nav-link:visited,
710
a.standalone-link:visited {
811
color: var(
912
--link-foreground-color-default,
10-
var(--color-foreground-primary)
13+
var(--color-foreground-link-primary)
1114
);
1215
}
1316
a.nav-link:hover,
@@ -32,7 +35,10 @@ a.standalone-link[aria-disabled="true"] {
3235
button.fake-link {
3336
background-color: initial;
3437
border: 0;
35-
color: var(--fake-link-foreground-color, var(--color-foreground-primary));
38+
color: var(
39+
--fake-link-foreground-color,
40+
var(--color-foreground-link-primary)
41+
);
3642
font-family: inherit;
3743
font-size: inherit;
3844
padding: 0;
@@ -51,3 +57,19 @@ button.fake-link[disabled] {
5157
var(--color-foreground-disabled)
5258
);
5359
}
60+
61+
a.legal-link,
62+
button.legal-link {
63+
text-decoration: underline;
64+
}
65+
a.legal-link,
66+
a.legal-link:hover,
67+
a.legal-link:visited,
68+
button.legal-link,
69+
button.legal-link:hover,
70+
button.legal-link:visited {
71+
color: var(
72+
--legal-link-foreground-color,
73+
var(--color-foreground-link-legal)
74+
);
75+
}

‎dist/tokens/evo-dark.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
--color-foreground-on-confirmation: var(--color-neutral-800);
3333
--color-foreground-on-information: var(--color-neutral-800);
3434
--color-foreground-on-strong: var(--color-neutral-800);
35+
--color-foreground-link-visited: var(--color-pink-400);
36+
--color-foreground-link-legal: var(--color-foreground-accent);
37+
--color-foreground-link-primary: var(--color-foreground-primary);
3538
--color-stroke-default: var(--color-neutral-600);
3639
--color-stroke-accent: var(--color-blue-400);
3740
--color-stroke-on-accent: var(--color-neutral-800);

‎dist/tokens/evo-light.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
--color-foreground-on-confirmation: var(--color-neutral-100);
3232
--color-foreground-on-information: var(--color-neutral-100);
3333
--color-foreground-on-strong: var(--color-neutral-100);
34+
--color-foreground-link-visited: var(--color-pink-600);
35+
--color-foreground-link-legal: var(--color-foreground-accent);
36+
--color-foreground-link-primary: var(--color-foreground-primary);
3437
--color-stroke-default: var(--color-neutral-500);
3538
--color-stroke-accent: var(--color-blue-500);
3639
--color-stroke-on-accent: var(--color-neutral-100);

‎src/routes/_index/component/link/+page.marko‎

Lines changed: 92 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<p>
1616
When nested amongst paragraphs of text, the anchor tag's default underline gives visual affordance that this selection of text is a${" "}
1717
<em>hyperlink</em>
18-
. 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.
18+
${" "}. 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.
1919
</p>
2020

2121
<div class="demo">
@@ -38,10 +38,22 @@
3838
</div>
3939
</div>
4040

41-
<highlight-code
42-
type="html"
43-
>
44-
<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>
41+
<highlight-code type="html">
42+
<p>
43+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod${" "}
44+
<a href="https://www.ebay.com">
45+
tempor incididunt
46+
</a>
47+
${" "}ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation${" "}
48+
<a href="https://www.ebay.com">
49+
ullamco laboris
50+
</a>
51+
${" "}nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in${" "}
52+
<a href="https://www.ebay.com">
53+
voluptate velit esse cillum
54+
</a>
55+
dolore eu fugiat nulla pariatur.
56+
</p>
4557
</highlight-code>
4658
<!--
4759
<h3>Action Link</h3>
@@ -107,19 +119,77 @@
107119
</div>
108120
</div>
109121

110-
<highlight-code
111-
type="html"
112-
>
113-
<nav aria-labelledby="nav-link-heading" role="navigation">
114-
<h2 id="nav-link-heading">Navigation</h2>
115-
<ul>
116-
<li><a class="nav-link" href="#link1">Link 1</a></li>
117-
<li><a class="nav-link" href="#link2">Link 2</a></li>
118-
<li><a class="nav-link" href="#link3">Link 3</a></li>
119-
<li><a class="nav-link" href="#link4">Link 4</a></li>
120-
<li><a class="nav-link" href="#link5">Link 5</a></li>
121-
</ul>
122-
</nav>
122+
<highlight-code type="html">
123+
<nav aria-labelledby="nav-link-heading" role="navigation">
124+
<h2 id="nav-link-heading">
125+
Navigation
126+
</h2>
127+
<ul>
128+
<li>
129+
<a class="nav-link" href="#link1">
130+
Link 1
131+
</a>
132+
</li>
133+
<li>
134+
<a class="nav-link" href="#link2">
135+
Link 2
136+
</a>
137+
</li>
138+
<li>
139+
<a class="nav-link" href="#link3">
140+
Link 3
141+
</a>
142+
</li>
143+
<li>
144+
<a class="nav-link" href="#link4">
145+
Link 4
146+
</a>
147+
</li>
148+
<li>
149+
<a class="nav-link" href="#link5">
150+
Link 5
151+
</a>
152+
</li>
153+
</ul>
154+
</nav>
155+
</highlight-code>
156+
157+
<h3 id="link-legal">
158+
Legal Link
159+
</h3>
160+
<p>
161+
For a link used in legal text (such as Terms & Conditions), use the
162+
<span class="highlight">
163+
legal-link
164+
</span>
165+
.
166+
</p>
167+
<div class="demo">
168+
<div class="demo__inner">
169+
<div>
170+
<a class="legal-link" href="https://www.ebay.com">
171+
Terms & Conditions
172+
</a>
173+
</div>
174+
<div>
175+
<button class="fake-link legal-link" type="button">
176+
Privacy Policy
177+
</button>
178+
</div>
179+
</div>
180+
</div>
181+
182+
<highlight-code type="html">
183+
<div>
184+
<a class="legal-link" href="https://www.ebay.com">
185+
Terms & Conditions
186+
</a>
187+
</div>
188+
<div>
189+
<button class="fake-link legal-link" type="button">
190+
Privacy Policy
191+
</button>
192+
</div>
123193
</highlight-code>
124194

125195
<h3 id="link-fake">
@@ -141,10 +211,10 @@
141211
</div>
142212
</div>
143213

144-
<highlight-code
145-
type="html"
146-
>
147-
<button class="fake-link" type="button">Button</button>
214+
<highlight-code type="html">
215+
<button class="fake-link" type="button">
216+
Button
217+
</button>
148218
</highlight-code>
149219
<!--
150220
<p>To style a button to look like an <em>action</em> link, use the <span class="highlight">fake-link--action</span> modifier.</p>

‎src/sass/global/global.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ legend {
2323
a {
2424
@include color-token(
2525
link-foreground-color-default,
26-
color-foreground-primary
26+
color-foreground-link-primary
2727
);
2828

2929
&:visited {
3030
@include color-token(
3131
link-foreground-color-visited,
32-
color-foreground-visited
32+
color-foreground-link-visited
3333
);
3434
}
3535

‎src/sass/link/link.scss‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33

44
a.nav-link,
55
a.standalone-link {
6-
@include color-token(nav-link-foreground-color, color-foreground-primary);
6+
@include color-token(
7+
nav-link-foreground-color,
8+
color-foreground-link-primary
9+
);
710

811
text-decoration: none;
912

1013
&:visited {
1114
@include color-token(
1215
link-foreground-color-default,
13-
color-foreground-primary
16+
color-foreground-link-primary
1417
);
1518
}
1619

@@ -41,7 +44,10 @@ button.fake-link {
4144
font-size: inherit;
4245
padding: 0;
4346
text-decoration: underline;
44-
@include color-token(fake-link-foreground-color, color-foreground-primary);
47+
@include color-token(
48+
fake-link-foreground-color,
49+
color-foreground-link-primary
50+
);
4551

4652
&:hover {
4753
@include color-token(
@@ -58,3 +64,23 @@ button.fake-link {
5864
);
5965
}
6066
}
67+
68+
a.legal-link,
69+
button.legal-link {
70+
@include color-token(
71+
legal-link-foreground-color,
72+
color-foreground-link-legal
73+
);
74+
75+
text-decoration: underline;
76+
77+
// At the moment there is no hover state for legal links.
78+
// This is done so that the link does not inherit the hover and visited state defined in global
79+
&:hover,
80+
&:visited {
81+
@include color-token(
82+
legal-link-foreground-color,
83+
color-foreground-link-legal
84+
);
85+
}
86+
}

‎src/sass/link/stories/link.stories.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ export const nav = () =>
2929
Math.random() * Math.floor(1000),
3030
)}">Link 1</a></li>`;
3131

32+
export const legal = () => `
33+
<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>
34+
`;
35+
36+
export const legalFake = () =>
37+
`<button class="fake-link legal-link" type="button">Button</button>`;
38+
3239
export const textSpacing = () => `
3340
<a class="action-link demo-a11y-text-spacing" href="https://www.ebay.com/?r=${Math.floor(
3441
Math.random() * Math.floor(1000),

‎src/tokens/evo-dark.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
--color-foreground-on-confirmation: var(--color-neutral-800);
3333
--color-foreground-on-information: var(--color-neutral-800);
3434
--color-foreground-on-strong: var(--color-neutral-800);
35+
--color-foreground-link-visited: var(--color-pink-400);
36+
--color-foreground-link-legal: var(--color-foreground-accent);
37+
--color-foreground-link-primary: var(--color-foreground-primary);
3538
--color-stroke-default: var(--color-neutral-600);
3639
--color-stroke-accent: var(--color-blue-400);
3740
--color-stroke-on-accent: var(--color-neutral-800);

0 commit comments

Comments
 (0)