gatsby-matrix-theme 2.0.2 → 2.1.0

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

@@ -0,0 +1,117 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable react/button-has-type */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/no-danger */
+import React, { useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { MdClose } from 'react-icons/md';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+
+import { setIdleTimeout } from '../../../helpers/popup';
+import PopupCard from '../../atoms/cards/popup-card';
+
+import styles from './popup.module.scss';
+
+const Popup = ({ module, translations, isStorybook = false }) => {
+  const modal = useRef(null);
+  const [showModal, setShowModal] = useState(false);
+  const { items } = module.items[0];
+  const shownItems = items?.slice(0, 4) || [];
+  const { style } = module;
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  const idleTimeout = () => {
+    const popupExists = sessionStorage.getItem('popstate');
+    if (!popupExists) {
+      setShowModal(true);
+      sessionStorage.setItem('popstate', true);
+    }
+  };
+
+  const onMouseLeave = () => {
+    const popupExists = sessionStorage.getItem('popstate');
+    if (!popupExists) {
+      setShowModal(true);
+      sessionStorage.setItem('popstate', true);
+    }
+  };
+
+  const handleEsc = (event) => {
+    if (event.keyCode === 27) {
+      close();
+    }
+  };
+
+  const handleOutsideClick = (event) => {
+    if (
+      modal.current &&
+      !modal.current.contains(event.target) &&
+      !modal.current.previousElementSibling.contains(event.target)
+    ) {
+      close();
+    }
+  };
+
+  useEffect(() => {
+    if (showModal) {
+      modal.current.classList.toggle(styles.activeModal);
+    } else {
+      modal.current.classList.remove(styles.activeModal);
+    }
+  }, [showModal]);
+
+  // Close on esc
+  // Close on outside click
+  // Show Popup on Idle and on window leave
+  useEffect(() => {
+    const expireSeconds = 20;
+    setIdleTimeout(expireSeconds, idleTimeout);
+    isStorybook && setShowModal(true);
+    window.addEventListener('keydown', handleEsc);
+    window.addEventListener('mousedown', handleOutsideClick);
+    document.addEventListener('mouseleave', onMouseLeave);
+
+    // Clean up event listeners after popup is closed
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+      window.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, []);
+
+  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} onClick={close}>
+                <MdClose />
+              </button>
+            </div>
+            {shownItems?.map((item) => (
+              <PopupCard item={item} translations={translations} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Popup.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf({}),
+    style: PropTypes.string,
+  }).isRequired,
+  translations: PropTypes.shape({}),
+  isStorybook: PropTypes.bool,
+};
+
+export default Popup;

package/src/components/organisms/popup/popup.module.scss

@@ -0,0 +1,96 @@
+.modalInner {
+  display: none;
+
+  &.activeModal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.desktop_only {
+    @include max(laptop) {
+      display: none;
+    }
+  }
+
+  &.mobile_only {
+    @include min(laptop) {
+      display: none;
+    }
+  }
+}
+
+.modalOverlay {
+  position: fixed;
+  display: block;
+  z-index: map-get($z-index, modal);
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.4);
+  transition: opacity 0.15s linear;
+
+  .popupCenter {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @include min(tablet) {
+      justify-content: center;
+    }
+  }
+
+  .modalContent {
+    background: #fff;
+    color: #171f49;
+    padding: 0.8rem 2.4rem;
+    width: 90%;
+    border-radius: 1rem;
+    margin-top: 5rem;
+    position: relative;
+
+    @include min(tablet) {
+      max-width: 68rem;
+      min-width: 68rem;
+      margin-top: 0;
+      width: auto;
+    }
+
+    .modalTitle {
+      > p {
+        font-size: 1.8rem;
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+        line-height: 2.5rem;
+        font-weight: 700;
+        text-align: left;
+        padding-right: 1.6rem;
+
+        @include min(tablet) {
+          margin-top: 3.2rem;
+          font-size: 2rem;
+          line-height: 3rem;
+          margin-top: 1.2rem;
+          margin-bottom: 1.3rem;
+        }
+      }
+    }
+
+    .closeIcon {
+      position: absolute;
+      top: 1.5rem;
+      right: 1.5rem;
+
+      > svg {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';
+
+import Popup from '.';
+
+export default {
+  title: 'Matrix-Theme/Organisms/Popup',
+  component: Popup,
+  argTypes: {
+    module: {
+      name: 'module',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'Module object',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+    translations: {
+      name: 'translations',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'Translations object',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays toplist Popup',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Popup {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  isStorybook: true,
+  module: singleToplistData,
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';
+
+import Popup from '.';
+
+const module = singleToplistData;
+
+describe('Popup test component', () => {
+  test('render', () => {
+    const { container, getByText } = render(<Popup module={module} />);
+    expect(container).toBeTruthy();
+    expect(getByText('Claim These Exclusive Bonuses'));
+  });
+
+  test('Popup Rows and click close button', () => {
+    const { container } = render(<Popup module={module} isStorybook />);
+    const rows = container.querySelectorAll('.popupCard');
+    expect(rows).toHaveLength(4);
+    expect(container.querySelectorAll('img')).toHaveLength(4);
+
+    let isVisible = container.querySelector('.activeModal');
+    expect(isVisible).toBeTruthy();
+
+    fireEvent.click(container.querySelector('.closeIcon'));
+    isVisible = container.querySelector('.activeModal');
+    expect(isVisible).toBeFalsy();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/organisms/toplist/{comparisonTable → comparison-table}/index.js

@@ -9,9 +9,9 @@ import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { isMobileDevice } from 'gatsby-matrix-theme/src/helpers/mobile-detect';
 import { TiArrowSortedDown, TiArrowSortedUp } from 'react-icons/ti';
-import Column from '../../../atoms/table/column/index';
-import StaticColumn from '../../../atoms/table/staticColumn/index';
-import styles from './comparisonTable.module.scss';
+import Column from '../../../atoms/table/column';
+import StaticColumn from '../../../atoms/table/staticColumn';
+import styles from './comparison-table.module.scss';
 
 const Index = ({ module, page }) => {
   const [width] = useWindowSize();

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

@@ -1,47 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
 import keygen from '~helpers/keygen';
 import List from './list';
 import Tabs from '~hooks/tabs';
 import Row from '../../molecules/toplist/row/variant-one';
-import ComparisonTable from './comparisonTable';
 
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
   const template = page?.template;
   const translations = page?.translations;
-  return (
-    <>
-      {module.style === 'comparison_table' ? (
-        <ComparisonTable
-          module={module}
-          toplistHeading={toplistHeading}
-          CustomRow={CustomRow}
-          page={page}
-        />
-      ) : (
-        <Tabs
-          translations={page.translations}
-          title={module.title}
-          module={module}
-          tabsAlign="right"
-        >
-          {module.items.map((toplist) => (
-            <div label={toplist.title} key={keygen()}>
-              {toplistHeading}
-              <List
-                toplist={toplist}
-                CustomRow={Row}
-                translations={translations}
-                hasLoadMoreButton={toplist.show_load_more}
-                initItemsCount={toplist.num_items_initial_load}
-                loadItemsCount={toplist.num_items_load_more}
-                pageTemplate={template}
-              />
-            </div>
-          ))}
-        </Tabs>
-      )}
-    </>
+  const ComparisonTable =
+    module?.style === 'comparison_table' ? loadable(() => import('./comparison-table')) : null;
+
+  return ComparisonTable ? (
+    <ComparisonTable
+      module={module}
+      toplistHeading={toplistHeading}
+      CustomRow={CustomRow}
+      page={page}
+    />
+  ) : (
+    <Tabs translations={page.translations} title={module.title} module={module} tabsAlign="right">
+      {module.items.map((toplist) => (
+        <div label={toplist.title} key={keygen()}>
+          {toplistHeading}
+          <List
+            toplist={toplist}
+            CustomRow={Row}
+            translations={translations}
+            hasLoadMoreButton={toplist.show_load_more}
+            initItemsCount={toplist.num_items_initial_load}
+            loadItemsCount={toplist.num_items_load_more}
+            pageTemplate={template}
+          />
+        </div>
+      ))}
+    </Tabs>
   );
 };
 

package/src/components/organisms/toplist/list/index.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import useWindowsWidth from 'gatsby-core-theme/src/hooks/useWindowSize';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import keygen from '~helpers/keygen';
 import Row from '~molecules/toplist/default-row';
@@ -16,7 +15,6 @@ export default function List({
   loadItemsCount,
   pageTemplate,
   translations,
-  featuredCards = false,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
@@ -48,7 +46,6 @@ export default function List({
     }
   }
 
-  const mobileCard = useWindowsWidth()[0] < 992 ? 2 : 3;
   return (
     <>
       <ul className={styles.list} key={keygen()}>
@@ -65,7 +62,7 @@ export default function List({
                 oneliner={toplist.one_liner}
                 isPPC={isPPCPage}
                 translations={translations}
-                mobileRow={(featuredCards && index) < mobileCard}
+                index={index}
               />
             ) : (
               <Row item={item} tracker={toplist.tracker} oneliner={toplist.one_liner} />
@@ -105,5 +102,4 @@ List.propTypes = {
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
   translations: PropTypes.shape({}),
-  featuredCards: PropTypes.bool,
 };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Cards from '../../../../../components/organisms/cards';
+// import Cards from '../../../../../components/organisms/cards';
+import Cards from 'gatsby-core-theme/src/components/organisms/cards';
 
 // Test included with archive & cards test
 const Items = ({ module, page }) => <Cards module={module} page={page} />;

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

@@ -1,7 +1,123 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { FaAngleRight } from 'react-icons/fa';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import ModuleTitle from 'gatsby-matrix-theme/src/components/atoms/module-title';
+import styles from './module-title.module.scss';
+import Link from '~hooks/link';
 
-const index = (props) => <ModuleTitle {...props} />;
+const ModuleTitle = ({
+  module,
+  viewMoreIcon = <FaAngleRight />,
+  pageContext = null,
+  translations,
+}) => {
+  const tabsToplist = module?.items?.length > 1 && module?.name === 'top_list';
+  const CustomTag = `${module.module_title_tag}`;
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  const d = new Date();
+  const year = d.getFullYear();
+  const month = monthNames[d.getMonth()];
+  const currentMonth = module.show_last_updated_date
+    ? translate(translations, month, month)
+    : false;
+  const getTitle = () => {
+    if (!module?.module_title_tag) {
+      return (
+        <h2 className={styles.noTag}>
+          {module.title}
+          {currentMonth ? (
+            <span className={styles.toplistDate}>
+              <small>•</small>
+              {`${currentMonth} ${year}`}
+            </span>
+          ) : null}
+        </h2>
+      );
+    }
 
-export default index;
+    if (module.module_title_tag)
+      return (
+        <CustomTag>
+          {module.module_title}
+          {currentMonth ? (
+            <span className={styles.toplistDate}>
+              <small>•</small>
+              {`${currentMonth} ${year}`}
+            </span>
+          ) : null}
+        </CustomTag>
+      );
+    return (
+      <span className={styles.noTag}>
+        {module.module_title}
+        {currentMonth ? (
+          <span className={styles.toplistDate}>
+            <small>•</small>
+            {`${currentMonth} ${year}`}
+          </span>
+        ) : null}
+      </span>
+    );
+  };
+
+  const template = pageContext && pageContext?.page?.template;
+  return (
+    <div className={`${tabsToplist ? styles.tabsToplist : null}`}>
+      {(module.module_title ||
+        module.link_label ||
+        (module.title && (module.name === 'cards' || module.name === 'top_list'))) && (
+        <div
+          className={`${styles.moduleTitle} ${styles[template]} ${
+            module?.style && styles[module.style]
+          }`}
+        >
+          <span className={styles.spanToplist}>
+            {(module?.title || module.module_title) && getTitle(module)}
+          </span>
+
+          {module.link_label && (
+            <Link to={module.link_value} className={styles.viewMore}>
+              {module.link_label}
+              {viewMoreIcon}
+            </Link>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+ModuleTitle.propTypes = {
+  module: PropTypes.shape({
+    module_title: PropTypes.string,
+    module_title_tag: PropTypes.string,
+    link_label: PropTypes.string,
+    link_value: PropTypes.string,
+    name: PropTypes.string,
+    style: PropTypes.string,
+    items: PropTypes.shape({
+      length: PropTypes.number,
+    }),
+    show_last_updated_date: PropTypes.string,
+    title: PropTypes.string,
+  }),
+  viewMoreIcon: PropTypes.element,
+  pageContext: PropTypes.shape({}),
+  translations: PropTypes.shape({}),
+};
+
+export default ModuleTitle;

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

@@ -32,28 +32,39 @@ const Content = ({ module }) => {
       };
       return <LazyImage {...lazyProps} />;
     }
+
+    if (node.name === 'p' && module.style === 'horizontal_image_scroll_mobile') {
+      const hasChildImg = node?.children.find((child) => child?.name === 'img');
+
+      if (hasChildImg && node.nodeType === 1) {
+        node.attribs.style = 'overflow-x: scroll';
+        return node;
+      }
+    }
+
     return null;
   };
-
-  const checkContentTable = (tableClass) => {
-    if (tableClass !== null) {
-      if (tableClass === 'table_1') {
+  const switchStyle = (style) => {
+    switch (style) {
+      case 'table_1':
         return `${styles.tableResponsive} ${styles.firstTable}`;
-      }
-      if (tableClass === 'table_2') {
+      case 'table_2':
         return `${styles.tableResponsive} ${styles.secondTable}`;
-      }
-      if (tableClass === 'default_table') {
+      case 'default_table':
         return `${styles.tableResponsive}`;
-      }
+      case 'content_frame_style':
+        return `${styles.tableResponsive} ${styles.contentFrame}`;
+      case 'horizontal_image_scroll_mobile':
+        return `${styles.horizontalScrollImage}`;
+      default:
+        return null;
     }
-    return '';
   };
 
   return (
     <>
       <div className={styles.content}>
-        <div className={`${checkContentTable(module.style)}`}>
+        <div className={`${switchStyle(module.style)}`}>
           {module.value &&
             parse(module.value, {
               replace: replaceMedia,

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

@@ -2,7 +2,6 @@ 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 styles from 'gatsby-core-theme/src/components/molecules/footer/footer.module.scss';
 import styles from './footer.module.scss';
 /* eslint-disable react/no-danger */