gatsby-core-theme 25.0.14 → 26.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [26.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v25.0.14...v26.0.0) (2023-08-16)
+
+
+### Bug Fixes
+
+* fix storybook form json ([da6d479](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/da6d479186108e875c53e0160bb99a1d9d06fdd1))
+* moved contact form story to template block ([ddd4f02](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ddd4f02c9720dcca58d57a595547bc02af0990f6))
+
+
+### Code Refactoring
+
+* dynamic form with validations, storybook and test. constant form json ([d727a64](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d727a64af6466c6a92422437783232a1fa203d63))
+* remove unwanted code and add responsive css ([d091869](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d091869597e07c438c2938693a2b3aa9c7a81682))
+* temp changes ([241386b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/241386bb27caaa433fce62b29a5355384a1b770f))
+
+
+* Merge branch 'tm-3556-form' into 'master' ([325d44e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/325d44e55bd835c97490965214d7e2eb60b89877))
+* Merge branch 'master' into tm-3556-form ([8b16477](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8b164778193dd10cb663bf0069f1029e68d241ac))
+
 ## [25.0.14](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v25.0.13...v25.0.14) (2023-08-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "25.0.14",
+  "version": "26.0.0",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "directories": {

package/src/components/atoms/contact-form/contact-form.module.scss

@@ -0,0 +1,88 @@
+.contactForm {
+  @include flex-align(center, center);
+}
+
+.contactBox {
+  width: 100%;
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  gap: 2.4rem;
+  @include flex-direction(column);
+
+  @include min(tablet) {
+    @include flex-direction(row);
+  }
+
+  @include min(laptop) {
+    margin: 0;
+  }
+}
+
+.formWrapper {
+  flex-basis: 100%;
+  padding: 0;
+  gap: 2.4rem;
+  @include flex-direction(column);
+  
+  p {
+    font-weight: normal;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    color: #515156;
+  }
+
+  h1 {
+    margin: 0;
+    font-weight: bold;
+    font-size: 2.4rem;
+    line-height: 3.2rem;
+    color: #1b1b1c;
+    text-transform: capitalize;
+
+    @include min(tablet) {
+      font-size: 3.2rem;
+      line-height: 4rem;
+    }
+  }
+}
+
+.socialSection {
+  @include flex-direction(column);
+  gap: 2rem;
+  flex-grow: 1;
+  flex-basis: 40rem;
+}
+
+.emailContainer {
+  @include flex-align(flex-start, center);
+  @include flex-direction(column);
+  gap: 1.6rem;
+
+  h2 {
+    margin: 0;
+    font-weight: bold;
+    font-size: 3.2rem;
+    line-height: 4.6rem;
+    color: var(--color-33);
+  }
+
+  p {
+    @include flex-align(center, center);
+    gap: 1rem;
+  }
+
+  span {    
+    display: inline-block;
+    width: 4rem;
+    height: 4rem;
+    line-height: 4.7rem;
+    border-radius: 50%;
+    background: var(--color-52);
+    text-align: center;
+    font-size: 2rem;
+
+    svg {    
+      color: #000;
+    }
+  }
+}

package/src/components/atoms/contact-form/contact-form.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import ContactForm from '.';
+
+const page = {};
+siteSchema.support_email = 'contact@irishluck.ie';
+page.siteSchema = { ...siteSchema };
+
+export default {
+  title: 'Theme/Modules/Template Blocks/Contact Form',
+  component: ContactForm,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'page object',
+      siteSchema: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+    submitUrl: {
+      name: 'submitUrl',
+      type: { name: 'string', required: false },
+      defaultValue: null,
+      description: 'submit URL',
+    },
+    successMessage: {
+      name: 'successMessage',
+      type: { name: 'string', required: false },
+      defaultValue: 'Message sent successfully.',
+      description: 'sent message text',
+    },
+    failMessage: {
+      name: 'failMessage',
+      type: { name: 'string', required: false },
+      defaultValue: 'Message not sent.',
+      description: 'fail message text',
+    },
+    validationMessage: {
+      name: 'validationMessage',
+      type: { name: 'string', required: false },
+      defaultValue: 'Fill all the required fields.',
+      description: 'sent message info',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays authors cards',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <ContactForm {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  page,
+};

package/src/components/atoms/contact-form/contact-form.test.js

@@ -0,0 +1,40 @@
+/* eslint-disable camelcase */
+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 ContactForm from '.';
+
+const page = {};
+
+beforeEach(() => {
+  page.siteSchema = { ...siteSchema };
+});
+describe('Contact Us form Component', () => {
+  test('render contact us form and follow us titles', async () => {
+    const { container } = render(<ContactForm page={page} submitUrl="submit" />);
+
+    await waitFor(() => {
+      expect(container).toBeTruthy();
+      expect(container.querySelector('H1').innerHTML).toBe('Contact Us');
+    });
+  });
+  test('render contact us form ', async () => {
+    const { container } = render(<ContactForm page={page} submitUrl="submit" />);
+
+    await waitFor(() => {
+      expect(container.querySelector('.contactForm')).toBeTruthy();
+      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(3);
+      expect(
+        container.querySelector('.contactForm').querySelectorAll('input[type="text"]')
+      ).toHaveLength(1);
+      expect(
+        container.querySelector('.contactForm').querySelectorAll('input[type="email"]')
+      ).toHaveLength(1);
+      expect(container.querySelector('.contactForm').querySelectorAll('textarea')).toHaveLength(1);
+    });
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/contact-form/index.js

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Form from 'gatsby-core-theme/src/components/organisms/form';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { contactUsForm } from '../../../constants/forms';
+import styles from './contact-form.module.scss';
+
+const ContactForm = ({
+  submitUrl,
+  successMessage = 'Message sent successfully.',
+  failMessage = 'Message failed to send.',
+  validationMessage = 'Fill all the required fields.',
+}) => {
+  const { translations } = useContext(Context) || {};
+
+  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>
+          <Form
+            formOptions={contactUsForm}
+            type="contact"
+            hasButton
+            buttonLabel={translate(translations, 'send_msg', 'Send Message')}
+            submitUrl={submitUrl}
+            successMessage={successMessage}
+            failMessage={failMessage}
+            validationMessage={validationMessage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactForm;
+
+ContactForm.propTypes = {
+  page: PropTypes.shape({}).isRequired,
+  submitUrl: PropTypes.string,
+  successMessage: PropTypes.string,
+  failMessage: PropTypes.string,
+  validationMessage: PropTypes.string,
+};

package/src/components/atoms/operator-cta-button/operator-cta-button.module.scss

@@ -1,31 +1,3 @@
-@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: $color1;
-    color: $textColor;
-    padding: 0.9rem 3rem;
-    font-weight: 700;
-    font-size: 1.8rem;
-    border-radius: var(--border-radius);
-
-    >svg {
-        flex: none;
-        margin-left: .8rem;
-    }
-
-    &:hover {
-        background-color: $color2;
-        color: $textColor;
-    }
-
-    &:active {
-        background-color: $color3;
-        color: $textColor;
-    }
-}
-
 .primary {
     @include buttonsColor(var(--primary-button-color, #6E33E5), var(--primary-button-color-hover, #776ABA), var(--primary-button-color-active, #998FCB), var(--primary-button-color-text, #FFFFFF));
     white-space: nowrap;

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

@@ -25,6 +25,8 @@ const Modules = ({ module, page, pageContext }) => {
       case 'cards':
       case 'cards_v2':
         return loadable(() => import('~organisms/cards'));
+      case 'contact_form':
+        return loadable(() => import('~atoms/contact-form'));
       case 'pros_and_cons':
         return loadable(() => import('~molecules/pros-cons'));
       case 'faq':

package/src/components/organisms/form/form.module.scss

@@ -1,150 +1,223 @@
-.contactForm {
-  width: 100%;
-  padding-top: 1.6rem;
-  form {
-    width: 100%;
-    @include flex-direction(column);
-    @include min(tablet) {
-      display: block;
-    }
+:global {
+  .contact_form {
     > div {
-      margin-bottom: 1.1rem;
+      margin: 3.2rem auto;
+
       @include min(tablet) {
-        margin-bottom: 1.6rem;
+        margin: 4rem auto;
       }
     }
   }
+}
+
+.formComponent {
+  padding: 2.4rem;
+  width: 100%;
+  box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
+  border-radius: 16px;
+  background: #f4f4f4;
+  @include flex-direction(column);
+  
   @include min(tablet) {
-    .formGroup {
-      width: 100%;
-      display: inline-block;
-      background-color: var(--color-48);
-      &.name {
-        width: calc(50% - 0.8rem);
-        margin-right: 1.6rem;
-      }
-      &.email {
-        width: calc(50% - 0.8rem);
-      }
-      &.message {
-        width: 100%;
-        margin-bottom: 1.6rem;
-      }
-    }
+    padding: 2.4rem;
   }
-  @include min(desktop) {
-    .formGroup {
-      width: 100%;
-      &.name {
-        width: calc(50% - 0.8rem);
-        margin-right: 1.6rem;
-      }
-      &.email {
-        width: calc(50% - 0.8rem);
-      }
-      &.message {
-        width: 100%;
-      }
-    }
+
+  h2 {
+    font-size: 2rem;
+    line-height: 2.8rem;
+    font-weight: 700;
+    text-transform: capitalize; 
+    margin: 0;
+
+    @include min(tablet) {
+      font-size: 2.8rem;
+      line-height: 3.6rem;
+    } 
+  }
+
+  form {
+    width: 100%;
   }
 
   input,
-  textarea {
-    background: var(--color-48);
-    border-radius: 0.3rem;
+  textarea,
+  select {
+    background: var(--color-4);
     font-size: 1.4rem;
     line-height: 2.1rem;
     padding: 1.6rem;
     width: 100%;
     max-width: 100%;
-    border: none;
     outline: none;
+    border-radius: 0.8rem;
+    border: 1.5px solid #F4F4F4;
+
+
     &:invalid,
     &.invalid {
       border: 1px solid var(--color-39);
       color: var(--color-39);
     }
   }
+
   input {
     height: 4.4rem;
   }
+
+  input[type="file"] {
+    height: auto;
+  }
+
+  input[type="color"],
+  input[type="range"] {
+    padding: 0;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: auto;
+    height: auto;
+  }
+
   textarea {
     height: 12rem;
     display: block;
     resize: vertical;
   }
+
   label {
-    display: none;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.7rem;
+    color: #262629;
+
+    span {
+      color: red;
+    }
+
+    &:invalid,
+    &.invalid {
+      color: var(--color-39);
+    }
+  }
+
+  button {
+    @include buttonsColor(var(--primary-button-color, #6E33E5), var(--primary-button-color-hover, #776ABA), var(--primary-button-color-active, #998FCB), var(--primary-button-color-text, #FFFFFF));   
+    line-height: 2.7rem;
+    text-transform: capitalize;
+    gap: 0.4rem;
+    padding: 1.6rem 2.4rem;
+    border-radius: 100px;
   }
 }
 
-.formButton {
-  display: inline-block;
+.formGroup {
   width: 100%;
-  margin-bottom: .8rem;
-  button {
-    margin: 0;
-    width: 100%;
-    text-align: center;
-    height: 4.8rem;
-    &:focus {
-      border: none;
-      outline: none;
-    }
+  @include flex-direction(column);
+  gap: 0.4rem;
+}
+
+.radioGroup,
+.checkboxGroup,
+.textareaGroup {
+  @include flex-direction(column);
+
+  > label {
+    @include flex-align(center, flex-start);
+    gap: 0.8rem;
+    font-weight: normal;
   }
-  @include min(tablet) {
-    width: 100%;
-    button {
-      min-width: 16.2rem;
-    }
+}
+
+.textareaGroup {
+  @include flex-align(flex-end, flex-start);
+
+  > span {
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.2rem;
   }
-  @include min(tablet) {
-    width: auto;
-    margin-right: 1.6rem;
-    display: inline-block;
+}
+
+.rangeValues {
+  @include flex-align(center, space-between);
+   
+  .invalid {
+    color: var(--color-39);
   }
 }
+
+
 .formAlerts {
   display: inline-block;
+  grid-column: span 2 / span 2;
   order: -1;
+
   @include min(tablet) {
     width: calc(100% - 18rem);
     order: unset;
   }
+
   @include min(desktop) {
     display: inline-block;
   }
+
   div {
     border-radius: 0.4rem;
-    border: 1px solid var(--color-33);
+    border-width: 1px;
+    border-style: solid;
     font-size: 1.4rem;
     font-weight: 400;
     width: 100%;
     height: 4.4rem;
     padding: 1rem 1.6rem;
-    &.alertSuccess {
-      border-color: var(--color-44);
-      color: var(--color-44) ;
-    }
-    &.alertDanger {
-      border-color: var(--color-11);
-      color: var(--color-11);
-    }
-    &.alertWarning {
-      border-color: var(--color-39);
-      color: var(--color-39);
-    }
   }
 }
-.newsLetterForm {
-  max-width: 40rem;
-  .formGroup {
+
+
+.alertSuccess {
+  border-color: var(--color-44);
+  color: var(--color-44) ;
+}
+
+.alertDanger {
+  border-color: var(--color-11);
+  color: var(--color-11);
+}
+
+.alertWarning {
+  border-color: var(--color-39);
+  color: var(--color-39);
+}
+
+.twoCol {
+  @include flex-direction(column);
+  gap: 2.4rem;
+
+  @include min(tablet) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 4.8rem;
+    row-gap: 1.6rem;
+  }
+
+  button {
     width: 100%;
-    &.name {
-      width: 100%;
-    }
-    &.email {
-      width: 100%;
-    }
   }
 }
+
+.singleCol {
+  @include flex-direction(column);
+  gap: 2.4rem;
+}
+
+.fullWidth {
+  grid-column: span 2 / span 2;
+}
+
+.formButton {
+  grid-column: span 2 / span 2;
+  button {
+    width: auto;
+  }
+}

package/src/components/organisms/form/form.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {
   Title,
   Description,
@@ -6,6 +7,7 @@ import {
   PRIMARY_STORY,
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
+import { contactUsForm } from '../../../constants/forms';
 
 import Form from '.';
 
@@ -13,47 +15,13 @@ export default {
   title: 'Theme/Organisms/Form',
   component: Form,
   argTypes: {
-    type: {
-      name: 'type',
-      type: { name: 'string', required: true },
-      defaultValue: 'contact',
-      description: 'Type of the form.',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'contact' },
-      },
-      control: {
-        type: 'inline-radio',
-        options: ['contact', 'newsletter'],
-      },
-    },
-    hasButton: {
-      name: 'hasButton',
-      type: { name: 'boolean', required: false },
-      defaultValue: true,
-      description: 'From has or has not a submit button.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-    },
-    buttonLabel: {
-      name: 'buttonLabel',
-      type: { name: 'string', required: false },
-      defaultValue: 'Submit',
-      description: `The submit button's text.`,
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Submit' },
-      },
-    },
-    submitUrl: {
-      name: 'submitUrl',
-      type: { name: 'string', required: true },
+    formOptions: {
+      name: 'formOptions',
+      type: { name: 'object', required: true },
       defaultValue: '',
-      description: `The form data will send to this URL on submit.`,
-      table: {
-        type: { summary: 'string' },
+      description: 'Form Options object from contstants',
+      siteSchema: {
+        type: { summary: 'object' },
         defaultValue: { summary: '' },
       },
     },
@@ -87,6 +55,56 @@ export default {
         defaultValue: { summary: 'Fill all the required fields' },
       },
     },
+    submitUrl: {
+      name: 'submitUrl',
+      type: { name: 'string', required: true },
+      defaultValue: '',
+      description: `The form data will send to this URL on submit.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    hasButton: {
+      name: 'hasButton',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'From has or has not a submit button.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    buttonLabel: {
+      name: 'buttonLabel',
+      type: { name: 'string', required: false },
+      defaultValue: 'Submit',
+      description: `The submit button's text.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Submit' },
+      },
+    },
+    disabled: {
+      name: 'disabled',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Form disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    showLabels: {
+      name: 'showLabels',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show field lables or hide',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -109,11 +127,5 @@ const Template = (args) => <Form {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  type: 'contact',
-  successMessage: 'Form has sent successfully',
-  failMessage: 'Form has not sent, Got some error',
-  validationMessage: 'Fill all the required fields.',
-  submitUrl: 'https://your-end-point.com',
-  hasButton: true,
-  buttonLabel: 'Submit',
+  formOptions: contactUsForm,
 };

package/src/components/organisms/form/form.test.js

@@ -3,13 +3,19 @@ import ReactDOM from 'react-dom';
 import { render, cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { act } from 'react-dom/test-utils';
+import { contactUsForm, newsLetterForm } from '../../../constants/forms';
 
 import Form from '.';
 
 describe('Form Component', () => {
   test('render contact form ', () => {
     const { container } = render(
-      <Form hasButton type="contact" submitUrl="https://submit-form.com" />
+      <Form
+        formOptions={contactUsForm}
+        hasButton
+        type="contact"
+        submitUrl="https://submit-form.com"
+      />
     );
     expect(container.querySelector('input[type="text"]')).toBeTruthy();
     expect(container.querySelector('input[type="email"]')).toBeTruthy();
@@ -18,7 +24,12 @@ describe('Form Component', () => {
   });
   test('render newsletter form ', () => {
     const { container } = render(
-      <Form hasButton type="newsletter" submitUrl="https://submit-form.com" />
+      <Form
+        formOptions={newsLetterForm}
+        hasButton
+        type="newsletter"
+        submitUrl="https://submit-form.com"
+      />
     );
     expect(container.querySelector('input[type="text"]')).toBeTruthy();
     expect(container.querySelector('input[type="email"]')).toBeTruthy();
@@ -27,7 +38,14 @@ describe('Form Component', () => {
   });
 
   test('on change', async () => {
-    render(<Form hasButton type="contact" submitUrl="https://submit-form.com" />);
+    render(
+      <Form
+        formOptions={contactUsForm}
+        hasButton
+        type="contact"
+        submitUrl="https://submit-form.com"
+      />
+    );
     const input = document.querySelector('input[type="text"]');
     const messageInput = document.querySelector('textarea');
 
@@ -43,7 +61,12 @@ describe('Form Component', () => {
     const container = document.createElement('div');
     act(() => {
       ReactDOM.render(
-        <Form hasButton type="contact" submitUrl="https://submit-form.com" />,
+        <Form
+          formOptions={contactUsForm}
+          hasButton
+          type="contact"
+          submitUrl="https://submit-form.com"
+        />,
         container
       );
     });
@@ -58,7 +81,13 @@ describe('Form Component', () => {
 
   test('handle submit with filled fields', async () => {
     const { container } = render(
-      <Form hasButton disabled={false} type="newsletter" submitUrl="https://submit-form.com" />
+      <Form
+        formOptions={newsLetterForm}
+        hasButton
+        disabled={false}
+        type="newsletter"
+        submitUrl="https://submit-form.com"
+      />
     );
     const nameInput = document.querySelector('input[type="text"]');
     const emailInput = document.querySelector('input[type="email"]');

package/src/components/organisms/form/index.js

@@ -1,11 +1,14 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import ReCAPTCHA from 'react-google-recaptcha';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Button from '~atoms/button';
 import styles from './form.module.scss';
 
 const FormComponent = ({
-  type = 'contact',
+  formOptions = {},
   successMessage = 'Form has sent successfully',
   failMessage = 'Form has not sent, Got some error',
   validationMessage = 'Fill all the required fields.',
@@ -13,8 +16,9 @@ const FormComponent = ({
   hasButton = true,
   buttonLabel = 'Submit',
   disabled = true,
-  isPrimaryButton = true,
+  showLabels = true,
 }) => {
+  const { translations } = useContext(Context) || {};
   const recaptchaRef = useRef();
   const [state, setState] = useState({
     loading: false,
@@ -26,10 +30,14 @@ const FormComponent = ({
     email: '',
     message: '',
   });
+  const values = formOptions.fields.map((field) => ({
+    [field.id]: field.value ? field.value : '',
+  }));
+  const [elements, setElements] = useState(Object.assign({}, ...values));
 
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setState({ ...state, [name]: value, isValid: true, success: false, failed: false });
+  const handleChange = (name, value) => {
+    setState({ ...state, [name]: value });
+    setElements({ ...elements, [name]: value });
   };
 
   async function postData(url = '', data = {}) {
@@ -43,21 +51,19 @@ const FormComponent = ({
       body: JSON.stringify(Object.fromEntries(data)),
     });
   }
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    const { name, email, message, isDisabled } = state;
+    // check if all required fields are empty
+    const inValid = Object.values(elements).some((value) => value === '');
 
-    if (
-      name === '' ||
-      email === '' ||
-      (type === 'contact' && message === '') ||
-      isDisabled === true
-    ) {
+    if (inValid) {
       setState({ ...state, isValid: false, success: false });
       return;
     }
 
+    // form is valid
     const form = e.target;
     setState({ ...state, loading: true, success: false, failed: false, isDisabled: true });
     postData(submitUrl, new FormData(form))
@@ -81,7 +87,7 @@ const FormComponent = ({
           });
         }
       })
-      .catch(() => {
+      .catch((err) => {
         // on error
         setState({
           ...state,
@@ -98,56 +104,176 @@ const FormComponent = ({
     value && setState({ ...state, isDisabled: false });
   }
 
-  return (
-    <div
-      className={`${styles.formComponent || ''} ${
-        type === 'contact' ? styles.contactForm : styles.newsLetterForm
-      }`}
-    >
-      <form onSubmit={(e) => handleSubmit(e)} action={submitUrl} target="_self">
-        <div className={`${styles.formGroup || ''} ${styles.name || ''}`}>
-          <input
-            name="name"
-            type="text"
-            value={state.name}
-            placeholder="Name"
-            onChange={(e) => handleChange(e)}
-            disabled={state.loading}
-            className={`${!state.isValid && state.name === '' && styles.invalid}`}
-          />
-        </div>
-        <div className={`${styles.formGroup || ''} ${styles.email || ''}`}>
+  const getField = (field) => {
+    const { type, id, translationKey, label, ...props } = field;
+
+    switch (type) {
+      case 'textarea':
+        return (
+          <div className={styles.textareaGroup}>
+            <textarea
+              name={id}
+              id={id}
+              {...props}
+              value={elements[id]}
+              onChange={(e) => handleChange(e.target.name, e.target.value)}
+              className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+            />
+            {field.maxLength && <span>{`${elements[id].length}/${field.maxLength}`}</span>}
+          </div>
+        );
+      case 'checkbox':
+        return (
+          <div className={styles.checkboxGroup}>
+            {field.options.map((option) => (
+              <label
+                key={option.id}
+                htmlFor={option.id}
+                className={`${!state.isValid && !elements[option.id].length && styles.invalid}`}
+              >
+                <input
+                  id={option.id}
+                  name={option.id}
+                  type={type}
+                  checked={elements[option.id] === 'true'}
+                  onChange={(e) => handleChange(e.target.name, e.target.checked.toString())}
+                />
+                {translate(translations, option.translationKey, option.label)}
+              </label>
+            ))}
+          </div>
+        );
+      case 'radio':
+        return (
+          <div className={styles.radioGroup}>
+            {field.options.map((option) => (
+              <label
+                key={option.id}
+                htmlFor={option.id}
+                className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+              >
+                <input
+                  id={option.id}
+                  name={id}
+                  type={type}
+                  checked={elements[id] === option.label}
+                  onChange={(e) => handleChange(e.target.name, option.label)}
+                />{' '}
+                {translate(translations, option.translationKey, option.label)}
+              </label>
+            ))}
+          </div>
+        );
+      case 'select':
+        return (
+          <select
+            id={id}
+            aria-label={id}
+            name={id}
+            defaultValue={elements[id]}
+            onChange={(e) => handleChange(e.target.name, e.target.value)}
+            className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
+          >
+            {field.showDefault && (
+              <option value="">
+                {translate(translations, field.defaultTranslationKey, field.defaultLabel)}
+              </option>
+            )}
+            {field.options.map((option) => (
+              <option key={option.id} value={option.label}>
+                {translate(translations, option.translationKey, option.label)}
+              </option>
+            ))}
+          </select>
+        );
+      case 'range':
+        return (
+          <div className={styles.radioGroup}>
+            <input
+              name={id}
+              id={id}
+              type={type}
+              aria-describedby={id}
+              {...props}
+              value={elements[id]}
+              onChange={(e) => handleChange(e.target.name, e.target.value)}
+            />
+            <div className={styles.rangeValues}>
+              <span>{field.min}</span>
+              <span className={`${!state.isValid && elements[id] === '' && styles.invalid}`}>
+                {elements[id] || 'Selected Value'}
+              </span>
+              <span>{field.max}</span>
+            </div>
+          </div>
+        );
+      default:
+        return (
           <input
-            name="email"
-            type="email"
-            value={state.email}
-            placeholder="Email Address"
-            onChange={(e) => handleChange(e)}
-            disabled={state.loading}
-            className={`${!state.isValid && state.email === '' && styles.invalid}`}
+            name={id}
+            id={id}
+            type={type}
+            aria-describedby={id}
+            {...props}
+            value={elements[id]}
+            onChange={(e) => handleChange(e.target.name, e.target.value)}
+            className={`${!state.isValid && elements[id] === '' && styles.invalid}`}
           />
-        </div>
-        {type === 'contact' && (
-          <div className={`${styles.formGroup || ''} ${styles.message || ''}`}>
-            <textarea
-              name="message"
-              value={state.message}
-              placeholder="Message"
-              onChange={(e) => handleChange(e)}
-              disabled={state.loading}
-              className={`${!state.isValid && state.message === '' && styles.invalid}`}
+        );
+    }
+  };
+
+  return (
+    <div className={`${styles.formComponent || ''} `}>
+      {formOptions.title && (
+        <h2>
+          {translate(translations, formOptions.title?.translationKey, formOptions.title?.label)}
+        </h2>
+      )}
+      {formOptions.description && (
+        <p>
+          {translate(
+            translations,
+            formOptions.description?.translationKey,
+            formOptions.description?.label
+          )}
+        </p>
+      )}
+      <form
+        onSubmit={(e) => handleSubmit(e)}
+        action={submitUrl}
+        className={formOptions.twoCol ? styles.twoCol || '' : styles.singleCol || ''}
+        target="_self"
+      >
+        {formOptions.fields &&
+          formOptions.fields.map((field) => {
+            const { id, translationKey, label } = field;
+
+            return (
+              <div
+                key={id}
+                className={`${styles.formGroup || ''} ${styles[id] ? styles[id] : ''} ${
+                  (!field.twoCol && styles.fullWidth) || ''
+                }`}
+              >
+                {showLabels && label && (
+                  <label htmlFor={id}>{translate(translations, translationKey, label)}</label>
+                )}
+                {elements && getField(field)}
+              </div>
+            );
+          })}
+
+        {formOptions.hasReCAPTCHA && (
+          <div className={styles.recaptcha || ''}>
+            <ReCAPTCHA
+              ref={recaptchaRef}
+              sitekey={`${process.env.RECAPTCHA_SITE_KEY}`}
+              // eslint-disable-next-line react/jsx-no-bind
+              onChange={recaptchaOnChange}
             />
           </div>
         )}
-        {/* if has button  */}
-        <div className={styles.recaptcha || ''}>
-          <ReCAPTCHA
-            ref={recaptchaRef}
-            sitekey={`${process.env.RECAPTCHA_SITE_KEY}`}
-            // eslint-disable-next-line react/jsx-no-bind
-            onChange={recaptchaOnChange}
-          />
-        </div>
         {hasButton && (
           <div className={styles.formButton || ''}>
             <Button
@@ -155,22 +281,25 @@ const FormComponent = ({
               btnText={state.loading ? 'sending...' : buttonLabel}
               disabled={state.loading}
               gtmClass="form-gtm btn-cta"
-              primaryColor={isPrimaryButton}
+              noStyle
+              icon={<FaArrowRight fontSize={20} />}
             />
           </div>
         )}
-        <div className={styles.formAlerts || ''}>
-          {state.success && <div className={styles.alertSuccess || ''}>{successMessage}</div>}
-          {state.failed && <div className={styles.alertDanger || ''}>{failMessage}</div>}
-          {!state.isValid && <div className={styles.alertWarning || ''}>{validationMessage}</div>}
-        </div>
+        {(state.success || state.failed || state.isValid) && (
+          <div className={styles.formAlerts || ''}>
+            {state.success && <div className={styles.alertSuccess || ''}>{successMessage}</div>}
+            {state.failed && <div className={styles.alertDanger || ''}>{failMessage}</div>}
+            {!state.isValid && <div className={styles.alertWarning || ''}>{validationMessage}</div>}
+          </div>
+        )}
       </form>
     </div>
   );
 };
 
 FormComponent.propTypes = {
-  type: PropTypes.oneOf(['contact', 'newsletter']).isRequired,
+  formOptions: PropTypes.shape({}),
   successMessage: PropTypes.string,
   failMessage: PropTypes.string,
   validationMessage: PropTypes.string,
@@ -178,6 +307,6 @@ FormComponent.propTypes = {
   hasButton: PropTypes.bool,
   buttonLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  isPrimaryButton: PropTypes.bool,
+  showLabels: PropTypes.bool,
 };
 export default FormComponent;

package/src/constants/forms.js

@@ -0,0 +1,100 @@
+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,
+    },
+    {
+      label: 'Email Address',
+      id: 'email',
+      type: 'email',
+      placeholder: 'Email@placeholder.com',
+      translationKey: 'email_translation',
+      twoCol: true,
+    },
+    {
+      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',
+        },
+      ],
+    },
+  ],
+};
+
+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: 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:
+            '+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',
+        },
+      ],
+    },
+  ],
+};

package/src/styles/utils/_mixins.scss

@@ -143,4 +143,32 @@
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
   }
+}
+
+@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: $color1;
+  color: $textColor;
+  padding: 0.9rem 3rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  border-radius: var(--border-radius);
+
+  >svg {
+      flex: none;
+      margin-left: .8rem;
+  }
+
+  &:hover {
+      background-color: $color2;
+      color: $textColor;
+  }
+
+  &:active {
+      background-color: $color3;
+      color: $textColor;
+  }
 }