gatsby-matrix-theme 3.2.9 → 3.2.13

package/CHANGELOG.md

@@ -1,3 +1,75 @@
+## [3.2.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.12...v3.2.13) (2022-01-18)
+
+
+### Bug Fixes
+
+* minor fixes ([0082bdf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0082bdf105de208b8987f079726f6bf7d8608835))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([dccc488](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dccc488f216ebe115db8c4189b102ea028b5b290))
+
+## [3.2.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.11...v3.2.12) (2022-01-18)
+
+
+### Bug Fixes
+
+* make style ([7bdee3c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7bdee3cca0ed0734030933a28704dbb70c7c61ad))
+* removed slider from anchor module ([f0ed893](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0ed893e51c19ec7264827f1dc6a30f2c91c0c2e))
+* small fix ([5c331cf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5c331cf2de55270811ffa316cd3d39c98c013176))
+* update aria-label on newsletter inputs ([23b9bb9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/23b9bb91aab8ea57291989b01423ca27ee97c3b4))
+
+
+### Code Refactoring
+
+* update html.js for w3 validator ([ffb2aa5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ffb2aa5ae3051657dd427571f99e9feed1eca642))
+
+
+### Config
+
+* updated theme version ([98954f3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98954f3a11f851ee66d620a32b1feac013f2642f))
+
+
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([1bb11dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1bb11dded1f44fce70f0ac22bcc151f19cb92cfe))
+* Merge branch 'tm-2655-anchor-module' into 'master' ([cfd8d53](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cfd8d538e7b450fd1cf49e0ba10cd7f575d482f7))
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([7038322](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/703832269572f3bd5791d56c3a7747a72e1f4fb7))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([e0925b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e0925b293b241bfbe7ba2138838270ac2ad465d1))
+* Merge branch 'tm-2585-comparisonTabel' into 'master' ([f36ce52](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f36ce52fc6f847cc89c03fc83269d023fcb1774d))
+
+## [3.2.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.10...v3.2.11) (2022-01-13)
+
+
+### Code Refactoring
+
+* update newsletter form for w3 validator ([11243b9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/11243b94527d6dc2a62310c60d530199e9be1516))
+
+
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([82c4eaf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/82c4eafbdac22cde92706d82a6e7365878f1854d))
+
+## [3.2.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.9...v3.2.10) (2022-01-13)
+
+
+### Bug Fixes
+
+* add coupon code logic ([a78dbca](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a78dbca6c26f2c4e880c04ccfe6c41e1d615c7d7))
+* add padding ([c9273eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c9273eb3e5da3703df8b5ba4af0cea29afd32b63))
+* add some space ([1f511ef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f511ef0aa10554b9732b3d162e28a1e0d69e85d))
+* added yarn lock ([ee50cd3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ee50cd3017a6daf71d588823e31234f4bca6f7c9))
+* dmca fixes ([752a65f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/752a65f633e5934307a45a3cbae8c1766266f470))
+* dmca script and hardcoded ([c2f70bb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2f70bba5618b3e8d0ef488229af3f236b806e1d))
+* fix small issue ([bc5a03d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc5a03d440d9e298b235ee94f5bd25f1104aee9e))
+* fix space ([874c3a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/874c3a5f28a02c48e80907acb542c747cf011df1))
+* import dmca in footer from core theme ([ccaa070](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ccaa070d6daf3cf7689cdf8aec8569bb9524e08c))
+* make style ([7ee8177](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7ee8177530662322e871a7e4d0e5f9bf507c7d36))
+* make style for comparison table ([b5acb4c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5acb4c8e058736ea30fc58362c0bfcd17fbe0b7))
+* merged master branch ([0dc9fad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0dc9fad624948eb6b4d0271871c61eaf1b59035c))
+* small fix ([6c0d8c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c0d8c8b64ab1371439b78bbfae6bf497a3a383d))
+* update new core theme version ([66fe211](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66fe211293c89dff450cbfcad220fad68ac1b4fd))
+
+
+* Merge branch 'tm-2625-dmca-implementation' into 'master' ([54d8b7a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54d8b7adff19085a2768cdef7f8791aae9a96b78))
+* Merge branch 'tm-2585-comparisonTabel' into 'master' ([ef11b91](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ef11b917bd4b6a875cf66bf8b1d6a373e636911b))
+* Update index.js ([e5985b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5985b2665e6259bed07b81cd55285730432b2e1))
+
 ## [3.2.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.8...v3.2.9) (2022-01-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.9",
+  "version": "3.2.13",
   "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.0.19",
+    "gatsby-core-theme": "^2.2.0",
     "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

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { AiOutlineCheckCircle } from 'react-icons/ai';
+import { VscFiles } from 'react-icons/vsc';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
@@ -11,44 +12,43 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
 import styles from './table.module.scss';
 
-export default function ComparisonTable({ items }) {
+const listHeadings = [
+  {
+    defaultValue: 'Casino name',
+    key: 'casino_name',
+  },
+  {
+    defaultValue: 'Rating',
+    key: 'rating',
+  },
+  {
+    defaultValue: 'Bonus',
+    key: 'bonus',
+  },
+  {
+    defaultValue: 'Top Features',
+    key: 'top_features',
+  },
+  {
+    defaultValue: 'Payment Methods',
+    key: 'payment_methods',
+  },
+  {
+    defaultValue: 'Banking',
+    key: 'banking',
+  },
+  {
+    defaultValue: 'Currencies',
+    key: 'currencies',
+  },
+  {
+    defaultValue: 'Licenses',
+    key: 'licenses',
+  },
+];
+export default function ComparisonTable({ items, tabelInfo = listHeadings }) {
   const { translations } = useContext(Context) || {};
 
-  const tabelInfo = [
-    {
-      defaultValue: 'Casino name',
-      key: 'casino_name',
-    },
-    {
-      defaultValue: 'Rating',
-      key: 'rating',
-    },
-    {
-      defaultValue: 'Bonus',
-      key: 'bonus',
-    },
-    {
-      defaultValue: 'Top Features',
-      key: 'top_features',
-    },
-    {
-      defaultValue: 'Payment Methods',
-      key: 'payment_methods',
-    },
-    {
-      defaultValue: 'Banking',
-      key: 'banking',
-    },
-    {
-      defaultValue: 'Currencies',
-      key: 'currencies',
-    },
-    {
-      defaultValue: 'Licenses',
-      key: 'licenses',
-    },
-  ];
-
   const cell = (heading, item, index) => {
     switch (heading) {
       case 'casino_name':
@@ -65,8 +65,9 @@ export default function ComparisonTable({ items }) {
               <OperatorCta
                 tracker="main"
                 operator={item?.relation}
-                playText={translate(translations, 'play_now', 'Play Now')}
-                gtmClass="operator-card-gtm btn-cta"
+                // new key
+                translationKey="play_ex"
+                gtmClass="comparison-table-gtm btn-cta"
               />
             </div>
           </td>
@@ -95,6 +96,19 @@ export default function ComparisonTable({ items }) {
               ))}
           </td>
         );
+      case 'coupon_code':
+        return (
+          <td key={index} className={styles.couponCode}>
+            {item?.relation?.extra_fields?.coupon_code && (
+              <>
+                <p>
+                  {item?.relation?.extra_fields?.coupon_code}{' '}
+                  <VscFiles color="var(--coupon-code-color);" />
+                </p>
+              </>
+            )}
+          </td>
+        );
       case 'payment_methods':
         return (
           <td key={index} className={styles.paymentMethods}>
@@ -131,7 +145,9 @@ export default function ComparisonTable({ items }) {
                 {item?.relation?.bonus?.currencies &&
                   item?.relation?.bonus?.currencies
                     .slice(0, 3)
-                    .map((currencies) => currencies.iso_code)}
+                    .map((currencies, i, list) => (
+                      <>{`${currencies.iso_code}${i + 1 < list.length ? ', ' : ''}`}</>
+                    ))}
               </span>
             </p>
           </td>

package/src/components/atoms/cards/comparison-table/table/table.module.scss

@@ -1,8 +1,8 @@
 .table {
   cursor: grabbing;
   tr {
-    grid-template-columns: 15.2rem 27rem;
-    grid-auto-columns: 27rem;
+    grid-template-columns: 15.2rem 30rem;
+    grid-auto-columns: 30rem;
     grid-auto-flow: column;
     display: grid;
 
@@ -21,6 +21,7 @@
 
     th {
       @include flex-align(center, center);
+      padding: 2rem 2rem;
       background-color: var(--comparison-header-background-color);
       border: 1px solid var(--comparison-header-border-color);
       border-bottom: none;
@@ -43,17 +44,24 @@
     }
     .casinoName {
       @include flex-direction(row);
-      @include flex-align(center, space-between);
+      @include flex-align(center, flex-start);
       padding: 1.6rem;
       img {
         border: 1px solid var(--color-9);
         box-sizing: border-box;
         margin-right: 1.6rem;
+        border-radius: 0.6rem;
       }
-      span {
-        font-weight: bold;
-        font-size: 18px;
-        line-height: 25px;
+      > div {
+        height: 100%;
+        @include flex-direction(column);
+        @include flex-align(flex-start, space-between);
+        span {
+          font-weight: bold;
+          font-size: 18px;
+          line-height: 25px;
+          color: black;
+        }
       }
     }
 
@@ -67,13 +75,14 @@
         font-weight: bold;
       }
     }
-    
+
     .raiting {
       @include flex-align(center, space-between);
 
       a {
         font-weight: bold;
         font-size: 1.6rem;
+        color: var(--text-link-color);
       }
     }
     .topFeatures {
@@ -82,10 +91,13 @@
       span {
         @include flex-direction(row);
         @include flex-align(center, center);
-        margin-bottom: 0.8rem;
+        margin-bottom: 0.4rem;
+        margin-top: 0.4rem;
         svg {
           color: var(--comparison-top-features-icon-color);
           margin-right: 0.93rem;
+          min-width: 2.5rem;
+          height: 2rem;
         }
       }
     }
@@ -99,12 +111,14 @@
         font-size: 1.4rem;
         line-height: 2.4rem;
         margin-bottom: 1rem;
+        color: black;
         span {
           font-weight: bold;
         }
       }
     }
     .currencies {
+      padding: 1.6rem 1rem;
       span {
         margin-left: 0.4rem;
         background: var(--comparison-currencies-background-color);
@@ -114,6 +128,10 @@
         font-weight: bold;
         font-size: 12px;
         line-height: 18px;
+        width: 4.4rem;
+        height: 2.4rem;
+        padding: 0.499rem 0.8rem;
+        display: inline-block;
       }
     }
     .paymentMethods {
@@ -125,12 +143,46 @@
         font-weight: bold;
         font-size: 14px;
         line-height: 18px;
+        object-fit: contain;
+        color: black;
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+        img {
+          width: 7.2rem;
+          height: 3.2rem;
+          object-fit: contain;
+        }
+      }
+    }
+    .couponCode {
+      @include flex-align(center, flex-start);
+      box-sizing: border-box;
+      p {
+        @include flex-align(center, center);
+        border: 1px dashed var(--coupon-code-color);
+        background-color: var(--backgorund--coupon-code-color);
+        width: fit-content;
+        padding: 0.4rem 1.6rem;
+        border-radius: 0.5rem;
+        font-weight: bold;
+        font-size: 1.4rem;
+        color: var(--coupon-code-color);
+        svg{
+          margin-left: 1rem;
+        }
       }
     }
-
     .licenses {
+      padding: 1.1rem;
       img {
-        max-height: 3.2rem;
+        display: inline-block;
+        height: 3.2rem;
+        width: 7.2rem;
+        object-fit: contain;
+        background-color: #fff;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
       }
     }
   }

package/src/components/atoms/newsletter/form/index.js

@@ -45,8 +45,8 @@ const NewsletterForm =({
     }
     return(
         <form action={formAction} method="post" ref={form} onSubmit={handelSubmit}>
-            <input type="hidden" name="listname" aria-label="hidden" value={newsletterListId} />
-            <input type="hidden" name="redirect" aria-label="hidden" value={redirectUrl} />
+            <input type="hidden" name="listname" aria-label="listname-hidden" value={newsletterListId} />
+            <input type="hidden" name="redirect" aria-label="redirect-hidden" value={redirectUrl} />
             <input className={styles.input} placeholder={placeholderName} type="text" name="name" />
             <input className={styles.input} placeholder={placeholderEmail}  type="email" name="email"  />
             <button className={styles.button} type="submit">{buttonText}</button>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
 import { getExtraField, copyrightText } from 'gatsby-core-theme/src/helpers/getters';
+import Disclaimer from 'gatsby-core-theme/src/components/atoms/disclaimer';
 import styles from './footer.module.scss';
 /* eslint-disable react/no-danger */
 
@@ -15,11 +16,15 @@ const Footer = ({
   template,
   page,
   hasFooterLinks = false,
+  hasDisclaimer = true,
 }) => {
   const TopSection = footerTopCustom;
   const BottomSection = footerBottomCustom;
   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" />
+  );
 
   return (
     <footer className={`${styles.footer} ${hasFooterLinks && styles.hasFooterLinks}`}>
@@ -58,6 +63,7 @@ const Footer = ({
               gtmClass="mobile-menu-gtm logo-cta"
             />
           )}
+          {hasDisclaimer && <Disclaimer image={dmcaImg} />}
         </div>
       </div>
     </footer>
@@ -86,4 +92,5 @@ Footer.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   page: PropTypes.object,
   hasFooterLinks: PropTypes.bool,
+  hasDisclaimer: PropTypes.bool,
 };

package/src/gatsby-core-theme/components/organisms/anchor/anchor.module.scss

@@ -1,4 +1,15 @@
-.sliderWrapper {
+.anchor {
+  @include flex-direction(row);
+  &::-webkit-scrollbar {
+    height: 0.5rem;
+  }
+  &::-webkit-scrollbar-track {
+    background: #fff;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--anchor-thumb-color);
+  }
+  overflow-x: scroll;
   .link {
     word-break: inherit;
     white-space: nowrap;
@@ -8,6 +19,8 @@
     color: #000;
     font-weight: 400;
     @include flex-align(center, center);
+    margin-right: 1.6rem;
+    margin-bottom: 0.5rem;
 
     svg {
       margin-left: 1rem;

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

@@ -1,17 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import Slider from '~molecules/slider';
 import keygen from '~helpers/keygen';
 import { anchorLink } from '~helpers/strings';
 import styles from './anchor.module.scss';
 
-function Anchor({
-  module: { items },
-  headerOffset = 80,
-  sliderGap = 0,
-  isFixed = false,
-  icon = null,
-}) {
+function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon = null }) {
   const [isFixedMenu, setIsFixedMenu] = useState(false);
   if (isFixed && typeof window !== 'undefined') {
     window.addEventListener('scroll', () => {
@@ -48,13 +41,7 @@ function Anchor({
   return (
     <div id="faq-container">
       <div className={isFixedMenu && styles.isFixed}>
-        <Slider
-          useArrows={false}
-          usePagination={false}
-          settings={{ numberOfSlides: 0, sliderGap }}
-          className={styles.sliderWrapper}
-          gtmClass="anchor-carousel-gtm"
-        >
+        <div className={styles.anchor}>
           {items?.map((anchor) => (
             <a
               className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
@@ -66,7 +53,7 @@ function Anchor({
               {icon}
             </a>
           ))}
-        </Slider>
+        </div>
       </div>
     </div>
   );
@@ -81,7 +68,6 @@ Anchor.propTypes = {
     ),
   }).isRequired,
   headerOffset: PropTypes.number.isRequired,
-  sliderGap: PropTypes.number,
   styles: PropTypes.shape({}),
   isFixed: PropTypes.bool,
   icon: PropTypes.element,

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

@@ -73,6 +73,14 @@ const Head = ({ page = {}, siteInfo }) => {
         <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
         <meta name="og:image" content={pageImage} />
         <meta name="og:url" content={getUrl(page.path)} />
+        <meta
+          property="og:locale"
+          content={
+            getLanguage(page.language) === 'en' || getLanguage(page.language) === 'en-za'
+              ? 'en_GB'
+              : getLanguage(page.language)
+          }
+        />
 
         {schemaGenerator(page, pageImage).map(
           (schema) =>
@@ -83,7 +91,6 @@ const Head = ({ page = {}, siteInfo }) => {
             )
         )}
       </Helmet>
-
       {twitterUsername && (
         <Helmet>
           <meta name="twitter:title" content={page.meta_title} />