fix(): refactor Rating Indicator [ci visual]

packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss

@@ -1,15 +1,5 @@
 @use "sass:map";
 
 :root {
-  /* Default mode */
-  --fdRating_Indicator_Selected_Hover_Opacity: 0.9;
-
-  /* Display Only mode */
-  --fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor);
-
-  /* Disabled mode */
-  --fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor);
-  --fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor);
-  --fdRating_Indicator_Disabled_Control_Opacity: 0.4;
-  --fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 1;
+  --fdRatingIndicator_Container_Border_Radius: 0;
 }

packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss

@@ -1,17 +1,5 @@
 @use "sass:map";
 
 :root {
-  /* Default mode */
-  --fdRating_Indicator_Selected_Hover_Opacity: 0.9;
-
-  /* Display Only mode */
-  --fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor);
-
-  /* Disabled mode */
-  --fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor);
-  --fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor);
-  --fdRating_Indicator_Disabled_Control_Opacity: 0.4;
-  --fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 0.75;
-  --fdRating_Indicator_Border_Radius: 0.25rem;
-  --fdRating_Indicator_Focus_Outline_Offset: 0.125rem;
+  --fdRatingIndicator_Container_Border_Radius: 0.25rem;
 }

packages/styles/src/theming/sap_fiori_3_hcb.scss

@@ -30,7 +30,6 @@
 @import "./common/radio/sap_fiori_hc";
 @import "./common/link/sap_fiori_hc";
 @import "./common/vertical-nav/sap_fiori";
-@import "./common/rating-indicator/sap_fiori_hc";
 @import "./common/select/sap_fiori";
 @import "./common/tile/sap_fiori_hc";
 @import "./common/progress-indicator/sap_fiori_hc";

packages/styles/src/theming/sap_fiori_3_hcw.scss

@@ -24,7 +24,6 @@
 @import "./common/radio/sap_fiori_hc";
 @import "./common/link/sap_fiori_hc";
 @import "./common/vertical-nav/sap_fiori";
-@import "./common/rating-indicator/sap_fiori_hc";
 @import "./common/select/sap_fiori";
 @import "./common/tile/sap_fiori_hc";
 @import "./common/progress-indicator/sap_fiori_hc";

packages/styles/src/theming/sap_horizon_hcb.scss

@@ -24,7 +24,6 @@
 @import "./common/radio/sap_horizon_hc";
 @import "./common/link/sap_horizon_hc";
 @import "./common/vertical-nav/sap_horizon";
-@import "./common/rating-indicator/sap_horizon_hc";
 @import "./common/select/sap_horizon_hc";
 @import "./common/tile/sap_horizon_hc";
 @import "./common/progress-indicator/sap_horizon";

packages/styles/src/theming/sap_horizon_hcw.scss

@@ -25,7 +25,6 @@
 @import "./common/radio/sap_horizon_hc";
 @import "./common/link/sap_horizon_hc";
 @import "./common/vertical-nav/sap_horizon";
-@import "./common/rating-indicator/sap_horizon_hc";
 @import "./common/select/sap_horizon_hc";
 @import "./common/tile/sap_horizon_hc";
 @import "./common/progress-indicator/sap_horizon";

packages/styles/stories/Components/rating-indicator/basic.example.html

@@ -0,0 +1,203 @@
+<h4>Default</h4>
+<div class="fd-rating-indicator">
+    <div 
+        class="fd-rating-indicator__container"
+        title="Rating"
+        tabindex="0"
+        role="slider"
+        aria-orientation="horizontal"
+        aria-roledescription="Rating Indicator"
+        aria-valuemin="0"
+        aria-valuenow="2.5"
+        aria-valuemax="5"
+        aria-valuetext="2.5 of 5"
+        >
+        <ul class="fd-rating-indicator__list" aria-hidden="true">
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+        </ul>
+    </div>
+    <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
+</div>
+
+<br>
+<h4>Hover</h4>
+<div class="fd-rating-indicator is-hover">
+    <div 
+        class="fd-rating-indicator__container"
+        title="Rating"
+        tabindex="0"
+        role="slider"
+        aria-orientation="horizontal"
+        aria-roledescription="Rating Indicator"
+        aria-valuemin="0"
+        aria-valuenow="2.5"
+        aria-valuemax="5"
+        aria-valuetext="2.5 of 5"
+        >
+        <ul class="fd-rating-indicator__list" aria-hidden="true">
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+        </ul>
+    </div>
+    <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
+</div>
+
+<br>
+<h4>Focus</h4>
+<div class="fd-rating-indicator">
+    <div 
+        class="fd-rating-indicator__container is-focus"
+        title="Rating"
+        tabindex="0"
+        role="slider"
+        aria-orientation="horizontal"
+        aria-roledescription="Rating Indicator"
+        aria-valuemin="0"
+        aria-valuenow="2.5"
+        aria-valuemax="5"
+        aria-valuetext="2.5 of 5"
+        >
+        <ul class="fd-rating-indicator__list" aria-hidden="true">
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+        </ul>
+    </div>
+    <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
+</div>
+
+<br>
+<h4>Read Only</h4>
+<div class="fd-rating-indicator is-readonly">
+    <div 
+        class="fd-rating-indicator__container"
+        title="Rating"
+        tabindex="0"
+        role="slider"
+        aria-orientation="horizontal"
+        aria-roledescription="Rating Indicator"
+        aria-valuemin="0"
+        aria-valuenow="2.5"
+        aria-valuemax="5"
+        aria-valuetext="2.5 of 5"
+        >
+        <ul class="fd-rating-indicator__list" aria-hidden="true">
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+        </ul>
+    </div>
+    <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
+</div>
+
+<br>
+<h4>Disabled</h4>
+<div class="fd-rating-indicator is-disabled">
+    <div 
+        class="fd-rating-indicator__container"
+        title="Rating"
+        tabindex="0"
+        role="slider"
+        aria-orientation="horizontal"
+        aria-roledescription="Rating Indicator"
+        aria-valuemin="0"
+        aria-valuenow="2.5"
+        aria-valuemax="5"
+        aria-valuetext="2.5 of 5"
+        >
+        <ul class="fd-rating-indicator__list" aria-hidden="true">
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
+                <span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+            <li class="fd-rating-indicator__item">
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+                <span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
+            </li>
+        </ul>
+    </div>
+    <span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
+</div>