gatsby-matrix-theme 30.0.0 → 31.0.0

package/.storybook/main.js

@@ -10,6 +10,10 @@ module.exports = {
     '../../node_modules/gatsby-core-theme/src/components/organisms/anchor/anchor.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-one/bonus.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-two/bonus.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/content/content.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/content/table/table.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/content/text/Images/text.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/content/lists/lists.stories.js',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   env: (config) => ({

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [31.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v30.0.0...v31.0.0) (2023-08-22)
+
+
+### Bug Fixes
+
+* add blockquote style ([1c430a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1c430a57592469b36eaa78aae513fda37e450f95))
+* content module fixes and storybooks ([fcd10cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fcd10cce3942dc877a65e04be2580970905795f3))
+* cookie button ([bafc7f1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bafc7f1855186d6df8d2f573a90f9e1c15093ccc))
+* imported all the content storybooks from core ([f14e4a2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f14e4a2153a34eeebcc258f2b2f90f42e57fff0d))
+* update content module ([ff3af42](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ff3af428b1352635cad82b5319714f589dcf8191))
+
+
+### Code Refactoring
+
+* add prop to show/hide button icon ([6daf7e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6daf7e2d6db90d4d726eb0f2157e9e1d1de9620f))
+* add props for heading and description ([29b0889](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29b08896af9665391f57df779fcccba481e34f03))
+* changes to form const ([9911518](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/99115188808e3ab5b0d3a15320b50e18080d804d))
+* changes to storybook ([46c8736](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/46c8736d02b632145924ebed84ce84a6b5818e1d))
+* correction to label display condition ([885e355](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/885e355013d4e8762ec09adec5f4edb57eaea3ae))
+* dynamic button lable ([f4dabea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f4dabea68ef73f1a55874eea354f173f0d6e48ac))
+* enable multiple markets for form options ([7c806b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7c806b48bd222046383f34c3a8ede3a18b221382))
+* revert form style ([da51b4d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/da51b4d69f2cbaeeb8614a1a209b52309afdd7da))
+
+
+### Config
+
+* update to latest core theme ([3d41b65](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d41b657e30fef1ea318736a7c01cb27c03615f8))
+* update to latest theme ([eca1c6f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eca1c6f375be5b567266d51bc5533c4068f62cd0))
+
+
+* Merge branch 'tm-3556-contact-us-page' into 'master' ([aa8f97a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa8f97aa92d7b1548fced219b89460fd9f053bed))
+* Merge branch 'master' into tm-3556-contact-us-page ([6da885d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6da885d2ed90d6e30a8aa44c7b3e244cb522142f))
+* Merge branch 'tm-3537-content-module' into 'master' ([0f2ed50](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f2ed508904d88699776d2d12e5a74aeef28d819))
+* Merge branch 'master' into tm-3556-contact-us-page ([0ad20e0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0ad20e0d1665951fbcbb1f784e3c73ce706233d9))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme into tm-3537-content-module ([d96f70b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d96f70b8a3c5bbbbf9b39eb525af26993f233dbb))
+
+
+### Tests
+
+* fix tests ([efcc02e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/efcc02e3affee6ded1b2980737a36f3d8673802a))
+
 # [30.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v29.0.0...v30.0.0) (2023-08-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "27.0.0",
+    "gatsby-core-theme": "28.0.1",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/gatsby-core-theme/components/atoms/contact-form/contact-form.module.scss

@@ -45,10 +45,6 @@
     }
   }
 
-  form {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
    > div {
     @include min(tablet) {
       gap: 2.4rem;
@@ -77,6 +73,12 @@
     line-height: 3.2rem;
     color: #1b1b1c;
     margin: 0;
+    
+    @include min(tablet){
+      font-weight: bold;
+      font-size: 3.2rem;
+      line-height: 4rem;
+    }
   }
 
   p {

package/src/gatsby-core-theme/components/atoms/contact-form/contact-form.stories.js

@@ -8,10 +8,26 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import getPageList from 'gatsby-core-theme/tests/factories/pages/page.factory';
 import ContactForm from '.';
 
-const page = {};
-page.siteSchema = { ...siteSchema };
+const relationType = 'default';
+const market = 'ie_en';
+const samplePages = {
+  [market]: {
+    [relationType]: getPageList({
+      template: relationType,
+      count: 3,
+      relation: null,
+      relation_id: 5,
+      market,
+      siteSchema: { ...siteSchema },
+    }),
+  },
+};
+
+// const page = {};
+// page.siteSchema = { ...siteSchema };
 
 export default {
   title: 'Theme/Modules/Template Blocks/Contact Form',
@@ -51,18 +67,48 @@ export default {
       defaultValue: 'Fill all the required fields.',
       description: 'sent message info',
     },
+    buttonLabel: {
+      name: 'buttonLabel',
+      type: { name: 'string', required: false },
+      defaultValue: 'Send Message',
+      description: 'Send button text',
+    },
     showFollowUs: {
       name: 'showFollowUs',
-      type: { name: 'boolean', required: true },
+      type: { name: 'boolean', required: false },
       defaultValue: true,
       description: 'Show Follow us social media icons & links from Site Scheme',
     },
     showEmail: {
       name: 'showEmail',
-      type: { name: 'boolean', required: true },
+      type: { name: 'boolean', required: false },
       defaultValue: true,
       description: 'Show email address only',
     },
+    showButtonIcon: {
+      name: 'showButtonIcon',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide button icon',
+    },
+    showLabels: {
+      name: 'showLabels',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide form field lables',
+    },
+    showHeading: {
+      name: 'showHeading',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide intro title of page',
+    },
+    showDescription: {
+      name: 'showDescription',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide intro description of page',
+    },
   },
   parameters: {
     docs: {
@@ -84,5 +130,5 @@ export default {
 const Template = (args) => <ContactForm {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-  page,
+  page: samplePages[market][relationType][0],
 };

package/src/gatsby-core-theme/components/atoms/contact-form/contact-form.test.js

@@ -3,18 +3,31 @@ import React from 'react';
 import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
-import { contactUsForm } from '../../../constants/forms';
+import getPageList from 'gatsby-core-theme/tests/factories/pages/page.factory';
 import ContactForm from '.';
 
-const page = {};
+const relationType = 'default';
+const market = 'ie_en';
+let samplePages = {};
 
 beforeEach(() => {
-  page.siteSchema = { ...siteSchema };
+  samplePages = {
+    [market]: {
+      [relationType]: getPageList({
+        template: relationType,
+        count: 3,
+        relation: null,
+        relation_id: 5,
+        market,
+        siteSchema: { ...siteSchema },
+      }),
+    },
+  };
 });
 describe('Contact Us form Component', () => {
   test('render contact us form and follow us titles', async () => {
     const { container, getByText } = render(
-      <ContactForm formOptions={contactUsForm} page={page} submitUrl="submit" />
+      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
     );
 
     await waitFor(() => {
@@ -26,15 +39,15 @@ describe('Contact Us form Component', () => {
   });
   test('render contact us form ', async () => {
     const { container } = render(
-      <ContactForm formOptions={contactUsForm} page={page} submitUrl="submit" />
+      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
     );
 
     await waitFor(() => {
       expect(container.querySelector('.contactForm')).toBeTruthy();
-      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(3);
+      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(4);
       expect(
         container.querySelector('.contactForm').querySelectorAll('input[type="text"]')
-      ).toHaveLength(1);
+      ).toHaveLength(2);
       expect(
         container.querySelector('.contactForm').querySelectorAll('input[type="email"]')
       ).toHaveLength(1);
@@ -43,7 +56,7 @@ describe('Contact Us form Component', () => {
   });
   test('render follow us social media ', async () => {
     const { container } = render(
-      <ContactForm formOptions={contactUsForm} page={page} submitUrl="submit" />
+      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
     );
 
     const socialIcons =

package/src/gatsby-core-theme/components/atoms/contact-form/index.js

@@ -16,8 +16,14 @@ const ContactForm = ({
   validationMessage = 'Fill all the required fields.',
   showFollowUs = true,
   showEmail = true,
+  buttonLabel = 'Send Message',
+  showButtonIcon = true,
+  showLabels = true,
+  showHeading = true,
+  showDescription = true,
 }) => {
   const { translations } = useContext(Context) || {};
+  const activeMarket = page?.market;
 
   const { siteSchema } = page || {};
   const socialIcons =
@@ -34,23 +40,27 @@ const ContactForm = ({
   const socialIconsNotNull = socialIcons && Object.values(socialIcons)?.some((value) => value);
 
   return (
-    <div className={styles.contactForm}>
-      <div className={styles.contactBox}>
-        <div className={styles.formWrapper}>
-          <h1>{translate(translations, 'contact_us', 'Contact Us')}</h1>
-          <p>
-            {translate(
-              translations,
-              'contact_us_questions',
-              `If you have questions about our reviews, games or content, or just want to leave some
-          feedback, the Irish Luck team would love to hear from you. You can contact us any time
-          using the details below and we'll endeavour to get back to you within 48 hours.`
-            )}
-          </p>
+    <div className={styles.contactForm || ''}>
+      <div className={styles.contactBox || ''}>
+        <div className={styles.formWrapper || ''}>
+          {showHeading && <h1>{translate(translations, 'contact_us', 'Contact Us')}</h1>}
+          {showDescription && (
+            <p>
+              {translate(
+                translations,
+                'contact_us_questions',
+                `If you have questions about our reviews, games or content, or just want to leave some
+            feedback, the Irish Luck team would love to hear from you. You can contact us any time
+            using the details below and we'll endeavour to get back to you within 48 hours.`
+              )}
+            </p>
+          )}
           <Form
-            formOptions={contactUsForm}
+            formOptions={contactUsForm[activeMarket]}
+            showLabels={showLabels}
             hasButton
-            buttonLabel="Send"
+            showButtonIcon={showButtonIcon}
+            buttonLabel={buttonLabel}
             submitUrl={submitUrl}
             successMessage={successMessage}
             failMessage={failMessage}
@@ -58,14 +68,14 @@ const ContactForm = ({
           />
         </div>
         {(supportEmail || socialIconsNotNull) && (
-          <div className={styles.socialSection}>
+          <div className={styles.socialSection || ''}>
             {showFollowUs && Object.values(socialIcons).some((value) => value) && (
               <SocialIcons socialIcons={socialIcons} />
             )}
             {showEmail && supportEmail && (
-              <div className={styles.emailContainer}>
+              <div className={styles.emailContainer || ''}>
                 <h2>{translate(translations, 'send_us_an_email', 'Send us an email')}</h2>
-                <p className={styles.email}>
+                <p className={styles.email || ''}>
                   <span>
                     <FaEnvelope />
                   </span>
@@ -92,6 +102,7 @@ export default ContactForm;
 ContactForm.propTypes = {
   page: PropTypes.shape({
     siteSchema: PropTypes.shape({}),
+    market: PropTypes.string,
   }).isRequired,
   submitUrl: PropTypes.string,
   successMessage: PropTypes.string,
@@ -99,4 +110,9 @@ ContactForm.propTypes = {
   validationMessage: PropTypes.string,
   showFollowUs: PropTypes.bool,
   showEmail: PropTypes.bool,
+  buttonLabel: PropTypes.string,
+  showButtonIcon: PropTypes.string,
+  showLabels: PropTypes.bool,
+  showHeading: PropTypes.bool,
+  showDescription: PropTypes.bool,
 };

package/src/gatsby-core-theme/components/organisms/cookie-consent/cookie-consent.module.scss

@@ -111,6 +111,7 @@
 }
 
 .cookieButton {
+  cursor: pointer;
   z-index: var(--cookieButton-index, 5);
   position: fixed;
   left: var(--cookieButton-left, 1.6rem);

package/src/gatsby-core-theme/constants/forms.js

@@ -1,100 +1,166 @@
+import React from 'react';
+// import { IoMdCloseCircleOutline } from '@react-icons/all-files/io/IoMdCloseCircleOutline';
+import { replaceWith } from 'gatsby-core-theme/src/helpers/strings';
+
 export const contactUsForm = {
-  title: {
-    label: 'Send us a message',
-    translationKey: 'send_us_a_msg',
-  },
-  twoCol: true,
-  hasReCAPTCHA: true,
-  fields: [
-    {
-      label: 'Name',
-      id: 'name',
-      type: 'text',
-      placeholder: 'Text placeholder',
-      translationKey: 'text_translation',
-      twoCol: true,
+  ie_en: {
+    title: {
+      label: 'Send us a message',
+      translationKey: 'send_us_a_msg',
     },
-    {
-      label: 'Email Address',
-      id: 'email',
-      type: 'email',
-      placeholder: 'Email@placeholder.com',
-      translationKey: 'email_translation',
-      twoCol: true,
+    twoCol: false,
+    hasReCAPTCHA: true,
+    reCaptcha: {
+      // validations: {
+      //   label: 'Please confirm',
+      //   translationKey: 'valid_recaptcha',
+      //   icon: <IoMdCloseCircleOutline />,
+      // },
     },
-    {
-      label: 'Textarea',
-      id: 'comment',
-      type: 'textarea',
-      placeholder: 'Textarea placeholder',
-      translationKey: 'textarea_translation',
-      maxLength: '10',
-      twoCol: false,
-    },
-    {
-      id: 'tnc',
-      type: 'checkbox',
-      required: true,
-      translationKey: 'checkbox_translation',
-      twoCol: false,
-      options: [
-        {
-          id: 'tnc',
-          label:
-            '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare Privacy Policy',
-          translationKey: 'option_one_translation',
+    fields: [
+      {
+        label: 'Field Label',
+        translationKey: 'text_translation',
+        id: 'name',
+        type: 'text',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
         },
-      ],
-    },
-  ],
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a name',
+        //   translationKey: 'valid_name',
+        //   icon: <IoMdCloseCircleOutline />,
+        // },
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        placeholder: {
+          label: 'Email@placeholder.com',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'email_translation',
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a valid email address',
+        //   translationKey: 'valid_email',
+        //   icon: <IoMdCloseCircleOutline />,
+        // },
+      },
+      {
+        label: 'Field Label',
+        id: 'subject',
+        type: 'text',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'text_translation',
+        twoCol: true,
+        // validations: {
+        //   label: 'Please enter a subject',
+        //   translationKey: 'valid_subject',
+        //   icon: <IoMdCloseCircleOutline />,
+        // },
+      },
+      {
+        label: 'Field Label',
+        id: 'comment',
+        type: 'textarea',
+        placeholder: {
+          label: 'Write something',
+          translationKey: 'field_placeholder',
+        },
+        translationKey: 'textarea_translation',
+        maxLength: '1000',
+        twoCol: false,
+        // validations: {
+        //   label: 'Please enter a message',
+        //   translationKey: 'valid_message',
+        //   icon: <IoMdCloseCircleOutline />,
+        // },
+      },
+      {
+        id: 'tnc',
+        type: 'checkbox',
+        required: true,
+        translationKey: 'checkbox_translation',
+        twoCol: false,
+        options: [
+          {
+            id: 'tnc',
+            label: replaceWith(
+              '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare [keyword]',
+              '[keyword]',
+              <a href="/privacy-policy">Privacy Policy</a>
+            ),
+            translationKey: 'option_one_translation',
+          },
+        ],
+        // validations: {
+        //   label: 'Please select at least one',
+        //   translationKey: 'valid_check',
+        //   icon: <IoMdCloseCircleOutline />,
+        // },
+      },
+    ],
+  },
 };
 
 export const newsLetterForm = {
-  title: {
-    label: 'Sign up To our newsletters ',
-    translationKey: 'sign_up_newsletter',
-  },
-  description: {
-    label:
-      "If you have questions about our reviews, games or content, or just want to leave some feedback, the Irish Luck team would love to hear from you. You can contact us any time using the details below and we'll endeavour to get back to you within 48 hours.",
-    translationKey: 'contact_us_questions',
-  },
-  twoCol: false,
-  hasReCAPTCHA: false,
-  fields: [
-    {
-      label: 'Name',
-      id: 'name',
-      type: 'text',
-      placeholder: 'Text placeholder',
-      translationKey: 'text_translation',
-      twoCol: true,
-      // required: true,
+  ie_en: {
+    title: {
+      label: 'Sign up To our newsletters ',
+      translationKey: 'sign_up_newsletter',
     },
-    {
-      label: 'Email Address',
-      id: 'email',
-      type: 'email',
-      placeholder: 'Email@placeholder.com',
-      translationKey: 'email_translation',
-      twoCol: true,
-      // required: true,
+    description: {
+      label:
+        "If you have questions about our reviews, games or content, or just want to leave some feedback, the Irish Luck team would love to hear from you. You can contact us any time using the details below and we'll endeavour to get back to you within 48 hours.",
+      translationKey: 'contact_us_questions',
     },
-    {
-      label: 'Terms',
-      id: 'tnc',
-      type: 'checkbox',
-      required: true,
-      translationKey: 'checkbox_translation',
-      twoCol: false,
-      options: [
-        {
-          id: 'tnc',
-          label:
-            '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare Privacy Policy',
-          translationKey: 'option_one_translation',
-        },
-      ],
-    },
-  ],
+    twoCol: true,
+    hasReCAPTCHA: false,
+    fields: [
+      {
+        label: 'Name',
+        id: 'name',
+        type: 'text',
+        placeholder: 'Text placeholder',
+        translationKey: 'text_translation',
+        twoCol: true,
+        // required: true,
+      },
+      {
+        label: 'Email Address',
+        id: 'email',
+        type: 'email',
+        placeholder: 'Email@placeholder.com',
+        translationKey: 'email_translation',
+        twoCol: true,
+        // required: true,
+      },
+      {
+        label: 'Terms',
+        id: 'tnc',
+        type: 'checkbox',
+        required: true,
+        translationKey: 'checkbox_translation',
+        twoCol: false,
+        options: [
+          {
+            id: 'tnc',
+            label: replaceWith(
+              '+18 Lorem ipsum dolor sit amet consectetur. Egestas nibh ullamcorper venenatis vulputate. Sed elit diam at id feugiat orci ornare [keyword]',
+              '[keyword]',
+              <a href="/privacy-policy">Privacy Policy</a>
+            ),
+            translationKey: 'option_one_translation',
+          },
+        ],
+      },
+    ],
+  },
 };

package/src/gatsby-core-theme/styles/utils/variables/_main.scss

@@ -147,13 +147,13 @@
   --toplist-ranking-third-color: var(--color-15);
   --toplist-ranking-base-color: var(--color-2);
 
-  --table-background: var(--color-4);
-  --table-highlight: var(--color-16);
-  --table-border-radius: 0.75rem;
-  --table-head-background: var(--color-2);
-  --table-head-text: var(--color-4);
-  --second-table-background: var(--color-17);
-  --secondary-module-background: var(--color-42);
+  --table-background: #F4F4F4;
+  --table-highlight: #fff;
+  --table-border-radius: 1.6rem;
+  --table-head-background: #262629;
+  --table-head-text: #fff;
+  --second-table-background: #ffefe6;
+  --secondary-module-background: #f7f5fc;
 
   --pagination-with-midpoints-color: #ccc;