gatsby-matrix-theme 13.0.14 → 14.0.0

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../../node_modules/gatsby-core-theme/gatsby-browser';
+require('../src/gatsby-core-theme/styles/utils/variables/_colors.scss');
 require('../src/gatsby-core-theme/styles/utils/variables/_main.scss');
 import React from 'react';
 
@@ -36,6 +37,8 @@ export const parameters = {
               'Payment',
               ['Template One-Three', 'Template Two', 'Template Four'],
             ],
+            'Footer',
+            ['Template One', 'Template Two', 'Template Three'],
           ],
           'Atoms',
           'Molecules',

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+# [14.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.15...v14.0.0) (2023-03-08)
+
+
+### Bug Fixes
+
+* add property ([7a79088](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a79088c96b59dad6923e5d5e3025a017251c5f2))
+* added optinmonstr script ([4ad7699](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ad76992cb8d789da7577cc02c949389b9c62060))
+* merged ([205572b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/205572bb035e5f849b6ae74457ab319bbc552795))
+* optinmonstr account ([afb2631](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/afb2631f5b6af304ded64f314b0d9a8624ab8bf8))
+* optinmonstr account ([caa11b3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/caa11b3d11f2ac8b78a3a0a6201a7659cb6453e1))
+* optinmonstr fixes ([ff5272c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ff5272cba9ad29bd259e56f28909019c29313933))
+* optinmonstr fixes ([93f90ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/93f90ecba9671882835987bd24c45b4aff7f25f4))
+* payment header ([cb6eef0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb6eef0e762ba68d8085e8ce2194901c3ae3a91c))
+* payment-header ([0bae25a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0bae25a8c4f50723c56e18ed32cad1d4a83a37d2))
+* remove newletter nsa ([4e29d1d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4e29d1d3f977ea78c85038dbd9a83d0ccb0f03ce))
+* removed default folder under footer ([a19a886](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a19a886b79689cf3ab194d1e639ec4192a97d9ba))
+* update-matrix-version ([82a3ea6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/82a3ea6ed1a1fb0e26517b808427da25e600f738))
+
+
+### Code Refactoring
+
+* add css variables to reuse on sitelevel ([c25528e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c25528e8cf41000de46d531f7644b5554a106f92))
+* add test scripts ([8f86204](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8f86204f723b96445faf01964e863f1c2cacdb0a))
+* added correct condition for as seen on for template 2 ([1c24c14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1c24c14b939fa549a37307b41150b0235a8e10d5))
+* added minor changes to align with site level ([d2b3b37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d2b3b374248c9e8dcd67c1a45998bd57aacefd56))
+* correction to hasFooterLinks css class ([239a919](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/239a919fd33461695aef75fc839ba2d7884acad4))
+* correction to tests and show 3 rows of links on all tempalates ([f9987ed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9987ed4f82cb88f0674086b52eeea86ab73a56a))
+* fix temp change ([c6478cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c6478cd7327939a08975b19ed60d60d581eb18b6))
+* footer refactoring ([922235e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/922235eb06a106b4b66b1133214e8f86b37f7ca0))
+* new footer templates ([95cdecf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/95cdecf34ede752a667832e17fc856512d81a998))
+* remove unnecessary loadables, fix for dmca img ([bc37443](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc374431d7c756b5df16efdba757e4b91b8f13c3))
+* revert temp change ([8d9e691](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8d9e6911aaee1ce50e4e62fa819d4823cbbd985e))
+* show only 3 rows on links and license banner alignment on mobile ([1c4a8bb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1c4a8bb4e7ecf3fd710df2c98a4d8ef5d6896fc9))
+* temp change ([d1692d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d1692d05163917ea4b87bf8ed7775e75718c56c2))
+* temp change ([9ea65bc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9ea65bcfacfb2aa07e5c810621dd27c0942e1cea))
+
+
+* Merge branch 'update-matrix-version' into 'master' ([a90d9d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a90d9d21d164f5e17c4f024be9172207688b0f91))
+* Merge branch 'tm-3317-payment-review-pages' into 'master' ([88e3b13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/88e3b13e9e75ffb87404f2fa6c56a175aa513c14))
+* Merge branch 'tm-3303-optinmonstr' into 'master' ([53d8541](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/53d854109eb8cea41ddea6aa8658c1164e37297d))
+* Merge branch 'tm-3298-footer' into 'master' ([ec69056](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec690561f8943402c2bbdad2a69ff23493bedec4))
+* Merge branch 'master' into tm-3298-footer ([1c90f75](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1c90f75b6aedd8654f98fc737bfd045d009bdd69))
+* Merge branch 'master' into tm-3298-footer ([496f555](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/496f555b637e21e8aab36ab7bc55dcddd5a570a8))
+* Merge branch 'master' into tm-3298-footer ([aa69170](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa691700e30c98ca942d096c997c2dc3a2e5afc2))
+* Merge branch 'master' into tm-3298-footer ([8166ac2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8166ac28622d4379f888d76d86a30207ccb22a04))
+
+## [13.0.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.14...v13.0.15) (2023-03-07)
+
+
+### Bug Fixes
+
+* template one default ([c0a7a19](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c0a7a19be12452587907ca8f5e8da7b0ef86eff5))
+* test ([6a6d10e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a6d10e86db52cbbc4774639ded9d1912ed05306))
+
 ## [13.0.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.13...v13.0.14) (2023-03-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "13.0.14",
+  "version": "14.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.19",
+    "gatsby-core-theme": "18.0.21",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/footer/as-seen-on/as-seen-on.module.scss

@@ -0,0 +1,66 @@
+
+.asSeenOn {
+  background: var(--footer-asSeenOn-background-color);
+  border-bottom: var(--footer-asSeenOn-border);
+  @include flex-align(flex-start, center);
+  flex-direction: column;
+  gap: 1.6rem;
+  padding: 3.2rem 1.6rem;
+
+  @include min(tablet) {
+    @include flex-align(center, center);
+    padding: 48px 0px;
+  }
+
+  > h5,
+  > ul {
+    @include min(tablet) {
+      margin: 0 auto;
+      max-width: calc(var(--main-container-max) + var(--side-container));
+    }
+  }
+
+  > h5 {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--footer-asSeenOn-text-color, var(--color-49));
+  }
+
+  > ul {
+    @include flex-align(center, center);
+    flex-wrap: wrap;
+
+    li {
+      padding-right: 1rem;
+      padding-bottom: 1rem;
+
+      @include min(tablet) {
+        padding-bottom: 2rem;
+        padding-right: 2.5rem;
+      }
+
+      @include min(laptop) {
+        padding-bottom: 0;
+      }
+
+      img {
+        max-width: 9.5rem;
+
+        @include min(tablet) {
+          max-width: 13rem;
+        }
+      }
+    }
+  }
+}
+
+.templateTwo {
+  border: none;
+  @include flex-align(flex-start, center);
+  padding: 0;
+
+  > h5,
+  > ul {
+    margin: 0;
+  }
+}

package/src/components/atoms/footer/as-seen-on/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
+import styles from './as-seen-on.module.scss';
+
+const AsSeenOn = ({ asSeenOn, template }) => (
+  <div className={`${styles.asSeenOn} ${template && styles[template] ? styles[template] : ''}`}>
+    <h5>As Seen On:</h5>
+    <LinkList
+      showListTitle={false}
+      imageOnly
+      singleList
+      lists={asSeenOn}
+      gtmClass="mobile-menu-gtm logo-cta"
+      disableLazyLoad
+    />
+  </div>
+);
+
+export default AsSeenOn;
+
+AsSeenOn.propTypes = {
+  asSeenOn: PropTypes.shape({}),
+  template: PropTypes.string,
+};

package/src/components/atoms/footer/hotline/hotline.module.scss

@@ -0,0 +1,60 @@
+.footerHotline {
+  @include flex-direction(row);
+  padding-bottom: 2rem;
+
+  > div {
+    flex-grow: 3;
+    flex-basis: 0;
+  }
+}
+
+.helpContainer {
+  color: var(--footer-text-color, var(--color-49));
+  font-weight: var(--footer-helpline-font-weight, 900);
+    @include flex-align(center, center);
+    flex-direction: column;
+  
+    > p {
+      text-align: center;
+  
+      > a {
+        text-decoration: underline;
+      }
+    }
+}
+
+.helpText {
+  text-align: center;
+
+  a {
+    color: var(--footer-text-color, var(--color-49));
+    text-decoration: underline;
+  }
+}
+  
+.phoneNum {
+  @include text-background(var(--footer-helpline-background-color), var(--footer-helpline-text-color));
+  padding: 0.5rem 2rem;
+  width: auto;
+  margin: 2rem auto;
+
+  svg {
+    margin-right: 0.5rem;
+    color: var(--footer-helpline-icon-color, var(--color-32));
+  }
+}
+  
+.templateTwo {
+  @include flex-direction(column);
+  padding-bottom: 5rem;
+
+  @include min(tablet) {
+    .helpText {
+      text-align: left;
+    }
+  }
+
+  @include min(laptop) {
+    @include flex-direction(row);
+  }
+}

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

@@ -0,0 +1,39 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { MdPhoneInTalk } from '@react-icons/all-files/md/MdPhoneInTalk';
+import styles from './hotline.module.scss';
+
+const FooterHotline = ({ showAsSeen, asSeenOn, helpText, phoneNum, template }) => {
+  const AsSeenOn = showAsSeen ? loadable(() => import('../as-seen-on')) : null;
+
+  return (
+    <div className={`${styles.footerHotline} ${styles[template] ? styles[template] : ''}`}>
+      <div className={styles.helpContainer}>
+        <div
+          className={styles.helpText}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: helpText,
+          }}
+        />
+        <div className={styles.phoneNum}>
+          <MdPhoneInTalk />
+          {phoneNum}
+        </div>
+      </div>
+      {showAsSeen && AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template={template} />}
+    </div>
+  );
+};
+
+FooterHotline.propTypes = {
+  showAsSeen: PropTypes.bool,
+  asSeenOn: PropTypes.shape({}),
+  helpText: PropTypes.string,
+  phoneNum: PropTypes.string,
+  template: PropTypes.string,
+};
+
+export default FooterHotline;

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

@@ -0,0 +1,71 @@
+/* eslint-disable react/no-danger */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import styles from './license.module.scss';
+
+const FooterLicense = ({
+  gamblingText,
+  socialIcons,
+  template,
+  logo,
+  securityIcon,
+  imgWidth,
+  imgHeight,
+}) => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={`${styles.license} ${styles[template] ? styles[template] : ''}`}>
+      <div className={styles.logo}>
+        <LazyImage
+          alt="Site footer logo"
+          width={imgWidth || 182}
+          height={imgHeight || 48}
+          src={logo}
+          disableLazyLoad
+        />
+      </div>
+      <div className={styles.security}>
+        <LazyImage alt="Security icon" width="26" height="20" src={securityIcon} disableLazyLoad />
+        <span className={styles.securityText}>
+          {translate(translations, 'licensed_casinos', 'We only list licensed casinos')}
+        </span>
+      </div>
+      {socialIcons && (
+        <div className={styles.socialIcons}>
+          <LinkList
+            width="14"
+            height="14"
+            singleList
+            imageOnly
+            lists={socialIcons}
+            gtmClass="mobile-menu-gtm logo-cta"
+            disableLazyLoad
+          />
+        </div>
+      )}
+      {template !== 'templateOne' && gamblingText && (
+        <div
+          className={styles.gamblingText}
+          dangerouslySetInnerHTML={{ __html: gamblingText?.replace(/\. /g, '.<br />') }}
+        />
+      )}
+    </div>
+  );
+};
+
+FooterLicense.propTypes = {
+  gamblingText: PropTypes.string,
+  socialIcons: PropTypes.shape({}),
+  template: PropTypes.string,
+  logo: PropTypes.string,
+  securityIcon: PropTypes.string,
+  imgWidth: PropTypes.number,
+  imgHeight: PropTypes.number,
+};
+
+export default FooterLicense;

package/src/components/atoms/footer/license/license.module.scss

@@ -0,0 +1,138 @@
+.license {
+  @include flex-align(center, space-between);
+  flex-direction: column;
+  flex-basis: 0;
+  flex-grow: 2.7;
+  padding-bottom: 4rem;
+  gap: 3.2rem;
+
+  > p {
+    text-align: left;
+    color: var(--footer-text-color, #f4f3f9);
+    margin: 0 auto;
+    padding: 2rem 0;
+
+    @include min(tablet) {
+      padding: 1rem 0;
+      margin: 0;
+      width: 85%;
+    }
+
+    @include min(laptop) {
+      width: 60%;
+    }
+  }
+}  
+
+.info {
+  @include flex-direction(column);
+
+  @include min(tablet) {
+    padding-bottom: 2rem;
+  }
+
+  @include min(laptop) {
+    @include flex-direction(row);
+    padding-bottom: 4rem;
+  }
+
+  > div > img {
+    padding-right: 2rem;
+  }
+}
+
+.security {
+  @include text-background(var(--footer-security-background-color), var(--footer-security-text-color, var(--color-49)));
+  width: auto;
+  padding: 0.7rem 2rem;
+  order: 3;
+  @include min(tablet) {
+    min-width: 285px;
+  }
+
+  img {
+    padding-right: 1rem;
+  }
+}
+
+.socialIcons {  
+  ul {
+    @include flex-align(center, center);
+
+    @include min(tablet) {
+      @include flex-align(center, flex-start);
+    }
+
+    li {
+      padding: 0.9rem;
+      background-color: var(--footer-socials-background-color, var(--color-49));
+      border-radius: 2rem;
+      margin-right: 1rem;
+
+      a {
+        color: var(--footer-text-color, var(--color-4));
+        display: flex;
+        width: 14px;
+        height: 14px;
+
+        &:hover {
+          color: var(--footer-text-color, var(--color-21));
+        }
+
+        svg {
+          font-size: 1.2rem;
+        }
+      }
+    }
+  }
+}
+
+.gamblingText {
+  order: 4;
+}
+
+.templateOne {
+  @include min(tablet) {
+    padding-bottom: 6rem;
+    flex-direction: row;
+
+    .socialIcons {
+      order: -1;
+    }
+  }
+}
+
+.templateTwo,
+.templateThree {
+  @include min(tablet) {
+    flex-wrap: wrap;
+    @include flex-align(flex-start, space-between);
+    flex-direction: row;
+    gap: unset;
+    flex: 0 1 480px;
+
+    .socialIcons {
+      padding: 4rem 0;
+    }
+  }
+
+  .gamblingText,
+  .socialIcons {
+    flex-basis: 100%;
+  }
+
+  .security {
+    @include min(tablet) {
+      margin: 2rem 0;  
+      position: absolute;
+      top: 3.5rem;
+      left: 50%;
+    }
+  
+    @include min(laptop) {
+      position: inherit;
+      margin: 0;
+      order: unset;
+    }
+  }
+}

package/src/components/atoms/header-operator-bannner/header-operator-bannner.module.scss

@@ -1,100 +1,98 @@
 .operatorBanner {
-    display: grid;
-    gap: .8rem;
-    align-items: center;
-    grid-template-columns: .1fr 1fr auto;
-    border-radius: 8px;
-    background: #1C1A28;
-    border: 1px solid #E9E9E9;
-    padding: .8rem;
-
-    >a {
-        justify-self: end;
-        align-self: center;
-
-        @include max(mobile) {
-            padding: .8rem 2.1rem;
-            font-size: 14px;
-            line-height: 18px;
-            border-radius: 8px;
-        }
+  display: grid;
+  gap: 0.8rem;
+  align-items: center;
+  grid-template-columns: 0.1fr 1fr auto;
+  border-radius: 8px;
+  background: #1c1a28;
+  border: 1px solid #e9e9e9;
+  padding: 0.8rem;
+
+  > a {
+    justify-self: end;
+    align-self: center;
+
+    @include max(mobile) {
+      padding: 0.8rem 2.1rem;
+      font-size: 14px;
+      line-height: 18px;
+      border-radius: 8px;
     }
+  }
 
-    >img {
-        width: 4rem;
-        height: 4rem;
-        min-width: 4rem;
-        border-radius: 8px;
-        background-color: white;
-        border: 1px solid #6B6A72;
-        flex: none;
-
-        @include min(tablet) {
-            min-width: 6.4rem;
-            width: 6.4rem;
-            height: 6.4rem;
-        }
-    }
+  > img {
+    width: 4rem;
+    height: 4rem;
+    min-width: 4rem;
+    border-radius: 8px;
+    background-color: white;
+    border: 1px solid #6b6a72;
+    flex: none;
 
     @include min(tablet) {
-        gap: 1.6rem;
-        border-radius: 16px;
-        padding: 1.6rem 2.4rem;
-        grid-template-columns: .1fr 2fr 1fr;
+      min-width: 6.4rem;
+      width: 6.4rem;
+      height: 6.4rem;
     }
+  }
+
+  @include min(tablet) {
+    gap: 1.6rem;
+    border-radius: 16px;
+    padding: 1.6rem 2.4rem;
+    grid-template-columns: 0.1fr 2fr 1fr;
+  }
 }
 
 .bonus {
-    display: flex;
-
-
-    >div {
-        >span {
-            font-weight: 700;
-            font-size: 12px;
-            line-height: 20px;
-            color: white;
-            padding-right: 0rem;
-
-            @include min(tablet) {
-                font-size: 16px;
-                line-height: 27px;
-            }
-
-        }
-    }
-
-    @include min(tablet) {
-        flex-direction: column;
-
+  display: flex;
+
+  > div {
+    > span {
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 20px;
+      color: white;
+      padding-right: 0rem;
+
+      @include min(tablet) {
+        font-size: 16px;
+        line-height: 27px;
+      }
     }
+  }
 
+  @include min(tablet) {
+    flex-direction: column;
+  }
 }
 
 .bonusTitle {
-    display: none;
+  display: none;
 
-    @include min(tablet) {
-        display: block;
-        font-size: 20px;
-        line-height: 30px;
-        font-weight: 700;
-        text-transform: capitalize;
-        color: #5CE482;
-    }
+  @include min(tablet) {
+    display: block;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 0.4rem;
+    text-transform: capitalize;
+    color: #5ce482;
+    text-transform: uppercase;
+  }
 }
 
 .coming_soon,
 .inactive,
 .not_recommended {
-    font-size: 16px;
-    line-height: 22px;
-    font-weight: 700;
-    color: #FFFFFF;
-    text-transform: capitalize;
-
-    @include min(tablet) {
-        font-size: 20px;
-        line-height: 30px;
-    }
-}
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 700;
+  color: #ffffff;
+  text-transform: capitalize;
+
+  @include min(tablet) {
+    font-size: 20px;
+    line-height: 30px;
+  }
+}