gatsby-matrix-theme 3.2.20 → 3.2.24

package/CHANGELOG.md

@@ -1,3 +1,71 @@
+## [3.2.24](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.23...v3.2.24) (2022-02-07)
+
+
+### Bug Fixes
+
+* add unit testing ([5555f87](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5555f87f6571b22c237a72b48c37839ec4962192))
+* added image cdn in gatsby config ([793c117](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/793c117876297a926b76f2aa263ecb7288baae0f))
+* fixed demo url ([3f6c562](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f6c5621f0b6edc2d2b9b14393b874c8376f3cc5))
+* fixed warnings ([1801220](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1801220463d8bc52f3a1babe2fd952b45ebff591))
+* inercase coverage ([8753dd0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8753dd079ad2a75d443a26abf8508449744cc93d))
+* make style for faq ([3c0732c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3c0732c1306229b80cc2115f58e2eccc9690c470))
+
+
+* Merge branch 'tm-2695-image_cdn' into 'master' ([6f91e36](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6f91e3601b97f29d2d9bf26cec22a477b4080348))
+* Merge branch 'tm-2696-unit-testing' into 'master' ([b7c4ef8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b7c4ef882aa7a5db409c0e72069b9d303e51600f))
+* Merge branch 'tm-2696-faq-module-splits' into 'master' ([648da8b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/648da8bb2208aa91bdaa6e8a32b7ee6a29072a2c))
+
+## [3.2.23](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.22...v3.2.23) (2022-02-02)
+
+
+### Bug Fixes
+
+* add scroll on footer nav ([da45e5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/da45e5de716e6e6afd7f362c9f036309f6b8168f))
+* add show after 3 seconds functionality on footer nav ([9e49a61](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9e49a61e531399b34d6e6b7f0ae5a0f945f3861e))
+* fix carousel not showing when js is off ([f976424](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f976424bbcf1a2cad3a8a7d20e407dfd15b6c848))
+
+
+* Merge branch 'tm-2684-footerNav-optimization' into 'master' ([fdeec64](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fdeec64fc8a922628107b33134577187b95d150e))
+* Merge branch 'tm-2691-images-carousel' into 'master' ([90d05e0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/90d05e0d84b8d5f78f12691d7e03a9833e317eb3))
+
+
+### norelease
+
+* change env sitename ([fa10ded](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa10ded0f9d09b909eff2443d27281234ed39bce))
+* revert back env ([9897255](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9897255ed23e4b714c99474d47000a91d00b223b))
+
+## [3.2.22](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.21...v3.2.22) (2022-02-02)
+
+
+### Config
+
+* updated core version ([1bb6e2d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1bb6e2d325e2a01c6aae75da5dcc671caf0fdde7))
+
+## [3.2.21](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.20...v3.2.21) (2022-02-02)
+
+
+### Bug Fixes
+
+* content module imag cdn links ([74397ae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/74397ae8014326641382559ea1dbe3a329f0b54d))
+* navigation menu fix ([9c4ad08](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c4ad0819e79a4dea4dc44876992278dd4ea5a12))
+* popup images set to lazy load ([86c6c4a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/86c6c4ac7089d10b23d92e21ee49d442fcc2a7f3))
+* string helper import ([6af965d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6af965d1cad7d70f027b85ab7f0de1b927edef94))
+
+
+### Config
+
+* updated core theme ([a124f7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a124f7eb702aff3607123d3952c5cf449285d218))
+
+
+* Merge branch 'tm-2684-popup-images' into 'master' ([d5fa878](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d5fa878baac4f37322a12dae8650afb6e284377d))
+* Merge branch 'navigation' into 'master' ([2cf85d8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cf85d8b533311ed6a14b93e6ecb8f30414e5153))
+* Merge branch 'tm-2685-content-module-image-cdn' into 'master' ([b79fa10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b79fa101af2109bc0639f7db7462a006bbecf1d6))
+
+
+### Tests
+
+* fixed popup test ([0b4060e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0b4060e4f2f3cf1a68209550e53c804f1d959dff))
+
 ## [3.2.20](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.2.19...v3.2.20) (2022-01-28)
 
 

package/jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   collectCoverage: true,
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 88,
     },
   },
 };

package/package.json

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

package/src/components/atoms/author-card/author-card.test.js

@@ -23,6 +23,13 @@ describe('AuthorCard Component', () => {
       expect(container.querySelector('a').innerHTML).toEqual(email_address);
     });
   });
+
+  test('render empty value', () => {
+    const obj = {};
+    const { container } = render(<AuthorCard author={obj} />);
+
+    expect(container.querySelector('img')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -15,35 +15,43 @@ import styles from './table.module.scss';
 
 const listHeadings = [
   {
+    id: 1,
     defaultValue: 'Casino name',
     key: 'casino_name',
   },
   {
+    id: 2,
     defaultValue: 'Rating',
     key: 'rating',
   },
   {
+    id: 3,
     defaultValue: 'Bonus',
     key: 'bonus',
     // customComponent: ({operator}) => ( <td>{operator.title}</td> ), This is an example
   },
   {
+    id: 4,
     defaultValue: 'Top Features',
     key: 'top_features',
   },
   {
+    id: 5,
     defaultValue: 'Payment Methods',
     key: 'payment_methods',
   },
   {
+    id: 6,
     defaultValue: 'Banking',
     key: 'banking',
   },
   {
+    id: 7,
     defaultValue: 'Currencies',
     key: 'currencies',
   },
   {
+    id: 8,
     defaultValue: 'Licenses',
     key: 'licenses',
   },
@@ -60,7 +68,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
     const rowData = tabelInfo.find((m) => m.key === heading);
     if (rowData && rowData.customComponent) {
       const CustomComponent = rowData.customComponent;
-      return <CustomComponent operator={item} />;
+      return <CustomComponent key={key} operator={item} />;
     }
 
     switch (heading) {
@@ -104,7 +112,8 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
             {item?.relation?.selling_points &&
               item?.relation?.selling_points.map((sellingPoint) => (
                 <span key={sellingPoint}>
-                  <AiOutlineCheckCircle size={27} /> {sellingPoint}
+                  <AiOutlineCheckCircle size={27} />
+                  {sellingPoint}
                 </span>
               ))}
           </td>
@@ -119,7 +128,7 @@ 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={deposit.name}>
+                      <span key={`${key}-${deposit.name}`}>
                         <LazyImg
                           src={imagePrettyUrl(deposit?.logo_filename)}
                           width={72}
@@ -166,7 +175,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
             {item?.relation?.bonus?.currencies &&
               item?.relation?.bonus?.currencies.slice(0, 6).map((currencies) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <span key={currencies.iso_code}>{currencies.iso_code} </span>
+                <span key={`${key}-${currencies.iso_code}`}>{currencies.iso_code}</span>
               ))}
           </td>
         );
@@ -178,6 +187,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
                 .slice(0, 3)
                 .map((license) => (
                   <LazyImg
+                    key={license.name}
                     src={imagePrettyUrl(license?.logo_filename)}
                     height={32}
                     alt={license.name}
@@ -186,7 +196,7 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
           </td>
         );
       default:
-        return '';
+        return null;
     }
   };
 
@@ -196,11 +206,11 @@ export default function ComparisonTable({ items, tabelInfo = listHeadings, ctaKe
       const cells = [];
 
       items.forEach((item, index) => {
-        cells.push(cell(heading.key, item, `${heading}-${index}`, index));
+        cells.push(cell(heading.key, item, `${heading.key}-${index}`, index));
       });
 
       row.push(
-        <tr>
+        <tr key={heading.key}>
           <th>{translate(translations, heading.key, heading.defaultValue)}</th>
           {cells}
         </tr>

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

@@ -1,21 +1,73 @@
+/* eslint-disable no-unused-expressions */
 /* eslint-disable array-callback-return */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+import { sampleOperatorCards } from '../../../../../../tests/factories/modules/matrix/card.factory';
 
 import ComparisonTable from '.';
 
-const module = getSampleOperatorCards();
+const module = sampleOperatorCards;
 
 describe('Comparison table test component', () => {
   test('render', () => {
-    const { getByText } = render(<ComparisonTable items={module.items} />);
-
+    const { getByText, container } = render(<ComparisonTable items={module.items} />);
     module.items.map((item) => {
+      expect(container.querySelectorAll('table')).toHaveLength(1);
       expect(getByText(item.relation.name));
+
+      const paymentMethods = container.querySelector('.paymentMethods');
+      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);
     });
   });
+
+  test('render with custom component', () => {
+    const filterItems = [{ ...module.items[0] }];
+
+    const { getByText } = render(
+      <ComparisonTable
+        items={filterItems}
+        tabelInfo={[
+          {
+            defaultValue: 'Rating',
+            key: 'rating',
+          },
+          {
+            defaultValue: 'Bonus',
+            key: 'bonus',
+            customComponent: () => <td>coupon code</td>,
+          },
+        ]}
+      />
+    );
+
+    expect(getByText('coupon code')).toBeTruthy();
+  });
+
+  test('render false value', () => {
+    const filterItems = [{ ...module.items[1] }];
+    const { container } = render(
+      <ComparisonTable
+        items={filterItems}
+        tabelInfo={[
+          {
+            defaultValue: 'default',
+            key: 'default',
+          },
+          {
+            defaultValue: 'Payment Methods',
+            key: 'payment_methods',
+          },
+        ]}
+      />
+    );
+    const paymentMethods = container.querySelector('.paymentMethods');
+    expect(paymentMethods.querySelectorAll('span').length).toEqual(6);
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -1,8 +1,8 @@
 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 LazyImage from '~hooks/lazy-image';
 
 import styles from './popup-card.module.scss';
 
@@ -19,7 +19,7 @@ const PopupCard = ({ item, tracker }) => {
     <div className={styles.popupCard}>
       <div className={styles.wrapper}>
         <div className={styles.imgContainer}>
-          <img width={98} height={98} src={imagePrettyUrl(logoUrl)} alt={oneLiner} />
+          <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
         </div>
         <div className={styles.textContainer}>
           <p className={styles.primaryText}>{one}</p>

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

@@ -25,6 +25,14 @@ describe('SocialIcons Component', () => {
     expect(socialLinksWrapper.querySelectorAll('a')[2].innerText).toEqual(siteSchema[2]);
     expect(socialLinksWrapper.querySelectorAll('a')[4].innerText).toEqual(siteSchema[4]);
   });
+
+  test('render null value', () => {
+    const obj = {
+      default: 'default',
+    };
+    const { container } = render(<SocialIcons socialIcons={obj} />);
+    expect(container.querySelector('svg')).toBe(null);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/carousel/screenshot-slide/screenshot-slide.test.js

@@ -22,6 +22,12 @@ describe('summary component', () => {
     // expect(container.querySelector('img')).toBeFalsy();
     // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
   });
+
+  test('render empty', () => {
+    const { container } = render(<Slide />);
+
+    expect(container.querySelector('p')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -19,6 +19,7 @@
             font-weight: 700;
             padding: 1rem 0;
             outline: none;
+            padding-right: 2.5rem;
             .icon{
                 display: flex;
                 align-items: center;
@@ -61,6 +62,7 @@
 
         .content {
             @include collapse(0.5s, 500rem);
+            @include flex-direction(column);
             font-size: 1.6rem;
             color: var(--color-20);
             padding: 0;

package/src/components/molecules/header/header.test.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+// import{ getHeaderSection} from 'gatsby-core-theme/tests/factories/sections/header.factory';
+import '~tests/helpers/match-media.mock';
+import Header, { headerContent } from './index';
+
+function getHeaderSection() {
+  const header = {
+    section: {
+      page: {
+        template: 'author',
+        title: 'The Page Title',
+        path: 'sport/brand',
+        sections: {
+          header: {
+            extra_fields: {
+              header_background_image: '398f163bfd5a201716fb42aa72ae48b0.jpeg',
+              header_tesxt: '<p><i>Hello</i> I am test text</p>',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  return header;
+}
+
+describe('header component', () => {
+  test('headerContent', () => {
+    const getHeaderPropsTest = (cases) => {
+      const props = {
+        section: {
+          page: {
+            template: cases,
+          },
+        },
+      };
+
+      return props;
+    };
+
+    const list = [
+      'article_detail',
+      'article_casino',
+      'article_sports',
+      'operator_review',
+      'game_review',
+      'author',
+    ];
+
+    const all = list.reduce((acc, current) => {
+      acc.push(getHeaderPropsTest(current));
+      return acc;
+    }, []);
+
+    all.forEach((elm) => {
+      expect(headerContent(elm)).toBeTruthy();
+    });
+    expect(headerContent('test')).toBeFalsy();
+
+    // expect(headerContent(props)).toBeTruthy();
+  });
+
+  test('render', () => {
+    const HeaderProps = getHeaderSection();
+    const enabledBgImg = ['author', 'game_review', 'operator_review'];
+
+    const { container } = render(
+      <Header
+        {...HeaderProps}
+        backgroundImage={enabledBgImg.includes(HeaderProps?.section?.page?.template)}
+      />
+    );
+    //  const
+    expect(container.querySelector('header')).toBeTruthy();
+    expect(container.querySelectorAll('header')).toHaveLength(1);
+    expect(container.querySelectorAll('div')).toHaveLength(3);
+
+    // Inner HTML
+    expect(container.querySelectorAll('p')).toHaveLength(0);
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/header/index.js

@@ -5,43 +5,43 @@ import Header from 'gatsby-core-theme/src/components/molecules/header/index';
 import loadable from '@loadable/component';
 
 /* eslint-disable react/prop-types */
+export const headerContent = (props) => {
+  let ModuleComponent = null;
+  // const t2st = 'just test'
 
-export default (props) => {
-  const headerContent = () => {
-    let ModuleComponent = null;
-
-    switch (props.section.page.template) {
-      case 'article_detail':
-      case 'article_casino':
-      case 'article_sports': {
-        ModuleComponent = loadable(() => import('./variants/article'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      case 'operator_review': {
-        ModuleComponent = loadable(() => import('./variants/operator'));
-        return <ModuleComponent operator={props.section.page.relation} />;
-      }
-      case 'game_review': {
-        ModuleComponent = loadable(() => import('./variants/slot'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      case 'author': {
-        ModuleComponent = loadable(() => import('./variants/author'));
-        return <ModuleComponent page={props.section.page} />;
-      }
-      default:
-        return ModuleComponent;
+  switch (props?.section?.page?.template) {
+    case 'article_detail':
+    case 'article_casino':
+    case 'article_sports': {
+      ModuleComponent = loadable(() => import('./variants/article'));
+      return <ModuleComponent page={props.section.page} />;
+    }
+    case 'operator_review': {
+      ModuleComponent = loadable(() => import('./variants/operator'));
+      return <ModuleComponent operator={props.section.page.relation} />;
+    }
+    case 'game_review': {
+      ModuleComponent = loadable(() => import('./variants/slot'));
+      return <ModuleComponent page={props.section.page} />;
     }
-  };
+    case 'author': {
+      ModuleComponent = loadable(() => import('./variants/author'));
+      return <ModuleComponent page={props.section.page} />;
+    }
+    default:
+      return ModuleComponent;
+  }
+};
 
+export default (props) => {
   const enabledBgImg = ['author', 'game_review', 'operator_review'];
 
   return (
     <Header
       {...props}
-      content={headerContent()}
+      content={headerContent(props)}
       // eslint-disable-next-line no-unneeded-ternary
-      backgroundImage={enabledBgImg.includes(props.section.page.template) ? false : true}
+      backgroundImage={enabledBgImg.includes(props?.section?.page?.template) ? false : true}
     />
   );
 };

package/src/components/molecules/operator-summary/operator-summary.test.js

@@ -5,6 +5,20 @@ import '@testing-library/jest-dom/extend-expect';
 import getPageData from 'gatsby-core-theme/tests/factories/pages/default.factory';
 import OperatorSummary from '.';
 
+const pageTest = {
+  title: 'The Page Title',
+  // type: 'test',
+  name: 'Rizk Casino',
+  extra_fields: {
+    related_operator: {
+      extra_fields: {
+        terms_and_conditions_text_enabled: '1',
+      },
+    },
+    summary_background: 'summary_background',
+  },
+};
+
 describe('summary component', () => {
   test('render', () => {
     const { container, getByText } = render(<OperatorSummary page={getPageData()} />);
@@ -23,6 +37,16 @@ describe('summary component', () => {
     // CTA
     expect(getByText('Visit')).toBeTruthy();
   });
+
+  test('', () => {
+    const { container, getByText } = render(
+      <OperatorSummary page={pageTest} tracker="main" activeOperator />
+    );
+
+    expect(container.querySelectorAll('a')).toHaveLength(2);
+    expect(getByText('18+ New Players only. Play responsibly.')).toBeTruthy();
+    expect(container.querySelectorAll('div')).toHaveLength(3);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/toplist/row/variant-one.js

@@ -55,7 +55,11 @@ export default function Row({
           <Link to={reviewPath} className="toplist-variant-one-gtm">
             <Label
               title={getExtraField(item.extra_fields, 'ribbon_text')}
-              bgColor={getExtraField(item.extra_fields, 'ribbon_color')}
+              bgColor={
+                getExtraField(item.extra_fields, 'ribbon_color')
+                  ? getExtraField(item.extra_fields, 'ribbon_color')
+                  : '#0000'
+              }
             />
           </Link>
         )}

package/src/components/molecules/toplist/row/variant-one.test.js

@@ -64,6 +64,22 @@ describe('toplist row component', () => {
     // CTA
     expect(getByText('Visit').closest('a').getAttribute('href')).toEqual('/shortName1');
   });
+
+  test('render pros', () => {
+    const list = getToplistItem();
+    const updateObj = {
+      ...list,
+      extra_fields: {
+        pro_1: 'pro1',
+        ribbon_text: 'ribbon_text',
+        terms_and_conditions_text_enabled: '1',
+      },
+      review_link: null,
+    };
+    const { getByText } = render(<Row item={updateObj} />);
+    expect(getByText('ribbon_text')).toBeTruthy();
+    expect(getByText('pro1')).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/organisms/footer-navigation/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
@@ -6,8 +6,33 @@ import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './footer-navigation.module.scss';
 
 const FooterNavigation = ({ section, isStorybook = false }) => {
+  const [show, setShow] = useState(false);
   const menuArray = getFirstModuleByName(section, 'menu');
-  return (
+
+  const handleEvent = () => {
+    setShow(true);
+  };
+
+  const showAfter = (seconds) => {
+    setTimeout(() => {
+      setShow(true);
+    }, seconds * 1000);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleEvent);
+    window.addEventListener('mousemove', handleEvent);
+    window.addEventListener('touchstart', handleEvent);
+    showAfter(3);
+
+    return () => {
+      window.removeEventListener('scroll', handleEvent);
+      window.addEventListener('mousemove', handleEvent);
+      window.addEventListener('touchstart', handleEvent);
+    };
+  }, []);
+
+  return show ? (
     <div className={`${styles.footerLinks} ${isStorybook && styles.storybookStyles}`}>
       <LinkList
         showListTitle={false}
@@ -19,7 +44,7 @@ const FooterNavigation = ({ section, isStorybook = false }) => {
         gtmClass="mobile-menu-gtm"
       />
     </div>
-  );
+  ) : null;
 };
 
 FooterNavigation.propTypes = {

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

@@ -18,7 +18,8 @@ describe('Popup test component', () => {
     const { container } = render(<Popup module={module} isStorybook />);
     const rows = container.querySelectorAll('.popupCard');
     expect(rows).toHaveLength(4);
-    expect(container.querySelectorAll('img')).toHaveLength(4);
+
+    expect(container.querySelectorAll('.imgContainer')).toHaveLength(4);
 
     let isVisible = container.querySelector('.activeModal');
     expect(isVisible).toBeTruthy();