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

Commit 207c518

Browse files
agligaagliga
authored
feat(eek): added large styles (#2480)
1 parent 35aab4b commit 207c518

File tree

5 files changed

+277
-2
lines changed

5 files changed

+277
-2
lines changed

‎.changeset/flat-snakes-sell.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(eek): added large size and fixed regular arrow

‎dist/eek/eek.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
position: relative;
88
}
99

10+
.eek--large {
11+
height: 32px;
12+
}
13+
1014
.eek__container {
1115
align-items: center;
1216
border: 1px solid #000;
@@ -19,6 +23,10 @@
1923
width: 9px;
2024
}
2125

26+
.eek--large .icon--eek-arrow {
27+
width: 12.5px;
28+
}
29+
2230
.eek__arrow {
2331
overflow: hidden;
2432
width: 17px;
@@ -105,6 +113,10 @@
105113
-0.5px -0.5px 0 #000;
106114
}
107115

116+
.eek--large .eek__rating {
117+
font-size: 24px;
118+
}
119+
108120
.eek__rating-range {
109121
align-items: center;
110122
background-color: #fff;
@@ -116,13 +128,28 @@
116128
padding: 0 1px;
117129
}
118130

131+
.eek--large .eek__rating-range {
132+
height: 28px;
133+
}
134+
119135
.eek__rating-range > .icon--eek-range-arrow {
120136
height: 6px;
121137
width: 5px;
122138
}
123139

140+
.eek--large .eek__rating-range > .icon--eek-range-arrow {
141+
height: 7px;
142+
width: 6px;
143+
}
144+
124145
.eek__rating-range > span {
125146
font-size: 8px;
147+
height: 8px;
148+
}
149+
150+
.eek--large .eek__rating-range > span {
151+
font-size: 10px;
152+
height: 10px;
126153
}
127154
@media not all and (-webkit-min-device-pixel-ratio: 0),
128155
not all and (min-resolution: 0.001dpcm) {
@@ -134,3 +161,10 @@
134161
}
135162
}
136163
}
164+
[dir="rtl"] .eek .icon--eek-arrow {
165+
transform: rotate(180deg);
166+
}
167+
[dir="rtl"] .eek__container {
168+
border-left: none;
169+
border-right: 1px solid #000;
170+
}

‎src/modules/eek.marko‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div id="eek">
22
<section-header metadata=input.metadata name=input.name/>
33
<p>
4+
EEK is an icon that is used for energy ratings. It is a rating system that is used to show how energy efficient a product is.
45
EEKs have two parts, a range, and a rating.
56
The following ranges are available:
67
</p>
@@ -138,6 +139,7 @@
138139
</tbody>
139140
</table>
140141

142+
<h3 id="eek-default">EEK examples</h3>
141143
<div class="demo">
142144
<div class="demo__inner">
143145
<div class="eek eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
@@ -248,6 +250,119 @@
248250
</highlight-code>
249251

250252

253+
<h3 id="eek-large">Large EEK</h3>
254+
<p>In order to match other items on the screen, you can use <span class="highlight">eek--large</span> class to increase the size</p>
255+
<div class="demo">
256+
<div class="demo__inner">
257+
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
258+
<div class="eek__container">
259+
<span class="eek__rating-range">
260+
<span aria-hidden="true">A+++</span>
261+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
262+
<icon-symbol name="eek-range-arrow" />
263+
</svg>
264+
<span aria-hidden="true">D</span>
265+
</span>
266+
<span class="eek__rating" aria-hidden="true">
267+
A+++
268+
</span>
269+
</div>
270+
<svg class="icon icon--eek-arrow" aria-hidden="true">
271+
<icon-symbol name="eek-arrow" />
272+
</svg>
273+
</div>
274+
<div class="eek eek--large eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
275+
<div class="eek__container">
276+
<span class="eek__rating-range">
277+
<span aria-hidden="true">A++</span>
278+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
279+
<icon-symbol name="eek-range-arrow" />
280+
</svg>
281+
<span aria-hidden="true">E</span>
282+
</span>
283+
<span class="eek__rating" aria-hidden="true">
284+
B
285+
</span>
286+
</div>
287+
<svg class="icon icon--eek-arrow" aria-hidden="true">
288+
<icon-symbol name="eek-arrow" />
289+
</svg>
290+
</div>
291+
<div class="eek eek--large eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
292+
<div class="eek__container">
293+
<span class="eek__rating-range">
294+
<span aria-hidden="true">A+</span>
295+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
296+
<icon-symbol name="eek-range-arrow" />
297+
</svg>
298+
<span aria-hidden="true">E</span>
299+
</span>
300+
<span class="eek__rating" aria-hidden="true">
301+
G
302+
</span>
303+
</div>
304+
<svg class="icon icon--eek-arrow" aria-hidden="true">
305+
<icon-symbol name="eek-arrow" />
306+
</svg>
307+
</div>
308+
</div>
309+
</div>
310+
<highlight-code type="html" >
311+
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
312+
<div class="eek__container">
313+
<span class="eek__rating-range">
314+
<span aria-hidden="true">A+++</span>
315+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
316+
<use href="#icon-eek-range-arrow"></use>
317+
</svg>
318+
<span aria-hidden="true">D</span>
319+
</span>
320+
<span class="eek__rating" aria-hidden="true">
321+
A+++
322+
</span>
323+
</div>
324+
<svg class="icon icon--eek-arrow" aria-hidden="true">
325+
<use href="#icon-eek-arrow"></use>
326+
</svg>
327+
</div>
328+
<div class="eek eek--large eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
329+
<div class="eek__container">
330+
<span class="eek__rating-range">
331+
<span aria-hidden="true">A++</span>
332+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
333+
<use href="#icon-eek-range-arrow"></use>
334+
</svg>
335+
<span aria-hidden="true">E</span>
336+
</span>
337+
<span class="eek__rating" aria-hidden="true">
338+
B
339+
</span>
340+
</div>
341+
<svg class="icon icon--eek-arrow" aria-hidden="true">
342+
<use href="#icon-eek-arrow"></use>
343+
</svg>
344+
</div>
345+
<div class="eek eek--large eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
346+
<div class="eek__container">
347+
<span class="eek__rating-range">
348+
<span aria-hidden="true">A+</span>
349+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
350+
<use href="#icon-eek-range-arrow"></use>
351+
</svg>
352+
<span aria-hidden="true">E</span>
353+
</span>
354+
<span class="eek__rating" aria-hidden="true">
355+
G
356+
</span>
357+
</div>
358+
<svg class="icon icon--eek-arrow" aria-hidden="true">
359+
<use href="#icon-eek-arrow"></use>
360+
</svg>
361+
</div>
362+
</highlight-code>
363+
364+
365+
251366
</div>
252367
export const metadata = {
253368
"ds-component": {

‎src/sass/eek/eek.scss‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
/* Calculate hypotenuse of a 28px square (for rotation). */
55
/* Formula is: sqrt(pow(28px, 2) / 2) */
6+
/* Heights defined in this should not use variables. This is because they are specific to legal requirements and should not change */
67

78
$eek-arrow-size: #{math.sqrt(392)}px;
89
/* These are custom colors not part of ebay palette */
@@ -26,6 +27,10 @@ $eek-border-color: $eek-color;
2627
position: relative;
2728
}
2829

30+
.eek--large {
31+
height: 32px;
32+
}
33+
2934
.eek__container {
3035
align-items: center;
3136
border: 1px solid $eek-color;
@@ -38,6 +43,10 @@ $eek-border-color: $eek-color;
3843
width: 9px;
3944
}
4045

46+
.eek--large .icon--eek-arrow {
47+
width: 12.5px;
48+
}
49+
4150
.eek__arrow {
4251
overflow: hidden;
4352
width: 17px;
@@ -48,13 +57,11 @@ $eek-border-color: $eek-color;
4857
border-radius: 2px;
4958
content: "";
5059
display: block;
51-
/* stylelint-disable-next-line number-max-precision */
5260
height: $eek-arrow-size;
5361
margin-top: 2.3px;
5462
position: relative;
5563
right: 12px;
5664
transform: rotate(45deg);
57-
/* stylelint-disable-next-line number-max-precision */
5865
width: $eek-arrow-size;
5966
}
6067

@@ -119,6 +126,10 @@ $eek-border-color: $eek-color;
119126
-0.5px -0.5px 0 $eek-color;
120127
}
121128

129+
.eek--large .eek__rating {
130+
font-size: 24px;
131+
}
132+
122133
.eek__rating-range {
123134
align-items: center;
124135
background-color: $eek-background-color;
@@ -130,13 +141,28 @@ $eek-border-color: $eek-color;
130141
padding: 0 1px;
131142
}
132143

144+
.eek--large .eek__rating-range {
145+
height: 28px;
146+
}
147+
133148
.eek__rating-range > .icon--eek-range-arrow {
134149
height: 6px;
135150
width: 5px;
136151
}
137152

153+
.eek--large .eek__rating-range > .icon--eek-range-arrow {
154+
height: 7px;
155+
width: 6px;
156+
}
157+
138158
.eek__rating-range > span {
139159
font-size: 8px;
160+
height: 8px;
161+
}
162+
163+
.eek--large .eek__rating-range > span {
164+
font-size: 10px;
165+
height: 10px;
140166
}
141167

142168
/*
@@ -153,3 +179,13 @@ Changed a bit of styles there only in order to make it work
153179
}
154180
}
155181
}
182+
183+
[dir="rtl"] {
184+
.eek .icon--eek-arrow {
185+
transform: rotate(180deg);
186+
}
187+
.eek__container {
188+
border-left: none;
189+
border-right: 1px solid $eek-color;
190+
}
191+
}

‎src/sass/eek/stories/eek.stories.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
export default { title: "Skin/EEK" };
2+
3+
export const typical = () => `
4+
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
5+
<div class="eek__container">
6+
<span class="eek__rating-range">
7+
<span aria-hidden="true">A++</span>
8+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
9+
<use href="#icon-eek-range-arrow"></use>
10+
</svg>
11+
<span aria-hidden="true">E</span>
12+
</span>
13+
<span class="eek__rating" aria-hidden="true">
14+
B
15+
</span>
16+
</div>
17+
<svg class="icon icon--eek-arrow" aria-hidden="true">
18+
<use href="#icon-eek-arrow"></use>
19+
</svg>
20+
</div>
21+
`;
22+
23+
export const large = () => `
24+
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
25+
<div class="eek__container">
26+
<span class="eek__rating-range">
27+
<span aria-hidden="true">A+++</span>
28+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
29+
<use href="#icon-eek-range-arrow"></use>
30+
</svg>
31+
<span aria-hidden="true">D</span>
32+
</span>
33+
<span class="eek__rating" aria-hidden="true">
34+
A+++
35+
</span>
36+
</div>
37+
<svg class="icon icon--eek-arrow" aria-hidden="true">
38+
<use href="#icon-eek-arrow"></use>
39+
</svg>
40+
</div>
41+
`;
42+
43+
export const RTL = () => `
44+
<div dir="rtl">
45+
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
46+
<div class="eek__container">
47+
<span class="eek__rating-range">
48+
<span aria-hidden="true">A++</span>
49+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
50+
<use href="#icon-eek-range-arrow"></use>
51+
</svg>
52+
<span aria-hidden="true">E</span>
53+
</span>
54+
<span class="eek__rating" aria-hidden="true">
55+
B
56+
</span>
57+
</div>
58+
<svg class="icon icon--eek-arrow" aria-hidden="true">
59+
<use href="#icon-eek-arrow"></use>
60+
</svg>
61+
</div>
62+
</div>
63+
`;
64+
65+
export const RTLLarge = () => `
66+
<div dir="rtl">
67+
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
68+
<div class="eek__container">
69+
<span class="eek__rating-range">
70+
<span aria-hidden="true">A+++</span>
71+
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
72+
<use href="#icon-eek-range-arrow"></use>
73+
</svg>
74+
<span aria-hidden="true">D</span>
75+
</span>
76+
<span class="eek__rating" aria-hidden="true">
77+
A+++
78+
</span>
79+
</div>
80+
<svg class="icon icon--eek-arrow" aria-hidden="true">
81+
<use href="#icon-eek-arrow"></use>
82+
</svg>
83+
</div>
84+
</div>
85+
`;

0 commit comments

Comments
 (0)