gatsby-core-theme 30.0.84 → 30.0.86

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [30.0.86](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.85...v30.0.86) (2024-02-22)
+
+
+### Bug Fixes
+
+* used phonenum for helpline ([00ac2d5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/00ac2d5dc62314c76aadf2b09cbe7d92b2ceb5ef))
+
+
+* Merge branch 'tm-4047-market-helpline' into 'master' ([d2ae2b3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2ae2b3a4399146c9e4f501d18a99e63007edcbf))
+* Merge remote-tracking branch 'origin' into tm-4047-market-helpline ([713c588](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/713c588b487c531740c9519fdd703b01d464ef69))
+
+## [30.0.85](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.84...v30.0.85) (2024-02-21)
+
+
+### Bug Fixes
+
+* added all templates to core ([61b2c5b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/61b2c5b58b4746fca369d5454bd71c635672d029))
+* added storybook resources ([7df8998](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7df89986e139f54d5c6fdf0af68edf3f747b6f5a))
+* fixed failing tests ([bcae945](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bcae9458d86a5ab8a5d4c4895ac2cede6a886ea4))
+
+
+* Merge branch 'tm-4047-market-helpline' into 'master' ([04f08df](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/04f08df3f7c8d19b38288889a6c0bf8ea18b6e62))
+* Merge remote-tracking branch 'origin' into tm-4047-market-helpline ([23b40d0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/23b40d03155497cf2de1bc7e90b5ee188cf58e6f))
+
 ## [30.0.84](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.83...v30.0.84) (2024-02-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.84",
+  "version": "30.0.86",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

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

@@ -1,249 +1,83 @@
 import React from 'react';
 import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import '~tests/helpers/match-media.mock';
 import Footer from '.';
-import { getExtraField, translate, copyrightText } from '../../../helpers/getters';
-import MainProvider from '~context/MainProvider';
 import getFooterData from '../../../../tests/factories/modules/footer.factory';
+import getPageData from '../../../../tests/factories/pages/default.factory';
 
-const translations = {
-  licensed_casinos: 'We only list licensed casinos',
-};
-
-const helpText = `
-<p>
-  Gambling can be addictive, please play responsibly.
-  <br>
-  If you are a problem gambler, please visit this
-  <a href="https://www.begambleaware.org/" target="_blank" rel="nofollow" class="footer-gtm">
-    website
-  </a>
-  in order to get help.
-</p>`;
-const phoneNum = '- 89 241 5401';
-
-const dmcaImg = (
-  <img
-    src="https://cdn.irishluck.ie/5d29ae7f19cc9366a119f3ca168395d7.png"
-    width="100"
-    height="33"
-    alt="DMCA.com Protection Status"
-  />
-);
-
-function renderComponent(footerData) {
-  return render(
-    <MainProvider
-      value={{
-        translations,
-      }}
-    >
-      <Footer {...footerData} />
-    </MainProvider>
-  );
-}
-
-let data;
-let props;
-let footerMenu;
-let asSeenOn;
-let gamblingText;
-let socialIcons;
-let copyrightDisclaimer;
-let footerLogos;
-
-beforeEach(() => {
-  data = getFooterData();
-  footerMenu = getExtraField(data?.extra_fields, 'links');
-  asSeenOn = getExtraField(data?.extra_fields, 'as_seen_on');
-  gamblingText = getExtraField(data?.extra_fields, 'gambling_text');
-  socialIcons = getExtraField(data?.extra_fields, 'social_icons');
-  copyrightDisclaimer = getExtraField(data.extra_fields, 'copyright_disclaimer');
-  footerLogos = getExtraField(data?.extra_fields, 'logos');
+describe('header component', () => {
+  test('render', async () => {
+    const { container } = render(
+      <Footer
+        section={getFooterData()}
+        template="homepage"
+        hasFooterLinks={false}
+        footerTemplate="template_one"
+      />
+    );
 
-  props = {
-    section: data,
-    template: 'default',
-    hasFooterLinks: false,
-    footerTemplate: 'template_one',
-    showLinks: true,
-    copyrightDisclaimer,
-    footerLogos,
-    footerMenu,
-    asSeenOn,
-    gamblingText,
-    socialIcons,
-    hasDisclaimer: true,
-    showCopyright: true,
-    logo: '../../../images/logo.svg',
-    securityIcon: '../../../images/security.svg',
-    helpText,
-    phoneNum,
-    dmcaImg,
-  };
-});
-describe('Show Footer', () => {
-  test('render with props', () => {
-    const { container } = renderComponent(props);
-    expect(container).toBeTruthy();
-  });
-  test('show correct template ', async () => {
-    const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.footer.templateOne').length).toBe(1);
+      expect(container.querySelectorAll('footer')).toHaveLength(1);
     });
   });
-  test('show as seen on', async () => {
-    const { container, getByText } = renderComponent(props);
-    await waitFor(() => {
-      expect(container.querySelectorAll('footer > div')).toHaveLength(2);
-      expect(container.querySelectorAll('.asSeenOn')).toHaveLength(1);
-
-      // show correct title
-      expect(getByText('As Seen On:')).toHaveTextContent(`${asSeenOn.title}:`);
+  test('Template Two', async () => {
+    const { container } = render(
+      <Footer
+        section={getFooterData()}
+        template="homepage"
+        hasFooterLinks={false}
+        footerTemplate="template_two"
+      />
+    );
 
-      // show correct number of logos
-      expect(container.querySelectorAll('.asSeenOn li')).toHaveLength(3);
-    });
-  });
-  test('hide as seen on', async () => {
-    props = {
-      ...props,
-      asSeenOn: null,
-    };
-    const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('footer > div')).toHaveLength(1);
-      expect(container.querySelectorAll('.asSeenOn')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(1);
+      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(0);
     });
   });
-  test('render menu list', async () => {
-    const { container, getByText } = renderComponent(props);
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.topPart')).toHaveLength(1);
-      expect(container.querySelectorAll('.links')).toHaveLength(1);
-      expect(container.querySelectorAll('.links ul')).toHaveLength(footerMenu.children.length);
-
-      // show correct title
-      expect(getByText(footerMenu.children[0].title)).toBeTruthy();
-      expect(getByText(footerMenu.children[2].title)).toBeTruthy();
-
-      // show correct number of child lists
-      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(7);
-      expect(getByText(footerMenu.children[3].title).closest('ul').children).toHaveLength(5);
+  test('Template Three', async () => {
+    const { container } = render(
+      <Footer
+        section={getFooterData()}
+        template="homepage"
+        hasFooterLinks={false}
+        footerTemplate="template_three"
+      />
+    );
 
-      // show correct url
-      expect(
-        getByText(footerMenu.children[1].children[0].title).closest('a').getAttribute('href')
-      ).toEqual(`/${footerMenu.children[1].children[0].value}`);
-      expect(
-        getByText(footerMenu.children[2].children[2].title).closest('a').getAttribute('href')
-      ).toEqual(`/${footerMenu.children[2].children[2].value}`);
-    });
-  });
-  test('hide menu list', async () => {
-    props = {
-      ...props,
-      showLinks: false,
-    };
-    const { container } = renderComponent(props);
-    await waitFor(() => {
-      expect(container.querySelectorAll('.links')).toHaveLength(0);
-      expect(container.querySelectorAll('.links ul')).toHaveLength(0);
-    });
-  });
-  test('hide gambling text', async () => {
-    const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.license > div')).toHaveLength(3);
-      expect(container.querySelectorAll('.gamblingText')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(1);
     });
   });
-  test('correct security text', async () => {
-    const { getByText } = renderComponent(props);
-    await waitFor(() => {
-      expect(
-        getByText(translate(translations, 'licensed_casinos', 'We only list licensed casinos'))
-          .closest('span')
-          .getAttribute('class')
-      ).toContain('securityText');
-    });
-  });
-  test('footer middle part does not show another as seen on', async () => {
-    const { container } = renderComponent(props);
-    await waitFor(() => {
-      expect(container.querySelectorAll('.footerHotline > div')).toHaveLength(1);
-      expect(container.querySelectorAll('.footerHotline .asSeenOn')).toHaveLength(0);
-    });
-  });
-  test('correct help text', async () => {
-    const { container } = renderComponent(props);
-    await waitFor(() => {
-      expect(container.querySelector('.helpText')).toBeTruthy();
-      expect(container.querySelector('.helpText').innerHTML).toBe(helpText);
-    });
-  });
-  test('correct phone number', async () => {
-    const { getByText, container } = renderComponent(props);
-    await waitFor(() => {
-      expect(getByText(phoneNum)).toBeTruthy();
-      expect(container.querySelector('.phoneNum').innerHTML.split('</svg>')[1]).toBe(phoneNum);
-    });
-  });
-  test('show copyright disclaimer', async () => {
-    const { container } = renderComponent(props);
-    await waitFor(() => {
-      expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
+  test('Default Template', async () => {
+    const { container } = render(
+      <Footer section={getFooterData()} template="homepage" hasFooterLinks={false} />
+    );
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
-    });
-  });
-  test('show copyright', async () => {
-    const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toHaveTextContent(copyrightText());
+      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(1);
+      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(0);
+      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(0);
     });
   });
-  test('hide copyright', async () => {
-    props = {
-      ...props,
-      showCopyright: false,
-    };
-    const { container } = renderComponent(props);
+  test('Test new responsible gaming logos', async () => {
+    const { container } = render(
+      <Footer section={getFooterData()} template="homepage" page={getPageData()} />
+    );
+
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toBeFalsy();
+      expect(container.querySelectorAll('.footer .logos li')).toHaveLength(3);
     });
   });
-  test('show dmca image', async () => {
-    // eslint-disable-next-line global-require
-    const func = require('gatsby-core-theme/src/helpers/device-detect');
-    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
-    props = {
-      ...props,
-      showCopyright: false,
-      dmcaImage: '../../../images/dmca.png',
-    };
-    const { container } = renderComponent(props);
-    expect(container.querySelector('.logos > a').querySelector('img')).toBeTruthy();
-    expect(container.querySelector('.logos > a').querySelector('img')).toHaveAttribute(
-      'src',
-      '../../../images/dmca.png'
-    );
-    expect(container.querySelector('.logos > a').querySelector('img')).toHaveAttribute(
-      'loading',
-      'lazy'
-    );
-  });
-  test('hide dmca image', async () => {
-    props = {
-      ...props,
-      hasDisclaimer: false,
-      footerLogos: false,
-    };
-    const { container } = renderComponent(props);
+  test('Test when new responsible gaming logos are not available', async () => {
+    const { container } = render(<Footer section={getFooterData()} template="homepage" />);
+
     await waitFor(() => {
-      expect(container.querySelector('.logos > a')).toBeFalsy();
+      expect(container.querySelectorAll('.footer .logos li')).toHaveLength(3);
     });
   });
 });

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

@@ -1,108 +1,28 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
-import { copyrightText, getExtraField } from '../../../helpers/getters';
-import LinkList from '../link-list';
-import Disclaimer from '../../atoms/disclaimer';
-import FooterHotline from '../../atoms/footer/hotline';
-import FooterLicense from '../../atoms/footer/license';
-import styles from './footer.module.scss';
+import { getExtraField } from 'gatsby-core-theme/src/helpers/getters';
 
-const Footer = ({
-  footerLogos,
-  footerMenu,
-  copyrightDisclaimer,
-  showLinks,
-  asSeenOn,
-  gamblingText,
-  socialIcons,
-  hasFooterLinks,
-  hasDisclaimer,
-  showCopyright,
-  helpText,
-  phoneNum,
-  logo,
-  dmcaImage,
-  dmcaWidth,
-  dmcaHeight,
-  securityIcon,
-}) => {
-  const AsSeenOn = asSeenOn ? loadable(() => import('../../atoms/footer/as-seen-on')) : null;
+export const footerContent = (props) => {
+  let ModuleComponent = null;
 
-  return (
-    <footer>
-      {AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template="templateOne" />}
-      <div
-        className={`${styles?.footer || ''} ${styles?.templateOne || ''}
-            ${hasFooterLinks && styles[hasFooterLinks] ? styles.hasFooterLinks || '' : ''}`}
-      >
-        {footerMenu && showLinks && (
-          <div className={styles?.topPart || ''}>
-            {footerMenu && showLinks && (
-              <div className={styles?.links || ''}>
-                <LinkList lists={footerMenu} gtmClass="mobile-menu-gtm" />
-              </div>
-            )}
-            <FooterLicense
-              gamblingText={gamblingText}
-              socialIcons={socialIcons}
-              template="templateOne"
-              logo={logo}
-              securityIcon={securityIcon}
-            />
-          </div>
-        )}
-
-        {(helpText || phoneNum) && (
-          <FooterHotline
-            showAsSeen={false}
-            helpText={helpText}
-            phoneNum={phoneNum}
-            template="templateOne"
-          />
-        )}
-
-        <div className={styles?.bottomPart || ''}>
-          {copyrightDisclaimer && (
-            <div
-              className={styles?.copyrightDisclaimer || ''}
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
-            />
-          )}
-          {showCopyright && <p className={styles?.copyrightText || ''}>{copyrightText()}</p>}
-
-          {(footerLogos || hasDisclaimer) && (
-            <div className={styles?.logos || ''}>
-              {footerLogos && (
-                <LinkList
-                  showListTitle={false}
-                  imageOnly
-                  singleList
-                  lists={footerLogos}
-                  gtmClass="mobile-menu-gtm logo-cta"
-                  width={130}
-                  height={140}
-                />
-              )}
-              {hasDisclaimer && (
-                <Disclaimer
-                  loading="lazy"
-                  dmcaImage={dmcaImage}
-                  imgWidth={dmcaWidth}
-                  imgHeight={dmcaHeight}
-                />
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </footer>
-  );
+  switch (props.footerTemplate) {
+    case 'template_one':
+      ModuleComponent = loadable(() => import('./variants/template-one'));
+      return <ModuleComponent {...props} />;
+    case 'template_two':
+      ModuleComponent = loadable(() => import('./variants/template-two'));
+      return <ModuleComponent {...props} />;
+    case 'template_three':
+      ModuleComponent = loadable(() => import('./variants/template-three'));
+      return <ModuleComponent {...props} />;
+    default:
+      ModuleComponent = loadable(() => import('./variants/template-one'));
+      return <ModuleComponent {...props} />;
+  }
 };
 
-const FooterProps = (props) => {
+const Footer = (props) => {
   const helpText = `
   <p>
     Gambling can be addictive, please play responsibly.
@@ -118,7 +38,6 @@ const FooterProps = (props) => {
     </a>
     in order to get help.
   </p>`;
-  const phoneNum = '- 89 241 5401';
 
   const footerLogos = getExtraField(props.section?.extra_fields, 'logos');
 
@@ -140,6 +59,7 @@ const FooterProps = (props) => {
   };
 
   props = {
+    ...props,
     showLinks: props.template !== 'ppc',
     copyrightDisclaimer: getExtraField(props.section?.extra_fields, 'copyright_disclaimer'),
     footerLogos: props.page?.page?.responsibleGaming?.length ? getFooterLogos() : footerLogos,
@@ -154,33 +74,11 @@ const FooterProps = (props) => {
     dmcaWidth: 100,
     dmcaHeight: 30,
     securityIcon: '../../../images/security.svg',
-    helpText: getExtraField(props.section?.extra_fields, 'helpline') || helpText,
-    phoneNum,
-    ...props,
+    helpText,
+    phoneNum: getExtraField(props.section?.extra_fields, 'helpline') || null,
   };
 
-  return Footer(props);
+  return footerContent(props);
 };
-export default FooterProps;
 
-Footer.propTypes = {
-  footerLogos: PropTypes.shape({}),
-  footerMenu: PropTypes.shape({
-    children: PropTypes.shape([]),
-  }),
-  copyrightDisclaimer: PropTypes.string,
-  showLinks: PropTypes.bool,
-  asSeenOn: PropTypes.shape({}),
-  gamblingText: PropTypes.string,
-  socialIcons: PropTypes.shape({}),
-  hasFooterLinks: PropTypes.bool,
-  hasDisclaimer: PropTypes.bool,
-  showCopyright: PropTypes.bool,
-  helpText: PropTypes.string,
-  phoneNum: PropTypes.string,
-  logo: PropTypes.string,
-  dmcaImage: PropTypes.string,
-  dmcaWidth: PropTypes.number,
-  dmcaHeight: PropTypes.number,
-  securityIcon: PropTypes.string,
-};
+export default Footer;

package/src/components/molecules/footer/variants/template-one/index.js

@@ -0,0 +1,126 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { copyrightText } from '../../../../../helpers/getters';
+import LinkList from '../../../link-list';
+import Disclaimer from '../../../../atoms/disclaimer';
+import FooterHotline from '../../../../atoms/footer/hotline';
+import FooterLicense from '../../../../atoms/footer/license';
+import styles from './template-one.module.scss';
+
+const TemplateOne = ({
+  footerLogos,
+  footerMenu,
+  copyrightDisclaimer,
+  showLinks,
+  asSeenOn,
+  gamblingText,
+  socialIcons,
+  hasFooterLinks,
+  hasDisclaimer,
+  showCopyright,
+  helpText,
+  phoneNum,
+  logo,
+  dmcaImage,
+  dmcaWidth,
+  dmcaHeight,
+  securityIcon,
+}) => {
+  const AsSeenOn = asSeenOn ? loadable(() => import('../../../../atoms/footer/as-seen-on')) : null;
+
+  return (
+    <footer>
+      {AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template="templateOne" />}
+      <div
+        className={`${styles?.footer || ''} ${styles?.templateOne || ''}
+            ${hasFooterLinks && styles[hasFooterLinks] ? styles.hasFooterLinks || '' : ''}`}
+      >
+        {footerMenu && showLinks && (
+          <div className={styles?.topPart || ''}>
+            {footerMenu && showLinks && (
+              <div className={styles?.links || ''}>
+                <LinkList lists={footerMenu} gtmClass="mobile-menu-gtm" />
+              </div>
+            )}
+            <FooterLicense
+              gamblingText={gamblingText}
+              socialIcons={socialIcons}
+              template="templateOne"
+              logo={logo}
+              securityIcon={securityIcon}
+            />
+          </div>
+        )}
+
+        {(helpText || phoneNum) && (
+          <FooterHotline
+            showAsSeen={false}
+            helpText={helpText}
+            phoneNum={phoneNum}
+            template="templateOne"
+          />
+        )}
+
+        <div className={styles?.bottomPart || ''}>
+          {copyrightDisclaimer && (
+            <div
+              className={styles?.copyrightDisclaimer || ''}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
+            />
+          )}
+          {showCopyright && <p className={styles?.copyrightText || ''}>{copyrightText()}</p>}
+
+          {(footerLogos || hasDisclaimer) && (
+            <div className={styles?.logos || ''}>
+              {footerLogos && (
+                <LinkList
+                  showListTitle={false}
+                  imageOnly
+                  singleList
+                  lists={footerLogos}
+                  gtmClass="mobile-menu-gtm logo-cta"
+                  width={130}
+                  height={140}
+                />
+              )}
+              {hasDisclaimer && (
+                <Disclaimer
+                  loading="lazy"
+                  dmcaImage={dmcaImage}
+                  imgWidth={dmcaWidth}
+                  imgHeight={dmcaHeight}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default TemplateOne;
+
+TemplateOne.propTypes = {
+  footerLogos: PropTypes.shape({}),
+  footerMenu: PropTypes.shape({
+    children: PropTypes.shape([]),
+  }),
+  copyrightDisclaimer: PropTypes.string,
+  showLinks: PropTypes.bool,
+  asSeenOn: PropTypes.shape({}),
+  gamblingText: PropTypes.string,
+  socialIcons: PropTypes.shape({}),
+  hasFooterLinks: PropTypes.bool,
+  hasDisclaimer: PropTypes.bool,
+  showCopyright: PropTypes.bool,
+  helpText: PropTypes.string,
+  phoneNum: PropTypes.string,
+  logo: PropTypes.string,
+  dmcaImage: PropTypes.string,
+  dmcaWidth: PropTypes.number,
+  dmcaHeight: PropTypes.number,
+  securityIcon: PropTypes.string,
+};

package/src/components/molecules/footer/{footer.stories.js → variants/template-one/template-one.stories.js}

@@ -9,7 +9,7 @@ import {
 
 import Footer from '.';
 import { sampleFooter } from '~tests/factories/sections/footer.factory';
-import mlogo from '../../../../static/images/dmca.png';
+import mlogo from '../../../../../../static/images/dmca.png';
 
 export default {
   title: 'Theme/Molecules/Footer',