gatsby-core-theme 1.6.9 → 1.6.13

package/CHANGELOG.md

@@ -1,3 +1,73 @@
+## [1.6.13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.12...v1.6.13) (2021-11-28)
+
+
+### Bug Fixes
+
+* added no script tag for all lazyimages ([76ee02f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/76ee02f235bcdab777b961fe19068e9033cdb514))
+* fixes on accessibility score ([b0e213e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b0e213e09741e2fbcb40356db77c600a39327885))
+* noscript tag ([d922b66](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d922b66d5ac8b4312a623ff0a37b213e3d07b908))
+* noscript tag ([d97e54d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d97e54d035e1bd580fec1b1c9cf2f6cca8a24308))
+* noscript tag ([2571d26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2571d2624b28db40db235f65916623dc51abd41a))
+* noscript tag ([844db38](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/844db385179f7a291148de789d62629c6950c4bc))
+* noscript tag ([45deece](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/45deececbc31fdaef83e90a7924b5e5084d8e7bf))
+* noscript tag ([6ea5975](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6ea5975e81bdf29b25c57a93e8996fd83a155e9b))
+* noscript tag ([09fa187](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/09fa1876c0142f042fdb81f47f01713492c8d487))
+* noscript tag ([a7ecfb4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a7ecfb45c772460d62aad290a91e463c68eebcfa))
+
+
+### Code Refactoring
+
+* add missing aria label ([a670669](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a670669eb29a136d57228824900cb2a3a64b6f56))
+* replace div with ul for performance imporvements ([5373d6c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5373d6c0d3fafdd1dfd17c91deaf79e8bc96eb06))
+
+
+### Config
+
+* increased pagespeed performance score to 90 ([143b68a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/143b68a0107811d366afa08223e672f26227322b))
+
+
+* Merge branch 'tm-2609-lazyload-noscript-tag' into 'master' ([6669bad](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6669bad97a1817b01033a42c8686f09c565dca37))
+* Merge branch 'tm-2595-accessibility-scores-fix' into 'master' ([048a617](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/048a6175d4025e4fcd4a7999dced518f97f6140b))
+
+## [1.6.12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.11...v1.6.12) (2021-11-25)
+
+
+### Bug Fixes
+
+* tracker redirect fix ([cdcc2d4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cdcc2d4fb25bd3f16c17e3547f192a58b7e5bbfd))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([2bb149a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2bb149a0796a572868175b3c0a9e1307c88dc538))
+
+## [1.6.11](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.10...v1.6.11) (2021-11-25)
+
+
+### Bug Fixes
+
+* 404 ([2355a82](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2355a8216c6431f34bac5f6cc8dd5302446fb0f4))
+* helmet ([6299dc5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6299dc536bcf7d3fac7ab89326fd0c6b42a692c9))
+* helmet ([2a05f83](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2a05f83042de1490a64f5606052104d59dfb6768))
+* preview ([5153a58](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5153a581700032ddad095e6a6e9593df8ac8dc8b))
+* preview func ([16bb0dc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/16bb0dca646eb50da48ad98a09fe9d5022757177))
+* tracker pages ([07c6e3c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/07c6e3c7d86190d82989ff270364a7ba940950c2))
+* tracker pages ([6defb88](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6defb88aeac9d9f71051e8c9f739dc4b8d41f80d))
+* tracker pages ([a61f2a8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a61f2a8db973fd5ba8098171e554883ac502e0a5))
+* tracker pages ([e68afc4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e68afc4321955393f58da1dc7cb079dfc9383db1))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([7ffdc47](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7ffdc47fcc468429cd2ac02e482d53aa558e7c97))
+
+## [1.6.10](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.9...v1.6.10) (2021-11-25)
+
+
+### Bug Fixes
+
+* sitemap changed to a page from hercules ([a0e90e4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a0e90e4916fcc0a2918dde39971265cc48fe89da))
+* sitemap fixes ([7c35ba4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c35ba42cf54a937800140387b84278479caad92))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([a75119b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a75119b9e50cf2f5143242dcedc49b54abcfb6ce))
+
 ## [1.6.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.8...v1.6.9) (2021-11-24)
 
 

package/gatsby-node.esm.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint no-console: ["error", { allow: ["log"] }], no-shadow: ["error", { "allow": ["marketSections", "prefilledModules"] }] */
 /* eslint-disable dot-notation */
 
@@ -233,22 +234,35 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           });
         } else if (page.path === '404') {
           context404 = contextData;
+        } else if (page.path === 'sitemap') {
+          createPage({
+            path: `/${page.path}`,
+            component: require.resolve('./src/components/app.js'),
+            context: { ...contextData, sitemapData: { ...htmlSitemapPages }, templates },
+          });
         } else {
           createPage({
             path: page.path.charAt(0) === '/' ? page.path : `/${page.path}`,
-            component: require.resolve(
-              page.path === 'preview'
-                ? './src/components/app-preview.js'
-                : './src/components/app.js'
-            ),
+            component: require.resolve('./src/components/app.js'),
             context: {
               ...contextData,
               siteSchema,
               translations,
+              isPreview: page.path === 'preview',
             },
           });
         }
 
+        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];
@@ -258,10 +272,11 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           );
           tracker.forEach((trackerPath) => {
             // Create splash page
+            trackerPageObject['path'] = trackerPath;
             createPage({
               path: trackerPath,
-              component: require.resolve('./src/components/pages/tracker/'),
-              context: { operator },
+              component: require.resolve('./src/components/app.js'),
+              context: { page: trackerPageObject, operator, isTracker: true },
             });
           });
         }
@@ -281,7 +296,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
             providerData.forEach((provider) => {
               createPage({
                 path: provider.tracker,
-                component: require.resolve('./src/components/pages/tracker/'),
+                component: require.resolve('./src/components/app.js'),
                 context: {
                   provider: provider.providerObject,
                 },
@@ -297,34 +312,10 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
 exports.onCreatePage = ({ page, actions }) => {
   const { createPage } = actions;
 
-  if (page.path.includes('sitemap')) {
-    const pageNotFoundData = {
-      meta_title: 'Sitemap',
-      template: 'sitemap',
-      title: 'Site Map',
-      type: 'page',
-      sections: {
-        main: null,
-        navigation: null,
-        sidebar: null,
-        footer: null,
-      },
-      language: languageKey,
-      translations,
-      relation: {
-        sports,
-      },
-    };
-    page = Object.assign(pageNotFoundData, page); // eslint-disable-line no-param-reassign
-    createPage({
-      path: page.path,
-      component: require.resolve('./src/pages/sitemap/'),
-      context: { page, siteInfo, marketSections, sitemapData: { ...htmlSitemapPages }, templates },
-    });
-  } else if (page.path.includes('404')) {
+  if (page.path.includes('404')) {
     createPage({
       path: page.path,
-      component: require.resolve('./src/pages/404/'),
+      component: require.resolve('./src/components/app.js'),
       context: context404,
     });
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.9",
+  "version": "1.6.13",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -60,7 +60,8 @@
     "react-google-recaptcha": "^2.1.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.2.0",
-    "react-lazyload": "^2.6.5"
+    "react-lazyload": "^2.6.5",
+    "react-masonry-css": "^1.0.16"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/app-preview.js

@@ -1,15 +1,28 @@
+/* eslint-disable no-unused-vars */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { globalHistory } from '@reach/router';
 
-import Body from '~pages/body';
-import Head from '~organisms/head';
-import { getPreview } from '~helpers/api';
+// import Body from '~pages/body';
+// import Head from '~organisms/head';
+// import { getPreview } from '~helpers/api';
 
 const AppPreview = ({ pageContext }) => {
   const [previewContext, setPreviewContext] = useState({});
   const [isLoading, setIsLoading] = useState({});
 
+  async function getData(searchParams, staticPath = null) {
+    const { getPreview } = await import('~helpers/api');
+    getPreview(
+      pageContext.siteName,
+      !staticPath ? searchParams.get('path') || '/' : staticPath,
+      pageContext
+    ).then((previewResponse) => {
+      setPreviewContext(previewResponse);
+      setIsLoading(false);
+    });
+  }
+
   useEffect(() => {
     setIsLoading(true);
     const searchParams =
@@ -17,23 +30,28 @@ const AppPreview = ({ pageContext }) => {
     if (!searchParams.get('path')) {
       window.location = `${window.location.origin}/preview?path=/`;
     }
-    getPreview(pageContext.siteName, searchParams.get('path') || '/', pageContext).then(
-      (previewResponse) => {
-        setPreviewContext(previewResponse);
-        setIsLoading(false);
-      }
-    );
+
+    getData(searchParams);
+    // let { hi, bye } = await import('./say.js');
+    // getPreview(pageContext.siteName, searchParams.get('path') || '/', pageContext).then(
+    //   (previewResponse) => {
+    //     setPreviewContext(previewResponse);
+    //     setIsLoading(false);
+    //   }
+    // );
 
     globalHistory.listen(({ location }) => {
       setIsLoading(true);
-      getPreview(pageContext.siteName, location.search.replace('?path=', ''), pageContext)
-        .then((previewResponse) => {
-          setPreviewContext(previewResponse);
-          setIsLoading(false);
-        })
-        .catch(() => {
-          alert('failed to load..');
-        });
+
+      getData(null, location.search.replace('?path=', ''));
+      // getPreview(pageContext.siteName, location.search.replace('?path=', ''), pageContext)
+      //   .then((previewResponse) => {
+      //     setPreviewContext(previewResponse);
+      //     setIsLoading(false);
+      //   })
+      //   .catch(() => {
+      //     alert('failed to load..');
+      //   });
     });
     // eslint-disable-next-line
   }, [pageContext.siteName]);
@@ -44,8 +62,8 @@ const AppPreview = ({ pageContext }) => {
 
   return (
     <>
-      <Head page={previewContext.page} siteInfo={previewContext.siteInfo} />
-      <Body pageContext={previewContext} />
+      {/* <Head page={previewContext.page} siteInfo={previewContext.siteInfo} />
+      <Body pageContext={previewContext} /> */}
     </>
   );
 };

package/src/components/app.js

@@ -1,24 +1,95 @@
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { globalHistory } from '@reach/router';
 import TranslationsProvider from '~context/TranslationsProvider';
 import Body from '~pages/body';
 import Head from '~organisms/head';
 
 const App = ({ pageContext }) => {
-  const { translations } = pageContext;
-  return (
-    <TranslationsProvider value={{ translations }}>
+  const { translations, isTracker, isPreview } = pageContext;
+  const [previewContext, setPreviewContext] = useState({});
+  const [isLoading, setIsLoading] = useState({});
+
+  async function getData(searchParams, staticPath = null) {
+    const { getPreview } = await import('~helpers/api');
+    getPreview(
+      pageContext.siteName,
+      !staticPath ? searchParams.get('path') || '/' : staticPath,
+      pageContext
+    ).then((previewResponse) => {
+      setPreviewContext(previewResponse);
+      setIsLoading(false);
+    });
+  }
+
+  useEffect(() => {
+    if (isPreview) {
+      setIsLoading(true);
+      const searchParams =
+        typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+      if (!searchParams.get('path')) {
+        window.location = `${window.location.origin}/preview?path=/`;
+      }
+      getData(searchParams);
+      // let { hi, bye } = await import('./say.js');
+      // getPreview(pageContext.siteName, searchParams.get('path') || '/', pageContext).then(
+      //   (previewResponse) => {
+      //     setPreviewContext(previewResponse);
+      //     setIsLoading(false);
+      //   }
+      // );
+
+      globalHistory.listen(({ location }) => {
+        setIsLoading(true);
+
+        getData(null, location.search.replace('?path=', ''));
+        // getPreview(pageContext.siteName, location.search.replace('?path=', ''), pageContext)
+        //   .then((previewResponse) => {
+        //     setPreviewContext(previewResponse);
+        //     setIsLoading(false);
+        //   })
+        //   .catch(() => {
+        //     alert('failed to load..');
+        //   });
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isPreview) {
+    if (isLoading) {
+      return 'Loading...';
+    }
+  }
+
+  const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
+
+  return isTracker ? (
+    <>
       <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
-      <Body pageContext={pageContext} />
+      <TrackerContent pageContext={pageContext} path={pageContext.page.path} />
+    </>
+  ) : (
+    <TranslationsProvider value={{ translations }}>
+      <Head
+        page={isPreview ? previewContext.page : pageContext.page}
+        siteInfo={isPreview ? previewContext.siteInfo : pageContext.siteInfo}
+      />
+      <Body pageContext={isPreview ? previewContext : pageContext} />
     </TranslationsProvider>
   );
 };
 
 App.propTypes = {
   pageContext: PropTypes.shape({
+    siteName: PropTypes.string,
+    isTracker: PropTypes.bool,
+    isPreview: PropTypes.bool,
     page: PropTypes.shape({
       id: PropTypes.number,
+      path: PropTypes.string,
     }),
     translations: PropTypes.object,
     siteInfo: PropTypes.shape({

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

@@ -11,8 +11,8 @@ describe('author box component', () => {
     const { container, getByText } = render(<AuthorBox author={author} />);
     expect(container).toBeTruthy();
     // Logo
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
     // Name
     expect(getByText('Ida Moen Olsen')).toBeTruthy();
     // Title

package/src/components/atoms/carousel/arrow/index.js

@@ -10,6 +10,7 @@ const Arrow = ({ direction, content = '', onClick, onKeyDown, disabled, gtmClass
     onClick={onClick}
     onKeyDown={onKeyDown}
     disabled={disabled}
+    aria-label={`Arrow ${direction} Link`}
   >
     {content}
   </button>

package/src/components/atoms/image/image.test.js

@@ -16,8 +16,8 @@ describe('Image Component', () => {
     expect(container).toBeTruthy();
 
     // Lazy image
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
 });
 afterEach(() => {

package/src/{pages → components/atoms}/sitemap/index.js

@@ -1,18 +1,27 @@
 /* eslint-disable array-callback-return */
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { BiSitemap } from 'react-icons/bi';
+import { IoMdLink } from 'react-icons/io';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Masonry from 'react-masonry-css';
+import { Context } from '~context/TranslationsProvider';
+import { translate } from '~helpers/getters';
 import styles from './sitemap.module.scss';
-import Body from '~pages/body';
-import Head from '~organisms/head';
 import Link from '~hooks/link';
 
-const Sitemap = ({ pageContext, templateIcon, linkIcon }) => {
+const Sitemap = ({ pageContext, templateIcon = <BiSitemap />, linkIcon = <IoMdLink /> }) => {
   const { templates, sitemapData } = pageContext;
+  const { translations } = useContext(Context) || {};
   const market = Object.keys(sitemapData)[0];
 
   const getTemplateName = (template) => {
-    const templateName = templates[template].short_name.replace('_', ' ');
+    const templateName = translate(
+      translations,
+      templates[template].short_name,
+      templates[template].short_name.replace('_', ' ')
+    );
     const templatePages = sitemapData[market][template];
     const templatePagesCount = templatePages && templatePages.length;
 
@@ -47,19 +56,14 @@ const Sitemap = ({ pageContext, templateIcon, linkIcon }) => {
   };
 
   return (
-    <>
-      <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
-      <Body pageContext={pageContext}>
-        <div className={styles.container}>
-          {Object.keys(templates).map((template) => (
-            <ul key={template} className={styles.list}>
-              {getTemplateName(template)}
-              {getTemplatePages(template)}
-            </ul>
-          ))}
-        </div>
-      </Body>
-    </>
+    <Masonry breakpointCols={3} className={styles.container} columnClassName={styles.list}>
+      {Object.keys(templates).map((template) => (
+        <ul key={template}>
+          {getTemplateName(template)}
+          {getTemplatePages(template)}
+        </ul>
+      ))}
+    </Masonry>
   );
 };
 
@@ -67,8 +71,6 @@ Sitemap.propTypes = {
   pageContext: PropTypes.shape({
     sitemapData: PropTypes.object,
     templates: PropTypes.object,
-    siteInfo: PropTypes.object,
-    page: PropTypes.object,
   }),
   templateIcon: PropTypes.element,
   linkIcon: PropTypes.element,

package/src/components/atoms/sitemap/sitemap.module.scss

@@ -0,0 +1,111 @@
+.container {
+  display: flex;
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  padding: 0 2.4rem 2rem 2.4rem;
+
+  @include min(mobile) {
+    padding: 0 1.6rem 2rem 1.6rem;
+  }
+
+  @include max(mobile) {
+    display: block;
+  }
+}
+
+.list {
+  @include max(mobile) {
+    width: 100% !important;
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+
+    > div {
+      position: relative;
+      @include flex-align(center, flex-start);
+
+      svg {
+        fill: white !important;
+        background-color: var(--template-name-icon-background, red);
+        padding: 1rem;
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 2.8rem;
+      }
+
+      > span {
+        color: black;
+        font-weight: 700;
+        font-size: 2rem;
+        margin-left: 1.6rem;
+        text-transform: capitalize;
+      }
+
+      span:last-child {
+        @include flex-align(center, center);
+        position: absolute;
+        top: -1.2rem;
+        background-color: var(--page-number-background, green);
+        border-radius: 1.2rem;
+        border: 0.2rem solid white;
+        margin: 0;
+        font-size: 1rem;
+        color: var(--page-number-color, white);
+        font-weight: 700;
+        width: 2.4rem;
+        height: 2.4rem;
+        left: 3.2rem;
+      }
+    }
+
+    > ul {
+      padding-top: 3rem;
+      padding-left: 2.7rem;
+      margin-left: 2.3rem;
+      border-left: dashed 1px #e3e6ef;
+
+      li {
+        display: grid;
+        grid-template-columns: 0.1fr 1fr;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        position: relative;
+
+        &:before {
+          content: ' ';
+          position: absolute;
+          left: -2.7rem;
+          width: 2.5rem;
+          top: 1.2rem;
+          border: dashed 1px #e3e6ef;
+        }
+
+        &:last-child:after {
+          content: ' ';
+          width: 1rem;
+          height: 5rem;
+          background-color: var(--sitemap-background-color);
+          position: absolute;
+          top: 1.3rem;
+          left: -2.8rem;
+        }
+
+        svg {
+          fill: white !important;
+          background-color: #6e6e84;
+          padding: 0.3rem;
+          width: 2.4rem;
+          height: 2.4rem;
+          border-radius: 0.8rem;
+        }
+
+        a {
+          padding-left: 0.3rem;
+        }
+      }
+    }
+  }
+}

package/src/components/atoms/sitemap/sitemap.stories.js

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import Sitemap from '.';
+
+export default {
+  title: 'Gatsby-Theme/Atoms/Sitemap',
+  component: Sitemap,
+  argTypes: {
+    // pageContext: {
+    //   name: 'sitemapData',
+    //   type: { name: 'object', required: true },
+    //   defaultValue: null,
+    //   description: 'Object containing all links grouped by page type.',
+    //   table: {
+    //     type: { summary: 'object' },
+    //     defaultValue: { summary: null },
+    //   },
+    // },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'An HTML sitemap showing all pages as links',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Sitemap {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  pageContext: {
+    sitemapData: {
+      ie_en: {
+        1: [
+          {
+            title: 'test one',
+            path: '/test_one',
+          },
+          {
+            title: 'test two',
+            path: '/test_two',
+          },
+          {
+            title: 'test three',
+            path: '/test_three',
+          },
+        ],
+        2: [
+          {
+            title: 'template page one',
+            path: '/template_page_one',
+          },
+          {
+            title: 'template page two',
+            path: '/template_page_two',
+          },
+        ],
+        3: [
+          {
+            title: 'template two page',
+            path: 'template_teo_page',
+          },
+        ],
+      },
+    },
+    templates: {
+      1: {
+        short_name: 'template one',
+      },
+      2: {
+        short_name: 'template two',
+      },
+      3: {
+        short_name: 'template three',
+      },
+    },
+  },
+};

package/src/components/atoms/spotlights/index.js

@@ -18,7 +18,7 @@ const Spotlights = ({ module }) => {
     return (
       <>
         <span className={styles.itemImage}>
-          <LazyImage alt={item.label} src={imagePrettyUrl(img)} />
+          <LazyImage alt={item.label || item?.link_text} src={imagePrettyUrl(img)} />
         </span>
         <span className={styles.label}>{item.label}</span>
       </>
@@ -43,11 +43,17 @@ const Spotlights = ({ module }) => {
                 title={item.label}
                 target="_blank"
                 rel="noreferrer"
+                aria-label={`${item?.label || item?.link_text} Link`}
               >
                 {content(item)}
               </a>
             ) : (
-              <Link to={item.link.value} title={item.label} className="spotlights-gtm">
+              <Link
+                to={item.link.value}
+                title={item.label}
+                className="spotlights-gtm"
+                aria-label={`${item?.label || item?.link_text} Link`}
+              >
                 {content(item)}
               </Link>
             )}

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

@@ -17,8 +17,8 @@ describe('Content Component', () => {
     expect(container.querySelectorAll('i')).toHaveLength(1);
 
     // Lazy image
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
 });
 afterEach(() => {

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

@@ -5,14 +5,17 @@ import Module from '~molecules/module';
 import styles from './main.module.scss';
 import keygen from '~helpers/keygen';
 
-const Main = ({ section = {}, page = {}, pageContext = {} }) => {
+const Main = ({ section = {}, pageContext = {} }) => {
+  const { page } = pageContext;
   const SearchPage = page.path === 's' ? loadable(() => import(`~pages/search`)) : null;
+  const HtmlSitemap = page.path === 'sitemap' ? loadable(() => import(`~atoms/sitemap`)) : null;
   const AuthorBox = page.author ? loadable(() => import(`~atoms/author-box`)) : null;
   const NotFound = page?.path?.includes('404') ? loadable(() => import(`~atoms/not-found`)) : null;
 
   return (
     <main className={styles.modulePage}>
       {NotFound && <NotFound />}
+      {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
         section.modules.map((module) => (
           <Module key={keygen()} module={module} page={page} pageContext={pageContext} />

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

@@ -10,16 +10,16 @@ const section = {
   modules: [
     {
       name: 'content',
-      ...getSingleContentData()
+      ...getSingleContentData(),
     },
   ],
 };
 
-const pagePath = 's';
+const pageObject = { page: { path: 's' } };
 
 describe('Main Component', () => {
   test('render main', async () => {
-    const { container, getByText } = render(<Main section={section} pagePath={pagePath} />);
+    const { container, getByText } = render(<Main section={section} pageContext={pageObject} />);
     expect(container).toBeTruthy();
     expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
 

package/src/components/molecules/pagination/with-midpoints.js

@@ -57,7 +57,7 @@ const PaginationWithMidPoints = ({
         )}
       </li>
 
-      <div className={styles.padd}>
+      <ul className={styles.padd}>
         {/* first page link */}
         {current !== 1 && (
           <li>
@@ -122,7 +122,7 @@ const PaginationWithMidPoints = ({
             {total}
           </Link>
         </li>
-      </div>
+      </ul>
 
       {/* next button */}
       <li className={styles.showInAll}>

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

@@ -200,6 +200,7 @@ function Slider({
           className={`${styles.sliderContent}`}
           style={style}
           ref={sliderContentRef}
+          aria-label="Slider Content Button"
         >
           {children.map((slide, index) => (
             <div

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

@@ -24,7 +24,7 @@ function Body({ pageContext, children }) {
     <>
       {navigation && <Navigation template={template} section={navigation} />}
       {!is404 && <Header section={pageContext} />}
-      {main && !children && <Main section={main} page={pageContext.page} />}
+      {main && !children && <Main section={main} pageContext={pageContext} />}
       {children && <main>{children}</main>}
       {Sidebar && <Sidebar section={sidebar} />}
       <ScrollToTop />

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

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
 import Button from '~atoms/button';
 import LazyImage from '~hooks/lazy-image';
 import { prettyTracker } from '~helpers/getters';
@@ -91,9 +90,6 @@ const Tracker = ({
     <>
       {showSplashScreen && !isMobile && (
         <>
-          <Helmet>
-            <meta name="robots" content="noindex,nofollow" />
-          </Helmet>
           <div className={styles.container}>
             {background}
             <div className={styles.content}>

package/src/hooks/lazy-image/index.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import LazyLoad from 'react-lazyload';
+// import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
 
 // When to use this component:
@@ -9,49 +9,68 @@ import PropTypes from 'prop-types';
 export default function LazyImage({
   height,
   width,
-  offset = 200,
+  // offset = 200,
   style = {},
   className,
   src = '#',
-  srcSet = '',
+  // srcSet = '',
   alt = '',
-  sizes,
-  defaultImg,
-  once = false,
+  // sizes,
+  // defaultImg,
+  // once = false,
 }) {
-  const [errorImage, setErrorImage] = useState(false);
+  // const [errorImage, setErrorImage] = useState(false);
 
-  if ((defaultImg && !src) || errorImage === true) {
-    return defaultImg;
-  }
+  // if ((defaultImg && !src) || errorImage === true) {
+  //   return defaultImg;
+  // }
 
   return (
-    <LazyLoad height={`${height}px`} width={`${width}px`} offset={offset} debounce={0} once={once}>
+    <>
+      {/* <LazyLoad
+        height={`${height}px`}
+        width={`${width}px`}
+        offset={offset}
+        debounce={0}
+        once={once}
+      >
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+          srcSet={srcSet}
+          sizes={sizes}
+          onError={() => setErrorImage(true)}
+        />
+      </LazyLoad> */}
+      {/* <noscript> */}
       <img
         src={src}
+        loading="lazy"
         className={className}
         height={height}
         width={width}
         alt={alt}
         style={style}
-        srcSet={srcSet}
-        sizes={sizes}
-        onError={() => setErrorImage(true)}
       />
-    </LazyLoad>
+      {/* </noscript> */}
+    </>
   );
 }
 
 LazyImage.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
-  offset: PropTypes.number,
+  // offset: PropTypes.number,
   style: PropTypes.shape({}),
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
-  sizes: PropTypes.string,
-  srcSet: PropTypes.string,
-  defaultImg: PropTypes.element,
-  once: PropTypes.bool,
+  // sizes: PropTypes.string,
+  // srcSet: PropTypes.string,
+  // defaultImg: PropTypes.element,
+  // once: PropTypes.bool,
 };

package/src/hooks/modal/modal-content.js

@@ -60,7 +60,12 @@ const ModalContent = ({ closeIcon }) => {
       <div className={styles.modalOverlay} onClick={close} />
       <div className={styles.modalContent}>
         {closeIcon && (
-          <button className={`${styles.closeIcon} modal-gtm btn-cta`} type="button" onClick={close}>
+          <button
+            className={`${styles.closeIcon} modal-gtm btn-cta`}
+            aria-label="Close Icon"
+            type="button"
+            onClick={close}
+          >
             {closeIcon}
           </button>
         )}

package/src/styles/utils/variables/_main.scss

@@ -77,6 +77,12 @@
   --second-table-background: var(--color-17);
   --secondary-module-background: var(--color-42);
 
+  // HTML Sitemap
+  --template-name-icon-background: #ff893f;
+  --page-number-background: #393939;
+  --page-number-color: #fff;
+  --sitemap-background-color: #fff;
+
   --storybook-soccer: var(--color-45);
   --storybook-tennis: var(--color-46);
   --storybook-handball: var(--color-47);

package/src/pages/sitemap/sitemap.module.scss

@@ -1,21 +0,0 @@
-
-.container {
-    display: flex;
-  flex-flow: row;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-
-    padding: 1rem;
-
-    > div {
-        font-weight: 700;
-        font-size: 1.6rem;
-    }
-
-    >ul {
-        padding-top: 2rem;
-    }
-}