Add tenth place precision star rating (#3343)

* Add tenth place precision star rating
* include rating number by stars

ui/v2.5/src/components/Shared/Rating/RatingStars.tsx

@@ -32,7 +32,8 @@ export const RatingStars: React.FC<IRatingStarsProps> = (
     starPrecision: props.precision,
   });
   const stars = rating ? Math.floor(rating) : 0;
-  const fraction = rating ? rating % 1 : 0;
+  // the upscaling was necesary to fix rounding issue present with tenth place precision
+  const fraction = rating ? ((rating * 10) % 10) / 10 : 0;
 
   const max = 5;
   const precision = getRatingPrecision(props.precision);
@@ -223,11 +224,28 @@ export const RatingStars: React.FC<IRatingStarsProps> = (
     );
   };
 
+  const maybeRenderStarRatingNumber = () => {
+    const ratingFraction = getCurrentSelectedRating();
+    if (
+      !ratingFraction ||
+      (ratingFraction.rating == 0 && ratingFraction.fraction == 0)
+    ) {
+      return;
+    }
+
+    return (
+      <span className="star-rating-number">
+        {ratingFraction.rating + ratingFraction.fraction}
+      </span>
+    );
+  };
+
   return (
     <div className="rating-stars">
       {Array.from(Array(max)).map((value, index) =>
         renderRatingButton(index + 1)
       )}
+      {maybeRenderStarRatingNumber()}
     </div>
   );
 };

ui/v2.5/src/components/Shared/Rating/styles.scss

@@ -21,18 +21,50 @@
       width: 0;
     }
 
+    &.star-fill-10 .filled-star {
+      width: 10%;
+    }
+
+    &.star-fill-20 .filled-star {
+      width: 20%;
+    }
+
     &.star-fill-25 .filled-star {
       width: 35%;
     }
 
+    &.star-fill-30 .filled-star {
+      width: 30%;
+    }
+
+    &.star-fill-40 .filled-star {
+      width: 40%;
+    }
+
     &.star-fill-50 .filled-star {
       width: 50%;
     }
 
+    &.star-fill-60 .filled-star {
+      width: 60%;
+    }
+
     &.star-fill-75 .filled-star {
       width: 65%;
     }
 
+    &.star-fill-70 .filled-star {
+      width: 70%;
+    }
+
+    &.star-fill-80 .filled-star {
+      width: 80%;
+    }
+
+    &.star-fill-90 .filled-star {
+      width: 90%;
+    }
+
     &.star-fill-100 .filled-star {
       width: 100%;
     }
@@ -56,6 +88,11 @@
   }
 }
 
+.star-rating-number {
+  font-size: 1rem;
+  margin: auto 0.5rem;
+}
+
 .rating-number.disabled {
   align-items: center;
   display: inline-flex;