gatsby-core-theme 1.6.18 → 1.6.22

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+## [1.6.22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.21...v1.6.22) (2021-12-10)
+
+
+### Bug Fixes
+
+* tests ([c8f7780](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c8f7780b257ef1994244217d9d20c2c934a43859))
+
+
+### Code Refactoring
+
+* using loadable for components set to visible against a condition ([16e23e0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/16e23e06b835f7b41a303f1ff317d3dc19dd1d9c))
+
+
+* Merge branch 'performance-improvements' into 'master' ([a853c75](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a853c75bcdafe099f4b8b4e13485477503c0fc85))
+
+## [1.6.21](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.20...v1.6.21) (2021-12-07)
+
+
+### Bug Fixes
+
+* trackers ([5ad12eb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5ad12ebc2492172f7a94d680315f67b8e19fc4f9))
+
+## [1.6.20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.19...v1.6.20) (2021-12-07)
+
+
+### Bug Fixes
+
+* close menu onclick a link ([ce4d9bb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ce4d9bbf8733bdbe3b09f7fd84226e6a084b42a7))
+* implement for all core sites ([e5c46c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e5c46c0bee4cf5555990d7c9c5d53bc43a2c6722))
+* small issue ([30fd7e3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/30fd7e305935a00ec514321a5ca8e5a79545681c))
+* small issue ([c1c29ce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1c29cedca7be589e2b3f23a7d25a399f1cb7ca5))
+
+
+### Code Refactoring
+
+* add custom styles to menu ([f686a60](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f686a6059786b6c4f43cf24041f383a5bd19c0d7))
+
+
+* Merge branch 'tm-navigation-sticky' into 'master' ([0593868](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/05938683ca72db7677d3052f72fadbc26a2db613))
+* Merge branch 'navigation-menu' into 'master' ([d812530](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d8125309b039694c6e35b54d3629134697b407f4))
+
+## [1.6.19](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.18...v1.6.19) (2021-12-06)
+
+
+### Config
+
+* removed minifier ([814cb53](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/814cb532146b2d4b71f8ab3878859520b29bf757))
+
 ## [1.6.18](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.17...v1.6.18) (2021-12-06)
 
 

package/gatsby-config.js

@@ -3,7 +3,6 @@ module.exports = {
     DEV_SSR: false,
   },
   plugins: [
-    `gatsby-plugin-minify-html`,
     'gatsby-plugin-loadable-components-ssr',
     {
       resolve: 'gatsby-plugin-sass',

package/gatsby-node.esm.js

@@ -253,16 +253,6 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           });
         }
 
-        const trackerPageObject = {
-          meta_title: 'Tracker',
-          template: 'tracker',
-          title: 'Tracker',
-          type: 'page',
-          language: languageKey,
-          path: '',
-          meta_robots: ['noindex', 'nofollow'],
-        };
-
         // Operator tracker pages
         if (page.type === 'operator') {
           const operator = operators[page.relation_id];
@@ -272,7 +262,15 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           );
           tracker.forEach((trackerPath) => {
             // Create splash page
-            trackerPageObject['path'] = trackerPath;
+            const trackerPageObject = {
+              meta_title: 'Tracker',
+              template: 'tracker',
+              title: 'Tracker',
+              type: 'page',
+              language: languageKey,
+              path: trackerPath,
+              meta_robots: ['noindex', 'nofollow'],
+            };
             createPage({
               path: trackerPath,
               component: require.resolve('./src/components/app.js'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.18",
+  "version": "1.6.22",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -36,7 +36,6 @@
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-loadable-components-ssr": "^3.3.0",
     "gatsby-plugin-manifest": "^3.3.0",
-    "gatsby-plugin-minify-html": "^1.0.4",
     "gatsby-plugin-postcss": "^4.3.0",
     "gatsby-plugin-preact": "^5.13.0",
     "gatsby-plugin-react-helmet": "^4.3.0",
@@ -86,7 +85,7 @@
     "babel-preset-gatsby": "^1.3.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-react": "^7.22.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "react-test-renderer": "^17.0.1",

package/src/components/atoms/menu/items/item/index.js

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from '~hooks/link';
 import useIsMobile from '~hooks/useIsMobile';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import { imagePrettyUrl } from '~helpers/getters';
+import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 import styles from './item.module.scss';
 
@@ -21,6 +22,8 @@ export default function Item({
   const [active, setActive] = useState('');
   const [opened, setOpened] = useState(false);
 
+  const { setShowMenu } = useContext(NavigationContext);
+
   useEffect(() => {
     const url = typeof window !== 'undefined' ? new URL(window.location.href) : '';
     setActive(
@@ -28,6 +31,10 @@ export default function Item({
     );
   }, [active, item]);
 
+  const handleClose = () => {
+    setShowMenu(false);
+  };
+
   const toggleDropDown = (e) => {
     e.target.classList.toggle(styles.active);
     setOpened(e.target.classList.contains(styles.active));
@@ -84,6 +91,7 @@ export default function Item({
           title={item.title}
           rel={item.nofollow && 'nofollow'}
           aria-label={`${item?.title} link`}
+          onClick={handleClose}
         >
           <ItemImage />
           {item.title}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import getFooterSection from '~tests/factories/sections/footer.factory';
@@ -8,7 +8,7 @@ import Footer from '.';
 const footerSection = getFooterSection();
 
 describe('Footer Component', () => {
-  test('render footer menu items', () => {
+  test('render footer menu items', async () => {
     const { getByText } = render(
       <Footer
         footerMenu="footer_links"
@@ -16,27 +16,26 @@ describe('Footer Component', () => {
         section={footerSection.sections.footer}
       />
     );
-    expect(getByText('test1sub1')).toBeTruthy();
-    expect(getByText('test1sub1').closest('a').getAttribute('href')).toEqual('/test1sub1link');
-    expect(getByText('test1sub2')).toBeTruthy();
-    expect(getByText('test1sub2').closest('a').getAttribute('href')).toEqual('/test1sub2link');
-    expect(getByText('test1sub2').closest('ul').children.length).toBe(3);
 
-    expect(getByText('test2sub1')).toBeTruthy();
-    expect(getByText('test2sub1').closest('a').getAttribute('href')).toEqual('/test2sub1link');
-    expect(getByText('test2sub2')).toBeTruthy();
-    expect(getByText('test2sub2').closest('a').getAttribute('href')).toEqual('/test2sub2link');
-    expect(getByText('test2sub2').closest('ul').children.length).toBe(3);
+    await waitFor(() => {
+      expect(getByText('test1sub1')).toBeTruthy();
+      expect(getByText('test1sub1').closest('a').getAttribute('href')).toEqual('/test1sub1link');
+      expect(getByText('test1sub2')).toBeTruthy();
+      expect(getByText('test1sub2').closest('a').getAttribute('href')).toEqual('/test1sub2link');
+      expect(getByText('test1sub2').closest('ul').children.length).toBe(3);
+
+      expect(getByText('test2sub1')).toBeTruthy();
+      expect(getByText('test2sub1').closest('a').getAttribute('href')).toEqual('/test2sub1link');
+      expect(getByText('test2sub2')).toBeTruthy();
+      expect(getByText('test2sub2').closest('a').getAttribute('href')).toEqual('/test2sub2link');
+      expect(getByText('test2sub2').closest('ul').children.length).toBe(3);
+    });
   });
 
   test('render footer extra component', () => {
-    const FooterTop = () => {
-      return <>Test Extra component</>;
-    };
+    const FooterTop = () => <>Test Extra component</>;
 
-    const FooterBottom= () => {
-      return <>Test Extra component2</>;
-    };
+    const FooterBottom = () => <>Test Extra component2</>;
 
     const { getByText } = render(
       <Footer
@@ -51,7 +50,7 @@ describe('Footer Component', () => {
     expect(getByText('Test Extra component2')).toBeTruthy();
   });
 
-  test('render logo list', () => {
+  test('render logo list', async () => {
     const { getByTitle } = render(
       <Footer
         footerMenu="footer_links"
@@ -59,9 +58,10 @@ describe('Footer Component', () => {
         section={footerSection.sections.footer}
       />
     );
-  
-    expect(getByTitle('logo1')).toBeTruthy();
-    expect(getByTitle('logo2')).toBeTruthy();
+    await waitFor(() => {
+      expect(getByTitle('logo1')).toBeTruthy();
+      expect(getByTitle('logo2')).toBeTruthy();
+    });
   });
 });
 afterEach(() => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LinkList from '~molecules/link-list';
+import loadable from '@loadable/component';
 import { getExtraField, copyrightText } from '~helpers/getters';
 import styles from './footer.module.scss';
 
@@ -19,6 +19,8 @@ const Footer = ({
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
 
+  const LinkList = footerMenu && showLinks ? loadable(() => import('~molecules/link-list')) : null;
+
   return (
     <footer className={styles.footer}>
       <div className={styles.topPart}>

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import loadable from '@loadable/component';
 import styles from './header.module.scss';
 import Breadcrumbs from '~atoms/breadcrumbs';
-import Author from '~atoms/author';
 import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 
 // eslint-disable-next-line import/no-named-as-default
@@ -41,6 +41,11 @@ function Header({ section, content = null, backgroundImage = true }) {
     return <div dangerouslySetInnerHTML={innerBannerHTML()} />;
   };
 
+  const Author =
+    section.page.path !== '/' && section.page.path !== 'contact-us' && section.page.author
+      ? loadable(() => import('~atoms/author'))
+      : null;
+
   return (
     <header className={styles.header}>
       {backgroundImage && backgroundImg}
@@ -51,7 +56,7 @@ function Header({ section, content = null, backgroundImage = true }) {
       >
         <div className={styles.topSection}>
           {section.page.path && <Breadcrumbs page={section.page} />}
-          {section.page.path !== '/' && section.page.path !== 'contact-us' && section.page.author && (
+          {Author && (
             <div className={styles.authorContainer}>
               <Author
                 authorProfile={section.page.author?.profile_page_path}

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

@@ -27,6 +27,7 @@ const Menu = ({
     },
   },
   gtmClass = '',
+  customStyles,
 }) => {
   let menuObject;
 
@@ -62,7 +63,10 @@ const Menu = ({
   return (
     <div className={styles.menuContainer}>
       <MenuIcon onClick={handleMenuIconClick} gtmClass="main-menu-gtm" />
-      <ul ref={menuListRef} className={`${menuListClasses} ${showMenu && styles.show}`}>
+      <ul
+        ref={menuListRef}
+        className={`${menuListClasses} ${showMenu && styles.show} ${styles[customStyles]}`}
+      >
         {menuObject &&
           menuObject.children.map((child) => {
             return (
@@ -113,6 +117,7 @@ Menu.propTypes = {
   }).isRequired,
   menu: PropTypes.string.isRequired,
   gtmClass: PropTypes.string,
+  customStyles: PropTypes.string,
 };
 
 export default Menu;

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useContext } from 'rea
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from 'react-icons/fa';
-
+import loadable from '@loadable/component';
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import styles from './search.module.scss';
@@ -12,9 +12,7 @@ import keygen from '~helpers/keygen';
 import { filterByKey, sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
 import loadSource from '~helpers/search-source';
 import { leftTrim } from '~helpers/strings';
-import Archive from '~organisms/archive';
 import ModuleTitle from '~atoms/module-title';
-import CustomSelect from '~atoms/custom-select';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 /* eslint-disable no-underscore-dangle */
@@ -213,6 +211,8 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
+    const CustomSelect = loadable(() => import('~atoms/custom-select'));
+
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
         <CustomSelect
@@ -343,6 +343,8 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
+                const Archive = loadable(() => import('~organisms/archive'));
+
                 return (
                   <div label={titleObj.title} tabId={type + index} key={keygen()}>
                     {pageSearchOptionsCopy.useArchive === undefined ||

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

@@ -2,6 +2,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes, { element } from 'prop-types';
+import loadable from '@loadable/component';
 
 import {
   updateSlider,
@@ -14,7 +15,6 @@ import {
 
 import styles from './slider.module.scss';
 import Arrow from '~atoms/carousel/arrow';
-import Pagination from '~atoms/carousel/pagination-item';
 
 function Slider({
   gtmClass = '',
@@ -179,6 +179,10 @@ function Slider({
     };
   });
 
+  const Pagination = usePagination
+    ? loadable(() => import('~atoms/carousel/pagination-item'))
+    : null;
+
   return (
     state.length > 0 && (
       <div className={`${className} ${styles.slider}`} ref={sliderContainerRef}>
@@ -221,7 +225,7 @@ function Slider({
             </div>
           ))}
         </div>
-        {usePagination && (
+        {Pagination && (
           <Pagination
             type="dots"
             paginationHandler={paginationHandler}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup, fireEvent, act } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import keygen from '~helpers/keygen';
 import Slider from '.';
@@ -12,9 +12,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );
 
@@ -30,9 +30,9 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
@@ -51,20 +51,24 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      expect(dots).toBeTruthy();
+    });
+
     const content = container.querySelector('div.sliderContent');
 
     expect(prev).toBeTruthy();
     expect(next).toBeTruthy();
-    expect(dots).toBeTruthy();
     expect(content).toBeTruthy();
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
   });
@@ -74,15 +78,15 @@ describe('Slider Component', () => {
 
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
     const content = container.querySelector('div.sliderContent');
 
     fireEvent.click(next);
@@ -91,10 +95,13 @@ describe('Slider Component', () => {
     fireEvent.click(prev);
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
 
-    const dot = dots.querySelectorAll('button');
-    expect(dot.length).toEqual(4);
-    fireEvent.click(dot[1]);
-    expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      const dot = dots.querySelectorAll('button');
+      expect(dot.length).toEqual(4);
+      fireEvent.click(dot[1]);
+      expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    });
   });
 
   test('Swipe Slides', async () => {
@@ -102,9 +109,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );
 

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

@@ -33,6 +33,7 @@ const Navigation = ({
   },
   sticky = true,
   template,
+  customStyles,
 }) => {
   const navRef = useRef(React.createRef());
   const showMenu = template !== 'ppc';
@@ -72,7 +73,13 @@ const Navigation = ({
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
+              <Menu
+                section={section}
+                menu={menu}
+                options={options}
+                customStyles={customStyles}
+                gtmClass="main-menu-gtm"
+              />
               {hasSearch && <Search className={styles.search} searchIcon={searchIcon} />}
             </>
           )}
@@ -116,6 +123,7 @@ Navigation.propTypes = {
     }),
   }),
   sticky: PropTypes.bool,
+  customStyles: PropTypes.string,
 };
 
 export default Navigation;

package/src/components/pages/search/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import Search from '~molecules/search';
+import loadable from '@loadable/component';
 import Card from '~atoms/cards/default-card';
 import { translate } from '~helpers/getters';
 
 const SearchContent = ({ page }) => {
+  const Search = loadable(() => import('~molecules/search'));
+
   return (
     <Search
       pageSearchOptions={{