gatsby-core-theme 30.0.80 → 30.0.82

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [30.0.82](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.81...v30.0.82) (2024-02-20)
+
+
+### Bug Fixes
+
+* added helpline extra field check in footer to overwrite ([a2408fe](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a2408fee5025db856d7364294ea0985293d6be75))
+* added helpline extra field check in footer to overwrite ([75062aa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/75062aab2aaa787a23a684e4970691cfee912ab9))
+* fixed failing tests ([59fb818](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/59fb8182dd392759ea56b696f2feee92cdf016e5))
+* fixed failing tests ([abdb71e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/abdb71ee0fb4ec439b51ffecc05b7de856ee94c8))
+
+
+* Merge branch 'tm-4047-market-helpline' into 'master' ([d474a66](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d474a6619d7413d52ce4bcf2e50f6f5fda8fe276))
+
+## [30.0.81](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.80...v30.0.81) (2024-02-16)
+
+
+### Bug Fixes
+
+* tracker api params cleanup nulls ([46d3380](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/46d3380e2fd4a62306471e587b166fcc5573e8ce))
+
 ## [30.0.80](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.79...v30.0.80) (2024-02-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.80",
+  "version": "30.0.82",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

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

@@ -0,0 +1,78 @@
+
+.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;
+  }
+
+  > span,
+  > ul {
+    @include min(tablet) {
+      margin: 0 auto;
+      max-width: calc(var(--main-container-max) + var(--side-container));
+    }
+  }
+
+  > span {
+    font-size: var(--h5-size);
+    margin-top: 0;
+    font-weight: 700;
+    margin-bottom: 0;
+    color: var(--footer-asSeenOn-text-color, var(--color-49));
+  }
+
+  > ul {
+    @include flex-align(flex-start, flex-start);
+    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;
+        }
+      }
+    }
+
+    @include min(tablet) {
+      @include flex-align(center, center);
+    }
+  }
+}
+
+.templateTwo {
+  border: none;
+  @include flex-align(flex-start, flex-start);
+  padding: 0;
+
+  > span,
+  > ul {
+    margin: 0;
+  }
+
+  > ul {
+    @include min(tablet) {
+      @include flex-align(flex-start, flex-start);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,72 @@
+.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;
+}
+
+.hasAsSeenOn {
+  @include min(tablet) {
+    .helpText {
+      text-align: left;
+    }
+  }
+
+  @include min(laptop) {
+    @include flex-direction(row);
+    justify-content: space-between;
+
+    > div {
+      flex: 0 1 491px;
+      @include flex-align(flex-start, flex-start);
+    }
+
+    .phoneNum {
+      margin-left: 0;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+/* 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 = false, asSeenOn, helpText, phoneNum, template }) => {
+  const AsSeenOn = showAsSeen ? loadable(() => import('../as-seen-on')) : null;
+  return (
+    <div
+      className={`${styles?.footerHotline || ''} ${
+        styles[template] ? styles[template] || '' : ''
+      } ${showAsSeen && styles.hasAsSeenOn ? styles.hasAsSeenOn || '' : ''}`}
+    >
+      <div className={styles.helpContainer}>
+        <div
+          className={styles.helpText}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: helpText,
+          }}
+        />
+        <div className={styles.phoneNum}>
+          <MdPhoneInTalk title="Phone Icon" />
+          {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,69 @@
+/* eslint-disable react/no-danger */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from '../../../../helpers/getters';
+import LazyImage from '../../../../hooks/lazy-image';
+import LinkList from '../../../molecules/link-list';
+import { Context } from '../../../../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}
+        />
+      </div>
+      <div className={styles?.security || ''}>
+        <LazyImage alt="Security icon" width="26" height="20" src={securityIcon} />
+        <span className={styles?.securityText || ''}>
+          {translate(translations, 'licensed_casinos', 'We only list licensed casinos')}
+        </span>
+      </div>
+      {socialIcons && (
+        <div className={styles?.socialIcons || ''}>
+          <LinkList
+            width={40}
+            height={40}
+            singleList
+            imageOnly
+            lists={socialIcons}
+            gtmClass="mobile-menu-gtm logo-cta"
+          />
+        </div>
+      )}
+      {template !== 'templateOne' && gamblingText && (
+        <div
+          className={styles?.gamblingText || ''}
+          dangerouslySetInnerHTML={{ __html: gamblingText }}
+        />
+      )}
+    </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,151 @@
+.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);
+    flex-wrap: wrap;
+
+    @include min(tablet) {
+      @include flex-align(center, flex-start);
+    }
+
+    li {
+      margin: 0 0.8rem 0.8rem 0;
+
+      a {
+        color: var(--footer-text-color, var(--color-4));
+        display: flex;
+        width: 40px;
+        height: 40px;
+
+        &:hover {
+          color: var(--footer-text-color, var(--color-21));
+        }
+
+        svg {
+          font-size: 1.2rem;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+  }
+}
+
+.gamblingText {
+  order: 4;
+}
+
+.templateOne {
+  @include min(tablet) {
+    padding-bottom: 6rem;
+    flex-direction: row;
+
+    .socialIcons {
+      order: -1;
+    }
+  }
+}
+
+.templateTwo,
+.templateThree {
+  .gamblingText,
+  .socialIcons {
+    flex-basis: 100%;
+  }
+
+  .socialIcons {
+    order: 3;
+  }
+
+  .security {
+    order: 2;
+  }
+
+  @include min(tablet) {
+    flex-wrap: wrap;
+    @include flex-align(flex-start, space-between);
+    flex-direction: row;
+    gap: unset;
+    flex: 0 1 40%;
+
+    .socialIcons {
+      padding: 4rem 0;
+    }
+
+    .security {
+      margin: 2rem 0;  
+      position: absolute;
+      top: 3.5rem;
+      left: calc(40% + 1.6rem);
+    }
+  }
+
+  @include min(laptop) {
+    flex: 0 1 491px;
+
+    .security {
+      position: inherit;
+      margin: 0;
+      order: unset;
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
 .footer {
-  background-color: var(--footer-background-color);
-  color: white;
+  background-color: var(--footer-background-color, var(--color-1));
+  color: var(--footer-text-color, var(--color-50));
   padding: 2rem 2rem;
   position: relative;
-
+  border-top: 1px solid;
   @include min(tablet) {
     padding: 5.5rem 3rem;
   }
@@ -14,123 +14,124 @@
 
   > div {
     margin: 0 auto;
-    max-width: calc(var(--main-container-max) + var(--side-container));
+    max-width: calc(var(--main-container-max) + var(--side-container) - 6rem);
+  }
+}
+
+.topPart {
+  padding-bottom: 4rem;
+  @include flex-direction(column-reverse);
+
+  @include min(tablet) {
+    gap: 1.6rem;
+    padding-bottom: 6rem;
+  }
+}
+
+.bottomPart {
+  @include flex-direction(column-reverse);
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 3rem;
+
+  @include min(laptop) {
+    padding-bottom: 0;
+  }
+}
+
+.hasFooterLinks {
+  @media only screen and (max-width: 767px) {
+    position: relative;
+    padding-bottom: 88px;
+  }
+}
+
+.links {
+  flex-grow: 4;
+  flex-basis: 0;
+  text-align: center;
+
+  @include min(tablet) {
     @include flex-direction(row);
+    text-align: left;
+  }
 
-    &.topPart {
-      padding-bottom: 4rem;
-      @include flex-direction(column);
-      flex-flow: column-reverse;
+  > ul {
+    padding: 0.5rem;
+    flex-grow: 1;
+    flex-basis: 0;
 
-      @include min(tablet) {
-        @include flex-direction(row);
-        flex-flow: row-reverse;
-      }
+    li {
+      padding-bottom: 2rem;
 
-      > ul {
-        flex-grow: 1;
+      &:first-child {
+        font-weight: 700;
+        color: var(--footer-links-heading-color, var(--color-49));
       }
 
-      > div {
-        @include min(tablet) {
-          flex-grow: 3;
-          flex-basis: 0;
-        }
+      a {
+        @include link-color(var(--footer-text-color, var(--color-50)));
       }
+    }
+  }
+}
 
-      .links {
-        @include flex-direction(row);
+.copyrightDisclaimer {
+margin: 3rem 0 2rem 0;
 
-        @include min(tablet) {
-          padding-top: 7rem;
-        }
+p {
+  text-align: left;
 
-        @include min(laptop) {
-          padding-top: 0;
-        }
+  &:last-child {
+    padding-top: 2rem;
+  }
+}
 
-        > ul {
-          padding: 0.5rem;
-          flex-grow: 1;
-          li {
-            padding-bottom: 2rem;
-
-            &:first-child {
-              font-weight: 700;
-              text-transform: uppercase;
-            }
-
-            &:not(:first-child) {
-              a {
-                @include link-color(white);
-              }
-            }
-          }
-        }
-      }
-    }
+@include min(laptop) {
+  margin: 3rem 0 2rem 0;
+
+  p {
+    text-align: justify;
+  }
+}
+}
 
-    &.bottomPart {
-      flex-flow: column;
-      flex-direction: column-reverse;
-      justify-content: center;
-      align-items: center;
+.copyrightText {
+  order: -1;
+}
 
-      .copyrightDisclaimer {
-        padding: 3rem 0;
+.logos {
+  @include flex-align(center, center);
+  flex-direction: column;
+  > ul {
+    @include flex-align(center, center);
+    flex-wrap: wrap;
+    padding-bottom: 3rem;
 
-        @include min(laptop) {
-          padding: 3rem 0 0 0;
-        }
+    @include min(tablet) {
+      padding-bottom: 0;
+    }
 
-        p {
-          text-align: center;
+    li {
+      padding-right: 1rem;
+      padding-bottom: 1rem;
 
-          &:last-child {
-            padding-top: 2rem;
-          }
-        }
+      @include min(tablet) {
+        padding-bottom: 2rem;
+        padding-right: 2.5rem;
+      }
+
+      @include min(laptop) {
+        padding-bottom: 0;
       }
 
-      .logos {
-        > ul {
-          @include flex-align(center, center);
-          flex-wrap: wrap;
-          padding-bottom: 3rem;
-
-          @include min(tablet) {
-            padding-bottom: 0;
-          }
-
-          li {
-            padding-right: 1rem;
-            padding-bottom: 1rem;
-
-            @include min(tablet) {
-              padding-bottom: 2rem;
-              padding-right: 2.5rem;
-            }
-
-            @include min(laptop) {
-              padding-bottom: 0;
-            }
-
-            &:first-child {
-              img {
-                max-width: 3rem;
-              }
-            }
-
-            img {
-              max-width: 9.5rem;
-
-              @include min(tablet) {
-                max-width: 13rem;
-              }
-            }
-          }
+      img {
+        max-width: 9.5rem;
+
+        @include min(tablet) {
+          max-width: 13rem;
         }
       }
     }
   }
-}
+}