v10.3.0 - Add variable for svg star icons (#400)

* v10.2.0 - Add variables for star icons.

* v10.2.0 - Remove test property.

* v10.3.0 - PR comment.

Author: kevinrodrigues

CHANGELOG.md

@@ -8,6 +8,16 @@ Future Todo List
 - Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes).
 - Update to use latest v2 PIE design tokens
 
+v10.3.0
+------------------------------
+*September 26, 2022*
+
+### Added
+- Variables `$star-icon-path--filled` & `$star-icon-path--empty`.
+
+### Changed
+- `ratings` optional component to read from variables file for consuming applications to set custom paths for svg star icons.
+
 
 v10.2.0
 ------------------------------

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",

src/scss/components/optional/_ratings.scss

@@ -1,5 +1,6 @@
 @use '../../tools/mixins/type';
 @use '../../tools/mixins/ratings';
+@use '../../settings/variables' as v;
 
 @mixin rating() {
     /**
@@ -22,7 +23,7 @@
     $star-size--large           : 42px;
 
     .c-rating {
-        @extend %c-icon--star--empty !optional;
+        background-image: inline(#{v.$star-icon-path--empty});
         background-repeat: repeat-x;
         display: inline-block;
         height: $star-size--default;
@@ -125,7 +126,7 @@
     }
 
     .c-rating--fill {
-        @extend %c-icon--star--fill !optional;
+        background-image: inline(#{v.$star-icon-path--filled});
         vertical-align: top;
         background-repeat: repeat-x;
         display: inline-block;
@@ -149,7 +150,7 @@
         &:checked {
             & + label,
             & ~ input + label {
-                @extend %c-icon--star--fill !optional;
+                background-image: inline(#{v.$star-icon-path--filled});
             }
        }
     }
@@ -165,12 +166,12 @@
     .c-icon--star {
         display: block;
         cursor: pointer;
-        @extend %c-icon--star--empty !optional;
+        background-image: inline(#{v.$star-icon-path--empty});
         @extend %u-hideText;
 
         &:hover,
         &:hover ~ label {
-            @extend %c-icon--star--fill !optional;
+            background-image: inline(#{v.$star-icon-path--filled});
         }
     }
 

src/scss/settings/_variables.scss

@@ -128,6 +128,8 @@ $img-path-url              : '/assets/img' !default; // Usage: background: url('
 $icon-path                 : '#{$img-path}/icons' !default;
 $font-path                 : 'dist/fonts' !default;
 
+$star-icon-path--filled    : '#{$icon-path}/stars/star--filled.svg' !default;
+$star-icon-path--empty     : '#{$icon-path}/stars/star--empty.svg' !default;
 
 // App-specific variables
 // ==========================================================================