gatsby-matrix-theme 3.2.17 → 3.2.21

package/.ci.yml

@@ -41,6 +41,8 @@ Theme Publish:
   only:
     refs:
       - master
+    variables:
+      - $PIPELINE != "content-trigger"
 
 variables:
   PIPELINE: automated

package/CHANGELOG.md

@@ -1,3 +1,79 @@
+## [3.2.21](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.20...v3.2.21) (2022-02-02)
+
+
+### Bug Fixes
+
+* content module imag cdn links ([74397ae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/74397ae8014326641382559ea1dbe3a329f0b54d))
+* navigation menu fix ([9c4ad08](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c4ad0819e79a4dea4dc44876992278dd4ea5a12))
+* popup images set to lazy load ([86c6c4a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/86c6c4ac7089d10b23d92e21ee49d442fcc2a7f3))
+* string helper import ([6af965d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6af965d1cad7d70f027b85ab7f0de1b927edef94))
+
+
+### Config
+
+* updated core theme ([a124f7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a124f7eb702aff3607123d3952c5cf449285d218))
+
+
+* Merge branch 'tm-2684-popup-images' into 'master' ([d5fa878](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d5fa878baac4f37322a12dae8650afb6e284377d))
+* Merge branch 'navigation' into 'master' ([2cf85d8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cf85d8b533311ed6a14b93e6ecb8f30414e5153))
+* Merge branch 'tm-2685-content-module-image-cdn' into 'master' ([b79fa10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b79fa101af2109bc0639f7db7462a006bbecf1d6))
+
+
+### Tests
+
+* fixed popup test ([0b4060e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0b4060e4f2f3cf1a68209550e53c804f1d959dff))
+
+## [3.2.20](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.19...v3.2.20) (2022-01-28)
+
+
+### Bug Fixes
+
+* default slot image if not banner is added ([abcfc29](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/abcfc290f77e8e2e6c708b731ed7ec64b3d338d9))
+* fix test ([9d75dff](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d75dff6b3ca5123b26c43df85e0ac8bfbe1e4e6))
+* fix the logic of load more button on payment section ([ac58d48](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ac58d484bdab74102bc0c2129fa7cb9a93d82dc1))
+* uploaded compressed jpg for default-slots image ([73b9030](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/73b9030c29597ba1b2b91fc48b575a470f176fd9))
+
+
+### Config
+
+* added content pipeline ([148ba5e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/148ba5eba4a1ff49dfbc894c9b8ed3022bf3aa9d))
+* added content pipeline ([b19c72d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b19c72d0daa08812616e634c0102648aae2a5323))
+* added content pipeline ([34248cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34248ccce96cdf07f5ec6bad13b775fc982a1c9d))
+* update latest theme version ([69e0986](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/69e098662658af1ec9abdb18290581596a8267a8))
+* updated tracker links ([ebb3132](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ebb3132c1f3e92eb6e73bc6db009b95770e4c137))
+
+
+* Merge branch 'tm-2671-default-slot-image' into 'master' ([2717097](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2717097c7a230de5999e9d8eedd7445434244780))
+* Merge branch 'tm-2661-comparison-table' into 'master' ([9de2b2e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9de2b2e4877a69544f57ed4d8b73fbf146fb0755))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([35ed2df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/35ed2dfa8726e0e4f053f2d25a91f5342a5a597d))
+
+## [3.2.19](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.18...v3.2.19) (2022-01-26)
+
+
+### Bug Fixes
+
+* added dmca width and height ([2886bb9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2886bb9b9b27ca40fa72541505165d020891283e))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([b69e480](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b69e480f34a06e4e808b965109a9b14d8d4fbaa0))
+
+## [3.2.18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.17...v3.2.18) (2022-01-25)
+
+
+### Bug Fixes
+
+* cards v2 table translation key ([248cc7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/248cc7e36150831db8e7c598db5b537aee9b2a4f))
+* iframe default image ([538c356](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/538c3562e2e81cc78cc5b06384e616f79f082da6))
+
+
+### Config
+
+* updated core version ([b76c067](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b76c0674a927d8b90b14f561d4a89382ad309538))
+
+
+* Merge branch 'tm-2671-iframe-default-image' into 'master' ([839702e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/839702e3ff05b1bfa2133b3c3748f592c5292be6))
+* Merge branch 'tm-2667-cards-v2-table' into 'master' ([a3ca044](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a3ca044169985daba1f5a7960d77c3a28cc68838))
+
 ## [3.2.17](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.16...v3.2.17) (2022-01-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.17",
+  "version": "3.2.21",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^2.2.2",
+    "gatsby-core-theme": "^2.2.5",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -71,10 +71,10 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
               src={imagePrettyUrl(item?.relation?.logo_url)}
               height={89}
               width={89}
-              alt={item.title}
+              alt={item.relation.name}
             />
             <div>
-              <span>{item.title}</span>
+              <span>{item.relation.name}</span>
               <OperatorCta
                 tracker="main"
                 operator={item?.relation}
@@ -116,7 +116,8 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
               {item?.relation?.bonus?.deposit_methods &&
                 // eslint-disable-next-line array-callback-return
                 item?.relation?.bonus?.deposit_methods.map((deposit, i, list) => {
-                  if (i < (showAllPayment.includes(index) ? list.length : 5)) {
+                  const itemsLength = list.length === 6 ? 6 : 5;
+                  if (i < (showAllPayment.includes(index) ? list.length : itemsLength)) {
                     return (
                       <span key={deposit.name}>
                         <LazyImg
@@ -129,7 +130,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
                     );
                   }
                 })}
-              {item?.relation?.bonus?.deposit_methods?.length > 5 &&
+              {item?.relation?.bonus?.deposit_methods?.length > 6 &&
                 !showAllPayment.includes(index) && (
                   <a
                     onClick={() => {

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

@@ -13,7 +13,7 @@ describe('Comparison table test component', () => {
     const { getByText } = render(<ComparisonTable items={module.items} />);
 
     module.items.map((item) => {
-      expect(getByText(item.title));
+      expect(getByText(item.relation.name));
     });
   });
 });

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FaStar } from 'react-icons/fa';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import {
   imagePrettyUrl,
@@ -26,7 +27,11 @@ const GameCard = ({ item, button_text = 'play_now', width, height }) => {
       {!featured && (
         <div className={styles.cardBanner}>
           <Link to={path} className="game-card-gtm" aria-label={`${title} Link`}>
-            <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+            {banner ? (
+              <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+            ) : (
+              <GatsbyImg filename="default-slot.jpg" alt={title} />
+            )}
           </Link>
         </div>
       )}

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

@@ -57,7 +57,7 @@ const CasinosTable = ({ module }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    {`${translate(translations, 'visit', 'Visit')} ${item?.relation?.name}`}
+                    {`${translate(translations, 'visit_table', 'Visit')} ${item?.relation?.name}`}
                   </a>
                 </td>
               </tr>

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from '~hooks/lazy-image';
 
 import styles from './popup-card.module.scss';
 
@@ -19,7 +19,7 @@ const PopupCard = ({ item, tracker }) => {
     <div className={styles.popupCard}>
       <div className={styles.wrapper}>
         <div className={styles.imgContainer}>
-          <img width={98} height={98} src={imagePrettyUrl(logoUrl)} alt={oneLiner} />
+          <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
         </div>
         <div className={styles.textContainer}>
           <p className={styles.primaryText}>{one}</p>

package/src/components/molecules/game-iframe/game-iframe.module.scss

@@ -7,6 +7,9 @@
   .thumbnail {
     display: inline-block;
     position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
 
     &::before {
       display: block;

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

@@ -5,6 +5,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Iframe from 'gatsby-core-theme/src/components/atoms/iframe';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import styles from './game-iframe.module.scss';
 
 const GameIframe = ({ page }) => {
@@ -38,11 +39,15 @@ const GameIframe = ({ page }) => {
 
   return (
     <>
-      {page.relation && page.relation.iframe !== '' && (
+      {page.relation && page.relation.iframe && page.relation.iframe !== '' && (
         <div>
           <div className={styles.thumbnailContainer}>
             <div className={`${styles.thumbnail} ${showIframe ? styles.hide : ''}`}>
-              <LazyImage src={imagePrettyUrl(page.banner)} />
+              {page.banner ? (
+                <LazyImage alt={page.title} src={imagePrettyUrl(page.banner)} />
+              ) : (
+                <GatsbyImg alt={page.title} filename="default-slot.jpg" />
+              )}
               <Button
                 isInternalLink={false}
                 onClick={clickHandler}

package/src/components/organisms/popup/popup.test.js

@@ -18,7 +18,8 @@ describe('Popup test component', () => {
     const { container } = render(<Popup module={module} isStorybook />);
     const rows = container.querySelectorAll('.popupCard');
     expect(rows).toHaveLength(4);
-    expect(container.querySelectorAll('img')).toHaveLength(4);
+
+    expect(container.querySelectorAll('.imgContainer')).toHaveLength(4);
 
     let isVisible = container.querySelector('.activeModal');
     expect(isVisible).toBeTruthy();

package/src/gatsby-core-theme/components/atoms/menu/items/item/item.module.scss

@@ -0,0 +1,55 @@
+.itemWrapper.dropDownButton {
+    display: flex;
+    justify-content: space-between;
+  
+    .item {
+      width: 80%;
+    }
+  }
+  
+  .item {
+    padding: 1.5rem 2rem;
+  
+    @include custom-min-max(1200, 1260) {
+      padding: 1.5rem 1.7rem;
+    }
+  
+    &.openedLink {
+      background-color: var(--primary-hover-color);
+    }
+  
+    img {
+      width: 1.5rem;
+      max-height: 1.5rem;
+    }
+  
+    &.inactiveLink {
+      position: relative;
+      pointer-events: none;
+  
+      @include max(tablet) {
+        pointer-events: none;
+      }
+    }
+  }
+  
+  .dropDownButton button {
+    width: 20%;
+    max-width: 75px;
+    position: relative;
+    background-color: var(--primary-hover-color);
+  
+    &.active {
+      @include arrow-rotate(0);
+    }
+  
+    &:after {
+      transition: 0.2s;
+      @include arrow(var(--nav-icon-color), 1rem, down, false);
+  
+      position: absolute;
+      top: calc(50% - 0.4rem);
+      left: calc(50% - 1.2rem);
+      margin-left: 1rem;
+    }
+  }

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
 import loadable from '@loadable/component';
+import { parseContentImageUrl } from 'gatsby-core-theme/src/helpers/strings';
 import styles from './content.module.scss';
 
 const Content = ({ module }) => {
@@ -33,7 +34,7 @@ const Content = ({ module }) => {
         stylesClass = 'alignRight';
       }
       const lazyProps = {
-        src: node.attribs.src,
+        src: parseContentImageUrl(node.attribs.src),
         width: node.attribs.width && node.attribs.width.replace('px', ''),
         height: node.attribs.height && node.attribs.height.replace('px', ''),
         style: node.attribs.style ? parseCss(node.attribs.style) : null,

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

@@ -23,7 +23,12 @@ const Footer = ({
   const showLinks = template !== 'ppc';
   const copyrightDisclaimerValue = getExtraField(section?.extra_fields, copyrightDisclaimer);
   const dmcaImg = (
-    <img src="https://cdn.playcasino.co.za/image-1-8.png" alt="DMCA.com Protection Status" />
+    <img
+      src="https://cdn.playcasino.co.za/image-1-8.png"
+      width="100"
+      height="33"
+      alt="DMCA.com Protection Status"
+    />
   );
 
   return (