gatsby-matrix-theme 2.0.5 → 2.2.0

package/.storybook/main.js

@@ -55,6 +55,7 @@ module.exports = {
       '~helpers': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/helpers'),
       '~hooks': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/hooks'),
       '~tests': path.resolve(rootPath, '../node_modules/gatsby-core-theme/tests'),
+      '~context': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/context'),
     };
     config.resolve.alias['$virtual/lazy-client-sync-requires'] = path.resolve(
       `./__mocks__/virtual-lazy-client-sync-requires.js`

package/CHANGELOG.md

@@ -1,3 +1,105 @@
+# [2.2.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.1.2...v2.2.0) (2021-11-02)
+
+
+### Bug Fixes
+
+* added new icon prop in anchor ([13fad13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/13fad136d1c33f35c4a639004befcbf399a8991f))
+* disabled footer nav on operator type pages ([54ae9e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54ae9e5dd46682b5332d7bd83ebe80c42ffa2c91))
+* fix translations ([06717e9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/06717e9ae57f19712b369b2930260b0806e2410d))
+* overriden not found component ([a350fb5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a350fb5497e25ee787b20ec0dd74d06ea3db62f0))
+* tests and storybook ([badf244](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/badf244d425cf9624337e0046bfe715436a66506))
+
+
+### Code Refactoring
+
+* add gtm classes ([b3af7b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3af7b7448aecd3b41997c516f80a2733f5772d5))
+* ranslations fixes and updated core theme ([1e9fce5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1e9fce5800cdbc2f921319f64ba995f53aa01d41))
+* remove translations from props ([f9f294a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9f294a5383edf397ef9e0a869b5e3c426483f3e))
+* search reuslts view all link ([366fcab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/366fcab902d27f764888da2ca7921532585c511b))
+* search reuslts view all link default state ([086d457](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/086d457999a004b8e7bd7d1fab1eac6227061b67))
+* view all results for search auto complete ([5ffa494](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ffa49487b753002d6f979a3116c8350afe4ee92))
+
+
+### Config
+
+* fixed storybook and tests configuration ([c28f244](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c28f244afbc749fb24bdddad0bfca338fce7a2c2))
+* merge master ([d39deaa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d39deaad08afa9b732e677d501ae3801dfdd1940))
+* merge master ([f7e969b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f7e969bac78e38a829886d96bfd2a637743f4d82))
+* merge master ([b9ed577](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b9ed577d5d512c27668eb0c4aa545ee3ff49ddf8))
+* merge master ([bbd2e5f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bbd2e5f91b486614cfe9c361e3a5d8e2c4e81a69))
+* merge master ([c1d1437](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c1d14371943cfa78caf89a800143b565678c96f2))
+* update gatsby core version ([29dacf9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29dacf9f6f48cbc822bb157d3bc619a7980e0092))
+* updated core theme version ([0fa3c96](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0fa3c964726cdd1adea069a80cd6201fd630b15f))
+
+
+* Merge branch 'tm-2478-search' into 'master' ([9fdd7cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9fdd7ccce442648e4eb3efa56dceeea51522730a))
+* Merge branch 'tm-2462-gtm-classes' into 'master' ([6300fd8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6300fd85277bb3a6e5ea303fa9744d5548fec80a))
+* Merge branch 'tm-2564-404page' into 'master' ([161536e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/161536e27a52992cba85a7388a37f07d917291e6))
+* Merge branch 'tm-2544-matrix-translations' into 'master' ([b1e73ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b1e73ab10c023d2eda62a4afb8f0c5e95f2252cf))
+* Merge branch 'tm-2560-table-stack-style' into 'master' ([d047f4b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d047f4b6c2ce4c9922e9ca8f411ad9a363d1fce0))
+
+
+### Features
+
+* new stack styling for tables on mobile ([6c1007c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c1007c0af3a5fabf06e3e23f6bdcfddba2abb01))
+* remove static 404 page, connect now with hercules data ([28c0ca4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28c0ca4d99e8f0da7215d76aefbc84f758b86263))
+
+## [2.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.1.1...v2.1.2) (2021-10-27)
+
+
+### Bug Fixes
+
+* fix the logic ([c2ab6a4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2ab6a49030a7801ab4ace68274c0701376974d8))
+* toplist bugs ([3d9351c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d9351c3010febf30db76654da2e4fc55489d223))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([b88629f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b88629fdc318bbd9f641161d29838e4aa3ec9c7d))
+* Merge branch 'TM-2547-cards-v2-title' into 'master' ([24fd68f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/24fd68f2d225b1dedb6f30c3aeb1cc754591aaea))
+
+## [2.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.1.0...v2.1.1) (2021-10-26)
+
+
+### Bug Fixes
+
+* override styles on bonus to fix shadowing ([ece2968](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ece29685398d90f21304eeadfe96f4c174a46719))
+* popup fixes followed up by qa ([cb3ad51](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb3ad5150283859e8d2e149bb6e54d8706f2c49a))
+
+
+### Code Refactoring
+
+* update newsletter style and success modal structure ([b8d6cac](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b8d6cacd7aea8ff56a30b2879b296869998b98ba))
+
+
+* Merge branch 'tm-2553-irl-style-fixes' into 'master' ([8d7c1a3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8d7c1a36004bfa3fb9b977a5178c49c5a10dcb3c))
+* Merge branch 'tm-2469-popup-fix' into 'master' ([9d95368](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d953688ce02e6117d0da83d992265fcf1c3ef5b))
+* Merge branch 'tm-2492-update-newsletter-style' into 'master' ([7d5c6f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7d5c6f4bc059b87044a2a6f34247d1be73b515d5))
+
+# [2.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.5...v2.1.0) (2021-10-20)
+
+
+### Bug Fixes
+
+* another style issue ([d76bcb7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d76bcb7045a5c37c481d70b29993db973ec5d88c))
+* faq all tags style ([45bff16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/45bff16e3f00c2f018b4205f43af8e7a19fba3f6))
+* max height faq ([e3da648](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e3da648f9d46e8039fbf73387a8b54309294f557))
+* style issue ([704a93a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/704a93aa9e99d70316072d931f2ae50a34bd7df9))
+* styling issues overriden on pcsa ([76806dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/76806dde2ed65d6a2d1915943999e143f26a4906))
+
+
+### Code Refactoring
+
+* correction to search keyword ([f8d1ddf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f8d1ddf1307547cbfcfcab570f66cac102354bac))
+
+
+* Merge branch 'tm-2509-faq-tags-style' into 'master' ([c87422c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c87422ca5ca9d0fc1cce60b945e5cb0267b27814))
+* Merge branch 'tm-2469-popup-fix' into 'master' ([7afd323](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7afd3234f28854feb49e38d6237660003eacbeb4))
+* Merge branch 'tm-2478-search' into 'master' ([1f78305](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f783057eb15ffdc8e0c33e50ef3e64182133d5b))
+
+
+### Features
+
+* search keyword ([741aefd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/741aefd8921f145815476f3474ab80b043e3e55e))
+
 ## [2.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.0.4...v2.0.5) (2021-10-19)
 
 

package/jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
     '^~helpers(.*)$': '<rootDir>/node_modules/gatsby-core-theme/src/helpers$1',
     '^~hooks(.*)$': '<rootDir>/node_modules/gatsby-core-theme/src/hooks$1',
     '^~tests(.*)$': '<rootDir>/node_modules/gatsby-core-theme/tests$1',
+    '^~context(.*)$': '<rootDir>/node_modules/gatsby-core-theme/src/context$1',
     // JSON Data
     'data.json': '<rootDir>/__mocks__/search-data.json',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.0.5",
+  "version": "2.2.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -26,7 +26,7 @@
     "url": "https://storybook-matrix.gigmedia.com/"
   },
   "dependencies": {
-    "gatsby-core-theme": "^1.3.1",
+    "gatsby-core-theme": "^1.4.1",
     "babel-preset-gatsby": "^1.3.0",
     "chalk": "^4.1.0",
     "cross-env": "^7.0.2",

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
 import Link from 'gatsby-core-theme/src/hooks/link';
@@ -11,11 +11,12 @@ import {
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import LazyPicture from 'gatsby-core-theme/src/hooks/lazy-picture';
 import Author from 'gatsby-core-theme/src/components/atoms/author';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import BaseCard from '../base-card';
 import styles from './article-card.module.scss';
 
-const ArticleCard = ({ item, page }) => {
+const ArticleCard = ({ item }) => {
   const { author, created_at, title, path, banner } = item;
   const pictureSource = {
     webp: '../../../../../../../images/default-article.webp',
@@ -25,11 +26,13 @@ const ArticleCard = ({ item, page }) => {
   const featured = !!cardBackgroundImage;
   const AuthorProfile = author && author.profile_page_path;
   const AuthorName = author && author.name;
+  const { translations } = useContext(Context) || {};
+
   return (
     <BaseCard item={item} cardType="article">
       {!featured && (
         <div className={styles.cardBanner}>
-          <Link to={path}>
+          <Link to={path} className="article-card-gtm">
             {banner ? (
               <LazyImage src={imagePrettyUrl(banner)} alt={title} />
             ) : (
@@ -43,15 +46,16 @@ const ArticleCard = ({ item, page }) => {
         </div>
       )}
       <div className={`${styles.cardContent} ${featured && styles.featured}`}>
-        <Link to={path}>
+        <Link to={path} className="article-card-gtm">
           <h2 className={styles.cardTitle}>{title}</h2>
         </Link>
         <Button
           to={path}
           primaryColor={false}
-          btnText={translate(page?.translations, 'read_more', 'Read More')}
+          btnText={translate(translations, 'read_more', 'Read More')}
           invertColors={!featured}
           className={styles.readMore}
+          gtmClass="article-card-gtm btn-cta"
         />
         <div className={styles.cardMeta}>
           <Author authorProfile={AuthorProfile} name={AuthorName} date={created_at} />
@@ -69,7 +73,6 @@ ArticleCard.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
   }).isRequired,
-  page: PropTypes.shape({ translations: PropTypes.shape({}) }),
 };
 
 export default ArticleCard;

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

@@ -15,7 +15,12 @@ const AuthorCard = ({ item }) => {
       <div className={styles.txt}>
         <div className={styles.name}>{name}</div>
         <div className={styles.position}>{position}</div>
-        <a className={styles.email} href={`mailto:${email}`} target="_blank" rel="noreferrer">
+        <a
+          className={`${styles.email} author-card-gtm`}
+          href={`mailto:${email}`}
+          target="_blank"
+          rel="noreferrer"
+        >
           {email}
         </a>
       </div>

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

@@ -26,7 +26,7 @@ const BaseCard = ({
       <div className={styles.cardWrapper}>
         {featured &&
           (isLinked ? (
-            <Link to={path} title={title} className={styles.cardLink}>
+            <Link to={path} title={title} className={`${styles.cardLink} base-card-gtm`}>
               {imgContent}
             </Link>
           ) : (

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from 'react-icons/fa';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
@@ -10,25 +10,28 @@ import {
   translate,
 } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import BaseCard from '../base-card';
 import styles from './game-card.module.scss';
 
-const GameCard = ({ item, page, button_text = 'play_now' }) => {
+const GameCard = ({ item, button_text = 'play_now' }) => {
   const { relation, title, path, banner } = item;
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
   const featured = !!cardBackgroundImage;
+  const { translations } = useContext(Context) || {};
+
   return (
     <BaseCard item={item} isLinked cardType="game">
       {!featured && (
         <div className={styles.cardBanner}>
-          <Link to={path}>
+          <Link to={path} className="game-card-gtm">
             <LazyImage src={imagePrettyUrl(banner)} alt={title} />
           </Link>
         </div>
       )}
       <div className={`${styles.cardContent} ${featured && styles.featured}`}>
-        <Link to={path}>
+        <Link to={path} className="game-card-gtm">
           <h2 className={styles.cardTitle}>{title}</h2>
         </Link>
         <div className={styles.cardMeta}>
@@ -53,8 +56,9 @@ const GameCard = ({ item, page, button_text = 'play_now' }) => {
         <Button
           to={path}
           primaryColor={!featured}
-          btnText={translate(page?.translations, button_text, 'Play now')}
+          btnText={translate(translations, button_text, 'Play now')}
           className={styles.playNow}
+          gtmClass="game-card-gtm btn-cta"
         />
       </div>
     </BaseCard>
@@ -74,7 +78,6 @@ GameCard.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
   }).isRequired,
-  page: PropTypes.shape({ translations: PropTypes.shape({}) }),
   button_text: PropTypes.string,
 };
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from 'react-icons/fa';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
@@ -9,10 +9,11 @@ import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import BaseCard from '../base-card';
 import styles from './operator-card.module.scss';
 
-const OperatorCard = ({ item, page, featured = false, number }) => {
+const OperatorCard = ({ item, featured = false, number }) => {
   const { relation, path } = item;
   const prettyLink = prettyTracker(relation);
   const reviewPath = path || relation.path;
@@ -20,6 +21,7 @@ const OperatorCard = ({ item, page, featured = false, number }) => {
   const isActive = status === 'active';
   const isInactive = status === 'inactive';
   const backgroundImage = number === 1 ? 'featuredCasino' : null;
+  const { translations } = useContext(Context) || {};
 
   return (
     <BaseCard featured={featured} backgroundImage={backgroundImage} item={item} cardType="operator">
@@ -28,7 +30,11 @@ const OperatorCard = ({ item, page, featured = false, number }) => {
           backgroundImage && styles.hasBackground
         }`}
       >
-        <Link to={reviewPath} title={relation.name} className={styles.casinoLogo}>
+        <Link
+          to={reviewPath}
+          title={relation.name}
+          className={`${styles.casinoLogo} operator-card-gtm`}
+        >
           <LazyImage src={imagePrettyUrl(relation.logo_url)} alt={relation.name} />
         </Link>
         <StarRating
@@ -46,7 +52,7 @@ const OperatorCard = ({ item, page, featured = false, number }) => {
       >
         <div className={styles.casinoText}>
           <div className={styles.casinoName}>
-            <Link to={reviewPath} title={relation.name}>
+            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
               {relation.name}
             </Link>
           </div>
@@ -60,17 +66,18 @@ const OperatorCard = ({ item, page, featured = false, number }) => {
           }`}
         >
           <div className={styles.reviewLink}>
-            <Link to={reviewPath} title={relation.name}>
-              {`${relation.name} ${translate(page?.translations, 'read_review', 'Review')}`}
+            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
+              {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
             </Link>
           </div>
           <div className={`${styles.cardButtons}`}>
             {isActive && (
               <Button
                 to={prettyLink}
-                btnText={translate(page?.translations, 'play_now', 'Sign Up')}
+                btnText={translate(translations, 'play_now', 'Sign Up')}
                 isInternalLink={false}
                 disabled={!isActive}
+                gtmClass="operator-card-gtm btn-cta"
               />
             )}
           </div>
@@ -99,7 +106,6 @@ OperatorCard.propTypes = {
     }),
     path: PropTypes.string,
   }).isRequired,
-  page: PropTypes.shape({ translations: PropTypes.shape({}) }),
   featured: PropTypes.bool,
   number: PropTypes.number,
 };

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

@@ -1,26 +1,27 @@
-import React from 'react';
+import React, { useContext } 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 { imagePrettyUrl, textWordsLimit, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import BaseCard from '../base-card/index';
 import styles from './payment-method-card.module.scss';
 
-const PaymentMethodCard = ({ item, page, showTitle = true, showDesc = true }) => {
+const PaymentMethodCard = ({ item, showTitle = true, showDesc = true }) => {
   const { title, path, relation, sections } = item;
-  const translations = page?.translations;
+  const { translations } = useContext(Context) || {};
 
   return (
     <BaseCard item={item} cardType="payment_method">
       <div className={styles.content}>
         <div className={styles.header}>
-          <Link className={styles.links} to={path}>
+          <Link className={`${styles.links} payment-method-card-gtm`} to={path}>
             <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
           </Link>
           {showTitle && (
-            <Link className={styles.links} to={path}>
+            <Link className={`${styles.links} payment-method-card-gtm`} to={path}>
               <h2 className={styles.title}>{title}</h2>
             </Link>
           )}
@@ -34,7 +35,11 @@ const PaymentMethodCard = ({ item, page, showTitle = true, showDesc = true }) =>
           </div>
         )}
         <div className={styles.bottom}>
-          <Button to={path} btnText={translate(translations, 'read_more', 'Read More')} />
+          <Button
+            to={path}
+            btnText={translate(translations, 'read_more', 'Read More')}
+            gtmClass="payment-method-card-gtm btn-cta"
+          />
         </div>
       </div>
     </BaseCard>
@@ -43,9 +48,6 @@ const PaymentMethodCard = ({ item, page, showTitle = true, showDesc = true }) =>
 PaymentMethodCard.propTypes = {
   showTitle: PropTypes.bool,
   showDesc: PropTypes.bool,
-  page: PropTypes.shape({
-    translations: PropTypes.shape({}),
-  }),
   item: PropTypes.shape({
     title: PropTypes.string,
     path: PropTypes.string,

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

@@ -6,7 +6,7 @@ import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 
 import styles from './popup-card.module.scss';
 
-const PopupCard = ({ item, translations }) => {
+const PopupCard = ({ item, tracker }) => {
   const { logo_url: logoUrl } = item;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const secondLiner = item?.one_liners?.secondary?.one_liner;
@@ -19,7 +19,7 @@ const PopupCard = ({ item, translations }) => {
     <div className={styles.popupCard}>
       <div className={styles.wrapper}>
         <div className={styles.imgContainer}>
-          <img src={imagePrettyUrl(logoUrl)} alt={oneLiner} />
+          <img width={98} height={98} src={imagePrettyUrl(logoUrl)} alt={oneLiner} />
         </div>
         <div className={styles.textContainer}>
           <p className={styles.primaryText}>{one}</p>
@@ -28,10 +28,10 @@ const PopupCard = ({ item, translations }) => {
       </div>
       <div className={styles.buttonContainer}>
         <OperatorCta
-          tracker="popup"
+          tracker={tracker}
           operator={item}
-          translations={translations}
           playText="Play Now"
+          gtmClass="popup-operator-cta-gtm"
         />
       </div>
     </div>
@@ -53,7 +53,7 @@ PopupCard.propTypes = {
       }),
     }),
   }),
-  translations: PropTypes.shape({}),
+  tracker: PropTypes.string,
 };
 
 export default PopupCard;

package/src/components/atoms/cards/popup-card/popup-card.module.scss

@@ -20,11 +20,13 @@
     }
 
     .imgContainer {
-      min-width: 8rem;
+      width: 8rem;
       height: 8rem;
+      min-width: 8rem;
 
       @include min(tablet) {
         min-width: 9.8rem;
+        width: 9.8rem;
         height: 9.8rem;
       }
 
@@ -32,6 +34,7 @@
         width: 100%;
         height: 100%;
         border-radius: 0.4rem;
+        object-fit: contain;
       }
     }
 
@@ -80,13 +83,9 @@
     }
 
     a {
-      background-color: var(--secondary-color) !important;
       border-radius: 4px;
-      box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3);
-
-      &:hover {
-        background: var(--secondary-color) !important;
-      }
+      font-weight: 700;
+      font-size: 1.8rem;
     }
   }
 }

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

@@ -25,16 +25,6 @@ export default {
         defaultValue: { summary: '' },
       },
     },
-    translations: {
-      name: 'translations',
-      type: { name: 'object', required: true },
-      defaultValue: '',
-      description: 'Translations object',
-      table: {
-        type: { summary: 'object' },
-        defaultValue: { summary: '' },
-      },
-    },
   },
   parameters: {
     docs: {

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

@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { useContext } 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 { imagePrettyUrl, textWordsLimit, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import BaseCard from '../base-card/index';
 import styles from './software-provider-card.module.scss';
 
 const SoftwareProviderCard = ({
   item,
-  page,
   showTitle = true,
   showProvider = true,
   showDesc = true,
@@ -20,17 +20,17 @@ const SoftwareProviderCard = ({
   },
 }) => {
   const { title, path, relation, sections } = item;
-  const translations = page?.translations;
+  const { translations } = useContext(Context) || {};
 
   return (
     <BaseCard item={item} cardType="software_provider">
       <div className={styles.content}>
         <div className={styles.header}>
-          <Link className={styles.links} to={path}>
+          <Link className={`${styles.links} software-provider-card-gtm`} to={path}>
             <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
           </Link>
           {showTitle && (
-            <Link className={styles.links} to={path}>
+            <Link className={`${styles.links} software-provider-card-gtm`} to={path}>
               <h2 className={styles.title}>{title}</h2>
             </Link>
           )}
@@ -51,7 +51,11 @@ const SoftwareProviderCard = ({
               {gameProvider.textTwo}
             </p>
           )}
-          <Button to={path} btnText={translate(translations, 'read_more', 'Read More')} />
+          <Button
+            to={path}
+            btnText={translate(translations, 'read_more', 'Read More')}
+            gtmClass="software-provider-card-gtm btn-cta"
+          />
         </div>
       </div>
     </BaseCard>
@@ -65,9 +69,6 @@ SoftwareProviderCard.propTypes = {
     textOne: PropTypes.string,
     textTwo: PropTypes.string,
   }),
-  page: PropTypes.shape({
-    translations: PropTypes.shape({}),
-  }),
   item: PropTypes.shape({
     title: PropTypes.string,
     path: PropTypes.string,

package/src/components/atoms/link-menu/index.js

@@ -11,7 +11,7 @@ const LinkMenu = ({ section }) => {
   return (
     <div className={styles.linkMenuContainer}>
       <div className={styles.linkMenuContent}>
-        <LinkList lists={menuArray} listIcon={<FaChevronRight />} />
+        <LinkList lists={menuArray} listIcon={<FaChevronRight />} gtmClass="link-menu-gtm" />
       </div>
     </div>
   );