gatsby-matrix-theme 7.1.39 → 7.1.42

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [7.1.42](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.41...v7.1.42) (2022-07-25)
+
+
+### Bug Fixes
+
+* add variables for colors ([74c5724](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/74c572460c851d5059c13cc0f234707f2a53648d))
+* fix small bug in the transition of item ([4204d05](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4204d05e5172bf3a71880bd93cfb0fc722167dd1))
+
+## [7.1.41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.40...v7.1.41) (2022-07-22)
+
+
+### Bug Fixes
+
+* add padding right ([7da15c9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7da15c9a17642df32e9a7eafc84721384ae4a4f5))
+* change site lang irishluck ([0c887f0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0c887f023e487b1785d562b1acaca5c88a05758a))
+* cleanup code ([f758661](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f7586616e0f1a1844675162ab551301fa9f73e83))
+* fix small issue ([56dde35](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/56dde35eaabfe8098831c2f699d05c24f15fa581))
+* make style for footer ([e468c0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e468c0bfa3862835ba7fa9975659078b805c9919))
+* replace slider with new simple slider(scroll) ([1140622](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/11406223b9f1849cf0d234adf7c3cf3e3887e98c))
+* update gatsby core ([51b5b56](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/51b5b56ac3f0bf5bd173e54816059a1bf4500392))
+
+
+* Merge branch 'update-gatsby-core' into 'master' ([172d18c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/172d18ceadab3a797c13c2c934adc65095c81152))
+* Merge branch 'tm-2961-slider-component' into 'master' ([bad8dba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bad8dbade7a88ce4334bc9cb713947eeca7a6a9f))
+* Merge branch 'tm-2974-lang-tag' into 'master' ([8ec4ba2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ec4ba272bb9331bbf4850ff0e80e485502e4b72))
+
+## [7.1.40](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.39...v7.1.40) (2022-07-20)
+
+
+### Bug Fixes
+
+* operator name in cards v2 table style ([6986377](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/698637748cba6556c2babb0130e6bf1995e0a934))
+
 ## [7.1.39](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.38...v7.1.39) (2022-07-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.39",
+  "version": "7.1.42",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "gatsby": "^4.15.0",
-    "gatsby-core-theme": "^8.0.10",
+    "gatsby-core-theme": "^8.0.11",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -45,7 +45,7 @@ const CasinosTable = ({ module }) => {
                     title={item.title}
                     className={`${styles.casinoLogo} table-operator-card-gtm`}
                   >
-                    {item.title}
+                    {item.relation.bonus?.operator_name || item.relation.name}
                   </Link>
                 </td>
                 <td>

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

@@ -6,7 +6,7 @@
         border-radius: 0.4rem;
         padding: 2rem;
         transition: 1s;
-        bottom: -40rem;
+        bottom: -100%;
         z-index: var(--scroll-to-top-index);
         @include min(tablet){
             @include flex-direction(column);

package/src/gatsby-core-theme/components/atoms/info-grid/index.js

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-
-import useWindowSize from 'gatsby-core-theme/src/hooks/useWindowSize';
-import Slider from 'gatsby-core-theme/src/components/molecules/slider';
+import { GrFormPrevious } from '@react-icons/all-files/gr/GrFormPrevious';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 
 import styles from './info-grid.module.scss';
@@ -21,9 +20,22 @@ const InfoGrid = ({
     'Slot Type',
   ],
 }) => {
-  const [width] = useWindowSize();
-
   let volatility = 'Low';
+  const ref = useRef();
+  const [showButtons, setShowButtons] = useState(2);
+
+  const previewSlide = () => {
+    const scrollValue = ref.current.scrollLeft - window.screen.width;
+    ref.current.scrollLeft = scrollValue;
+    setShowButtons(scrollValue <= 0 ? 2 : 0);
+  };
+  const nextSlide = () => {
+    const widthItems = window.screen.width;
+    const scrollValue = ref.current.scrollLeft + widthItems - 15;
+    const inThEnd = scrollValue + widthItems >= ref.current.scrollWidth;
+    ref.current.scrollLeft = scrollValue;
+    setShowButtons(inThEnd ? 1 : 0);
+  };
 
   if (page?.relation?.volatility === 1) {
     volatility = 'Medium';
@@ -64,74 +76,28 @@ const InfoGrid = ({
     </div>
   );
 
-  const renderDesktop = () => (
-    <div className={styles.grid}>{Object.keys(items).map((key) => gridItem(key, items[key]))}</div>
-  );
-
-  const renderMobile = () => {
-    const first = [];
-    const second = [];
-    const third = [];
-
-    Object.keys(items).map((key, index) => {
-      if (index % 3 === 0) {
-        first.push({ [key]: items[key] });
-      } else if (index % 3 === 1) {
-        second.push({ [key]: items[key] });
-      } else {
-        third.push({ [key]: items[key] });
-      }
-
-      return null;
-    });
-
-    return (
-      <Slider
-        className={styles.slider}
-        settings={{
-          swipeEndThreshold: 0.25,
-          transitionTime: 400,
-          numberOfSlides: 1,
-          sliderGap: 25,
-        }}
-        useArrows={false}
-        gtmClass="info-grid-carousel-gtm"
-      >
-        <div className={styles.verticalGrid}>
-          {first.map((item) => {
-            const key = Object.keys(item)[0];
-            return gridItem(key, item[key]);
-          })}
-        </div>
-
-        <div className={styles.verticalGrid}>
-          {second.map((item) => {
-            const key = Object.keys(item)[0];
-            return gridItem(key, item[key]);
-          })}
-        </div>
-
-        <div className={styles.verticalGrid}>
-          {third.map((item) => {
-            const key = Object.keys(item)[0];
-            return gridItem(key, item[key]);
-          })}
-        </div>
-      </Slider>
-    );
-  };
-
   return (
-    <>
-      {width >= 991 && renderDesktop()}
-      {width < 991 && width > 0 && renderMobile()}
-    </>
+    <div className={styles.container}>
+      <div ref={ref} className={styles.grid}>
+        {Object.keys(items).map((key) => gridItem(key, items[key]))}
+      </div>
+      {showButtons !== 2 && (
+        <button onClick={() => previewSlide()} className={styles.prev} type="button">
+          <GrFormPrevious size={27} color="#fff" />
+        </button>
+      )}
+      {showButtons !== 1 && (
+        <button onClick={() => nextSlide()} className={styles.next} type="button">
+          <GrFormNext size={27} color="#fff" />
+        </button>
+      )}
+    </div>
   );
 };
 
 InfoGrid.propTypes = {
-  page: PropTypes.objectOf(PropTypes.object),
-  gridLables: PropTypes.arrayOf(PropTypes.object),
+  page: PropTypes.objectOf(PropTypes.shape),
+  gridLables: PropTypes.arrayOf(PropTypes.shape),
 };
 
 export default InfoGrid;

package/src/gatsby-core-theme/components/atoms/info-grid/info-grid.module.scss

@@ -5,42 +5,81 @@
   }
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 1.9rem;
-  margin-top: 1rem;
-}
+.container {
+  position: relative;
+  button {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    @include min(tablet){
+      display: none;
+    }
+    svg {
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      height: 3rem;
+      width: 3rem;
+    }
+  }
+  .prev {
+    position: absolute;
+    left: 1rem;
+    top: 0;
+    bottom: 0;
+  }
+  .next {
+    position: absolute;
+    right: 2rem;
+    top: 0;
+    bottom: 0;
+  }
+  .grid {
+    @include max(mobile) {
+      overflow-x: scroll;
+      position: relative;
+      transition: 1s;
+      scroll-behavior: smooth;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1.9rem;
+    margin-top: 1rem;
+  }
 
-.verticalGrid {
-  margin-top: 1rem;
-  display: grid;
-  grid-template-rows: repeat(3, 1fr);
-  grid-gap: 1.5rem;
-}
+  .verticalGrid {
+    margin-top: 1rem;
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    grid-gap: 1.5rem;
+  }
 
-.gridItem {
-  border-left: 0.8rem solid #ff743d;
-  padding: 1.4rem 1.5rem;
-  border-radius: 0.6rem 0 0 0.6rem;
-  background-color: white;
+  .gridItem {
+    border-left: 0.8rem solid var(--info-grid-border-left-color);
+    padding: 1.4rem 1.5rem;
+    border-radius: 0.6rem 0 0 0.6rem;
+    background-color: var(--info-grid-backgorund-color);
+    @include max(mobile) {
+      width: 92vw;
+    }
 
-  span {
-    float: left;
-    clear: left;
-    color: #08202e;
-  }
+    span {
+      float: left;
+      clear: left;
+      color: #08202e;
+    }
 
-  span:first-of-type {
-    font-size: 1.8rem;
-    line-height: 1.8rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-  }
+    span:first-of-type {
+      font-size: 1.8rem;
+      line-height: 1.8rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
 
-  span:nth-of-type(2) {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    margin-bottom: 1.5rem;
+    span:nth-of-type(2) {
+      font-size: 1.6rem;
+      line-height: 2.4rem;
+      margin-bottom: 1.5rem;
+    }
   }
 }

package/src/gatsby-core-theme/components/molecules/footer/footer.module.scss

@@ -46,9 +46,9 @@
       }
 
       .links {
-        @include flex-direction(row);
 
         @include min(tablet) {
+          @include flex-direction(row);
           padding-top: 7rem;
         }
 

package/src/gatsby-core-theme/components/organisms/head/index.js

@@ -62,11 +62,13 @@ const Head = ({ page = {}, siteInfo }) => {
   const parsedMetaDescr = page.meta_description ? parse(page.meta_description) : '';
   const metaTitle = transformMetaTitle(relation, meta_title, type);
 
+  const isIL = process.env.GATSBY_SITE_NAME === 'irishluck.ie' && 'en-IE';
+
   return (
     <>
       <Helmet>
         <title>{metaTitle}</title>
-        <html lang={getLanguage(page.language)} />
+        <html lang={getLanguage(isIL || page.language)} />
         <meta name="description" content={parsedMetaDescr} />
         {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
           <meta name="robots" content={page.meta_robots.join()} />