diff --git a/.changeset/flat-snakes-sell.md b/.changeset/flat-snakes-sell.md new file mode 100644 index 000000000..c1154d514 --- /dev/null +++ b/.changeset/flat-snakes-sell.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(eek): added large size and fixed regular arrow diff --git a/dist/eek/eek.css b/dist/eek/eek.css index d44d0f757..a9838ed4b 100644 --- a/dist/eek/eek.css +++ b/dist/eek/eek.css @@ -7,6 +7,10 @@ position: relative; } +.eek--large { + height: 32px; +} + .eek__container { align-items: center; border: 1px solid #000; @@ -19,6 +23,10 @@ width: 9px; } +.eek--large .icon--eek-arrow { + width: 12.5px; +} + .eek__arrow { overflow: hidden; width: 17px; @@ -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; @@ -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) { @@ -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; +} diff --git a/src/modules/eek.marko b/src/modules/eek.marko index e35afd8c6..973a4377c 100644 --- a/src/modules/eek.marko +++ b/src/modules/eek.marko @@ -1,6 +1,7 @@

+ 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:

@@ -138,6 +139,7 @@ +

EEK examples

@@ -248,6 +250,119 @@ +

Large EEK

+

In order to match other items on the screen, you can use eek--large class to increase the size

+
+
+
+
+ + + + + + +
+ +
+
+
+ + + + + + +
+ +
+
+
+ + + + + + +
+ +
+
+
+ +
+
+ + + + + + +
+ +
+
+
+ + + + + + +
+ +
+
+
+ + + + + + +
+ +
+ + + +
export const metadata = { "ds-component": { diff --git a/src/sass/eek/eek.scss b/src/sass/eek/eek.scss index 2c5d4308f..cd6df53b4 100644 --- a/src/sass/eek/eek.scss +++ b/src/sass/eek/eek.scss @@ -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 */ @@ -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; @@ -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; @@ -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; } @@ -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; @@ -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; } /* @@ -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; + } +} diff --git a/src/sass/eek/stories/eek.stories.js b/src/sass/eek/stories/eek.stories.js new file mode 100644 index 000000000..049569a7c --- /dev/null +++ b/src/sass/eek/stories/eek.stories.js @@ -0,0 +1,85 @@ +export default { title: "Skin/EEK" }; + +export const typical = () => ` +
+
+ + + + + + +
+ +
+`; + +export const large = () => ` +
+
+ + + + + + +
+ +
+`; + +export const RTL = () => ` +
+
+
+ + + + + + +
+ +
+
+`; + +export const RTLLarge = () => ` +
+
+
+ + + + + + +
+ +
+
+`;