gatsby-matrix-theme 2.1.2 → 2.2.0

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/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

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

@@ -1,123 +1,117 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
-    Title,
-    Description,
-    Primary,
-    PRIMARY_STORY,
-    ArgsTable,
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
 } from '@storybook/addon-docs/blocks';
 
 import Newsletter from '.';
 
 export default {
-    title: 'Matrix-Theme/Molecules/Newsletter',
-    component: Newsletter,
-    argTypes: {
-      page: {
-        name: 'page',
-        type: { name: 'object', required: true },
-        defaultValue: null,
-        description: 'The page object.',
-      },
-      mainText: {
-        name: 'mainText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Main text',
-      },
-      subscribeText: {
-        name: 'subscribeText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Subscribe Text',
-      },
-      placeholderName: {
-        name: 'placeholderName',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Placeholder Name',
-      },
-      placeholderEmail: {
-        name: 'placeholderEmail',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Placeholder Email',
-      },
-      privacyText: {
-        name: 'privacyText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Privacy Text',
-      },
-      openBtnText: {
-        name: 'openBtnText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Open Button Text',
-      },
-      buttonText: {
-        name: 'buttonText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Button Text',
-      },
-      formAction: {
-        name: 'formAction',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Form Action',
-      },
-      newsletterListId: {
-        name: 'newsletterListId',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Newsletter List Id',
-      },
-      footer: {
-        name: 'footer',
-        type: { name: 'boolean', required: true },
-        defaultValue: false,
-        description: 'Footer Newsletter',
-      },
+  title: 'Matrix-Theme/Molecules/Newsletter',
+  component: Newsletter,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
     },
-    parameters: {
-      docs: {
-        description: {
-          component:
-            'Newsletter component',
-        },
-        page: () => (
-          <>
-            <Title />
-            <Description />
-            <Primary />
-            <ArgsTable story={PRIMARY_STORY} />
-          </>
-        ),
-      },
+    mainText: {
+      name: 'mainText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Main text',
     },
-  };
-  
-  const Template = (args) => <Newsletter {...args} />;
-  
-  export const Default = Template.bind({});
-  Default.args = {
-    page: {
-      translations:{
-          grafikk: 'Grafikk',
-          bonuser: 'Bonuser',
-          spillopplevelse: 'Spillopplevelse'
+    subscribeText: {
+      name: 'subscribeText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Subscribe Text',
+    },
+    placeholderName: {
+      name: 'placeholderName',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Placeholder Name',
+    },
+    placeholderEmail: {
+      name: 'placeholderEmail',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Placeholder Email',
+    },
+    privacyText: {
+      name: 'privacyText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Privacy Text',
+    },
+    openBtnText: {
+      name: 'openBtnText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Open Button Text',
+    },
+    buttonText: {
+      name: 'buttonText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Button Text',
+    },
+    formAction: {
+      name: 'formAction',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Form Action',
+    },
+    newsletterListId: {
+      name: 'newsletterListId',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Newsletter List Id',
+    },
+    footer: {
+      name: 'footer',
+      type: { name: 'boolean', required: true },
+      defaultValue: false,
+      description: 'Footer Newsletter',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Newsletter component',
       },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
     },
-    mainText:"You get more than 405 free spins",
-    subscribeText:"Subscribe to our newsletter and get more than 405 free spins instantly.",
-    placeholderName:"Name",
-    placeholderEmail:"Email",
-    privacyText:"By subscribing, you confirm that you are over 18 years of age and that you accept our",
-    openBtnText:"FÅ 405 FREE SPINS UMIDDELBART",
-    buttonText:"Hent dine freespins",
-    formAction:'',
-    newsletterListId:'',
-    footer : false
-  };
-  
+  },
+};
+
+const Template = (args) => <Newsletter {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  page: {},
+  mainText: 'You get more than 405 free spins',
+  subscribeText: 'Subscribe to our newsletter and get more than 405 free spins instantly.',
+  placeholderName: 'Name',
+  placeholderEmail: 'Email',
+  privacyText:
+    'By subscribing, you confirm that you are over 18 years of age and that you accept our',
+  openBtnText: 'FÅ 405 FREE SPINS UMIDDELBART',
+  buttonText: 'Hent dine freespins',
+  formAction: '',
+  newsletterListId: '',
+  footer: false,
+};

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

@@ -1,19 +1,19 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/prop-types */
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './newsletter-optin.module.scss';
 
 export default function Newsletter({
-  page,
   title = 'Exclusive Casino Offers and Free Spins straight to your Inbox',
   description = 'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
   terms = 'I confirm that I am 18+ years old and Irish resident.',
-  privacyText = 'Read our <a href="/privacy-policy">Privacy Policy</a> for more details.',
+  privacyText = 'Read our <a class="newsletter-gtm" href="/privacy-policy">Privacy Policy</a> for more details.',
 }) {
   const form = useRef(null);
-
+  const { translations } = useContext(Context) || {};
   const onSubmit = (e) => {
     e.preventDefault();
     // validationForm(e.target.elements) && form.current.submit();
@@ -70,17 +70,17 @@ export default function Newsletter({
         <p>{description}</p>
         <form action="" method="post" ref={form} onSubmit={onSubmit}>
           <input
-            placeholder={translate(page?.translations, 'first_name', 'First Name')}
+            placeholder={translate(translations, 'first_name', 'First Name')}
             type="text"
             name="name"
           />
           <input
-            placeholder={translate(page?.translations, 'email', 'E-Mail')}
+            placeholder={translate(translations, 'email', 'E-Mail')}
             type="email"
             name="email"
           />
           <input
-            placeholder={translate(page?.translations, 'phone_number', 'Phone Number')}
+            placeholder={translate(translations, 'phone_number', 'Phone Number')}
             type="text"
             name="phone"
           />