gatsby-matrix-theme 5.0.2 → 5.0.5

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+## [5.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.4...v5.0.5) (2022-03-09)
+
+
+### Bug Fixes
+
+* add colors ([107f82b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/107f82bc88f3fc5f34751dc058df6f9b882dd2c6))
+* add excludeTemplateInPopup prop on popup ([7983069](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79830691468af802f660bef22ce07b38ab329dfa))
+* add make style and replace word month with current month ([e18de59](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e18de59e12447bcb75bd946bea4cfab628659ce0))
+* add props for title and buttonText ([ed833d9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed833d9d17588024cfaeed9910178b4c8cef8d42))
+* change structure and add some others fields ([1d415ce](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d415ceebf210e86ce21ea2482ed794a4e83538c))
+* fix conflicts ([53b31db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/53b31dbb2684f2d855bd32c6ae715039e02764f5))
+* moved the img in the static folder ([e8899f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e8899f4375a8bc1282718d63a9fa4aec7a53370d))
+* name and tnc default false ([66ed72f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66ed72f08220d6d603baf9ae1f6a398ff0bfabed))
+
+
+### Config
+
+* updated core theme ([6a6c533](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a6c533d562898cf3843069a4529b597d1f685d0))
+
+
+* Merge branch 'tm-2674-il-popup' into 'master' ([33782fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/33782fa9a48fb1bc64a22f97fc75fc0cdb18afc8))
+* Merge branch 'master' into tm-2674-il-popup ([1e33c6f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1e33c6fbd0b4ebc8f0647b5bdca6b48fdb486429))
+
+## [5.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.3...v5.0.4) (2022-03-08)
+
+
+### Bug Fixes
+
+* tests and social links component ([c8a45c6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c8a45c6f29f5002528d181bf7541a82c1ac479a7))
+* tests and social links component ([e07a901](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e07a901dba7c4130411e1b6647863aed7cd7cbcb))
+
+
+* Merge branch 'tm-2748-social-links' into 'master' ([71c8a4d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/71c8a4d20b1edfb3998bd74e132bac46e13a53b0))
+
+## [5.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.2...v5.0.3) (2022-03-04)
+
+
+### Bug Fixes
+
+* disabled lighthouse ci ([d7441fd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d7441fdf0436830cd7b9ccedd825ec05ac38b91a))
+* updated core theme version ([bcd29f1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bcd29f1fd79b72f16f80cda24cf66c8e4c052999))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([9588ad3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9588ad383c36d88df71811eccc348f1092b5e211))
+
 ## [5.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.1...v5.0.2) (2022-03-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "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": "^5.0.1",
+    "gatsby-core-theme": "^5.1.1",
     "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

@@ -128,14 +128,13 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
                   const itemsLength = list.length === 6 ? 6 : 5;
                   if (i < (showAllPayment.includes(index) ? list.length : itemsLength)) {
                     return (
-                      <span key={`${key}-${deposit.name}`}>
-                        <LazyImg
-                          src={imagePrettyUrl(deposit?.logo_filename)}
-                          width={72}
-                          height={72}
-                          alt={deposit.name}
-                        />
-                      </span>
+                      <LazyImg
+                        key={`${key}-${deposit.name}`}
+                        src={imagePrettyUrl(deposit?.logo_filename)}
+                        width={72}
+                        height={72}
+                        alt={deposit.name}
+                      />
                     );
                   }
                 })}

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

@@ -20,6 +20,7 @@ describe('Comparison table test component', () => {
       const loadMoreBtn = paymentMethods.querySelector('a');
       // eslint-disable-next-line no-unused-expressions
       loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toEqual(5);
+
       loadMoreBtn && fireEvent.click(loadMoreBtn);
       loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toBeGreaterThan(5);
     });

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

@@ -2,14 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './popup-card.module.scss';
 
-const PopupCard = ({ item, tracker }) => {
-  const { logo_url: logoUrl } = item;
+const PopupCard = ({ item, tracker, showName = false, showTnc = false }) => {
+  const { logo_url: logoUrl, name } = item;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const secondLiner = item?.one_liners?.secondary?.one_liner;
+  const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
   const [one, second] = (oneLiner?.includes('+') && oneLiner?.split('+')) || [
     oneLiner,
     secondLiner,
@@ -17,14 +19,13 @@ const PopupCard = ({ item, tracker }) => {
 
   return (
     <div className={styles.popupCard}>
-      <div className={styles.wrapper}>
-        <div className={styles.imgContainer}>
-          <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
-        </div>
-        <div className={styles.textContainer}>
-          <p className={styles.primaryText}>{one}</p>
-          <p className={styles.secondaryText}>{`+${second}`}</p>
-        </div>
+      <div className={styles.imgContainer}>
+        <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
+        {showName && <p className={styles.name}>{name}</p>}
+      </div>
+      <div className={styles.textContainer}>
+        <p className={styles.primaryText}>{one}</p>
+        <p className={styles.secondaryText}>{`+${second}`}</p>
       </div>
       <div className={styles.buttonContainer}>
         <OperatorCta
@@ -34,15 +35,22 @@ const PopupCard = ({ item, tracker }) => {
           gtmClass="popup-operator-cta-gtm"
         />
       </div>
+      <div className={styles.tandc}>
+        {showTnc && tnc === '1' && <Tnc onlyMobile operator={item} />}
+      </div>
     </div>
   );
 };
 
 PopupCard.propTypes = {
   item: PropTypes.shape({
+    name: PropTypes.string,
     links: PropTypes.shape({
       main: PropTypes.string,
     }),
+    extra_fields: PropTypes.shape({
+      terms_and_conditions_text_enabled: PropTypes.string,
+    }),
     logo_url: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
@@ -54,6 +62,8 @@ PopupCard.propTypes = {
     }),
   }),
   tracker: PropTypes.string,
+  showName: PropTypes.bool,
+  showTnc: PropTypes.bool,
 };
 
 export default PopupCard;

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

@@ -1,8 +1,6 @@
 .popupCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 8rem 2fr;
   padding-top: 16px;
   border-top: 1px solid #a5bcf0;
 
@@ -11,67 +9,66 @@
     padding: 16px 0;
   }
 
-  .wrapper {
-    height: 100%;
-    display: flex;
+  @include max(tablet) {
+    width: 100%;
+  }
+
+  .imgContainer {
+    width: 8rem;
+    height: 8rem;
+    min-width: 8rem;
+    grid-column: 1/2;
+    grid-row: 1/2;
+
+    @include min(tablet) {
+      min-width: 9.8rem;
+      width: 9.8rem;
+      height: 9.8rem;
+    }
 
-    @include max(tablet) {
+    > img {
       width: 100%;
+      height: 100%;
+      border-radius: 0.4rem;
+      object-fit: contain;
     }
+  }
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-column: 2/3;
+    grid-row: 1/2;
+    margin-left: 1.5rem;
 
-    .imgContainer {
-      width: 8rem;
-      height: 8rem;
-      min-width: 8rem;
+    .primaryText {
+      color: #e00028;
+      font-weight: 700;
+      font-size: 1.4rem;
+      line-height: 2.3rem;
 
       @include min(tablet) {
-        min-width: 9.8rem;
-        width: 9.8rem;
-        height: 9.8rem;
-      }
-
-      > img {
-        width: 100%;
-        height: 100%;
-        border-radius: 0.4rem;
-        object-fit: contain;
+        font-size: 2rem;
+        line-height: 3rem;
       }
     }
 
-    .textContainer {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 1.5rem;
-
-      .primaryText {
-        color: #e00028;
-        font-weight: 700;
-        font-size: 1.4rem;
-        line-height: 2.3rem;
-
-        @include min(tablet) {
-          font-size: 2rem;
-          line-height: 3rem;
-        }
-      }
-
-      .secondaryText {
-        color: #17182f;
-        font-weight: 700;
-        line-height: 2.3rem;
-        font-size: 1.4rem;
+    .secondaryText {
+      color: #17182f;
+      font-weight: 700;
+      line-height: 2.3rem;
+      font-size: 1.4rem;
 
-        @include min(tablet) {
-          line-height: 3rem;
-          font-size: 1.8rem;
-        }
+      @include min(tablet) {
+        line-height: 3rem;
+        font-size: 1.8rem;
       }
     }
   }
-
   .buttonContainer {
     margin-left: 3rem;
+    grid-column: 1/3;
+    grid-row: 2/3;
 
     @include max(mobile) {
       width: 100%;
@@ -88,4 +85,13 @@
       font-size: 1.8rem;
     }
   }
+  @include min(tablet){
+    grid-template-columns: 9.8rem 2fr 1.5fr;
+    .buttonContainer {
+      @include flex-direction(row);
+      @include flex-align(center, end);
+      grid-column: 3/4;
+      grid-row: 1/2;
+    }
+  }
 }

package/src/components/atoms/social-icons/index.js

@@ -6,29 +6,25 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import { translate } from '~helpers/getters';
 import styles from './social-icons.module.scss';
 
-const SocialIcons = ({ socialIcons }) => {
+const SocialIcons = ({
+  socialIcons,
+  showTitle = true,
+  icons = {
+    instagram: <FaInstagram />,
+    facebook: <FaFacebookSquare />,
+    twitter: <FaTwitter />,
+    linkedin: <FaLinkedin />,
+    youtube: <FaYoutube />,
+  },
+}) => {
   const { translations } = useContext(Context) || {};
   const keys = Object.keys(socialIcons);
-  const switchIcons = (icons) => {
-    switch (icons) {
-      case 'instagram':
-        return <FaInstagram />;
-      case 'facebook':
-        return <FaFacebookSquare />;
-      case 'twitter':
-        return <FaTwitter />;
-      case 'linkedin':
-        return <FaLinkedin />;
-      case 'youtube':
-        return <FaYoutube />;
-      default:
-        return null;
-    }
-  };
 
   return (
     <div className={styles.container}>
-      <div className={styles.title}>{translate(translations, 'follow_us', 'Follow Us')}</div>
+      {showTitle && (
+        <div className={styles.title}>{translate(translations, 'follow_us', 'Follow Us')}</div>
+      )}
       <div className={styles.socialIcons}>
         {keys.map(
           (key) =>
@@ -40,7 +36,7 @@ const SocialIcons = ({ socialIcons }) => {
                 target="_blank"
                 rel="noreferrer"
               >
-                {switchIcons(key)}
+                {icons[key]}
               </a>
             )
         )}
@@ -53,4 +49,7 @@ export default SocialIcons;
 
 SocialIcons.propTypes = {
   socialIcons: PropTypes.shape({}),
+  showTitle: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  icons: PropTypes.object,
 };

package/src/components/atoms/social-icons/social-icons.module.scss

@@ -26,7 +26,7 @@
       text-align: center;
       font-size: 2rem;
       svg{
-          color: var(--color-16);
+          color: #000;
       }
     }
   }

package/src/components/organisms/popup/index.js

@@ -10,13 +10,13 @@ import { MdClose } from 'react-icons/md';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import PopupCard from '../../atoms/cards/popup-card';
-
 import { setIdleTimeout } from '../../../helpers/popup';
 import { isMobileDevice } from '../../../helpers/mobile-detect';
+import months from '../../../constants/months';
 
 import styles from './popup.module.scss';
 
-const Popup = ({ module, isStorybook = false }) => {
+const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) => {
   const modal = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const { items } = module.items[0];
@@ -24,9 +24,15 @@ const Popup = ({ module, isStorybook = false }) => {
   const { style } = module;
   const tracker = isMobileDevice() ? 'mobPopup' : 'Popup';
   const { translations } = useContext(Context) || {};
+  const date = new Date();
+  const month = months[date.getMonth()];
+  const title = translate(translations, 'popupTitle', 'Claim These Exclusive Bonuses').replace(
+    'month',
+    month
+  );
 
-  const close = () => {
-    setShowModal(false);
+  const handelActive = (status) => {
+    setShowModal(status);
   };
 
   const idleTimeout = () => {
@@ -47,17 +53,13 @@ const Popup = ({ module, isStorybook = false }) => {
 
   const handleEsc = (event) => {
     if (event.keyCode === 27) {
-      close();
+      setShowModal(false);
     }
   };
 
   const handleOutsideClick = (event) => {
-    if (
-      modal.current &&
-      !modal.current.contains(event.target) &&
-      !modal.current.previousElementSibling.contains(event.target)
-    ) {
-      close();
+    if (modal.current && modal?.current === event.target) {
+      setShowModal(false);
     }
   };
 
@@ -89,20 +91,41 @@ const Popup = ({ module, isStorybook = false }) => {
   }, []);
 
   return (
-    <div className={`${styles.modalInner} ${style && styles[style]}`} ref={modal}>
-      <div className={styles.modalOverlay} onClick={close}>
-        <div className={styles.popupCenter}>
-          <div className={styles.modalContent}>
-            <div className={styles.modalTitle}>
-              <p>{translate(translations, 'claim_bonuses', 'Claim These Exclusive Bonuses')}</p>
-              <button className={`${styles.closeIcon} popup-gtm btn-cta`} onClick={close}>
-                <MdClose />
-              </button>
+    <div
+      className={`${styles.popup} ${toggle ? styles.toggleButton : styles.defaultPopup} ${
+        style && styles[style]
+      }`}
+    >
+      {showModal && <div onClick={() => handelActive(false)} className={styles.modalOverlay} />}
+      <div className={`${styles.modalInner} `} ref={modal}>
+        <div className={styles.itemsContent}>
+          <div className={styles.popupCenter}>
+            <div className={styles.modalContent}>
+              <div className={styles.modalTitle}>
+                <p>{title}</p>
+                <button
+                  className={`${styles.closeIcon} popup-gtm btn-cta`}
+                  onClick={() => handelActive(false)}
+                >
+                  <MdClose />
+                </button>
+              </div>
+              {shownItems?.map((item, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <PopupCard key={index} item={item} tracker={tracker} />
+              ))}
             </div>
-            {shownItems?.map((item, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <PopupCard key={index} item={item} tracker={tracker} />
-            ))}
+            {toggle && (
+              <div
+                className={styles.toggleButtonPopup}
+                onClick={() => {
+                  handelActive(!showModal);
+                }}
+              >
+                {icon}
+                <p>{title}</p>
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -116,6 +139,8 @@ Popup.propTypes = {
     style: PropTypes.string,
   }).isRequired,
   isStorybook: PropTypes.bool,
+  toggle: PropTypes.bool,
+  icon: PropTypes.elementType,
 };
 
 export default Popup;