gatsby-matrix-theme 53.0.31 → 53.1.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [53.1.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.0.31...v53.1.0) (2025-05-22)
+
+
+### Bug Fixes
+
+* alt function alteration ([012fc3c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/012fc3c8f10e7a4ff2ac85a80775b89a057ad277))
+* hide author default image ([3930e6a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/3930e6a3c9988208d3f0f1ad3128d4927f4cd681))
+* move linear rating to matrix ([db2e50d](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/db2e50da97c9f9e73da06fff538aabc2a58885d6))
+* tests ([4cbdb44](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/4cbdb44a5289eee162cfd6c2257f905e2fdc2849))
+* tests ([98d7d76](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/98d7d762cffeee17247592ccb7c06395a19391b8))
+* tests ([500971f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/500971f8bd1161fbb7ff616371d72a6258c3ed88))
+* update component ([7cdf5c8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/7cdf5c8515bf5293c7422a15f3182358721dbcc0))
+* update components ([5241da8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/5241da814bd85fd88e6bce38884fb4379180e218))
+* update core version ([feacafc](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/feacafc553f7178bdc711b1f329bd44a1ed0483a))
+* update core version ([670d2eb](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/670d2ebb8905e692ff83cdfd81af95ff23452146))
+* update linear stars component ([0c5a485](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/0c5a48532d7678d9293a4e52d874f49a5097f296))
+* update modules to include rating comments ([77b3c80](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/77b3c80f49f54bbf953faee0dee86072a6dd98f0))
+
+
+* Merge branch 'tm-5433-ratings-template-block' into 'master' ([e0d7a5f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/e0d7a5f5f8f3266471a4917c5b46f6e132d62fbb))
+* Merge branch 'tm-5470-custom-image-alt' into 'master' ([b5242f8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b5242f8b3f3f223b2ff711eedf0ccedeaae73a1b))
+* Merge branch 'tm-5468-alt-text-adjustments' into 'master' ([2c89703](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/2c897030cc563909ba1c06e4594c3aa4d3baffda))
+* Merge branch 'tm-5466-author-image' into 'master' ([74faabd](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/74faabdf7d98be70090d61d3e202e6fec1090587))
+
+
+### Features
+
+* update core theme ([d593931](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/d593931d867bde6c1a8c525868fff890a50288c7))
+
 ## [53.0.31](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.0.30...v53.0.31) (2025-05-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.0.31",
+  "version": "53.1.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.0.39",
+    "gatsby-core-theme": "44.1.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

package/src/components/atoms/author-card/index.js

@@ -2,8 +2,9 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 import styles from './author-card.module.scss';
 
 const AuthorCard = ({ author, width = 60, height = 60 }) => {

package/src/components/atoms/cards/article-card/variables/index.js

@@ -33,15 +33,17 @@ const VariableComponent = ({
             showAuthorOnOneLine ? styles?.showAuthorOnOneLine || '' : styles?.showAuthorBlock || ''
           } `}
         >
-          <div className={styles.authorImages}>
-            <LazyImage
-              alt={author?.name}
-              width={imgSize}
-              height={imgSize}
-              src={imagePrettyUrl(author?.image, imgSize, imgSize)}
-            />
-            {verifyIcon && verifyIcon}
-          </div>
+          {!!author?.image && (
+            <div className={styles.authorImages}>
+              <LazyImage
+                alt={author?.name}
+                width={imgSize}
+                height={imgSize}
+                src={imagePrettyUrl(author?.image, imgSize, imgSize)}
+              />
+              {verifyIcon && verifyIcon}
+            </div>
+          )}
           <div className={styles.authorContainer}>
             {showAuthorOnOneLine && (
               <p>

package/src/components/atoms/cards/author/template-one/index.js

@@ -6,7 +6,9 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import LazyImage from '~hooks/lazy-image';
 import Socials from '../../../author/socials';
 import styles from './template-one.module.scss';
-import { imagePrettyUrl, getAltText, textWordsLimit } from '~helpers/getters';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+
 
 export default function TemplateOne({ item, width = 72, height = 72 }) {
   const author = item.relation;

package/src/components/atoms/cards/author/template-two/index.js

@@ -5,7 +5,8 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import LazyImage from '~hooks/lazy-image';
 import Socials from '../../../author/socials';
 import styles from './template-two.module.scss';
-import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 
 export default function TemplateTwo({ item, width = 80, height = 80 }) {
   const author = item.relation;

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -3,16 +3,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   imagePrettyUrl,
-  getSectionExtraField,
-  getAltText,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+  getSectionExtraField
+} from '~helpers/getters';
+import Button from '~atoms/button/button';
+import OperatorCta from '~atoms/button/operator-cta';
+import GatsbyImg from '~hooks/gatsby-img';
+import StarRating from '~molecules/star-rating';
+import OneStarRating from '~molecules/star-rating/one-star';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
+import { getAltText } from '~helpers/image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -4,15 +4,15 @@ import PropTypes from 'prop-types';
 import {
   imagePrettyUrl,
   getSectionExtraField,
-  getAltText,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+} from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Button from '~atoms/button/button';
+import OperatorCta from '~atoms/button/operator-cta';
+import StarRating from '~molecules/star-rating';
+import OneStarRating from '~molecules/star-rating/one-star';
+import GatsbyImg from '~hooks/gatsby-img';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-four.module.scss';

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -3,15 +3,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   imagePrettyUrl,
-  getSectionExtraField,
-  getAltText,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+  getSectionExtraField
+} from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Button from '~atoms/button/button';
+import StarRating from '~molecules/star-rating/one-star';
+import OperatorCta from '~atoms/button/operator-cta';
+import GatsbyImg from '~hooks/gatsby-img';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
 import styles from './template-one.module.scss';

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -3,16 +3,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   imagePrettyUrl,
-  getSectionExtraField,
-  getAltText,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+  getSectionExtraField
+} from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Button from '~atoms/button/button';
+import StarRating from '~molecules/star-rating';
+import OneStarRating from '~molecules/star-rating/one-star';
+import OperatorCta from '~atoms/button/operator-cta';
+import GatsbyImg from '~hooks/gatsby-img';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-three.module.scss';

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -3,16 +3,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   imagePrettyUrl,
-  getSectionExtraField,
-  getAltText,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+  getSectionExtraField
+} from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Button from '~atoms/button/button';
+import OperatorCta from '~atoms/button/operator-cta';
+import StarRating from '~molecules/star-rating';
+import OneStarRating from '~molecules/star-rating/one-star';
+import GatsbyImg from '~hooks/gatsby-img';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-two.module.scss';

package/src/components/atoms/cards/payment-method/template-one/index.js

@@ -2,12 +2,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { getAltText, imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Button from '~atoms/button/button';
+import Link from '~hooks/link';
+import StarRating from '~molecules/star-rating/one-star';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import SellingPoints from '../sellingPoints';
 import styles from './template-one.module.scss';

package/src/components/atoms/cards/payment-method/template-three/index.js

@@ -2,13 +2,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import OneStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Link from '~hooks/link';
+import Button from '~atoms/button/button';
+import StarRating from '~molecules/star-rating';
+import OneStarRating from '~molecules/star-rating/one-star';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 import SellingPoints from '../sellingPoints';
 import styles from './template-three.module.scss';
 

package/src/components/atoms/cards/popup-card/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import { getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
-import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
-import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
+import OperatorCta from '~atoms/button/operator-cta';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import ReviewLink from '~atoms/review-link';
+import Tnc from '~molecules/tnc';
+import StarRating from '~molecules/star-rating';
+import Bonus from '~molecules/bonus-box/template-one';
 import LazyImage from '~hooks/lazy-image';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './popup-card.module.scss';

package/src/components/atoms/cards/software-provider-card/index.js

@@ -1,9 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { getAltText, imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
+import Link from '~hooks/link';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 
 import styles from './software-provider-card.module.scss';
 

package/src/components/atoms/feedback/template-three/index.js

@@ -2,14 +2,14 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters.mjs';
-import { BiLike } from '@react-icons/all-files/bi/BiLike';
 import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-
-import ModalProvider from 'gatsby-core-theme/src/hooks/modal/modalContext';
-import Modal from 'gatsby-core-theme/src/hooks/modal';
-import ModalContent from 'gatsby-core-theme/src/hooks/modal/modal-content';
+import { BiLike } from '@react-icons/all-files/bi/BiLike';
+import { imagePrettyUrl } from '~helpers/getters.mjs';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import ModalProvider from '~hooks/modal/modalContext';
+import Modal from '~hooks/modal';
+import ModalContent from '~hooks/modal/modal-content';
 import { addVote } from '../../../../services';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 

package/src/components/atoms/feedback/template-two/index.js

@@ -2,10 +2,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters.mjs';
-import { BiLike } from '@react-icons/all-files/bi/BiLike';
 import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { BiLike } from '@react-icons/all-files/bi/BiLike';
+import { imagePrettyUrl } from '~helpers/getters.mjs';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { addVote } from '../../../../services';
 

package/src/components/atoms/ratings-with-comments/index.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import { FaStar } from '@react-icons/all-files/fa/FaStar';
+import { operatorRatings } from 'gatsby-core-theme/src/constants/ratings-constant';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './ratings-with-comments.module.scss';
+import LinearStarRating from '../../../gatsby-core-theme/components/molecules/star-rating/linear-rating';
+
+const RatingsWithComments = ({
+  page,
+  numOfStars = 5,
+  templateWithBoxes = false,
+  showTitle = true,
+  currency = '€',
+  showComment = true,
+  icon = null,
+  iconColor = '#D63B54'
+}) => {
+  const { relation: item, type } = page;
+  const typeCheck =
+    // eslint-disable-next-line no-nested-ternary
+    type === 'operator' ? (item?.type === 'casino' ? 'operator' : item?.type) : type;
+
+  const ratings = operatorRatings[typeCheck] || [];
+
+  const rangeText = {
+    0: useTranslate('range_low', 'Low'),
+    1: useTranslate('range_medium', 'Medium'),
+    2: useTranslate('range_high', 'High'),
+  };
+
+  const ratingsData = operatorRatings.ratingProperties.some((prop) => item[prop])
+    ? item
+    : item?.bonus || item;
+
+  if (!ratings.length) {
+    return null;
+  }
+
+  const renderRatingItem = (rating) => {
+    const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
+    let valueDisplayed;
+    const value = getObjectValue(ratingsData, fieldValue);
+
+    // eslint-disable-next-line no-nested-ternary
+    const component = showComment ? (
+      <LinearStarRating
+        numOfStars={numOfStars}
+        rating={value}
+        icon={icon || <FaStar title="Star Icon" color={iconColor} />}
+      />
+    ) : componentToUse ? (
+      componentToUse(numOfStars, value, currency)
+    ) : (
+      false
+    );
+
+    if (component) {
+      valueDisplayed = component || '-';
+    } else if (fieldValue.includes('volatility')) {
+      valueDisplayed = rangeText[getObjectValue(ratingsData, fieldValue)] || '-';
+    } else {
+      valueDisplayed = value || '-';
+    }
+
+    const comment = showComment
+      ? ratingsData?.rating_comments?.find((entry) => entry?.rating_name === fieldValue)?.comment
+      : null;
+    
+    return (
+      <li
+        key={keygen()}
+        className={`${styles?.item || ''} ${fieldLabel === 'Overall' && styles?.overall}`}
+      >
+        <p className={styles?.label || ''}>{useTranslate(translationKey, fieldLabel)}</p>
+
+        <>
+          {valueDisplayed}
+          {typeof valueDisplayed === 'number' && fieldValue === 'rtp' && '%'}
+          {comment && <span className={styles?.comment}>{comment}</span>}
+        </>
+      </li>
+    );
+  };
+  return (
+    <div
+      className={`${styles.ratingsContainer} ${templateWithBoxes && styles.ratingWithBoxes} ${
+        showComment ? styles.ratingsWithComments : ''
+      }`}
+    >
+      {showTitle ? (
+        <div className={styles.withTitle || ''}>
+          <h3>{useTranslate('ratings_with_comments_title', 'Ratings')}</h3>
+          {ratings
+            ?.filter((rating) => rating.fieldLabel === 'Overall')
+            .map((rating) => renderRatingItem(rating))}
+        </div>
+      ) : (
+        ratings
+          ?.filter((rating) => rating.fieldLabel === 'Overall')
+          .map((rating) => renderRatingItem(rating))
+      )}
+
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+      <ul className={`${styles?.ratingList || ''}`} tabIndex={0}>
+        {ratings
+          ?.filter((rating) => rating.fieldLabel !== 'Overall')
+          .map((rating) => renderRatingItem(rating))}
+      </ul>
+    </div>
+  );
+};
+
+RatingsWithComments.propTypes = {
+  page: PropTypes.shape({
+    relation: PropTypes.shape({
+      type: PropTypes.string,
+      bonus: PropTypes.shape({}),
+    }),
+    type: PropTypes.shape({}),
+  }),
+  numOfStars: PropTypes.number,
+  templateWithBoxes: PropTypes.bool,
+  showTitle: PropTypes.string,
+  currency: PropTypes.string,
+  showComment: PropTypes.bool,
+  icon: PropTypes.element,
+  iconColor: PropTypes.string,
+};
+
+export default RatingsWithComments;