gatsby-matrix-theme 3.2.26 → 4.0.1

package/CHANGELOG.md

@@ -1,3 +1,79 @@
+## [4.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v4.0.0...v4.0.1) (2022-02-21)
+
+
+### Bug Fixes
+
+* cleanup anchor ([ec69b31](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec69b316f2dad3844e8541b58cc05e9d40302117))
+* cleanup operator cards ([65595d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/65595d27fdcf623733a3e5914b6a55f32075caf1))
+* image object fit ([4ec7355](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ec73555c1caf67d125d014d287a8139ca93f41b))
+* spotlight fixes ([0d55c9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d55c9d63dd43f307e63b1fb1b54676bb1b0d202))
+
+
+### Code Refactoring
+
+* fix, remove and update some of the files being badly overriden ([321517f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/321517f102a02b8f306c2ab61339cc6055c5518c))
+* remove unneeded div at footer ([1d8aa9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d8aa9dc51ea0f9fb2044a450f5f01dff03afb23))
+
+
+* Merge branch 'tm-2716-html-cleanup' into 'master' ([e83f062](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e83f0624b206484d1ae69e8a08b02994af4fa889))
+* Merge branch 'tm-2624-spotlight-fixes' into 'master' ([a963872](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9638724e153560f386cabd08f383f544b01211f))
+
+# [4.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.28...v4.0.0) (2022-02-16)
+
+
+### Bug Fixes
+
+* added new spotlights style ([97ff16c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/97ff16c77e661adbd34be588fd845568bc72cf91))
+* content frame style ([64878ea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/64878ea15e3e8d2aa2b32d31f1edddb2b77df392))
+* content module ([dd73e88](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd73e88f5a8086e6a3e8968ceb6f5d80c53d9b68))
+* fixed sizes ([9fe7c2b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9fe7c2b941329dc47b254aafe4941dcd7686284e))
+* merged master branch ([f0ed925](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0ed92598c46d84316c0381e1aa3fa7515dad199))
+
+
+### Code Refactoring
+
+* correction to runner ([5e82a01](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5e82a014a54def57d170719776a7a5cc261ef6dc))
+* new pipeline for custom demo deployment ([854d8a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/854d8a751d5fb9b7480eb7e3d1cbc9384106b57c))
+* remove deploy pipelines server ssh key ([90861f3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/90861f3c0c308e6f6747ac601fa5012f2516367b))
+* remove unused pipeline ([28f7393](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28f739391639f1ea6a06f9afc3eb5094a6d3ea87))
+* update deployment pipelines ([df8b5ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/df8b5ab85c9ef85911a40bb85688b86df366f22a))
+* update img alt tags ([5f7b504](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5f7b5040fbb8fa683d872a9d453c9ed5855f992b))
+
+
+* Merge branch 'tm-2703-custom-demo-deployment' into 'master' ([8ae95cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ae95cce0c0737d5a77c0efe66e9acc49cd2172a))
+* Merge branch 'master' into tm-2703-custom-demo-deployment ([9cfd3b3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9cfd3b33d62ac17ef5b966962eb6e9909a9497dd))
+* Merge branch 'tm-2715-update-img-alt-tags' into 'master' ([fe14659](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe1465976cf2cae2466c846ef1c0189266932a4b))
+* Merge branch 'master' into tm-2703-custom-demo-deployment ([52c066f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/52c066fc92e4869691c10aaecc66c9f7f6631bce))
+* Merge branch 'tm-2624-spotlights' into 'master' ([2a2656d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2a2656da47b99198ffed61486a6072e6983836be))
+* Merge branch 'tm-2702-update-deployment-pipelines' into 'master' ([e9f0b13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e9f0b13f3bd3e5e7fc6982d76d329eb0796055da))
+
+## [3.2.28](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.27...v3.2.28) (2022-02-08)
+
+
+### Bug Fixes
+
+* fixed prelive path ([613be59](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/613be5928fa86f418bd5296f701b32ae77d54d1d))
+* preconnectLinks removed ([325406c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/325406c1f772dce8a42c3be89a3c8213579957d4))
+
+
+* Merge branch 'tm-2681-canary-tokens' into 'master' ([bcbf07d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bcbf07d830c41f628d180ef592ffb82a8e0f9b00))
+
+## [3.2.27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.26...v3.2.27) (2022-02-08)
+
+
+### Bug Fixes
+
+* added canary token script ([af5479f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/af5479fa3e9814baf9a06368a560754d10f0f49e))
+
+
+### Config
+
+* updated to latest core version ([bc48d27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc48d277b3dba149aeeffdaff490b8715320f288))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([23020a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/23020a5036887d5570c1958820c4de74b211a938))
+* Merge branch 'tm-2681-canary-tokens' into 'master' ([49fca6c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/49fca6ced00281ce2a4a17f93b927179fddbf8ff))
+
 ## [3.2.26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.25...v3.2.26) (2022-02-08)
 
 

package/gatsby-config.js

@@ -16,12 +16,7 @@ module.exports = {
       resolve: `gatsby-core-theme`,
       options: {
         siteName: process.env.GATSBY_SITE_NAME,
-        preconnectLinks: [
-          'https://www.google-analytics.com',
-          'https://www.googletagmanager.com',
-          'https://gm.innocraft.cloud',
-          process.env.IMAGE_CDN_URL,
-        ],
+        preconnectLinks: [process.env.IMAGE_CDN_URL],
       },
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.2.26",
+  "version": "4.0.1",
   "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.6",
+    "gatsby-core-theme": "^4.0.0",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -16,7 +16,7 @@ const BaseCard = ({
   const { path, title } = item;
   const imgContent = (
     <>
-      <Image filename={backgroundImage} />
+      <Image filename={backgroundImage} alt={title} />
       <div className={styles.overlay} />
     </>
   );

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

@@ -54,37 +54,33 @@ const OperatorCard = ({ item, featured = false, number, width, height }) => {
         }`}
       >
         <div className={styles.casinoText}>
-          <div className={styles.casinoName}>
-            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
-              {relation.name}
-            </Link>
-          </div>
-          <div className={styles.casinoBonus}>
-            {!isInactive && <Bonus item={relation} tracker="main" />}
-          </div>
+          <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
+            {relation.name}
+          </Link>
+          {!isInactive && <Bonus item={relation} tracker="main" />}
         </div>
         <div
           className={`${styles.cardFooter} ${featured && styles.featured} ${
             backgroundImage && styles.hasBackground
           }`}
         >
-          <div className={styles.reviewLink}>
-            <Link to={reviewPath} title={relation.name} className="operator-card-gtm">
-              {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
-            </Link>
-          </div>
-          <div className={`${styles.cardButtons}`}>
-            <OperatorCta
-              tracker="main"
-              operator={relation}
-              playText={translate(translations, 'play_now', 'Play Now')}
-              gtmClass="operator-card-gtm btn-cta"
-            />
-          </div>
+          <Link
+            to={reviewPath}
+            title={relation.name}
+            className={`${styles.reviewLink} operator-card-gtm`}
+          >
+            {`${relation.name} ${translate(translations, 'read_review', 'Review')}`}
+          </Link>
+          <OperatorCta
+            tracker="main"
+            operator={relation}
+            playText={translate(translations, 'play_now', 'Play Now')}
+            gtmClass="operator-card-gtm btn-cta"
+          />
           {relation?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
-            <div className={styles.tnc}>
+            <span className={styles.tnc}>
               <Tnc hasCollapse={false} operator={relation} />
-            </div>
+            </span>
           )}
         </div>
       </div>

package/src/components/atoms/cards/operator-card/operator-card.module.scss

@@ -5,27 +5,7 @@
   padding: 0 1.6rem 2rem;
   position: relative;
   color: var(--color-44);
-  .casinoName {
-    font-size: 1.6rem;
-    font-weight: 400;
-    margin-bottom: 0.8rem;
-    a {
-      color: #000;
-    }
-  }
-  .casinoBonus {
-    div {
-      font-size: 1.4rem;
-      color: var(--color-44);
-      font-weight: 400;
-    }
-    div:first-child {
-      font-size: 1.6rem;
-      font-weight: 700;
-      color: var(--primary-color);
-      font-weight: 700;
-    }
-  }
+
   .casinoText {
     @include flex-align(flex-start, flex-start);
     width: 100%;
@@ -33,56 +13,50 @@
     margin-bottom: 0.8rem;
     height: 8.2rem;
     overflow: hidden;
+
+    a {
+      color: #000;
+      font-size: 1.6rem;
+      font-weight: 400;
+      margin-bottom: 0.8rem;
+    }
   }
   &.featured {
     color: #fff;
-    .casinoName {
+
+    .casinoText {
       a {
         color: #fff;
       }
     }
-    .casinoBonus {
-      div {
-        color: #fff;
-      }
-      div:first-child {
-        font-size: 2.4rem;
-        line-height: 1.2;
-        color: #fff;
-      }
-    }
   }
 }
 .cardFooter {
   width: 100%;
   color: var(--color-44);
+  @include flex-direction(column);
+
   .tnc {
     margin: 0.8rem 0 -0.7rem;
     p {
       font-size: 1rem;
     }
   }
-  .cardButtons {
-    @include flex-align(center, space-between);
-    width: 100%;
-    flex-direction: row-reverse;
 
-    @include max(tablet) {
-      flex-direction: column;
-      a[class*='button'] {
-        display: block;
-        width: 100%;
-        margin-bottom: 0.5rem;
-      }
-    }
+  a:last-of-type {
+    max-width: fit-content;
+    align-self: flex-end;
+  }
 
-    .reviewLink {
-      color: var(--text-link-color);
-      font-size: 1.6rem;
-      font-weight: 700;
-      text-decoration: underline;
+  @include max(tablet) {
+    a[class*='button'] {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 0.5rem;
     }
   }
+
   &.featured {
     color: #fff;
   }

package/src/components/atoms/cards/payment-method-card/index.js

@@ -27,6 +27,7 @@ const PaymentMethodCard = ({ item, showTitle = true, showDesc = true, width, hei
               height={height}
               className={styles.logo}
               src={imagePrettyUrl(relation?.logo)}
+              alt={title}
             />
           </Link>
           {showTitle && (

package/src/components/atoms/cards/software-provider-card/index.js

@@ -38,6 +38,7 @@ const SoftwareProviderCard = ({
               height={height}
               className={styles.logo}
               src={imagePrettyUrl(relation?.logo)}
+              alt={title}
             />
           </Link>
           {showTitle && (

package/src/components/atoms/footer/bottom/index.js

@@ -1,14 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const FooterBottom = () => {
-  return <></>;
-};
-
-FooterBottom.propTypes = {
-  section: PropTypes.shape({
-    extra_fields: PropTypes.object,
-  }),
-};
+const FooterBottom = () => <></>;
 
 export default FooterBottom;

package/src/components/atoms/footer/top/index.js

@@ -1,14 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const FooterTop = () => {
-  return <></>;
-};
-
-FooterTop.propTypes = {
-  section: PropTypes.shape({
-    extra_fields: PropTypes.object,
-  }),
-};
+const FooterTop = () => <></>;
 
 export default FooterTop;

package/src/components/atoms/table/column/index.js

@@ -56,7 +56,7 @@ const Index = ({
             <div className={styles.details}>
               <div className={styles.logo}>
                 <Link to={item.review_link} className="table-column-gtm">
-                  <LazyImage src={imagePrettyUrl(item.logo_url, 120, 45)} />
+                  <LazyImage src={imagePrettyUrl(item.logo_url, 120, 45)} alt={item.name} />
                 </Link>
 
                 <p>{item.name}</p>
@@ -124,7 +124,10 @@ const Index = ({
             <div className={styles.licenses}>
               {licenses_list &&
                 licenses_list.map((res) => (
-                  <LazyImage src={imagePrettyUrl(res.logo_filename, 63, 32)} />
+                  <LazyImage
+                    src={imagePrettyUrl(res.logo_filename, 63, 32)}
+                    alt={`license ${res.logo_filename}`}
+                  />
                 ))}
               {licenses_list?.length > 3 && licensesMore ? (
                 <FaAngleDown

package/src/components/pages/contact-us/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import Form from 'gatsby-core-theme/src/components/organisms/form';
-import Header from '../../molecules/header';
+import Header from 'gatsby-core-theme/src/components/molecules/header';
 import AuthorCard from '../../atoms/author-card';
 import SocialIcons from '../../atoms/social-icons';
 import styles from './contact-us.module.scss';

package/src/{components/molecules → gatsby-core-theme/components/atoms}/info-grid/info-grid.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
   Title,

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import Spotlights from 'gatsby-core-theme/src/components/atoms/spotlights/index';
+import styleTheme from './spotlights-theme.module.scss';
+import styleSite from './spotlights-site.module.scss';
+
+export default (props) => (
+  <Spotlights
+    {...props}
+    themeStyles={{
+      ...styleTheme,
+      ...styleSite,
+    }}
+  />
+);

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights-site.module.scss

@@ -0,0 +1 @@
+// To be overriden by sites and add custom styling 

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

@@ -0,0 +1,101 @@
+.testimonials {
+  ul {
+    li {
+      border: 1px solid var(--spotlight-testimonials-border-color);
+      border-radius: 0.8rem;
+      background-color: var(--spotlight-testimonials-background-color);
+
+      img {
+        border-radius: 8rem;
+        width: 15rem !important;
+        height: 15rem !important;
+        margin: 0 auto;
+        object-fit: cover;
+      }
+
+      > span,
+      label {
+        font-size: 1.4rem;
+      }
+
+      > label {
+        padding-bottom: 0.8rem;
+        padding-top: 0.5rem;
+        font-size: var(--spotlight-testimonials-label-size);
+        color: var(--spotlight-testimonials-label-color);
+      }
+
+      > span {
+        width: 50%;
+        margin: 0 auto;
+        font-size: var(--spotlight-testimonials-subtitle-size);
+        color: var(--spotlight-testimonials-subtitle-color);
+      }
+
+      > div {
+        font-size: var(--spotlight-testimonials-text-size);
+        color: var(--spotlight-testimonials-text-color);
+      }
+    }
+  }
+}
+
+.boxes_with_icons {
+  ul {
+    display: flex;
+    flex-direction: column;
+
+    li {
+      border: 1px solid var(--spotlight-boxes-border-color);
+      background-color: var(--spotlight-boxes-background-color);
+      box-sizing: border-box;
+      border-radius: .6rem;
+      position: relative;
+      max-width: 568px;
+      margin-left: 4.5rem;
+      margin-bottom: 3rem;
+      padding: 2.4rem 2.4rem 2.8rem 7.2rem;
+      min-height: 15rem;
+      text-align: left;
+      justify-content: center;
+
+      > img {
+        position: absolute;
+        left: -4.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-block;
+        min-width: 9.5rem !important;
+        width: 9.5rem;
+        height: 9.5rem !important;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      &:first-of-type {
+        margin-top: 3rem;
+      }
+
+      @include max(mobile) {
+        width: auto;
+      }
+
+      > label {
+        font-size: var(--spotlight-testimonials-label-size);
+        color: var(--spotlight-testimonials-label-color);
+      }
+       
+      > div {
+        font-size: var(--spotlight-testimonials-text-size);
+        color: var(--spotlight-testimonials-text-color);
+      }
+    }
+
+    li:nth-child(2n) {
+      margin-left: auto;
+      @include max(mobile) {
+        margin-left: 4.5rem;
+      }
+    }
+  }
+}

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

@@ -291,3 +291,19 @@
 .alignRight {
   @include content-img-align(right);
 }
+
+.contentFrame {
+  background-color: #E0EAEA;
+  padding: 1.6rem 2.4rem 2.4rem;
+  border-radius: .8rem;
+  box-sizing: border-box;
+  img {
+    border-radius: .8rem;
+  }
+  @include max(mobile) {
+    img {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+}

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

@@ -81,13 +81,13 @@ const Content = ({ module }) => {
 
   return (
     <>
-      <div
-        className={`${styles.content} ${showMore && styles.showMore} ${switchStyle(module.style)}`}
-      >
-        {module.value &&
-          parse(module.value, {
-            replace: replaceMedia,
-          })}
+      <div className={`${styles.content} ${showMore && styles.showMore}`}>
+        <div className={`${switchStyle(module.style)}`}>
+          {module.value &&
+            parse(module.value, {
+              replace: replaceMedia,
+            })}
+        </div>
       </div>
       {showMore && (
         <button type="button" className={styles.button} onClick={handleChange}>

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

@@ -82,12 +82,17 @@
       flex-direction: column-reverse;
       justify-content: center;
       align-items: center;
+      margin-bottom: 3rem;
+
+      @include min(laptop) {
+        margin-bottom: 0;
+      }
 
       .copyrightDisclaimer {
-        padding: 3rem 0;
+        margin: 3rem 0 2rem 0;
 
         @include min(laptop) {
-          padding: 3rem 0 0 0;
+          margin: 3rem 0 2rem 0;
         }
 
         p {
@@ -99,6 +104,10 @@
         }
       }
 
+      .copyrightText {
+        order: -1;
+      }
+
       .logos {
         > ul {
           @include flex-align(center, center);

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

@@ -48,16 +48,15 @@ const Footer = ({
 
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} page={page} />}
-        <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimerValue && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
-              }}
-            />
-          )}
-          <p>{copyrightText()}</p>
-        </div>
+        {copyrightDisclaimerValue && (
+          <div
+            className={styles.copyrightDisclaimer}
+            dangerouslySetInnerHTML={{
+              __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
+            }}
+          />
+        )}
+        <p className={styles.copyrightText}>{copyrightText()}</p>
         <div className={styles.logos}>
           {footerLogos && getExtraField(section?.extra_fields, footerLogos) && (
             <LinkList

package/src/{components → gatsby-core-theme/components}/molecules/header/index.js

@@ -13,19 +13,27 @@ export const headerContent = (props) => {
     case 'article_detail':
     case 'article_casino':
     case 'article_sports': {
-      ModuleComponent = loadable(() => import('./variants/article'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/article')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     case 'operator_review': {
-      ModuleComponent = loadable(() => import('./variants/operator'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/operator')
+      );
       return <ModuleComponent operator={props.section.page.relation} />;
     }
     case 'game_review': {
-      ModuleComponent = loadable(() => import('./variants/slot'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/slot')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     case 'author': {
-      ModuleComponent = loadable(() => import('./variants/author'));
+      ModuleComponent = loadable(() =>
+        import('../../../../components/molecules/header/variants/author')
+      );
       return <ModuleComponent page={props.section.page} />;
     }
     default: