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

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

@@ -1,18 +1,18 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React from "react";
 import {
   Title,
   Description,
   Primary,
   PRIMARY_STORY,
   ArgsTable,
-} from '@storybook/addon-docs/blocks';
-import { getExtraField } from 'gatsby-core-theme/src/helpers/getters';
-import getFooterData from '../../../../../../tests/factories/modules/footer.factory';
-import Security from '~images/icons/security';
+} from "@storybook/addon-docs/blocks";
+import { getExtraField } from "~helpers/getters";
+import getFooterData from "../../../../../../tests/factories/modules/footer.factory";
+import Security from "~images/icons/security";
 import logo from "../../../../../../static/images/logo.svg";
-import dmca from '../../../../../../static/images/dmca.png';
-import TemplateThree from '.';
+import dmca from "../../../../../../static/images/dmca.png";
+import TemplateThree from ".";
 
 const footerData = getFooterData();
 const helpText = `
@@ -31,119 +31,122 @@ const helpText = `
   in order to get help.
 </p>`;
 
-const phoneNum = '- 89 241 5401';
+const phoneNum = "- 89 241 5401";
 
 export default {
-  title: 'Theme/Layout/Footer/Template One',
+  title: "Theme/Layout/Footer/Template One",
   component: TemplateThree,
   argTypes: {
     footerLogos: {
-      name: 'footerLogos',
-      type: { name: 'object', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'logos'),
-      description: 'footer logos',
+      name: "footerLogos",
+      type: { name: "object", required: true },
+      defaultValue: getExtraField(footerData?.extra_fields, "logos"),
+      description: "footer logos",
     },
     footerMenu: {
-      name: 'footerMenu',
-      type: { name: 'object', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'links'),
-      description: 'footer menu',
+      name: "footerMenu",
+      type: { name: "object", required: true },
+      defaultValue: getExtraField(footerData?.extra_fields, "links"),
+      description: "footer menu",
     },
     copyrightDisclaimer: {
-      name: 'copyrightDisclaimer',
-      type: { name: 'string', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'copyright_disclaimer'),
-      description: 'copyright disclaimer',
+      name: "copyrightDisclaimer",
+      type: { name: "string", required: true },
+      defaultValue: getExtraField(
+        footerData?.extra_fields,
+        "copyright_disclaimer"
+      ),
+      description: "copyright disclaimer",
     },
     showLinks: {
-      name: 'showLinks',
-      type: { name: 'boolean', required: true },
+      name: "showLinks",
+      type: { name: "boolean", required: true },
       defaultValue: true,
-      description: 'show footer links?',
+      description: "show footer links?",
     },
     asSeenOn: {
-      name: 'asSeenOn',
-      type: { name: 'object', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'as_seen_on'),
-      description: 'footer as seen on logos',
+      name: "asSeenOn",
+      type: { name: "object", required: true },
+      defaultValue: getExtraField(footerData?.extra_fields, "as_seen_on"),
+      description: "footer as seen on logos",
     },
     gamblingText: {
-      name: 'gamblingText',
-      type: { name: 'object', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'gambling_text'),
-      description: 'Gambling Text',
+      name: "gamblingText",
+      type: { name: "object", required: true },
+      defaultValue: getExtraField(footerData?.extra_fields, "gambling_text"),
+      description: "Gambling Text",
     },
     socialIcons: {
-      name: 'socialIcons',
-      type: { name: 'object', required: true },
-      defaultValue: getExtraField(footerData?.extra_fields, 'social_icons'),
-      description: 'footer logos',
+      name: "socialIcons",
+      type: { name: "object", required: true },
+      defaultValue: getExtraField(footerData?.extra_fields, "social_icons"),
+      description: "footer logos",
     },
     hasFooterLinks: {
-      name: 'hasFooterLinks',
-      type: { name: 'boolean', required: true },
+      name: "hasFooterLinks",
+      type: { name: "boolean", required: true },
       defaultValue: false,
-      description: 'has footer links on mobile?',
+      description: "has footer links on mobile?",
     },
     hasDisclaimer: {
-      name: 'hasDisclaimer',
-      type: { name: 'boolean', required: true },
+      name: "hasDisclaimer",
+      type: { name: "boolean", required: true },
       defaultValue: true,
-      description: 'has Disclaimer?',
+      description: "has Disclaimer?",
     },
     showCopyright: {
-      name: 'showCopyright',
-      type: { name: 'boolean', required: true },
+      name: "showCopyright",
+      type: { name: "boolean", required: true },
       defaultValue: true,
-      description: 'show Copyright?',
+      description: "show Copyright?",
     },
     helpText: {
-      name: 'helpText',
-      type: { name: 'string', required: true },
+      name: "helpText",
+      type: { name: "string", required: true },
       defaultValue: helpText,
-      description: 'helpText',
+      description: "helpText",
     },
     phoneNum: {
-      name: 'phoneNum',
-      type: { name: 'string', required: true },
+      name: "phoneNum",
+      type: { name: "string", required: true },
       defaultValue: phoneNum,
-      description: 'phone number',
+      description: "phone number",
     },
     logo: {
-      name: 'logo',
-      type: { name: 'string', required: true },
+      name: "logo",
+      type: { name: "string", required: true },
       defaultValue: logo,
-      description: 'site logo',
+      description: "site logo",
     },
     dmcaImage: {
-      name: 'dmcaImage',
-      type: { name: 'string', required: true },
+      name: "dmcaImage",
+      type: { name: "string", required: true },
       defaultValue: dmca,
-      description: 'site dmca image path',
+      description: "site dmca image path",
     },
     dmcaWidth: {
-      name: 'dmcaWidth',
-      type: { name: 'number', required: true },
+      name: "dmcaWidth",
+      type: { name: "number", required: true },
       defaultValue: 100,
-      description: 'site dmca image width',
+      description: "site dmca image width",
     },
     dmcaHeight: {
-      name: 'dmcaImage',
-      type: { name: 'number', required: true },
+      name: "dmcaImage",
+      type: { name: "number", required: true },
       defaultValue: 33,
-      description: 'site dmca image height',
+      description: "site dmca image height",
     },
     securityIcon: {
-      name: 'securityIcon',
-      type: { name: 'element', required: true },
+      name: "securityIcon",
+      type: { name: "element", required: true },
       defaultValue: <Security />,
-      description: 'site security icon',
+      description: "site security icon",
     },
   },
   parameters: {
     docs: {
       description: {
-        component: 'A Default Footer Component - Template One',
+        component: "A Default Footer Component - Template One",
       },
       page: () => (
         <>

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

@@ -1,11 +1,11 @@
 /* eslint-disable no-restricted-syntax */
-import React from 'react';
-import { render, cleanup, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import Footer from '.';
-import { getExtraField, copyrightText } from '../../../../../helpers/getters';
-import Security from '~images/icons/security';
-import getFooterData from '../../../../../../tests/factories/modules/footer.factory';
+import React from "react";
+import { render, cleanup, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import Footer from ".";
+import { getExtraField, copyrightText } from "../../../../../helpers/getters";
+import Security from "~images/icons/security";
+import getFooterData from "../../../../../../tests/factories/modules/footer.factory";
 
 const helpText = `
 <p>
@@ -17,7 +17,7 @@ const helpText = `
   </a>
   in order to get help.
 </p>`;
-const phoneNum = '- 89 241 5401';
+const phoneNum = "- 89 241 5401";
 
 const dmcaImg = (
   <img
@@ -43,18 +43,21 @@ 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');
+  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");
 
   props = {
     section: data,
-    template: 'default',
+    template: "default",
     hasFooterLinks: false,
-    footerTemplate: 'template_one',
+    footerTemplate: "template_one",
     showLinks: true,
     copyrightDisclaimer,
     footerLogos,
@@ -64,79 +67,89 @@ beforeEach(() => {
     socialIcons,
     hasDisclaimer: true,
     showCopyright: true,
-    logo: '/images/logo.svg',
+    logo: "/images/logo.svg",
     securityIcon: <Security />,
     helpText,
     phoneNum,
     dmcaImg,
   };
 });
-describe('Show Footer', () => {
-  test('render with props', () => {
+describe("Show Footer", () => {
+  test("render with props", () => {
     const { container } = renderComponent(props);
     expect(container).toBeTruthy();
   });
-  test('show correct template ', async () => {
+  test("show correct template ", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.footer.templateOne').length).toBe(1);
+      expect(container.querySelectorAll(".footer.templateOne").length).toBe(1);
     });
   });
-  test('show as seen on', async () => {
+  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);
+      expect(container.querySelectorAll("footer > div")).toHaveLength(2);
+      expect(container.querySelectorAll(".asSeenOn")).toHaveLength(1);
 
       // show correct title
-      expect(getByText('As Seen On:')).toHaveTextContent(`${asSeenOn.title}:`);
+      expect(getByText("As Seen On:")).toHaveTextContent(`${asSeenOn.title}:`);
 
       // show correct number of logos
-      expect(container.querySelectorAll('.asSeenOn li')).toHaveLength(3);
+      expect(container.querySelectorAll(".asSeenOn li")).toHaveLength(3);
     });
   });
 
-  test('render menu list', async () => {
+  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);
+      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);
+      expect(
+        getByText(footerMenu.children[1].title).closest("ul").children
+      ).toHaveLength(7);
+      expect(
+        getByText(footerMenu.children[3].title).closest("ul").children
+      ).toHaveLength(5);
 
       // show correct url
       expect(
-        getByText(footerMenu.children[1].children[0].title).closest('a').getAttribute('href')
+        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')
+        getByText(footerMenu.children[2].children[2].title)
+          .closest("a")
+          .getAttribute("href")
       ).toEqual(`/${footerMenu.children[2].children[2].value}`);
     });
   });
-  test('hide menu list', async () => {
+  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);
+      expect(container.querySelectorAll(".links")).toHaveLength(0);
+      expect(container.querySelectorAll(".links ul")).toHaveLength(0);
     });
   });
-  test('hide gambling text', async () => {
+  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(".license > div")).toHaveLength(3);
+      expect(container.querySelectorAll(".gamblingText")).toHaveLength(0);
     });
   });
   // test('correct security text', async () => {
@@ -149,72 +162,82 @@ describe('Show Footer', () => {
   //     ).toContain('securityText');
   //   });
   // });
-  test('footer middle part does not show another as seen on', async () => {
+  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);
+      expect(container.querySelectorAll(".footerHotline > div")).toHaveLength(
+        1
+      );
+      expect(
+        container.querySelectorAll(".footerHotline .asSeenOn")
+      ).toHaveLength(0);
     });
   });
-  test('correct help text', async () => {
+  test("correct help text", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.helpText')).toBeTruthy();
-      expect(container.querySelector('.helpText').innerHTML).toBe(helpText);
+      expect(container.querySelector(".helpText")).toBeTruthy();
+      expect(container.querySelector(".helpText").innerHTML).toBe(helpText);
     });
   });
-  test('correct phone number', async () => {
+  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);
+      expect(
+        container.querySelector(".phoneNum").innerHTML.split("</svg>")[1]
+      ).toBe(phoneNum);
     });
   });
-  test('show copyright disclaimer', async () => {
+  test("show copyright disclaimer", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
+      expect(container.querySelectorAll(".copyrightDisclaimer")).toBeTruthy();
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
+      expect(container.querySelector(".copyrightDisclaimer").innerHTML).toBe(
+        copyrightDisclaimer
+      );
     });
   });
-  test('show copyright', async () => {
+  test("show copyright", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toHaveTextContent(copyrightText());
+      expect(container.querySelector(".copyrightText")).toHaveTextContent(
+        copyrightText()
+      );
     });
   });
-  test('hide copyright', async () => {
+  test("hide copyright", async () => {
     props = {
       ...props,
       showCopyright: false,
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toBeFalsy();
+      expect(container.querySelector(".copyrightText")).toBeFalsy();
     });
   });
-  test('show dmca image', async () => {
+  test("show dmca image", async () => {
     // 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);
     props = {
       ...props,
       showCopyright: false,
-      dmcaImage: '/images/dmca.png',
+      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'
-    );
+    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 () => {
+  test("hide dmca image", async () => {
     props = {
       ...props,
       hasDisclaimer: false,
@@ -222,7 +245,7 @@ describe('Show Footer', () => {
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.logos > a')).toBeFalsy();
+      expect(container.querySelector(".logos > a")).toBeFalsy();
     });
   });
 });

package/src/components/molecules/footer/variants/template-three/template-three.stories.js

@@ -7,11 +7,11 @@ import {
   PRIMARY_STORY,
   ArgsTable,
 } from "@storybook/addon-docs/blocks";
-import { getExtraField } from "gatsby-core-theme/src/helpers/getters";
+import { getExtraField } from "~helpers/getters";
 import getFooterData from "../../../../../../tests/factories/modules/footer.factory";
-import logo from '../../../../../../static/images/logo.svg';
-import Security from '~images/icons/security';
-import dmca from '../../../../../../static/images/dmca.png';
+import logo from "../../../../../../static/images/logo.svg";
+import Security from "~images/icons/security";
+import dmca from "../../../../../../static/images/dmca.png";
 import TemplateThree from ".";
 
 const footerData = getFooterData();