Add tenth place precision star rating (#3343)

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

ui/v2.5/src/components/Galleries/styles.scss

@@ -216,9 +216,17 @@ $galleryTabWidth: 450px;
       display: none;
     }
 
+    .star-fill-10 .unfilled-star,
+    .star-fill-20 .unfilled-star,
     .star-fill-25 .unfilled-star,
+    .star-fill-30 .unfilled-star,
+    .star-fill-40 .unfilled-star,
     .star-fill-50 .unfilled-star,
-    .star-fill-75 .unfilled-star {
+    .star-fill-60 .unfilled-star,
+    .star-fill-70 .unfilled-star,
+    .star-fill-75 .unfilled-star,
+    .star-fill-80 .unfilled-star,
+    .star-fill-90 .unfilled-star {
       visibility: hidden;
     }
 

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;

ui/v2.5/src/locales/en-GB.json

@@ -511,7 +511,8 @@
             "options": {
               "full": "Full",
               "half": "Half",
-              "quarter": "Quarter"
+              "quarter": "Quarter",
+              "tenth": "Tenth"
             }
           }
         },

ui/v2.5/src/utils/rating.ts

@@ -7,6 +7,7 @@ export enum RatingStarPrecision {
   Full = "full",
   Half = "half",
   Quarter = "quarter",
+  Tenth = "tenth",
 }
 
 export const defaultRatingSystemType: RatingSystemType = RatingSystemType.Stars;
@@ -37,6 +38,10 @@ export const ratingStarPrecisionIntlMap = new Map<RatingStarPrecision, string>([
     RatingStarPrecision.Quarter,
     "config.ui.editing.rating_system.star_precision.options.quarter",
   ],
+  [
+    RatingStarPrecision.Tenth,
+    "config.ui.editing.rating_system.star_precision.options.tenth",
+  ],
 ]);
 
 export type RatingSystemOptions = {
@@ -66,6 +71,8 @@ export function getRatingPrecision(precision: RatingStarPrecision) {
       return 0.5;
     case RatingStarPrecision.Quarter:
       return 0.25;
+    case RatingStarPrecision.Tenth:
+      return 0.1;
     default:
       return 1;
   }