feat: add reviews count to ProductTitle component

packages/components/src/molecules/ProductTitle/ProductTitle.tsx

@@ -26,9 +26,33 @@ export interface ProductTitleProps
    */
   refNumber?: string
   /**
-   * The current value of the rating, a number from 0 to 5.
+   * Object containing the rating value and reviews count
    */
-  ratingValue?: number
+  reviewsAndRating?: {
+    /**
+     * The current value of the rating, a number from 0 to 5.
+     */
+    ratingValue?: number
+    /**
+     * The amount of reviews for the product.
+     */
+    reviewsCount?: number
+    /**
+     * Text to display when there aren't reviews.
+     * @default "No reviews yet".
+     */
+    noReviewsText?: string
+    /**
+     * Text to display when there is only one review.
+     * @default "review".
+     */
+    singleReviewText?: string
+    /**
+     * Text to display when there are multiple reviews.
+     * @default "reviews".
+     */
+    multipleReviewsText?: string
+  }
 }
 
 const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
@@ -39,11 +63,19 @@ const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
       refTag = 'Ref.: ',
       refNumber,
       testId = 'fs-product-title',
-      ratingValue,
+      reviewsAndRating,
       ...otherProps
     },
     ref
   ) {
+    const {
+      ratingValue,
+      reviewsCount,
+      noReviewsText = 'No reviews yet',
+      singleReviewText = 'review',
+      multipleReviewsText = 'reviews',
+    } = reviewsAndRating || {}
+
     return (
       <header
         ref={ref}
@@ -58,7 +90,19 @@ const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
 
         {(refNumber || ratingValue !== undefined) && (
           <div data-fs-product-title-addendum>
-            {ratingValue !== undefined && <Rating value={ratingValue} />}
+            <div data-fs-product-title-rating>
+              {ratingValue !== undefined && <Rating value={ratingValue} />}
+
+              {reviewsCount !== undefined && (
+                <a href="#reviews-and-ratings" data-fs-product-title-reviews>
+                  {reviewsCount === 0 && `(${noReviewsText})`}
+                  {reviewsCount === 1 &&
+                    `(${reviewsCount} ${singleReviewText})`}
+                  {reviewsCount > 1 &&
+                    `(${reviewsCount} ${multipleReviewsText})`}
+                </a>
+              )}
+            </div>
             {refNumber && (
               <>
                 {refTag} {refNumber}

packages/core/cms/faststore/sections.json

@@ -1507,6 +1507,27 @@
               "title": "Show Reference Number?",
               "type": "boolean",
               "default": false
+            },
+            "rating": {
+              "title": "Rating",
+              "type": "object",
+              "properties": {
+                "noReviewsText": {
+                  "title": "No reviews text",
+                  "type": "string",
+                  "default": "No reviews yet"
+                },
+                "multipleReviewsText": {
+                  "title": "Multiple reviews text",
+                  "type": "string",
+                  "default": "reviews"
+                },
+                "singleReviewText": {
+                  "title": "Single review text",
+                  "type": "string",
+                  "default": "review"
+                }
+              }
             }
           }
         },

packages/core/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -35,6 +35,11 @@ export interface ProductDetailsProps {
       size: 'big' | 'small'
       showDiscountBadge: boolean
     }
+    rating: {
+      noReviewsText: string
+      singleReviewText: string
+      multipleReviewsText: string
+    }
   }
   buyButton: {
     title: string
@@ -88,6 +93,7 @@ function ProductDetails({
   productTitle: {
     refNumber: showRefNumber,
     discountBadge: { showDiscountBadge, size: discountBadgeSize },
+    rating: { noReviewsText, multipleReviewsText, singleReviewText },
   },
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
@@ -199,9 +205,6 @@ function ProductDetails({
               // Maybe now it's worth to make title always a h1 and receive only the name, as it would be easier for users to override.
               title={<h1>{name}</h1>}
               {...ProductTitle.props}
-              ratingValue={
-                apiConfig.reviewsAndRatings ? rating.average : undefined
-              }
               label={
                 showDiscountBadge && (
                   <DiscountBadge.Component
@@ -223,6 +226,17 @@ function ProductDetails({
                 )
               }
               refNumber={showRefNumber && productId}
+              reviewsAndRating={{
+                ratingValue: apiConfig.reviewsAndRatings
+                  ? rating.average
+                  : undefined,
+                reviewsCount: apiConfig.reviewsAndRatings
+                  ? rating.totalCount
+                  : undefined,
+                noReviewsText,
+                multipleReviewsText,
+                singleReviewText,
+              }}
             />
           </header>
           <ImageGallery.Component

packages/ui/src/components/molecules/ProductTitle/styles.scss

@@ -4,36 +4,43 @@
   // --------------------------------------------------------
 
   // Default properties
-  --fs-product-title-text-size            : var(--fs-text-size-title-product);
-  --fs-product-title-text-weight          : var(--fs-text-weight-regular);
-  --fs-product-title-line-height          : 1.12;
-  --fs-product-title-column-gap           : var(--fs-spacing-2);
-  --fs-product-title-row-gap              : var(--fs-spacing-3);
+  --fs-product-title-text-size               : var(--fs-text-size-title-product);
+  --fs-product-title-text-weight             : var(--fs-text-weight-regular);
+  --fs-product-title-line-height             : 1.12;
+  --fs-product-title-column-gap              : var(--fs-spacing-2);
+  --fs-product-title-row-gap                 : var(--fs-spacing-3);
 
-  --fs-product-title-addendum-color       : var(--fs-color-text-light);
-  --fs-product-title-addendum-size        : var(--fs-text-size-1);
-  --fs-product-title-addendum-line-height : 1.7;
+  // Addendum
+  --fs-product-title-addendum-color          : var(--fs-color-text-light);
+  --fs-product-title-addendum-size           : var(--fs-text-size-1);
+  --fs-product-title-addendum-line-height    : 1.7;
+
+  // Reviews
+  --fs-product-title-reviews-color           : var(--fs-color-text-light);
+  --fs-product-title-reviews-size            : var(--fs-text-size-1);
+  --fs-product-title-reviews-line-height     : 1.42;
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
   [data-fs-product-title-header] {
     display: flex;
-    justify-content: space-between;
-    max-width: 42ch;
     flex-wrap: wrap;
-    column-gap: var(--fs-product-title-column-gap);
     row-gap: var(--fs-product-title-row-gap);
+    column-gap: var(--fs-product-title-column-gap);
+    justify-content: space-between;
+    max-width: 42ch;
 
-    // Title prop
-    & > *:first-child {
+    *:first-child {
       font-size: var(--fs-product-title-text-size);
       font-weight: var(--fs-product-title-text-weight);
       line-height: var(--fs-product-title-line-height);
     }
 
-    [data-fs-badge] { white-space: nowrap; }
+    [data-fs-badge] {
+      white-space: nowrap;
+    }
 
     @include media(">=tablet", "<notebook") {
       flex-direction: column;
@@ -43,11 +50,27 @@
 
   [data-fs-product-title-addendum] {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: space-between;
     margin-top: var(--fs-product-title-row-gap);
     font-size: var(--fs-product-title-addendum-size);
     line-height: var(--fs-product-title-addendum-line-height);
     color: var(--fs-product-title-addendum-color);
   }
+
+  [data-fs-product-title-rating] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-product-title-column-gap);
+    align-items: center;
+  }
+
+  [data-fs-product-title-reviews] {
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
 }