gatsby-matrix-theme 7.1.38 → 7.1.41

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [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)
+
+
+### Bug Fixes
+
+* adjusted spotlight css vars ([7823f11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7823f11c15583dca562847d35e64b6929a41a33b))
+* changed logic for operator name ([966d9e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/966d9e223f6d0a947da4ce7bab46a005777a7b3a))
+* tests ([cef5936](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cef5936789e637db41d2736ed1c641e0ac309067))
+
+
+* Merge branch 'tm-2959-operator-name' into 'master' ([1a22b7f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a22b7f8e14199a581d51bb85596ff824ec14c22))
+
 ## [7.1.38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.37...v7.1.38) (2022-07-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.38",
+  "version": "7.1.41",
   "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/comparison-table/table/index.js

@@ -80,6 +80,7 @@ export default function ComparisonTable({
     }
     const imageObject =
       item?.relation.standardised_logo_url_object || item?.relation.logo_url_object;
+    const itemName = item?.relation.bonus?.operator_name || item?.relation.name;
 
     switch (heading) {
       case 'casino_name':
@@ -90,18 +91,18 @@ export default function ComparisonTable({
                 src={imagePrettyUrl(imageObject?.filename || item?.relation.logo_url, 89, 89)}
                 height={89}
                 width={89}
-                alt={item.relation.name}
+                alt={itemName}
               />
             ) : (
               <GatsbyImg
                 filename="default-operator.png"
-                alt={item.relation.name}
+                alt={itemName}
                 width="9rem"
                 height="9rem"
               />
             )}
             <div>
-              <span>{item.relation.name}</span>
+              <span>{itemName}</span>
               <OperatorCta
                 tracker="main"
                 operator={item?.relation}

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

@@ -14,7 +14,12 @@ describe('Comparison table test component', () => {
     const { getByText, container } = render(<ComparisonTable items={module.items} />);
     module.items.map((item) => {
       expect(container.querySelectorAll('table')).toHaveLength(1);
-      expect(getByText(item.relation.name));
+
+      if (item.relation.bonus.operator_name) {
+        expect(getByText(item.relation.bonus.operator_name));
+      } else {
+        expect(getByText(item.relation.name));
+      }
 
       const paymentMethods = container.querySelector('.paymentMethods');
       const loadMoreBtn = paymentMethods.querySelector('a');

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

@@ -22,6 +22,7 @@ const OperatorCard = ({
   useOneStarRating = false,
 }) => {
   const { relation, path } = item;
+  const itemName = relation.bonus?.operator_name || relation.name;
   const reviewPath = path || relation.path;
   const status = relation?.status;
   const isInactive = status === 'inactive';
@@ -39,16 +40,12 @@ const OperatorCard = ({
           backgroundImage && styles.hasBackground
         }`}
       >
-        <Link
-          to={reviewPath}
-          title={relation.name}
-          className={`${styles.casinoLogo} operator-card-gtm`}
-        >
+        <Link to={reviewPath} title={itemName} className={`${styles.casinoLogo} operator-card-gtm`}>
           <LazyImage
             width={width}
             height={height}
             src={imagePrettyUrl(relation?.logo_url_object?.filename)}
-            alt={getAltText(logUrlObject, relation.name)}
+            alt={getAltText(logUrlObject, itemName)}
           />
         </Link>
         <StarRating numOfStars={5} halfStars={false} rating={relation.rating} />
@@ -59,8 +56,8 @@ const OperatorCard = ({
         }`}
       >
         <div className={styles.casinoText}>
-          <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
-            {relation.name}
+          <Link to={reviewPath} title={itemName} className="operator-card-gtm">
+            {itemName}
           </Link>
           {!isInactive && <Bonus item={relation} tracker="main" />}
         </div>
@@ -71,10 +68,10 @@ const OperatorCard = ({
         >
           <Link
             to={reviewPath}
-            title={relation.name}
+            title={itemName}
             className={`${styles.reviewLink} operator-card-gtm`}
           >
-            {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
+            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
           </Link>
           <OperatorCta
             tracker="main"
@@ -96,6 +93,9 @@ const OperatorCard = ({
 OperatorCard.propTypes = {
   item: PropTypes.shape({
     relation: PropTypes.shape({
+      bonus: PropTypes.shape({
+        operator_name: PropTypes.string,
+      }),
       rating: PropTypes.string,
       name: PropTypes.string,
       path: PropTypes.string,

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -41,10 +42,10 @@ const CasinosTable = ({ module }) => {
                 <td>
                   <Link
                     to={item.path || item.relation.path}
-                    title={item.relation.name}
+                    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/atoms/cards/popup-card/index.js

@@ -21,7 +21,7 @@ const PopupCard = ({
 }) => {
   const { translations } = useContext(Context) || {};
 
-  const { name } = item;
+  const operatorName = item.bonus?.operator_name || item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
   const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
@@ -36,7 +36,7 @@ const PopupCard = ({
           height={98}
         />
         {showRating && <StarRating numOfStars={5} rating={item?.rating} />}
-        {showName && <p className={styles.name}>{name}</p>}
+        {showName && <p className={styles.name}>{operatorName}</p>}
       </div>
       <div className={styles.textContainer}>
         <Bonus item={item} tracker={tracker} />
@@ -67,7 +67,9 @@ const PopupCard = ({
 PopupCard.propTypes = {
   item: PropTypes.shape({
     name: PropTypes.string,
-
+    bonus: PropTypes.shape({
+      operator_name: PropTypes.string,
+    }),
     links: PropTypes.shape({
       main: PropTypes.string,
     }),

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/components/molecules/toplist/row/variant-one.js

@@ -30,7 +30,7 @@ export default function Row({
   showLaunchDate = true,
   className,
 }) {
-  const itemName = item.name;
+  const itemName = item.bonus?.operator_name || item.name;
   const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || '/';
   const pros = item.extra_fields?.pro_1 || item.extra_fields?.pro_2 || item.extra_fields?.pro_3;

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;
+    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 #ff743d;
+    padding: 1.4rem 1.5rem;
+    border-radius: 0.6rem 0 0 0.6rem;
+    background-color: white;
+    @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/atoms/spotlights/spotlights-theme.module.scss

@@ -1,8 +1,8 @@
 .testimonials {
   ul {
     li {
-      border: 1px solid var(--spotlight-testimonials-border-color);
-      border-radius: 0.8rem;
+      border: var(--spotlight-testimonials-border);
+      border-radius: var(--spotlight-testimonials-border-radius);
       background-color: var(--spotlight-testimonials-background-color);
 
       img {
@@ -52,7 +52,7 @@
     align-items: flex-end;
 
     li {
-      border: 1px solid var(--spotlight-boxes-border-color);
+      border: var(--spotlight-boxes-border);
       background-color: var(--spotlight-boxes-background-color);
       box-sizing: border-box;
       border-radius: var(--spotlight-boxes-border-radius);

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()} />

package/src/gatsby-core-theme/styles/utils/variables/_main.scss

@@ -88,7 +88,8 @@
 
 
   // Spotlight
-  --spotlight-testimonials-border-color: #000;
+  --spotlight-testimonials-border: 1px solid #000;
+  --spotlight-testimonials-border-radius: .8rem;
   --spotlight-testimonials-background-color: #fff;
   --spotlight-testimonials-label-color: #ff893f;
   --spotlight-testimonials-label-size: 2rem;
@@ -97,7 +98,7 @@
   --spotlight-testimonials-text-color: #000;
   --spotlight-testimonials-text-size: 1.6rem;
 
-  --spotlight-boxes-border-color: #000;
+  --spotlight-boxes-border: 1px solid #000;
   --spotlight-boxes-border-radius: 1.6rem;
   --spotlight-boxes-background-color: #fff;
   --spotlight-boxes-label-color: #000;