gatsby-matrix-theme 2.0.5 → 2.2.0

package/src/components/atoms/modal/modal.module.scss

@@ -1,44 +1,47 @@
-.modal{
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+  @include flex-align(center, center);
+  .success {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,.6);
-    z-index: 9999;
+    background: #fff;
+    border-radius: 0.6rem;
+    height: auto;
+    width: 90%;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 2rem;
     @include flex-align(center, center);
-    .success{
-        position: fixed;
-        background: #fff;
-        border-radius: .6rem;
-        height: auto;
-        width: 90%;
-        top: 30%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-        padding: 2rem;
-        @include flex-align(center, center);
-        @include flex-direction(column);
-        @include min(tablet){
-            width: 40%;
-            top: 50%;
-        }
-        .closeBtn{
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            cursor: pointer;
-        }
-        svg{
-            width: 2.6rem;
-            height: 2.6rem;
-        }
-        p{
-            text-align: left;
-            padding-top: 1rem;
-            b{
-                text-align: center;
-            }
-        }
+    @include flex-direction(column);
+    @include min(tablet) {
+      width: 40%;
+      top: 50%;
     }
-}
+    .closeBtn {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      cursor: pointer;
+    }
+    svg {
+      width: 2.6rem;
+      height: 2.6rem;
+    }
+    p {
+      font-weight: 700;
+    }
+    div {
+      padding-top: 1rem;
+      p {
+        padding-top: 2.45rem;
+        font-weight: 700;
+      }
+    }
+  }
+}

package/src/components/atoms/newsletter/success/index.js

@@ -1,18 +1,23 @@
 import React from 'react';
-import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
 
 import Modal from '../../modal/index';
 
-const index = () =>{
-    return(
-        <Modal>
-            <IoMdCheckmarkCircleOutline color="green" />
-            <p><b> You are registered!!</b></p>
-            <p> now there are lots of extra goodies that are on their way to your inbox.<br/>
-            <b>All the best and good luck in the casino world!</b>
-            </p>
-        </Modal>
-    )
-}
+const index = ({
+  text = {
+    title: 'You are registered!!!',
+    section: 'Now there are lots of extra goodies that are on their way to your inbox.',
+    footer: 'All the best and good luck in the casino world!',
+  },
+}) => (
+  <Modal>
+    <IoMdCheckmarkCircleOutline color="green" />
+    <p>{text.title}</p>
+    <div>
+      {text.section}
+      <p>{text.footer}</p>
+    </div>
+  </Modal>
+);
 
-export default index
+export default index;

package/src/components/atoms/operator-bonuses/index.js

@@ -1,8 +1,9 @@
 /* eslint-disable eqeqeq */
 /* eslint-disable react/prop-types */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import PropTypes from 'prop-types';
 import styles from './operator-bonuses.module.scss';
 
@@ -16,6 +17,7 @@ const OperatorBonuses = ({ page, operator }) => {
   const status = operator?.status;
   const isPlaceholder = status === 'coming_soon' || page.extra_fields.operator_is_placeholder == 1;
   const isInoperative = status === 'inactive' || page.extra_fields.operator_is_inoperative == 1;
+  const { translations } = useContext(Context) || {};
 
   return (
     <div className={styles.leftSide}>
@@ -26,7 +28,7 @@ const OperatorBonuses = ({ page, operator }) => {
           </div>
           {!isInoperative && (
             <span className={styles.title}>
-              {translate(page?.translations, 'welcome_bonus', 'Welcome bonus')}
+              {translate(translations, 'welcome_bonus', 'Welcome bonus')}
             </span>
           )}
         </div>
@@ -37,8 +39,8 @@ const OperatorBonuses = ({ page, operator }) => {
       </>
       <div className={styles.welcomeDescription}>
         <p className={styles.textLeft}>
-          {translate(page?.translations, 'minimum_deposit', 'Minimum deposit')} <br />
-          {translate(page?.translations, 'turnover_requirements', 'Turnover requirements')}
+          {translate(translations, 'minimum_deposit', 'Minimum deposit')} <br />
+          {translate(translations, 'turnover_requirements', 'Turnover requirements')}
         </p>
         <p className={styles.textRight}>
           {min_deposit} {currency}
@@ -48,11 +50,11 @@ const OperatorBonuses = ({ page, operator }) => {
       </div>
       <div className={styles.buttonSummary}>
         {isInoperative && (
-          <p className={styles.textRight}>{translate(page?.translations, 'expired', 'Expired')}</p>
+          <p className={styles.textRight}>{translate(translations, 'expired', 'Expired')}</p>
         )}
         {isPlaceholder && (
           <p className={styles.textRight}>
-            {translate(page?.translations, 'comming_soon', 'Comming Soon')}
+            {translate(translations, 'comming_soon', 'Comming Soon')}
           </p>
         )}
         {!isPlaceholder && !isInoperative && (
@@ -60,7 +62,8 @@ const OperatorBonuses = ({ page, operator }) => {
             to={prettyLink}
             className="btnMain"
             isInternalLink={false}
-            btnText={translate(page?.translations, 'btn_bonus', 'Get your bonus now')}
+            btnText={translate(translations, 'btn_bonus', 'Get your bonus now')}
+            gtmClass="bonus-cta btn-cta"
           />
         )}
       </div>

package/src/components/atoms/search/autocomplete/article.js

@@ -4,7 +4,7 @@ import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
 
 const Article = ({ item = {}, Button = <GrFormNext /> }) => (
-  <Link to={item.path}>
+  <Link to={item.path} className="article-gtm">
     <h1>{item.title}</h1>
     {Button}
   </Link>

package/src/components/atoms/search/autocomplete/game.js

@@ -4,7 +4,7 @@ import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
 
 const Game = ({ item = {}, Button = <GrFormNext /> }) => (
-  <Link to={item.path}>
+  <Link to={item.path} className="game-gtm">
     <h1>{item.title}</h1>
     {Button}
   </Link>

package/src/components/atoms/search/autocomplete/operator.js

@@ -4,7 +4,7 @@ import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
 
 const Operator = ({ item = {}, Button = <GrFormNext /> }) => (
-  <Link to={`/${item.path}`}>
+  <Link to={`/${item.path}`} className="operator-gtm">
     <h1>{item.title}</h1>
     {Button}
   </Link>

package/src/components/atoms/search/autocomplete/payment_methods.js

@@ -4,7 +4,7 @@ import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
 
 const PaymentMethods = ({ item = {} }) => (
-  <Link to={item.path}>
+  <Link to={item.path} className="payment-method-gtm">
     <h1>{item.title}</h1>
     <GrFormNext />
   </Link>

package/src/components/atoms/search/autocomplete/software_provider.js

@@ -4,7 +4,7 @@ import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
 
 const SoftwareProvider = ({ item = {} }) => (
-  <Link to={item.path}>
+  <Link to={item.path} className="software-provider-gtm">
     <h1>{item.title}</h1>
     <GrFormNext />
   </Link>

package/src/components/atoms/table/banking/index.js

@@ -1,32 +1,36 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './banking.module.scss';
 
-const Index = ({ min_deposit, max_withdrawal, currency, translations }) => (
-  <div className={styles.contain}>
-    <div className={styles.row}>
-      <p>{translate(translations, 'min_deposit', 'Min Deposit')}:</p>
-      <strong>{min_deposit}</strong>
-    </div>
-    {max_withdrawal && (
-      <div className={styles.row}>
-        <p>{translate(translations, 'max_withdrawal', 'Max Withdrawal')}:</p>
-        <strong>{max_withdrawal}</strong>
-      </div>
-    )}
-    {currency && (
+const Index = ({ min_deposit, max_withdrawal, currency }) => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={styles.contain}>
       <div className={styles.row}>
-        <p>{translate(translations, 'currency_support', 'Currency Support')}:</p>
-        <strong>{currency}</strong>
+        <p>{translate(translations, 'min_deposit', 'Min Deposit')}:</p>
+        <strong>{min_deposit}</strong>
       </div>
-    )}
-  </div>
-);
+      {max_withdrawal && (
+        <div className={styles.row}>
+          <p>{translate(translations, 'max_withdrawal', 'Max Withdrawal')}:</p>
+          <strong>{max_withdrawal}</strong>
+        </div>
+      )}
+      {currency && (
+        <div className={styles.row}>
+          <p>{translate(translations, 'currency_support', 'Currency Support')}:</p>
+          <strong>{currency}</strong>
+        </div>
+      )}
+    </div>
+  );
+};
 Index.propTypes = {
-  translations: PropTypes.object,
   currency: PropTypes.string,
   max_withdrawal: PropTypes.string,
   min_deposit: PropTypes.string,

package/src/components/atoms/table/column/index.js

@@ -24,8 +24,6 @@ const Index = ({
   licenses,
   index,
   hideRow,
-  // eslint-disable-next-line react/prop-types
-  translations,
   chnageHeights,
   licensesMore,
   layout = 'list',
@@ -57,14 +55,14 @@ const Index = ({
           <td>
             <div className={styles.details}>
               <div className={styles.logo}>
-                <Link to={item.review_link}>
+                <Link to={item.review_link} className="table-column-gtm">
                   <LazyImage src={imagePrettyUrl(item.logo_url, 120, 45)} />
                 </Link>
 
                 <p>{item.name}</p>
               </div>
               <div className={styles.cta}>
-                <OperatorCta operator={item} />
+                <OperatorCta operator={item} gtmClass="table-operator-cta-gtm" />
               </div>
             </div>
           </td>
@@ -114,7 +112,6 @@ const Index = ({
                 min_deposit={min_deposit}
                 max_withdrawal={max_withdrawal}
                 currency={currency}
-                translations={translations}
               />
             </div>
           </td>

package/src/components/atoms/table/staticColumn/index.js

@@ -1,43 +1,38 @@
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './staticColumn.module.scss';
 
-const Index = ({
-  details,
-  rating,
-  bonus,
-  topFeatures,
-  banking,
-  licenses,
-  hideRow,
-  translations,
-}) => (
-  <div className={styles.columStatic}>
-    <tr style={{ height: details + 1 }} id="details">
-      <td>{translate(translations, 'casino_name', 'Casino Name')}</td>
-    </tr>
-    <tr style={{ height: rating }} id="rating">
-      <td>{translate(translations, 'rating', 'Rating')}</td>
-    </tr>
-    <tr style={{ height: bonus }} id="bonus">
-      <td>{translate(translations, 'bonus', 'Bonus')}</td>
-    </tr>
+const Index = ({ details, rating, bonus, topFeatures, banking, licenses, hideRow }) => {
+  const { translations } = useContext(Context) || {};
 
-    <tr style={{ height: topFeatures, display: hideRow ? 'none' : null }} id="topFeatures">
-      <td>{translate(translations, 'top_features', 'Top Features')}</td>
-    </tr>
-    <tr style={{ height: banking, display: hideRow ? 'none' : null }} id="banking">
-      <td>{translate(translations, 'banking', 'Banking')}</td>
-    </tr>
-    <tr style={{ height: licenses, display: hideRow ? 'none' : null }} id="licenses">
-      <td>{translate(translations, 'licenses', 'Licenses')}</td>
-    </tr>
-  </div>
-);
+  return (
+    <div className={styles.columStatic}>
+      <tr style={{ height: details + 1 }} id="details">
+        <td>{translate(translations, 'casino_name', 'Casino Name')}</td>
+      </tr>
+      <tr style={{ height: rating }} id="rating">
+        <td>{translate(translations, 'rating', 'Rating')}</td>
+      </tr>
+      <tr style={{ height: bonus }} id="bonus">
+        <td>{translate(translations, 'bonus', 'Bonus')}</td>
+      </tr>
+
+      <tr style={{ height: topFeatures, display: hideRow ? 'none' : null }} id="topFeatures">
+        <td>{translate(translations, 'top_features', 'Top Features')}</td>
+      </tr>
+      <tr style={{ height: banking, display: hideRow ? 'none' : null }} id="banking">
+        <td>{translate(translations, 'banking', 'Banking')}</td>
+      </tr>
+      <tr style={{ height: licenses, display: hideRow ? 'none' : null }} id="licenses">
+        <td>{translate(translations, 'licenses', 'Licenses')}</td>
+      </tr>
+    </div>
+  );
+};
 Index.propTypes = {
-  translations: PropTypes.object,
   details: PropTypes.number,
   rating: PropTypes.number,
   bonus: PropTypes.number,

package/src/components/molecules/faq/faq.module.scss

@@ -26,6 +26,17 @@
                     @include flex-align (center, center);
                     margin-right: 0.5rem;
                 }
+                > div{
+                    margin: 0;
+                    margin-right: 2rem;
+                    font-weight: 700;
+                    font-size: 1.8rem;
+                    p, h2, h3, h4 {
+                        margin: 0;
+                        font-weight: 700;
+                        font-size: 1.8rem;
+                    }
+                }                
             }
             &:hover,
             &:focus {
@@ -44,21 +55,14 @@
                 &:after {
                     transform: translateY(-50%) rotate(-135deg);
                 }
-            }
-            p {
-                margin-right: 2rem;
-            }
+            }     
         }
 
         .content {
-            @include collapse(0.5s, 20rem);
+            @include collapse(0.5s, 500rem);
             font-size: 1.6rem;
             color: var(--color-20);
             padding: 0;
-
-            p {
-                padding: 1rem 0;
-            }
         }
     }
-}
+}

package/src/components/molecules/faq/index.js

@@ -62,7 +62,7 @@ const Faq = ({ module, openAll = true, openItem, closeOthers = false, icon = ''
           <div key={keygen()} className={styles.faqItem}>
             <button
               onClick={() => toggle(index)}
-              className={styles.title}
+              className={`${styles.title} faq-gtm`}
               type="button"
               ref={(el) => (btnRefs.current[index] = el)}
             >

package/src/components/molecules/game-iframe/index.js

@@ -43,7 +43,12 @@ const GameIframe = ({ page }) => {
           <div className={styles.thumbnailContainer}>
             <div className={`${styles.thumbnail} ${showIframe ? styles.hide : ''}`}>
               <LazyImage src={imagePrettyUrl(page.banner)} />
-              <Button isInternalLink={false} onClick={clickHandler} isButton />
+              <Button
+                isInternalLink={false}
+                onClick={clickHandler}
+                isButton
+                gtmClass="game-ifram-gtm btn-cta"
+              />
             </div>
             {showIframe && (
               <Iframe

package/src/components/molecules/game-score-gauge/game-score-gauge.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
   Title,
@@ -23,8 +24,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component:
-          'A component for rating',
+        component: 'A component for rating',
       },
       page: () => (
         <>
@@ -43,16 +43,11 @@ const Template = (args) => <ScoreGauge {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   page: {
-    translations:{
-        grafikk: 'Grafikk',
-        bonuser: 'Bonuser',
-        spillopplevelse: 'Spillopplevelse'
+    relation: {
+      second_rating: 3,
+      third_rating: 5,
+      fourth_rating: 4,
+      max: 10,
     },
-    relation:{
-        second_rating:3,
-        third_rating:5,
-        fourth_rating:4,
-        max:10
-    }
   },
 };

package/src/components/molecules/game-score-gauge/index.js

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types */
 import { GiGamepad, GiPresent } from 'react-icons/gi';
-import React from 'react';
+import React, { useContext } from 'react';
 import { TiImage } from 'react-icons/ti';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './game-score-gauge.module.scss';
 
 const ScoreGaugeColumn = ({ Icon, label, rating, max }) => (
@@ -21,7 +22,8 @@ const ScoreGaugeColumn = ({ Icon, label, rating, max }) => (
   </div>
 );
 
-const ScoreGauge = ({ page, translations }) => {
+const ScoreGauge = ({ page }) => {
+  const { translations } = useContext(Context) || {};
   const { relation } = page;
   return (
     <div className={styles.scoreGauge}>

package/src/components/molecules/info-grid/index.js

@@ -95,6 +95,7 @@ const InfoGrid = ({
           sliderGap: 25,
         }}
         useArrows={false}
+        gtmClass="info-grid-carousel"
       >
         <div className={styles.verticalGrid}>
           {first.map((item) => {

package/src/components/molecules/newsletter/index.js

@@ -64,6 +64,7 @@ const Newsletter = ({
           active={!!(!toggleNewsetter && !toggleOnScroll)}
           text={openBtnText}
           toggleNewsLetter={() => setToggleNewsletter(true)}
+          gtmClass="newletter-gtm btn-cta"
         />
       )}
       <div