gatsby-matrix-theme 7.1.29 → 7.1.32

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [7.1.32](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.31...v7.1.32) (2022-07-06)
+
+
+### Bug Fixes
+
+* add option for affiliate link ([a0cbf0c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a0cbf0c4ca2919780828d9cc7b79a8ef218dec49))
+* config: update core theme ([7bad9e7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7bad9e7a73bd028ac0bb82b8c1094e11b02976c1))
+* enabled adding multiple ribbons on toplists ([a3c813a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a3c813ae4718534882a91ac9b7430a3df3a4694e))
+* hide button when isnt selected any operator ([96ffd2a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96ffd2a8ae8567bc789d2c089513ecc17b7b2fd7))
+* removed extra spaces from review link in comparison tab.e ([b9c0e26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b9c0e26dd808c26c243fff31b0ba8cb9229ce1e9))
+* updated module intro to use the core component ([43f663d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/43f663ddd71907d6b93734c423247abbcb65d84d))
+
+
+* Merge branch 'tm-2934-adding-2-links-card' into 'master' ([41486b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/41486b2431b62fb66f44b1db99c94b62bf3b5009))
+* Merge branch 'tm-2947-module-intro' into 'master' ([0c7c2e3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0c7c2e30d865225a3302e8d1fe600b13871ade45))
+* Merge branch 'tm-2935-multiple-ribbons-for-toplists' into 'master' ([892102a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/892102ad5fbcd20be4de98451140f94f2ec2638d))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([e43b8e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e43b8e590e5bcc3ef86894191f40cf50041cf9dc))
+
+## [7.1.31](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.30...v7.1.31) (2022-07-01)
+
+
+### Bug Fixes
+
+* make style and replaced headings to span ([ec24bbd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec24bbd532dc6cc4a4b65a62b26ebcd1c823d1f2))
+
+
+* Merge branch 'tm-2622-cookie' into 'master' ([8458ad5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8458ad5f80d41a9d98280513736fc16c118fd61e))
+
+## [7.1.30](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.29...v7.1.30) (2022-06-30)
+
+
+### Bug Fixes
+
+* added standardized logos in comparison table as well as width and height for licence and withdrawal methods ([681eb1d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/681eb1dcb8b3959948c84bbbdf2813beb0c6d71f))
+
 ## [7.1.29](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.28...v7.1.29) (2022-06-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.29",
+  "version": "7.1.32",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -29,7 +29,7 @@
     "react": "^17.0.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^8.0.4"
+    "gatsby-core-theme": "^8.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -78,6 +78,8 @@ export default function ComparisonTable({
       const CustomComponent = rowData.customComponent;
       return <CustomComponent key={key} operator={item} />;
     }
+    const imageObject =
+      item?.relation.standardised_logo_url_object || item?.relation.logo_url_object;
 
     switch (heading) {
       case 'casino_name':
@@ -85,7 +87,7 @@ export default function ComparisonTable({
           <td key={key} className={styles.casinoName}>
             {item?.relation?.logo_url ? (
               <LazyImg
-                src={imagePrettyUrl(item?.relation?.logo_url)}
+                src={imagePrettyUrl(imageObject?.filename || item?.relation.logo_url, 89, 89)}
                 height={89}
                 width={89}
                 alt={item.relation.name}
@@ -115,7 +117,7 @@ export default function ComparisonTable({
           <td key={key} className={styles.raiting}>
             <StarRating numOfStars={5} rating={item?.relation?.rating} />
             {type === 'operator' && index === 0 ? null : (
-              <Link to={item.path}> {translate(translations, 'review', 'Review')} </Link>
+              <Link to={item.path}>{translate(translations, 'review', 'Review')}</Link>
             )}
           </td>
         );
@@ -150,7 +152,7 @@ export default function ComparisonTable({
                       return (
                         <LazyImg
                           key={`${key}-${deposit.name}`}
-                          src={imagePrettyUrl(deposit?.logo_filename)}
+                          src={imagePrettyUrl(deposit?.logo_filename, 72, 72)}
                           width={72}
                           height={72}
                           alt={deposit.name}
@@ -209,8 +211,9 @@ export default function ComparisonTable({
                   return (
                     <LazyImg
                       key={license.name}
-                      src={imagePrettyUrl(license?.logo_filename)}
+                      src={imagePrettyUrl(license?.logo_filename, 72, 72)}
                       height={32}
+                      width={72}
                       alt={license.name}
                     />
                   );

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

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import {
@@ -23,6 +24,7 @@ const GameCard = ({
   width = 300,
   height = 250,
   useOneStarRating = false,
+  affilateLink = false,
 }) => {
   const { relation, title, path, banner } = item;
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
@@ -34,6 +36,31 @@ const GameCard = ({
     ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
     : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
+  const button = () => {
+    if (affilateLink) {
+      return (
+        <>
+          {item?.extra_fields?.operator ? (
+            <OperatorCta
+              tracker="main"
+              operator={item?.extra_fields?.operator}
+              playText={translate(translations, 'play_now_game', 'Play for Real')}
+              gtmClass="operator-card-gtm btn-cta"
+            />
+          ) : null}
+        </>
+      );
+    }
+    return (
+      <Button
+        to={path}
+        primaryColor={!featured}
+        btnText={translate(translations, button_text, 'Play now')}
+        className={styles.playNow}
+        gtmClass="game-card-gtm btn-cta"
+      />
+    );
+  };
   return (
     <BaseCard item={item} isLinked cardType="game">
       {!featured && (
@@ -75,13 +102,7 @@ const GameCard = ({
             )}
           </div>
         </div>
-        <Button
-          to={path}
-          primaryColor={!featured}
-          btnText={translate(translations, button_text, 'Play now')}
-          className={styles.playNow}
-          gtmClass="game-card-gtm btn-cta"
-        />
+        {button()}
       </div>
     </BaseCard>
   );
@@ -102,11 +123,15 @@ GameCard.propTypes = {
     title: PropTypes.string,
     path: PropTypes.string,
     banner: PropTypes.string,
+    extra_fields: PropTypes.shape({
+      operator: PropTypes.shape({}),
+    }),
   }).isRequired,
   button_text: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
   useOneStarRating: PropTypes.bool,
+  affilateLink: PropTypes.bool,
 };
 
 export default GameCard;

package/src/components/molecules/cookie-modal/category/category.module.scss

@@ -3,7 +3,7 @@
   overflow-y: hidden;
   background-color: #f3f2f2;
   border-radius: 8px;
-  margin-bottom: 8px;
+  margin-top: 8px;
 
   .categoryHeader {
     display: flex;
@@ -19,6 +19,7 @@
       font-weight: 700;
       font-size: 14px;
       line-height: 22px;
+      text-align: right
     }
 
     .boxTitle {
@@ -27,7 +28,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      > h3 {
+      > span {
         margin: 0px;
         padding-left: 10px;
         font-weight: 700;

package/src/components/molecules/cookie-modal/category/index.js

@@ -23,7 +23,7 @@ const CategoryContainer = ({
       <div className={styles.categoryHeader}>
         <div className={styles.boxTitle}>
           {currentSection === index ? <AiOutlineMinus /> : <AiOutlinePlus />}
-          <h3>{translate(translations, obj?.translateKey, obj?.altTranslation)}</h3>
+          <span>{translate(translations, obj?.translateKey, obj?.altTranslation)}</span>
         </div>
         {obj?.button ? (
           <ToggleButton state={currentState} setStateFunc={updateState} />

package/src/components/molecules/cookie-modal/cookie-modal.module.scss

@@ -26,12 +26,10 @@
     margin-top: 18px;
     margin-bottom: 16px;
 
-    h4 {
-      margin: 0px;
+    span {
       font-size: 16px;
       font-weight: 700;
       line-height: 24px;
-      margin-bottom: 8px;
       color: #150E06;
     }
     p {
@@ -39,6 +37,7 @@
       font-size: 14px;
       line-height: 19px;
       color: #150E06;
+      margin-top: 8px;
     }
   }
 
@@ -74,7 +73,7 @@
     }
   }
   .lastButton {
-    padding-top: 6px;
+    padding-top: 16px;
     padding-bottom: 3.2rem;
     > button {
       height: 40px;
@@ -86,7 +85,21 @@
   @include min(tablet) {
     border-radius: 16px;
     padding: 34px 32px;
-    overflow-y: hidden;
+    overflow-y: scroll;
+    max-height: 98vh;
+    &::-webkit-scrollbar {
+      width: 3px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #888;
+      border-radius: 10px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
     .modalCookieHeader {
       justify-content: center;
       padding-bottom: 27px;
@@ -104,7 +117,7 @@
       margin-top: 0px;
       margin-bottom: 0px;
       color: #150e06;
-      h4 {
+      span {
         font-size: 18px;
         line-height: 26px;
       }
@@ -131,6 +144,7 @@
       }
     }
     .lastButton {
+    
       padding-bottom: 0rem;
       > button {
         width: auto;

package/src/components/molecules/cookie-modal/index.js

@@ -44,7 +44,9 @@ const CookieModal = ({ acceptCookies, closeModal, logo = '../../../../../images/
         </button>
       </div>
       <div className={styles.modalTextHeader}>
-        <h4>{translate(translations, 'privacy_preference_title', 'Privacy Preference Center')}</h4>
+        <span>
+          {translate(translations, 'privacy_preference_title', 'Privacy Preference Center')}
+        </span>
         <p>{translate(translations, 'privacy_preference_text')}</p>
       </div>
       <div className={styles.modalButtons}>
@@ -68,9 +70,9 @@ const CookieModal = ({ acceptCookies, closeModal, logo = '../../../../../images/
         />
       </div>
       <div className={styles.mainBox}>
-        <h3 className={styles.mainTitle}>
+        <span className={styles.mainTitle}>
           {translate(translations, 'menage_consent_preference', 'Manage Consent Preferences')}
-        </h3>
+        </span>
 
         {CategoryObj.map((elm, index) => {
           const state = index === 1 ? anlyticsButton : marketing;

package/src/components/molecules/toplist/row/variant-one.js

@@ -48,7 +48,7 @@ export default function Row({
   const prettyLink = prettyTracker(item, trackerType);
   const hasRibbon = getExtraField(item.extra_fields, 'ribbon_text');
   const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
-
+  const ribbons = hasRibbon?.split(',');
   const launchDate = getLaunchDate(item.founded);
 
   return (
@@ -64,16 +64,18 @@ export default function Row({
       )}
       {hasRibbon && (
         <div className={styles.ribbon}>
-          <Link to={reviewPath} className="toplist-variant-one-gtm">
-            <Label
-              title={getExtraField(item.extra_fields, 'ribbon_text')}
-              bgColor={
-                getExtraField(item.extra_fields, 'ribbon_color')
-                  ? getExtraField(item.extra_fields, 'ribbon_color')
-                  : '#0000'
-              }
-            />
-          </Link>
+          {ribbons.map((r) => (
+            <Link to={reviewPath} className="toplist-variant-one-gtm">
+              <Label
+                title={r}
+                bgColor={
+                  getExtraField(item.extra_fields, 'ribbon_color')
+                    ? getExtraField(item.extra_fields, 'ribbon_color')
+                    : '#0000'
+                }
+              />
+            </Link>
+          ))}
         </div>
       )}
 
@@ -87,10 +89,7 @@ export default function Row({
         >
           <LazyImage
             alt={getAltText(imageObject, item.name)}
-            src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 80, 80).replace(
-              'filters:format(webp)/',
-              ''
-            )}
+            src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 80, 80)}
             width={80}
             height={800}
           />

package/src/components/molecules/toplist/row/variant-one.module.scss

@@ -45,6 +45,10 @@
     left: 4rem;
     top: 0.2rem;
 
+    a {
+      margin-right: 1rem;
+    }
+
     span {
       padding: 0.8rem 1rem;
       font-size: 1rem;
@@ -148,7 +152,6 @@
       }
     }
 
-
     &.withRibbon {
       @include min(tablet) {
         padding-top: 2rem !important;

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

@@ -1,7 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import loadable from '@loadable/component';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import { prettyTracker, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
@@ -111,6 +111,11 @@ const Modules = ({ module, page, pageContext }) => {
     '--module-background-color': module.background_color,
   };
 
+  const ModuleIntro =
+    module.name !== 'top_list' &&
+    module.module_introduction &&
+    loadable(() => import('~molecules/content-intro'));
+
   return (
     ModuleComponent && (
       <div
@@ -121,13 +126,7 @@ const Modules = ({ module, page, pageContext }) => {
         } ${styles.module} ${module?.style && styles[module.style]} module`}
       >
         {module.name !== 'top_list' && <ModuleTitle module={module} />}
-        {module.name !== 'top_list' && module.module_introduction && (
-          // eslint-disable-next-line react/no-danger
-          <div
-            className={styles.module_introduction}
-            dangerouslySetInnerHTML={{ __html: module?.module_introduction }}
-          />
-        )}
+        {ModuleIntro && <ModuleIntro content={module.module_introduction} />}
         <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
       </div>
     )

package/src/hooks/tabs/index.js

@@ -102,6 +102,10 @@ const Tabs = ({
     setActiveTab(tabId);
     setTimeout(forceCheck);
   }
+
+  const ModuleIntro =
+    module.module_introduction && loadable(() => import('~molecules/content-intro'));
+
   return (
     <>
       <div className={tabHeaderClass}>
@@ -124,10 +128,7 @@ const Tabs = ({
             <></>
           )}
         </div>
-        {module.module_introduction && (
-          // eslint-disable-next-line react/no-danger
-          <div dangerouslySetInnerHTML={{ __html: module?.module_introduction }} />
-        )}
+        {ModuleIntro && <ModuleIntro content={module.module_introduction} />}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
       </div>