gatsby-core-theme 44.10.1 → 44.10.12-beta.1

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

@@ -1,13 +1,13 @@
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import LazyImage from '~hooks/lazy-image';
-import { getAltText } from '~helpers/image';
-import Button from '~atoms/button/button';
-import { imagePrettyUrl, getExtraField } from '~helpers/getters';
-import VariableComponent from '~molecules/header/variants/default/variables';
-import styles from './template-one.module.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import LazyImage from "~hooks/lazy-image";
+import { getAltText } from "~helpers/image";
+import Button from "~atoms/button/button";
+import { imagePrettyUrl, getExtraField } from "~helpers/getters";
+import VariableComponent from "~molecules/header/variants/default/variables";
+import styles from "./template-one.module.scss";
 
 export default function TemplateOne({
   page,
@@ -17,11 +17,11 @@ export default function TemplateOne({
   imageObj,
   width = 356,
   height = 343,
-  buttonType="secondary",
-  buttonSize="m",
+  buttonType = "secondary",
+  buttonSize = "m",
   hasVariableComponent = false,
 }) {
-  const link = getExtraField(extraFields, 'link');
+  const link = getExtraField(extraFields, "link");
 
   return (
     <div className={styles.templateOne}>
@@ -55,7 +55,9 @@ export default function TemplateOne({
           className={styles.image}
         />
       )}
-      {hasVariableComponent && <VariableComponent page={page} className={styles.variable} />}
+      {hasVariableComponent && (
+        <VariableComponent page={page} className={styles.variable} />
+      )}
     </div>
   );
 }

package/src/components/molecules/header/variants/default/template-one/template-one.test.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
 
-import { getExtraField, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
-import MainProvider from '~context/MainProvider';
-import getPageData from '../../../../../../../tests/factories/pages/default.factory';
-import TemplateOne from '.';
+import { getExtraField, imagePrettyUrl } from "~helpers/getters";
+import MainProvider from "~context/MainProvider";
+import getPageData from "../../../../../../../tests/factories/pages/default.factory";
+import TemplateOne from ".";
 
 const translations = {
-  online_casino: 'Online Casino',
+  online_casino: "Online Casino",
 };
 
 function renderComponent(pageData) {
@@ -35,44 +35,52 @@ let data;
 beforeEach(() => {
   data = getPageData();
 });
-describe('Show template one', () => {
-  test('render with props', () => {
+describe("Show template one", () => {
+  test("render with props", () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.templateOne')).toBeTruthy();
+    // eslint-disable-next-line no-restricted-syntax
+    expect(container.querySelector(".templateOne")).toBeTruthy();
   });
-  test('show correct title', () => {
+  test("show correct title", () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.headerContainer').querySelector('h1')).toBeTruthy();
-    expect(container.querySelector('.headerContainer').querySelector('h1').innerHTML).toEqual(
-      data.title
-    );
+    expect(
+      container.querySelector(".headerContainer").querySelector("h1")
+      // eslint-disable-next-line no-restricted-syntax
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".headerContainer").querySelector("h1").innerHTML
+    ).toEqual(data.title);
   });
-  test('show correct description', () => {
+  test("show correct description", () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.headerContainer').querySelector('div').innerHTML).toEqual(
-      data.description
-    );
+    expect(
+      container.querySelector(".headerContainer").querySelector("div").innerHTML
+    ).toEqual(data.description);
   });
-  test('show correct url', () => {
+  test("show correct url", () => {
     const { container } = renderComponent(data);
     expect(
-      container.querySelector('.headerContainer').querySelector('a').innerHTML.split('<svg')[0]
-    ).toEqual(getExtraField(data?.extra_fields, 'link'));
+      container
+        .querySelector(".headerContainer")
+        .querySelector("a")
+        .innerHTML.split("<svg")[0]
+    ).toEqual(getExtraField(data?.extra_fields, "link"));
   });
-  test('show correct image', () => {
+  test("show correct image", () => {
     const imgObj = data.featured_image_object;
 
     // eslint-disable-next-line global-require
-    const func = require('gatsby-core-theme/src/helpers/device-detect');
+    const func = require("~helpers/device-detect");
     func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
     const { container } = renderComponent(data);
 
-    expect(container.querySelector('img')).toBeTruthy();
-    expect(container.querySelector('img')).toHaveAttribute(
-      'src',
+    // eslint-disable-next-line no-restricted-syntax
+    expect(container.querySelector("img")).toBeTruthy();
+    expect(container.querySelector("img")).toHaveAttribute(
+      "src",
       imagePrettyUrl(imgObj.filename, 356, 343)
     );
-    expect(container.querySelector('img')).toHaveAttribute('loading', 'eager');
+    expect(container.querySelector("img")).toHaveAttribute("loading", "eager");
   });
 });
 afterEach(() => {

package/src/components/molecules/header/variants/slot/template-one/templateone.test.js

@@ -1,47 +1,50 @@
-import React from 'react';
-import { render, cleanup, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
-import getPageData from '../../../../../../../tests/factories/pages/slot';
-import TemplateOne from '.';
+import React from "react";
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { imagePrettyUrl } from "~helpers/getters";
+import getPageData from "../../../../../../../tests/factories/pages/slot";
+import TemplateOne from ".";
 
-describe('summary component', () => {
-  test('render', () => {
-    const { container, getByText, getByRole } = render(<TemplateOne page={getPageData()} />);
+describe("summary component", () => {
+  test("render", () => {
+    const { container, getByText, getByRole } = render(
+      <TemplateOne page={getPageData()} />
+    );
 
-    expect(container.querySelectorAll('div.parentContainer')).toHaveLength(1);
+    expect(container.querySelectorAll("div.parentContainer")).toHaveLength(1);
 
-    const div = getByText('The Slot Title');
+    const div = getByText("The Slot Title");
     expect(div).toBeInTheDocument();
 
-    const h1 = getByRole('heading', { level: 1 });
+    const h1 = getByRole("heading", { level: 1 });
     expect(h1).toBeInTheDocument();
   });
 
   const page = {
     relation: {
-      name: 'Halloween',
+      name: "Halloween",
       thumbnail_filename_object: {
-        filename: 'image.jpg',
-        alt: 'Halloween',
+        filename: "image.jpg",
+        alt: "Halloween",
       },
     },
     sections: {
       header: {
         modules: [
           {
-            name: 'bonus',
+            name: "bonus",
             value: {
               bonuses: {
                 main: {
-                  one_liner: '20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus',
+                  one_liner:
+                    "20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus",
                 },
               },
               logo: {
-                filename: '1651670485/davincis-gold-casino-logo.png',
+                filename: "1651670485/davincis-gold-casino-logo.png",
               },
-              links: { main: 'test' },
-              status: 'active',
+              links: { main: "test" },
+              status: "active",
             },
           },
         ],
@@ -49,29 +52,29 @@ describe('summary component', () => {
     },
   };
 
-  describe('SlotHeader', () => {
-    it('should render the image', async () => {
+  describe("SlotHeader", () => {
+    it("should render the image", async () => {
       render(<TemplateOne page={page} />);
-      const img = screen.getByAltText('Halloween');
+      const img = screen.getByAltText("Halloween");
       await waitFor(() => expect(img).toBeVisible());
       expect(img).toHaveAttribute(
-        'src',
+        "src",
         imagePrettyUrl(page.relation?.logo?.filename, 170, 170)
       );
-      expect(img).toHaveAttribute('width', '170');
-      expect(img).toHaveAttribute('height', '170');
+      expect(img).toHaveAttribute("width", "170");
+      expect(img).toHaveAttribute("height", "170");
     });
 
-    it('should render the headerBonus logo', async () => {
+    it("should render the headerBonus logo", async () => {
       render(<TemplateOne page={page} />);
 
       await waitFor(() => {
-        const bonusText = screen.getByText('Welcome Bonus');
+        const bonusText = screen.getByText("Welcome Bonus");
         expect(bonusText).toBeInTheDocument();
       });
     });
 
-    it('should render the headerBonus one-liner', () => {
+    it("should render the headerBonus one-liner", () => {
       render(<TemplateOne page={page} />);
       const oneLiner = screen.getByText(/20 Free Spins No Deposit Bonus/);
       expect(oneLiner).toBeInTheDocument();

package/src/components/molecules/leave-comment-form/index.js

@@ -1,94 +1,105 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
-import Form from "gatsby-core-theme/src/components/organisms/form";
-import PropTypes from 'prop-types';
-import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import { commentForm, replyForm } from '../../../constants/forms';
+import React from "react";
+import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import Form from "~organisms/form";
+import { commentForm, replyForm } from "../../../constants/forms";
 
 const LeaveCommentForm = ({
-    page,
-    isReply = false,
-    parentCommentID = 0,
-    showLabels = true,
-    showButtonIcon = false,
-    buttonLabel = 'Add Comment',
-    successMessage = 'Comment Submitted for Approval',
-    failMessage = 'Comment Not Added',
-    validationMessage = 'Fill all required fields',
-    buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
-    titleTag = 'h2',
+  page,
+  isReply = false,
+  parentCommentID = 0,
+  showLabels = true,
+  showButtonIcon = false,
+  buttonLabel = "Add Comment",
+  successMessage = "Comment Submitted for Approval",
+  failMessage = "Comment Not Added",
+  validationMessage = "Fill all required fields",
+  buttonIcon = <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />,
+  titleTag = "h2",
 }) => {
-    const activeMarket = page?.market;
-    const isDev = process.env.NODE_ENV === 'development';
+  const activeMarket = page?.market;
+  const isDev = process.env.NODE_ENV === "development";
 
-    const customSubmit = (form, resetForm) => {
-        const formData = new FormData(form);
-        const data = Object.fromEntries(formData.entries());        
-        const cleanedData = isReply
-        ? Object.entries(data).reduce((acc, [key, value]) => {
-            if (key.startsWith('post_anonymously_')) acc.post_anonymously = value;
-            else if (key.startsWith('tnc_')) acc.tnc = value;
-            else acc[key] = value;
-            return acc;
-            }, {})
-        : data;
-                
-        
-        if((cleanedData?.["g-recaptcha-response"] === '' || !cleanedData?.tnc) && !isDev) return;
-        
-        if(parentCommentID) cleanedData.parent_id = parentCommentID;
+  const customSubmit = (form, resetForm) => {
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+    const cleanedData = isReply
+      ? Object.entries(data).reduce((acc, [key, value]) => {
+          if (key.startsWith("post_anonymously_")) acc.post_anonymously = value;
+          else if (key.startsWith("tnc_")) acc.tnc = value;
+          else acc[key] = value;
+          return acc;
+        }, {})
+      : data;
 
-        cleanedData.reference_id = page?.id;
-        cleanedData.site_id = parseInt(process.env.SITE_ID);
-        cleanedData.rate = parseInt(data.rate);
+    if (
+      (cleanedData?.["g-recaptcha-response"] === "" || !cleanedData?.tnc) &&
+      !isDev
+    )
+      return;
 
-        cleanedData.market_short_code = activeMarket;
-        
-        if(!cleanedData?.post_anonymously) cleanedData.author_name = cleanedData?.name;
-        if(!cleanedData?.rate) delete cleanedData?.rate;
+    if (parentCommentID) cleanedData.parent_id = parentCommentID;
 
-        delete cleanedData?.post_anonymously;
-        delete cleanedData?.tnc;
+    cleanedData.reference_id = page?.id;
+    cleanedData.site_id = parseInt(process.env.SITE_ID);
+    cleanedData.rate = parseInt(data.rate);
 
-        return new Promise((resolve, reject) => {
-            fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/post-comment`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cleanedData),
-            })
-            .then(async (response) => {
-                if (response.ok) {
-                    resetForm();
-                    resolve(response);
-                } else {
-                    const errorData = await response.json().catch(() => ({}));
-                    reject(errorData?.errors?.join() || response.statusText);
-                }
-            })
-            .catch((error) => reject(error.message));
-        });
-    };
+    cleanedData.market_short_code = activeMarket;
 
-    return activeMarket && 
-        <Form
-            formOptions={isReply ? (replyForm[activeMarket] || replyForm.default) : (commentForm[activeMarket] || commentForm.default)}
-            showLabels={showLabels}
-            hasButton
-            showButtonIcon={showButtonIcon}
-            buttonLabel={buttonLabel}
-            customeSubmit={customSubmit}
-            successMessage={successMessage}
-            failMessage={failMessage}
-            validationMessage={validationMessage}
-            path={page?.path}
-            buttonIcon={buttonIcon}
-            titleType={titleTag}
-            customClass='commentForm'
-        />
+    if (!cleanedData?.post_anonymously)
+      cleanedData.author_name = cleanedData?.name;
+    if (!cleanedData?.rate) delete cleanedData?.rate;
+
+    delete cleanedData?.post_anonymously;
+    delete cleanedData?.tnc;
+
+    return new Promise((resolve, reject) => {
+      fetch(`${process.env.GATSBY_API_COMMENT_URL}/api/post-comment`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(cleanedData),
+      })
+        .then(async (response) => {
+          if (response.ok) {
+            resetForm();
+            resolve(response);
+          } else {
+            const errorData = await response.json().catch(() => ({}));
+            reject(errorData?.errors?.join() || response.statusText);
+          }
+        })
+        .catch((error) => reject(error.message));
+    });
+  };
+
+  return (
+    activeMarket && (
+      <Form
+        formOptions={
+          isReply
+            ? replyForm[activeMarket] || replyForm.default
+            : commentForm[activeMarket] || commentForm.default
+        }
+        showLabels={showLabels}
+        hasButton
+        showButtonIcon={showButtonIcon}
+        buttonLabel={buttonLabel}
+        customeSubmit={customSubmit}
+        successMessage={successMessage}
+        failMessage={failMessage}
+        validationMessage={validationMessage}
+        path={page?.path}
+        buttonIcon={buttonIcon}
+        titleType={titleTag}
+        customClass="commentForm"
+      />
+    )
+  );
 };
 
 LeaveCommentForm.propTypes = {

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

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import PropTypes from "prop-types";
-import { getURLParam } from "gatsby-core-theme/src/helpers/getters";
+import { getURLParam } from "~helpers/getters";
 import Module from "~molecules/module";
 import styles from "./main.module.scss";
 import keygen from "~helpers/keygen";
@@ -29,7 +29,8 @@ const Main = ({
       ) ||
       exclNewsletter
     ) && !process.env?.HIDE_NEWSLETTER;
-  const pathPrefixes = isSearchPath(allMarkets, page.path) || page.template === "search";
+  const pathPrefixes =
+    isSearchPath(allMarkets, page.path) || page.template === "search";
   const HtmlSitemap = pageContext.sitemapData
     ? lazy(() => import(`~atoms/sitemap`))
     : null;
@@ -37,7 +38,7 @@ const Main = ({
   const NotFound = page?.path?.includes("404")
     ? lazy(() => import(`~atoms/not-found`))
     : null;
-  
+
   const Newsletter = showNewsletter
     ? lazy(() => import("~molecules/newsletter"))
     : null;
@@ -83,10 +84,7 @@ const Main = ({
         />
       )}
       {pathPrefixes && (
-        <Search
-          serverData={serverData}
-          pageContext={pageContext}
-        />
+        <Search serverData={serverData} pageContext={pageContext} />
       )}
       {Newsletter && (
         <Suspense fallback={<></>}>

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

@@ -1,8 +1,8 @@
 /* eslint-disable arrow-body-style */
 import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import MegaItems from 'gatsby-core-theme/src/components/atoms/menu/mega-items';
-import Items from 'gatsby-core-theme/src/components/atoms/menu/items';
+import MegaItems from "~atoms/menu/mega-items";
+import Items from "~atoms/menu/items";
 
 import MenuIcon from "~atoms/menu/menu-icon";
 import { NavigationContext } from "~organisms/navigation/navigationContext";
@@ -22,10 +22,10 @@ const Menu = ({
   mobileAnimation = "collapseFull",
   stopScrollOnOpen = true,
   canOpenAllSubMenus = true,
-  enableMegaMenu = false
+  enableMegaMenu = false,
 }) => {
   let menuObject;
-  
+
   const currentPagePath = pageContext?.page?.path;
 
   const menuListRef = useRef(React.createRef());
@@ -73,30 +73,28 @@ const Menu = ({
         {menuObject &&
           menuObject?.children?.map((child) => {
             const level = 1;
-            return (
-              enableMegaMenu ? (
-                <MegaItems
-                  toplist={toplistModule}
-                  menuListRef={menuListRef}
-                  gtmClass={gtmClass}
-                  key={keygen()}
-                  item={child}
-                  canOpenAllSubMenus={canOpenAllSubMenus}
-                  level={level}
-                />
-              ) : (
-                <Items
-                  currentPage={currentPagePath}
-                  toplist={toplistModule}
-                  menuListRef={menuListRef}
-                  orientation={orientation}
-                  gtmClass={gtmClass}
-                  key={keygen()}
-                  item={child}
-                  canOpenAllSubMenus={canOpenAllSubMenus}
-                  level={level}
-                />
-              )
+            return enableMegaMenu ? (
+              <MegaItems
+                toplist={toplistModule}
+                menuListRef={menuListRef}
+                gtmClass={gtmClass}
+                key={keygen()}
+                item={child}
+                canOpenAllSubMenus={canOpenAllSubMenus}
+                level={level}
+              />
+            ) : (
+              <Items
+                currentPage={currentPagePath}
+                toplist={toplistModule}
+                menuListRef={menuListRef}
+                orientation={orientation}
+                gtmClass={gtmClass}
+                key={keygen()}
+                item={child}
+                canOpenAllSubMenus={canOpenAllSubMenus}
+                level={level}
+              />
             );
           })}
       </ul>
@@ -107,8 +105,8 @@ const Menu = ({
 Menu.propTypes = {
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
-      path: PropTypes.string
-    })
+      path: PropTypes.string,
+    }),
   }),
   section: PropTypes.shape({
     modules: PropTypes.arrayOf(

package/src/components/molecules/newsletter/form/index.js

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 
-import { getUrl } from "gatsby-core-theme/src/helpers/getters";
+import { getUrl } from "~helpers/getters";
 import Form from "../../../organisms/form";
 import { newsLetterForm } from "../../../../constants/forms";
 import useTranslate from "~hooks/useTranslate/useTranslate";
@@ -32,7 +32,7 @@ const NewsletterForm = ({
     })
       .then((response) => response.json())
       .then((data) => {
-        setIP(data.ip)
+        setIP(data.ip);
       })
       .catch((err) => {
         // eslint-disable-next-line no-console