gatsby-matrix-theme 53.0.31 → 53.1.0

package/src/components/atoms/ratings-with-comments/ratings-with-comments.module.scss

@@ -0,0 +1,300 @@
+/* stylelint-disable comment-pattern, selector-max-compound-selectors, max-nesting-depth */
+.ratingsContainer {
+  display: flex;
+  box-shadow: 0 4px 6px -2px #1b1b1c0a, 0 12px 16px -4px #1b1b1c12;
+  padding: 1.6rem;
+  background: #fff;
+  border-radius: 0.8rem;
+  gap: 1.7rem;
+  flex-direction: column;
+
+  @include min(laptop) {
+    flex-direction: row;
+  }
+
+  > li {
+    background: #f1f5f9;
+    padding: 1.6rem 0.8rem;
+    border-radius: 0.8rem;
+    display: flex;
+    flex-flow: row-reverse wrap;
+    justify-content: center;
+    min-width: 11.4rem;
+    gap: 0.8rem;
+    min-height: 7.2rem;
+    align-items: center;
+
+    @include min(laptop) {
+      flex-direction: column-reverse;
+      min-height: 14.2rem;
+    }
+
+    > div {
+      @include flex-direction(row);
+
+      align-items: center;
+      gap: 0.8rem;
+
+      @include min(laptop) {
+        @include flex-direction(column);
+      }
+    }
+
+    > p {
+      font-size: 1.4rem;
+      line-height: 2.2rem;
+      font-weight: 600;
+      color: #0f172a;
+    }
+  }
+}
+
+.ratingList {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  width: 100%;
+  gap: 1.6rem 2.2rem;
+  background: #f1f5f9;
+  border-radius: 1.6rem;
+  padding: 1.6rem;
+
+  @include min(laptop) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.item {
+  display: grid;
+  position: relative;
+
+  @include min(laptop) {
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+}
+
+.label {
+  color: #0f172a;
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  font-weight: 600;
+}
+
+.value {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 28px;
+  color: #1c1a28;
+  display: flex;
+
+  @include min(tablet) {
+    font-weight: 800;
+  }
+}
+
+.showOnlyMobile {
+  border: 1.5px solid #d63b54;
+}
+
+.ratingWithBoxes {
+  background: transparent;
+  padding: 0;
+  overflow-y: auto;
+  padding-bottom: 1.6rem;
+
+  &::-webkit-scrollbar {
+    height: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #5b8bb933;
+    border-radius: 1rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 1rem;
+  }
+
+  @include min(tablet) {
+    padding-bottom: 0;
+  }
+
+  > ul {
+    background: transparent;
+    display: flex;
+    padding: 0;
+    gap: 0.8rem;
+
+    @include min(tablet) {
+      gap: 1.6rem;
+    }
+
+    > li {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      gap: 0.8rem;
+      min-height: 9.6rem;
+      background: #f4f4f4;
+      border-radius: 0.8rem;
+      padding: 2.2rem;
+      color: #1b1b1c;
+      font-weight: 600;
+      font-size: 1.4rem;
+      line-height: 2.2rem;
+      // min-width: 13.6rem;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+
+      @include min(tablet) {
+        white-space: normal;
+      }
+
+      > p {
+        font-size: 1.4rem;
+        line-height: 2.2rem;
+        font-weight: 500;
+        color: #3c3c40;
+        min-width: 98px;
+      }
+    }
+  }
+}
+
+.withTitle {
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+
+  @include min(tablet) {
+    justify-content: space-between;
+
+    @include flex-direction(row);
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 2.4rem;
+    color: #000;
+    line-height: 4rem;
+    font-weight: 600;
+  }
+
+  > li {
+    display: flex;
+    justify-content: space-between;
+    gap: 1.8rem;
+
+    @include min(tablet) {
+      gap: 1.5rem;
+    }
+
+    > p {
+      color: #000;
+      font-size: 1.8rem;
+      line-height: 2.8rem;
+      font-weight: 600;
+    }
+
+    > div {
+      gap: 1.5rem;
+      display: flex;
+
+      @include min(tablet) {
+        display: inherit;
+      }
+
+      > div:first-child {
+        background: #fff;
+        margin: 1rem 0;
+        border-radius: 0.8rem;
+
+        > div {
+          background: #59be28;
+          border-radius: 0.8rem;
+        }
+      }
+
+      > div:last-child {
+        display: flex;
+        align-items: center;
+        position: static;
+
+        > svg {
+          margin-right: 1.5rem;
+        }
+      }
+    }
+  }
+}
+
+.ratingsWithComments {
+  flex-direction: column;
+  padding: 0;
+  box-shadow: none;
+
+  @include min(tablet) {
+    padding: inherit;
+  }
+
+  > ul {
+    gap: 1.6rem;
+
+    @include min(tablet) {
+      row-gap: 3.2rem;
+    }
+
+    > li {
+      @include flex-direction(column);
+
+      align-items: flex-start;
+
+      > p {
+        font-size: 2rem;
+        line-height: 3.6rem;
+        color: #000;
+        font-weight: 600;
+        margin-bottom: 0.8rem;
+      }
+
+      > span {
+        grid-column: 1 / 3;
+        font-size: 1.6rem;
+        line-height: 2.6rem;
+        color: #000;
+      }
+
+      > div {
+        min-width: 100%;
+        grid-template-columns: 8fr auto;
+        gap: 2rem;
+
+        > div:first-child {
+          background: #fff;
+          margin: 1rem 0;
+          border-radius: 0.8rem;
+
+          > div {
+            background: #59be28;
+            border-radius: 0.8rem;
+          }
+        }
+
+        > div:last-child {
+          font-size: 1.8rem;
+          line-height: 2.8rem;
+          color: #000;
+          display: flex;
+          align-items: center;
+
+          svg {
+            margin-right: 0.8rem;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/molecules/header/variants/author/assets/portrait/index.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 import styles from './portrait.module.scss';
 
 export default function Portrait({ className = '', author, width = 180, height = 180 }) {

package/src/components/molecules/header/variants/default/template-two/index.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import LazyImage from '~hooks/lazy-image';
+import Button from '~atoms/button/button';
 import {
   imagePrettyUrl,
-  getAltText,
   getBonus,
   getExtraField,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
+} from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Tnc from '~molecules/tnc';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './template-two.module.scss';
 

package/src/components/molecules/header/variants/operator/template-five/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText, getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import OneStar from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import { operatorRatings } from 'gatsby-core-theme/src/constants/ratings-constant';
+import { imagePrettyUrl, getObjectValue } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import OneStar from '~molecules/star-rating/one-star';
+import StarRating from '~molecules/star-rating';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import { operatorRatings } from '~constants/ratings-constant';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import Verify from '~images/icons/verify';

package/src/components/molecules/header/variants/operator/template-four/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Ribbon from 'gatsby-core-theme/src/components/atoms/ribbons';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import StarRating from '~molecules/star-rating/one-star';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Ribbon from '~atoms/ribbons';
+import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';

package/src/components/molecules/header/variants/operator/template-three/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Ribbons from 'gatsby-core-theme/src/components/atoms/ribbons';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import Rating from '~atoms/ratings';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Ribbons from '~atoms/ribbons';
 import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';
 import { TrackingKeys } from '~constants/tracking-api'

package/src/components/molecules/header/variants/payment/template-five/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable react/no-danger */
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
-import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Tnc from '~molecules/tnc';
+import LazyImage from '~hooks/lazy-image';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import Verify from '~images/icons/verify';

package/src/components/molecules/header/variants/payment/template-four/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import Rating from '~atoms/ratings';
+import OperatorBanner from '~atoms/header-operator-bannner';
 import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-four.module.scss';

package/src/components/molecules/header/variants/payment/template-one-three/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-danger */
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import LazyImage from '~hooks/lazy-image';
+import StarRating from '~molecules/star-rating/one-star';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 import Verify from '~images/icons/verify';

package/src/components/molecules/header/variants/payment/template-two/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable react/no-danger */
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl, getAltText, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
+import { getAltText } from '~helpers/image';
+import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
+import LazyImage from '~hooks/lazy-image';
+import StarRating from '~molecules/star-rating/one-star';
+import OperatorBanner from '~atoms/header-operator-bannner';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
 

package/src/components/molecules/header/variants/slot/template-one/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Rating from '~atoms/ratings';
 import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 

package/src/components/molecules/header/variants/slot/template-two/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
-import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import Tnc from '~molecules/tnc';
+import LazyImage from '~hooks/lazy-image';
+import OperatorBanner from '~atoms/header-operator-bannner';
+import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'

package/src/components/molecules/operator-details/index.js

@@ -1,13 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Link from 'gatsby-core-theme/src/hooks/link';
-import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
-import MultiStarRating from 'gatsby-core-theme/src/components/molecules/star-rating/';
-import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
-import Ribbons from 'gatsby-core-theme/src/components/atoms/ribbons';
+import LazyImage from '~hooks/lazy-image';
+import Link from '~hooks/link';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
+import MultiStarRating from '~molecules/star-rating/';
+import StarRating from '~molecules/star-rating/one-star';
+import ReviewLink from '~atoms/review-link';
+import Ribbons from '~atoms/ribbons';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import PrettyLink from '~atoms/pretty-link';
 import VerifiedAuthor from '../../../images/icons/verified-author';

package/src/components/molecules/operator-exclusive/index.js

@@ -4,12 +4,13 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import OperatorCta from '~atoms/button/operator-cta';
+import { isMobileDevice } from '~helpers/device-detect';
+import LazyImage from '~hooks/lazy-image';
 import PrettyLink from '~atoms/pretty-link';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { imagePrettyUrl, getAltText } from '~helpers/getters';
+import { imagePrettyUrl } from '~helpers/getters';
+import { getAltText } from '~helpers/image';
 import { TrackingKeys } from '~constants/tracking-api';
 import styles from './oeprator-exlusive.module.scss';
 

package/src/gatsby-core-theme/components/molecules/module/index.js

@@ -197,6 +197,8 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData, moduleP
         return lazy(() => import('../../../../components/atoms/teatime-lunchtime-disclaimer'));
       case 'disquss':
         return lazy(() => import(`~atoms/disquss`));
+      case 'rating_casinos':
+      return lazy(() => import('../../../../components/atoms/ratings-with-comments'));
       default:
         return null;
     }

package/src/gatsby-core-theme/components/molecules/star-rating/linear-rating.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import { getRating } from '~helpers/rating';
+
+import styles from './linear-rating.module.scss';
+
+const LinearStarRating = ({
+  rating,
+  numOfStars = 5,
+  active = true,
+  showLabel = false,
+  icon = null,
+  showRatingText = true,
+  showDecimal = false,
+  showRoundedRating = false,
+}) => {
+  // Calculate the percentage for the bar fill based on the rating and numOfStars
+  const calculatedRating = getRating(rating, showRoundedRating);  
+  const percentage = calculatedRating  ? ((calculatedRating / numOfStars) * 100) : 0;
+  
+  return (
+    <div className={`${styles.starRatingContainer || ''} ${!active && (styles.inactive || '')}`}>
+      {showLabel && <span>{useTranslate('rating', 'Rating:')}</span>}
+      <div className={styles.bar}>
+        <div
+          className={styles.fill}
+          style={{
+            width: `${percentage}%`,
+          }}
+         />
+      </div>
+      {showRatingText && (
+        <div className={styles.ratingText}>
+          {icon && icon}
+          {showDecimal ? calculatedRating.toFixed(1) : calculatedRating}
+          <span>/</span>
+          <span>{numOfStars}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+LinearStarRating.propTypes = {
+  numOfStars: PropTypes.oneOf([5, 10]),
+  rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
+  active: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  icon: PropTypes.element,
+  showDecimal: PropTypes.bool,
+  showRoundedRating: PropTypes.bool,
+  showRatingText: PropTypes.bool,
+};
+
+export default LinearStarRating;

package/src/gatsby-core-theme/components/molecules/star-rating/linear-rating.module.scss

@@ -0,0 +1,43 @@
+.starRatingContainer {
+  display: grid;
+  gap: 0.8rem;
+  align-items: center;
+  
+  @include min(laptop) {
+  grid-template-columns: 3fr 1fr;
+  min-width: 21.78rem;
+  }
+}
+
+.bar {
+  position: relative;
+  width: 100%; 
+  height: 0.8rem; 
+  background-color: #D3E0EC;
+  border-radius: 5px;
+  overflow: hidden;
+  margin: 5px 0;
+    min-width: 17.1rem;
+}
+
+.fill {
+  height: 100%;
+  background-color: #FBBF24; 
+  transition: width 0.3s ease;
+  border-radius: 0.8rem;
+}
+
+.ratingText {
+  color: #0F172A;
+  font-size: 1.6rem;
+  line-height: 2.6rem;
+  font-weight: 600;
+  position: absolute;
+  right: 0;
+  top: 0;
+  
+  @include min(laptop) {
+    display: block;
+    position: static;
+  }
+}