Skip to content

Commit

Permalink
feat(eek): added large styles (#2480)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agliga
agliga authored Nov 6, 2024
1 parent 35aab4b commit 207c518
Show file tree
Hide file tree
Showing 5 changed files with 277 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/flat-snakes-sell.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ebay/skin": minor
---

feat(eek): added large size and fixed regular arrow
34 changes: 34 additions & 0 deletions dist/eek/eek.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
position: relative;
}

.eek--large {
height: 32px;
}

.eek__container {
align-items: center;
border: 1px solid #000;
Expand All @@ -19,6 +23,10 @@
width: 9px;
}

.eek--large .icon--eek-arrow {
width: 12.5px;
}

.eek__arrow {
overflow: hidden;
width: 17px;
Expand Down Expand Up @@ -105,6 +113,10 @@
-0.5px -0.5px 0 #000;
}

.eek--large .eek__rating {
font-size: 24px;
}

.eek__rating-range {
align-items: center;
background-color: #fff;
Expand All @@ -116,13 +128,28 @@
padding: 0 1px;
}

.eek--large .eek__rating-range {
height: 28px;
}

.eek__rating-range > .icon--eek-range-arrow {
height: 6px;
width: 5px;
}

.eek--large .eek__rating-range > .icon--eek-range-arrow {
height: 7px;
width: 6px;
}

.eek__rating-range > span {
font-size: 8px;
height: 8px;
}

.eek--large .eek__rating-range > span {
font-size: 10px;
height: 10px;
}
@media not all and (-webkit-min-device-pixel-ratio: 0),
not all and (min-resolution: 0.001dpcm) {
Expand All @@ -134,3 +161,10 @@
}
}
}
[dir="rtl"] .eek .icon--eek-arrow {
transform: rotate(180deg);
}
[dir="rtl"] .eek__container {
border-left: none;
border-right: 1px solid #000;
}
115 changes: 115 additions & 0 deletions src/modules/eek.marko
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div id="eek">
<section-header metadata=input.metadata name=input.name/>
<p>
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.
EEKs have two parts, a range, and a rating.
The following ranges are available:
</p>
Expand Down Expand Up @@ -138,6 +139,7 @@
</tbody>
</table>

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


<h3 id="eek-large">Large EEK</h3>
<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>
<div class="demo">
<div class="demo__inner">
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<icon-symbol name="eek-range-arrow" />
</svg>
<span aria-hidden="true">D</span>
</span>
<span class="eek__rating" aria-hidden="true">
A+++
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<icon-symbol name="eek-arrow" />
</svg>
</div>
<div class="eek eek--large eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<icon-symbol name="eek-range-arrow" />
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
B
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<icon-symbol name="eek-arrow" />
</svg>
</div>
<div class="eek eek--large eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<icon-symbol name="eek-range-arrow" />
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
G
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<icon-symbol name="eek-arrow" />
</svg>
</div>
</div>
</div>
<highlight-code type="html" >
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">D</span>
</span>
<span class="eek__rating" aria-hidden="true">
A+++
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
<div class="eek eek--large eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
B
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
<div class="eek eek--large eek--rating-7" role="figure" aria-label="Energy Rating: G. Range: A+ - G">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
G
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
</highlight-code>



</div>
export const metadata = {
"ds-component": {
Expand Down
40 changes: 38 additions & 2 deletions src/sass/eek/eek.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

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

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

.eek--large {
height: 32px;
}

.eek__container {
align-items: center;
border: 1px solid $eek-color;
Expand All @@ -38,6 +43,10 @@ $eek-border-color: $eek-color;
width: 9px;
}

.eek--large .icon--eek-arrow {
width: 12.5px;
}

.eek__arrow {
overflow: hidden;
width: 17px;
Expand All @@ -48,13 +57,11 @@ $eek-border-color: $eek-color;
border-radius: 2px;
content: "";
display: block;
/* stylelint-disable-next-line number-max-precision */
height: $eek-arrow-size;
margin-top: 2.3px;
position: relative;
right: 12px;
transform: rotate(45deg);
/* stylelint-disable-next-line number-max-precision */
width: $eek-arrow-size;
}

Expand Down Expand Up @@ -119,6 +126,10 @@ $eek-border-color: $eek-color;
-0.5px -0.5px 0 $eek-color;
}

.eek--large .eek__rating {
font-size: 24px;
}

.eek__rating-range {
align-items: center;
background-color: $eek-background-color;
Expand All @@ -130,13 +141,28 @@ $eek-border-color: $eek-color;
padding: 0 1px;
}

.eek--large .eek__rating-range {
height: 28px;
}

.eek__rating-range > .icon--eek-range-arrow {
height: 6px;
width: 5px;
}

.eek--large .eek__rating-range > .icon--eek-range-arrow {
height: 7px;
width: 6px;
}

.eek__rating-range > span {
font-size: 8px;
height: 8px;
}

.eek--large .eek__rating-range > span {
font-size: 10px;
height: 10px;
}

/*
Expand All @@ -153,3 +179,13 @@ Changed a bit of styles there only in order to make it work
}
}
}

[dir="rtl"] {
.eek .icon--eek-arrow {
transform: rotate(180deg);
}
.eek__container {
border-left: none;
border-right: 1px solid $eek-color;
}
}
85 changes: 85 additions & 0 deletions src/sass/eek/stories/eek.stories.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
export default { title: "Skin/EEK" };

export const typical = () => `
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
B
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
`;

export const large = () => `
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">D</span>
</span>
<span class="eek__rating" aria-hidden="true">
A+++
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
`;

export const RTL = () => `
<div dir="rtl">
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">E</span>
</span>
<span class="eek__rating" aria-hidden="true">
B
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
</div>
`;

export const RTLLarge = () => `
<div dir="rtl">
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
<div class="eek__container">
<span class="eek__rating-range">
<span aria-hidden="true">A+++</span>
<svg class="icon icon--eek-range-arrow" aria-hidden="true">
<use href="#icon-eek-range-arrow"></use>
</svg>
<span aria-hidden="true">D</span>
</span>
<span class="eek__rating" aria-hidden="true">
A+++
</span>
</div>
<svg class="icon icon--eek-arrow" aria-hidden="true">
<use href="#icon-eek-arrow"></use>
</svg>
</div>
</div>
`;

0 comments on commit 207c518

Please sign in to comment.