From 4e48c78d69aba1ae2fd3797dda9e3b888338d179 Mon Sep 17 00:00:00 2001
From: Mike O'Donnell <mikerodonnell89@gmail.com>
Date: Fri, 27 Oct 2023 11:53:17 -0400
Subject: [PATCH] fix(styles): card updates

---
 packages/styles/src/card.scss                 |  17 +-
 .../stories/Components/card/card.stories.js   |   2 +-
 .../Components/card/object-card.example.html  |  38 +-
 .../Components/card/table-card.example.html   |   8 +-
 .../tests/__snapshots__/styles.test.ts.snap   | 665 ++++++++++++++++--
 5 files changed, 640 insertions(+), 90 deletions(-)

diff --git a/packages/styles/src/card.scss b/packages/styles/src/card.scss
index 553e64fa56..078118c6e1 100644
--- a/packages/styles/src/card.scss
+++ b/packages/styles/src/card.scss
@@ -193,8 +193,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
     @include fd-flex() {
       align-items: flex-end;
     }
-
-    margin-top: 0.25rem;
   }
 
   &__subtitle {
@@ -212,6 +210,7 @@ $fd-card-header-outline-offset: 0.0625rem !default;
     text-align: right;
     margin: var(--fdCard_Counter_Margin);
     white-space: nowrap;
+    color: var(--sapTile_TitleTextColor);
 
     @include fd-rtl() {
       margin: var(--fdCard_Counter_Margin_RTL);
@@ -323,6 +322,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
       overflow: hidden;
     }
 
+    .#{$list} {
+      @include fd-set-paddings-x(0.125rem);
+    }
+
     &:last-child {
       border-bottom-left-radius: $fd-card-border-radius;
       border-bottom-right-radius: $fd-card-border-radius;
@@ -388,6 +391,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
     @include fd-reset();
 
     padding-bottom: 0.5rem;
+
+    h3 {
+      font-size: var(--sapFontSize);
+    }
   }
 
   &__content-group {
@@ -411,8 +418,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
     }
 
     & > * {
-      margin-bottom: 0.25rem;
-
       &:last-child {
         margin-bottom: 0;
       }
@@ -441,6 +446,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
   }
 
   &--table {
+    .#{$block}__header {
+      padding-bottom: 0.5rem;
+    }
+
     @include fd-compact-or-condensed() {
       .#{$block}__content {
         padding-bottom: 0.5rem;
diff --git a/packages/styles/stories/Components/card/card.stories.js b/packages/styles/stories/Components/card/card.stories.js
index b89718aa8b..6a3142fbd9 100644
--- a/packages/styles/stories/Components/card/card.stories.js
+++ b/packages/styles/stories/Components/card/card.stories.js
@@ -121,4 +121,4 @@ Component (class) |	Description
 `
     }
   }
-};
\ No newline at end of file
+};
diff --git a/packages/styles/stories/Components/card/object-card.example.html b/packages/styles/stories/Components/card/object-card.example.html
index cae8b9ab79..112361af4c 100644
--- a/packages/styles/stories/Components/card/object-card.example.html
+++ b/packages/styles/stories/Components/card/object-card.example.html
@@ -19,23 +19,23 @@
             <div class="fd-card__content" role="group" aria-label="Card Content">
                 <div class="fd-card__content-container">
                     <div class="fd-card__content-section">
-                        <div class="fd-card__content-title-container">Group Title 1</div>
+                        <div class="fd-card__content-title-container"><h3>Group Title 1</h3></div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                     </div>
@@ -43,14 +43,14 @@
                         <div class="fd-card__content-title-container">Group Title 2</div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
@@ -97,14 +97,14 @@ <h3 style="margin: 0;">Group Title 1</h3>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                     </div>
@@ -122,14 +122,14 @@ <h3 style="margin: 0;">Group Title 2</h3>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                         <div class="fd-card__content-group">
                             <div class="fd-card__content-group-text">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class="fd-link">Text</span>
                             </div>
                         </div>
                     </div>
diff --git a/packages/styles/stories/Components/card/table-card.example.html b/packages/styles/stories/Components/card/table-card.example.html
index 8a74955296..0b3af74f04 100644
--- a/packages/styles/stories/Components/card/table-card.example.html
+++ b/packages/styles/stories/Components/card/table-card.example.html
@@ -15,7 +15,7 @@
                         <tr class="fd-table__row">
                             <th class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="kqqzPI">
-                                <label class="fd-checkbox__label" for="kqqzPI"></label>
+                                <label class="fd-checkbox__label" for="kqqzPI"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
                             </th>
                             <th class="fd-table__cell" scope="col">Name</th>
                             <th class="fd-table__cell" scope="col">Status</th>
@@ -28,7 +28,7 @@
                         <tr class="fd-table__row">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="EWuzWh">
-                                <label class="fd-checkbox__label" for="EWuzWh"></label>
+                                <label class="fd-checkbox__label" for="EWuzWh"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
                             </td>
                             <td class="fd-table__cell">Banana</td>
                             <td class="fd-table__cell">
@@ -45,7 +45,7 @@
                         <tr class="fd-table__row">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="19j0Sc">
-                                <label class="fd-checkbox__label" for="19j0Sc"></label>
+                                <label class="fd-checkbox__label" for="19j0Sc"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
                             </td>
                             <td class="fd-table__cell">Pineapple</td>
                             <td class="fd-table__cell">
@@ -62,7 +62,7 @@
                         <tr class="fd-table__row">
                             <td class="fd-table__cell fd-table__cell--checkbox">
                                 <input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="a7SfGX">
-                                <label class="fd-checkbox__label" for="a7SfGX"></label>
+                                <label class="fd-checkbox__label" for="a7SfGX"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
                             </td>
                             <td class="fd-table__cell">Orange</td>
                             <td class="fd-table__cell">
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index e1ee662425..194d6c33ab 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -11190,23 +11190,23 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
             <div class=\\"fd-card__content\\" role=\\"group\\" aria-label=\\"Card Content\\">
                 <div class=\\"fd-card__content-container\\">
                     <div class=\\"fd-card__content-section\\">
-                        <div class=\\"fd-card__content-title-container\\">Group Title 1</div>
+                        <div class=\\"fd-card__content-title-container\\"><h3>Group Title 1</h3></div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                     </div>
@@ -11214,14 +11214,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
                         <div class=\\"fd-card__content-title-container\\">Group Title 2</div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
@@ -11268,14 +11268,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                     </div>
@@ -11293,14 +11293,14 @@ exports[`Check stories > Components/Card > Story ObjectCard > Should match snaps
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                         <div class=\\"fd-card__content-group\\">
                             <div class=\\"fd-card__content-group-text\\">
-                                <span>Label</span>
-                                <span>Text</span>
+                                <span>Label:</span>
+                                <span class=\\"fd-link\\">Text</span>
                             </div>
                         </div>
                     </div>
@@ -11330,7 +11330,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh
                         <tr class=\\"fd-table__row\\">
                             <th class=\\"fd-table__cell fd-table__cell--checkbox\\">
                                 <input aria-label=\\"checkbox\\" type=\\"checkbox\\" class=\\"fd-checkbox\\" id=\\"kqqzPI\\">
-                                <label class=\\"fd-checkbox__label\\" for=\\"kqqzPI\\"></label>
+                                <label class=\\"fd-checkbox__label\\" for=\\"kqqzPI\\"><span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span></label>
                             </th>
                             <th class=\\"fd-table__cell\\" scope=\\"col\\">Name</th>
                             <th class=\\"fd-table__cell\\" scope=\\"col\\">Status</th>
@@ -11343,7 +11343,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh
                         <tr class=\\"fd-table__row\\">
                             <td class=\\"fd-table__cell fd-table__cell--checkbox\\">
                                 <input aria-label=\\"checkbox\\" type=\\"checkbox\\" class=\\"fd-checkbox\\" id=\\"EWuzWh\\">
-                                <label class=\\"fd-checkbox__label\\" for=\\"EWuzWh\\"></label>
+                                <label class=\\"fd-checkbox__label\\" for=\\"EWuzWh\\"><span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span></label>
                             </td>
                             <td class=\\"fd-table__cell\\">Banana</td>
                             <td class=\\"fd-table__cell\\">
@@ -11360,7 +11360,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh
                         <tr class=\\"fd-table__row\\">
                             <td class=\\"fd-table__cell fd-table__cell--checkbox\\">
                                 <input aria-label=\\"checkbox\\" type=\\"checkbox\\" class=\\"fd-checkbox\\" id=\\"19j0Sc\\">
-                                <label class=\\"fd-checkbox__label\\" for=\\"19j0Sc\\"></label>
+                                <label class=\\"fd-checkbox__label\\" for=\\"19j0Sc\\"><span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span></label>
                             </td>
                             <td class=\\"fd-table__cell\\">Pineapple</td>
                             <td class=\\"fd-table__cell\\">
@@ -11377,7 +11377,7 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh
                         <tr class=\\"fd-table__row\\">
                             <td class=\\"fd-table__cell fd-table__cell--checkbox\\">
                                 <input aria-label=\\"checkbox\\" type=\\"checkbox\\" class=\\"fd-checkbox\\" id=\\"a7SfGX\\">
-                                <label class=\\"fd-checkbox__label\\" for=\\"a7SfGX\\"></label>
+                                <label class=\\"fd-checkbox__label\\" for=\\"a7SfGX\\"><span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span></label>
                             </td>
                             <td class=\\"fd-table__cell\\">Orange</td>
                             <td class=\\"fd-table__cell\\">
@@ -33569,57 +33569,417 @@ exports[`Check stories > Components/Rating Indicator > Story DifferentValues > S
 
 exports[`Check stories > Components/Rating Indicator > Story Disabled > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
+    <p>Default:</p>
     <div class=\\"fd-rating-indicator\\" aria-disabled=\\"true\\">
         <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
-            <input aria-label=\\"0 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\" id=\\"rating-disabled-0\\" name=\\"rating-disabled\\" value=\\"0\\" disabled>
-            <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-disabled-0\\" aria-hidden=\\"true\\"></label>
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-disabled-0\\"
+                name=\\"rating-disabled\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-disabled-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-            <input aria-label=\\"1 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-1\\" name=\\"rating-disabled\\" value=\\"1\\" disabled>
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-1\\"
+                name=\\"rating-disabled\\"
+                value=\\"1\\"
+                disabled
+            />
             <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-1\\"></label>
 
-            <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-2\\" name=\\"rating-disabled\\" value=\\"2\\" disabled checked>
+            <input
+                aria-label=\\"2 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-2\\"
+                name=\\"rating-disabled\\"
+                value=\\"2\\"
+                disabled
+                checked
+            />
             <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-2\\"></label>
 
-            <input aria-label=\\"3 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-3\\" name=\\"rating-disabled\\" value=\\"3\\" disabled>
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-3\\"
+                name=\\"rating-disabled\\"
+                value=\\"3\\"
+                disabled
+            />
             <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-3\\"></label>
 
-            <input aria-label=\\"4 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-4\\" name=\\"rating-disabled\\" value=\\"4\\" disabled>
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-4\\"
+                name=\\"rating-disabled\\"
+                value=\\"4\\"
+                disabled
+            />
             <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-4\\"></label>
 
-            <input aria-label=\\"5 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-5\\" name=\\"rating-disabled\\" value=\\"5\\" disabled>
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-5\\"
+                name=\\"rating-disabled\\"
+                value=\\"5\\"
+                disabled
+            />
             <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-5\\"></label>
         </div>
         <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
     </div>
 </div>
+<div class=\\"example-container\\">
+    <p>Default:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--half-star\\" aria-disabled=\\"true\\">
+        <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-disabled-half-0\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-disabled-half-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
+
+            <input
+                aria-label=\\"half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-05\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"0.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-05\\"></label>
+
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-1\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-1\\"></label>
+
+            <input
+                aria-label=\\"1 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-15\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"1.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-15\\"></label>
+
+            <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-disabled-half-2\\"
+            name=\\"rating-disabled-half\\" value=2\\">
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-2\\"></label>
+
+            <input
+                aria-label=\\"2 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-25\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"2.5\\"
+                checked
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-25\\"></label>
+
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-3\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-3\\"></label>
+
+            <input
+                aria-label=\\"3 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-35\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"3.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-35\\"></label>
+
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-4\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-4\\"></label>
+
+            <input
+                aria-label=\\"4 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-45\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"4.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-45\\"></label>
+
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-disabled-half-5\\"
+                name=\\"rating-disabled-half\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-disabled-half-5\\"></label>
+        </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+    </div>
+</div>
 "
 `;
 
 exports[`Check stories > Components/Rating Indicator > Story DisplayMode > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
-        <div class=\\"fd-rating-indicator fd-rating-indicator--display-mode\\">
-            <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
-                <input aria-label=\\"0 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\" id=\\"rating-display-mode-0\\" name=\\"rating-display-mode\\" value=\\"0\\" disabled>
-                <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-display-mode-0\\" aria-hidden=\\"true\\"></label>
+    <p>Default:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--display-mode\\">
+        <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-display-mode-0\\"
+                name=\\"rating-display-mode\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-display-mode-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-                <input aria-label=\\"1 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-1\\" name=\\"rating-display-mode\\" value=\\"1\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-1\\"></label>
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-1\\"
+                name=\\"rating-display-mode\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-1\\"></label>
 
-                <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-2\\" name=\\"rating-display-mode\\" value=\\"2\\" disabled checked>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-2\\"></label>
+            <input
+                aria-label=\\"2 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-2\\"
+                name=\\"rating-display-mode\\"
+                value=\\"2\\"
+                disabled
+                checked
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-2\\"></label>
 
-                <input aria-label=\\"3 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-3\\" name=\\"rating-display-mode\\" value=\\"3\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-3\\"></label>
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-3\\"
+                name=\\"rating-display-mode\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-3\\"></label>
 
-                <input aria-label=\\"4 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-4\\" name=\\"rating-display-mode\\" value=\\"4\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-4\\"></label>
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-4\\"
+                name=\\"rating-display-mode\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-4\\"></label>
 
-                <input aria-label=\\"5 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-5\\" name=\\"rating-display-mode\\" value=\\"5\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-5\\"></label>
-            </div>
-            <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-5\\"
+                name=\\"rating-display-mode\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-5\\"></label>
+        </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+    </div>
+</div>
+<div class=\\"example-container\\">
+    <p>Half values:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--half-star fd-rating-indicator--display-mode\\">
+        <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-display-mode-half-0\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-display-mode-half-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
+
+            <input
+                aria-label=\\"half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-05\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"0.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-05\\"></label>
+
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-1\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-1\\"></label>
+
+            <input
+                aria-label=\\"1 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-15\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"1.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-15\\"></label>
+
+            <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-display-mode-half-2\\"
+            name=\\"rating-display-mode-half\\" value=2\\">
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-2\\"></label>
+
+            <input
+                aria-label=\\"2 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-25\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"2.5\\"
+                checked
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-25\\"></label>
+
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-3\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-3\\"></label>
+
+            <input
+                aria-label=\\"3 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-35\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"3.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-35\\"></label>
+
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-4\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-4\\"></label>
+
+            <input
+                aria-label=\\"4 and half star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-45\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"4.5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-45\\"></label>
+
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-display-mode-half-5\\"
+                name=\\"rating-display-mode-half\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-display-mode-half-5\\"></label>
         </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2.5 of 5)</span>
     </div>
+</div>
 "
 `;
 
@@ -33811,29 +34171,210 @@ exports[`Check stories > Components/Rating Indicator > Story HalfValues > Should
 
 exports[`Check stories > Components/Rating Indicator > Story NonInteractive > Should match snapshot 1`] = `
 "<div class=\\"example-container\\">
-        <div class=\\"fd-rating-indicator fd-rating-indicator--non-interactive\\">
-            <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
-                <input aria-label=\\"0 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\" id=\\"rating-non-interactive-mode-0\\" name=\\"rating-non-interactive-mode\\" value=\\"0\\" disabled>
-                <label class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\" for=\\"rating-non-interactive-mode-0\\" aria-hidden=\\"true\\"></label>
+  <p>Default:</p>
+    <div class=\\"fd-rating-indicator fd-rating-indicator--non-interactive\\">
+        <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
+            <input
+                aria-label=\\"0 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+                id=\\"rating-non-interactive-mode-0\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"0\\"
+                disabled
+            />
+            <label
+                class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+                for=\\"rating-non-interactive-mode-0\\"
+                aria-hidden=\\"true\\"
+            ></label>
 
-                <input aria-label=\\"1 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-1\\" name=\\"rating-non-interactive-mode\\" value=\\"1\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-1\\"></label>
+            <input
+                aria-label=\\"1 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-1\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"1\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-1\\"></label>
 
-                <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-2\\" name=\\"rating-non-interactive-mode\\" value=\\"2\\" disabled checked>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-2\\"></label>
+            <input
+                aria-label=\\"2 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-2\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"2\\"
+                disabled
+                checked
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-2\\"></label>
 
-                <input aria-label=\\"3 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-3\\" name=\\"rating-non-interactive-mode\\" value=\\"3\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-3\\"></label>
+            <input
+                aria-label=\\"3 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-3\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"3\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-3\\"></label>
 
-                <input aria-label=\\"4 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-4\\" name=\\"rating-non-interactive-mode\\" value=\\"4\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-4\\"></label>
+            <input
+                aria-label=\\"4 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-4\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"4\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-4\\"></label>
 
-                <input aria-label=\\"5 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-5\\" name=\\"rating-non-interactive-mode\\" value=\\"5\\" disabled>
-                <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-5\\"></label>
-            </div>
-            <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
+            <input
+                aria-label=\\"5 star\\"
+                type=\\"radio\\"
+                class=\\"fd-rating-indicator__input\\"
+                id=\\"rating-non-interactive-mode-5\\"
+                name=\\"rating-non-interactive-mode\\"
+                value=\\"5\\"
+                disabled
+            />
+            <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-5\\"></label>
         </div>
+        <span class=\\"fd-rating-indicator__dynamic-text\\">(2 of 5)</span>
     </div>
+</div>
+
+<div class=\\"example-container\\">
+  <p>Half values:</p>
+  <div class=\\"fd-rating-indicator fd-rating-indicator--half-star fd-rating-indicator--non-interactive\\">
+      <div class=\\"fd-rating-indicator__container\\" aria-label=\\"Star Rating (out of 5)\\">
+          <input
+              aria-label=\\"0 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input fd-rating-indicator__input--zero-rating\\"
+              id=\\"rating-non-interactive-mode-half-0\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"0\\"
+              disabled
+          />
+          <label
+              class=\\"fd-rating-indicator__label fd-rating-indicator__label--zero-rating\\"
+              for=\\"rating-non-interactive-mode-half-0\\"
+              aria-hidden=\\"true\\"
+          ></label>
+
+          <input
+              aria-label=\\"half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-05\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"0.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-05\\"></label>
+
+          <input
+              aria-label=\\"1 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-1\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"1\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-1\\"></label>
+
+          <input
+              aria-label=\\"1 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-15\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"1.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-15\\"></label>
+
+          <input aria-label=\\"2 star\\" type=\\"radio\\" class=\\"fd-rating-indicator__input\\" id=\\"rating-non-interactive-mode-half-2\\"
+          name=\\"rating-non-interactive-mode-half\\" value=2\\">
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-2\\"></label>
+
+          <input
+              aria-label=\\"2 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-25\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"2.5\\"
+              checked
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-25\\"></label>
+
+          <input
+              aria-label=\\"3 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-3\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"3\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-3\\"></label>
+
+          <input
+              aria-label=\\"3 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-35\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"3.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-35\\"></label>
+
+          <input
+              aria-label=\\"4 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-4\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"4\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-4\\"></label>
+
+          <input
+              aria-label=\\"4 and half star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-45\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"4.5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-45\\"></label>
+
+          <input
+              aria-label=\\"5 star\\"
+              type=\\"radio\\"
+              class=\\"fd-rating-indicator__input\\"
+              id=\\"rating-non-interactive-mode-half-5\\"
+              name=\\"rating-non-interactive-mode-half\\"
+              value=\\"5\\"
+              disabled
+          />
+          <label class=\\"fd-rating-indicator__label\\" for=\\"rating-non-interactive-mode-half-5\\"></label>
+      </div>
+      <span class=\\"fd-rating-indicator__dynamic-text\\">(2.5 of 5)</span>
+  </div>
+</div>
 "
 `;