gatsby-matrix-theme 3.2.19 → 3.2.23

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,78 @@
+## [3.2.23](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.22...v3.2.23) (2022-02-02)
+
+
+### Bug Fixes
+
+* add scroll on footer nav ([da45e5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/da45e5de716e6e6afd7f362c9f036309f6b8168f))
+* add show after 3 seconds functionality on footer nav ([9e49a61](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9e49a61e531399b34d6e6b7f0ae5a0f945f3861e))
+* fix carousel not showing when js is off ([f976424](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f976424bbcf1a2cad3a8a7d20e407dfd15b6c848))
+
+
+* Merge branch 'tm-2684-footerNav-optimization' into 'master' ([fdeec64](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fdeec64fc8a922628107b33134577187b95d150e))
+* Merge branch 'tm-2691-images-carousel' into 'master' ([90d05e0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/90d05e0d84b8d5f78f12691d7e03a9833e317eb3))
+
+
+### norelease
+
+* change env sitename ([fa10ded](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa10ded0f9d09b909eff2443d27281234ed39bce))
+* revert back env ([9897255](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9897255ed23e4b714c99474d47000a91d00b223b))
+
+## [3.2.22](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.21...v3.2.22) (2022-02-02)
+
+
+### Config
+
+* updated core version ([1bb6e2d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1bb6e2d325e2a01c6aae75da5dcc671caf0fdde7))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.19",
+  "version": "3.2.23",
   "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.3",
+    "gatsby-core-theme": "^2.2.6",
     "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/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/index.js

@@ -44,9 +44,9 @@ const GameIframe = ({ page }) => {
           <div className={styles.thumbnailContainer}>
             <div className={`${styles.thumbnail} ${showIframe ? styles.hide : ''}`}>
               {page.banner ? (
-                <LazyImage src={imagePrettyUrl(page.banner)} />
+                <LazyImage alt={page.title} src={imagePrettyUrl(page.banner)} />
               ) : (
-                <GatsbyImg filename="default-slot.png" />
+                <GatsbyImg alt={page.title} filename="default-slot.jpg" />
               )}
               <Button
                 isInternalLink={false}

package/src/components/organisms/footer-navigation/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
@@ -6,8 +6,33 @@ import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './footer-navigation.module.scss';
 
 const FooterNavigation = ({ section, isStorybook = false }) => {
+  const [show, setShow] = useState(false);
   const menuArray = getFirstModuleByName(section, 'menu');
-  return (
+
+  const handleEvent = () => {
+    setShow(true);
+  };
+
+  const showAfter = (seconds) => {
+    setTimeout(() => {
+      setShow(true);
+    }, seconds * 1000);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleEvent);
+    window.addEventListener('mousemove', handleEvent);
+    window.addEventListener('touchstart', handleEvent);
+    showAfter(3);
+
+    return () => {
+      window.removeEventListener('scroll', handleEvent);
+      window.addEventListener('mousemove', handleEvent);
+      window.addEventListener('touchstart', handleEvent);
+    };
+  }, []);
+
+  return show ? (
     <div className={`${styles.footerLinks} ${isStorybook && styles.storybookStyles}`}>
       <LinkList
         showListTitle={false}
@@ -19,7 +44,7 @@ const FooterNavigation = ({ section, isStorybook = false }) => {
         gtmClass="mobile-menu-gtm"
       />
     </div>
-  );
+  ) : null;
 };
 
 FooterNavigation.propTypes = {

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/organisms/carousel/index.js

@@ -43,28 +43,19 @@ const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
     return arr;
   };
 
+  const renderedItems =
+    width < 991 && width > 0 ? renderOne(module.items) : renderTwo(module.items);
+
   return (
     <div className={styles.carouselContainer}>
-      {width >= 991 && (
-        <Slider
-          {...settings}
-          className={styles.screenshotCarousel}
-          useArrows={false}
-          gtmClass={gtmClass}
-        >
-          {renderTwo(module.items)}
-        </Slider>
-      )}
-      {width < 991 && width > 0 && (
-        <Slider
-          {...settings}
-          className={styles.screenshotCarousel}
-          useArrows={false}
-          gtmClass={gtmClass}
-        >
-          {renderOne(module.items)}
-        </Slider>
-      )}
+      <Slider
+        {...settings}
+        className={styles.screenshotCarousel}
+        useArrows={false}
+        gtmClass={gtmClass}
+      >
+        {renderedItems}
+      </Slider>
     </div>
   );
 };