gatsby-matrix-theme 2.3.7 → 2.3.8

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [2.3.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.7...v2.3.8) (2021-11-23)
+
+
+### Bug Fixes
+
+* contact us page template ([4960ca9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4960ca912a5eb8f0b2f9ce6aaf27a27d84cbe7be))
+* contact us template ([d85be6f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d85be6fee147dd9f7b998865df12d9f41358a01c))
+* follow us ([02699fc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/02699fc26abf94f85c844e2716728d85f0853e68))
+* merged master branch ([cb5ce66](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb5ce66f2882e9da0e3bd8c25daf85eab8aec941))
+* style issue ([8694bf7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8694bf7e92c802166d85b1da3202f6713767ac7c))
+
+
+### Config
+
+* updated core theme version ([6bf96c3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6bf96c35a1d720c19bf748e9b5ab82220f057b40))
+
+
+* Merge branch 'tm-2565-matrix-contact-us' into 'master' ([917bfc1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/917bfc1747da5a96e5b8e67db8eb43641b568ad8))
+* Merge branch 'master' into tm-2565-matrix-contact-us ([a4a682f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a4a682fc9355a9f97c68196d8feaf235f6935fca))
+
 ## [2.3.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.6...v2.3.7) (2021-11-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.6.5",
+    "gatsby-core-theme": "^1.6.6",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/author-card/author-card.module.scss

@@ -0,0 +1,44 @@
+.authorCard {
+  width: 100%;
+  background: var(--color-2);
+  border-radius: var(--border-radius);
+  @include flex-direction(row);
+  padding: 1.6rem;
+  .img {
+    width: 6rem;
+    height: 6rem;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  .txt {
+    padding-left: 1.2rem;
+    height: 6rem;
+    @include flex-direction(column);
+    align-content: center;
+    justify-content: center;
+    div {
+      line-height: 1.8rem;
+    }
+  }
+  .name {
+    font-weight: 600;
+    font-size: 1.6rem;
+    color: var(--color-33);
+    line-height: 2.4rem;
+  }
+  .position {
+    font-weight: normal;
+    font-size: 1.2rem;
+    color: var(--color-32);
+    margin: 0.4rem 0 0 0;
+  }
+  .email {
+    font-weight: 600;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    color:var(--color-51);
+  }
+}

package/src/components/atoms/author-card/author-card.stories.js

@@ -0,0 +1,47 @@
+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 { authors } from 'gatsby-core-theme/tests/factories/modules/contact-us-authors.factory';
+import AuthorCard from '.';
+
+const authorsKeys = Object.keys(authors);
+
+export default {
+  title: 'Matrix-Theme/Atoms/Author Card',
+  component: AuthorCard,
+  argTypes: {
+    author: {
+      name: 'author',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'author object data',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays authors cards',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <AuthorCard {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  author: authors[authorsKeys[0]],
+};

package/src/components/atoms/author-card/author-card.test.js

@@ -0,0 +1,29 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { authors } from 'gatsby-core-theme/tests/factories/modules/contact-us-authors.factory';
+import '@testing-library/jest-dom/extend-expect';
+import AuthorCard from '.';
+
+const authorsKeys = Object.keys(authors);
+
+describe('AuthorCard Component', () => {
+  test('render one author', () => {
+    const { container } = render(<AuthorCard author={authors[authorsKeys[0]]} />);
+    const { name } = authors[authorsKeys[0]];
+    expect(container).toBeTruthy();
+    expect(container.querySelector('.name').innerHTML).toEqual(name);
+  });
+
+  test('render each author', () => {
+    Object.keys(authors).forEach((author) => {
+      const { name, email_address } = authors[author];
+      const { container } = render(<AuthorCard author={authors[author]} />);
+      expect(container.querySelector('.name').innerHTML).toEqual(name);
+      expect(container.querySelector('a').innerHTML).toEqual(email_address);
+    });
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/author-card/index.js

@@ -0,0 +1,41 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './author-card.module.scss';
+
+const AuthorCard = ({ author }) => {
+  const { name, author_title, email_address, image } = author || {};
+
+  return (
+    <div className={styles.authorCard}>
+      <div className={styles.img}>
+        <LazyImage src={imagePrettyUrl(image)} alt={name} />
+      </div>
+      <div className={styles.txt}>
+        <div className={styles.name}>{name}</div>
+        <div className={styles.position}>{author_title}</div>
+        <a
+          className={styles.email}
+          href={`mailto:${email_address}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {email_address}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+AuthorCard.propTypes = {
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    author_title: PropTypes.string,
+    email_address: PropTypes.string,
+    image: PropTypes.string,
+  }).isRequired,
+};
+
+export default AuthorCard;

package/src/components/atoms/cards/operator-card/index.js

@@ -74,7 +74,7 @@ const OperatorCard = ({ item, featured = false, number }) => {
             {isActive && (
               <Button
                 to={prettyLink}
-                btnText={translate(translations, 'play_now', 'Sign Up')}
+                btnText={translate(translations, 'play_now', 'Play Now')}
                 isInternalLink={false}
                 disabled={!isActive}
                 gtmClass="operator-card-gtm btn-cta"

package/src/components/atoms/social-icons/index.js

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin, FaYoutube } from 'react-icons/fa';
+import PropTypes from 'prop-types';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate } from '~helpers/getters';
+import styles from './social-icons.module.scss';
+
+const SocialIcons = ({ socialIcons }) => {
+  const { translations } = useContext(Context) || {};
+  const keys = Object.keys(socialIcons);
+  const switchIcons = (icons) => {
+    switch (icons) {
+      case 'instagram':
+        return <FaInstagram />;
+      case 'facebook':
+        return <FaFacebookSquare />;
+      case 'twitter':
+        return <FaTwitter />;
+      case 'linkedin':
+        return <FaLinkedin />;
+      case 'youtube':
+        return <FaYoutube />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{translate(translations, 'follow_us', 'Follow Us')}</div>
+      <div className={styles.socialIcons}>
+        {keys.map(
+          (key) =>
+            socialIcons[key] && (
+              <a key={keygen()} href={socialIcons[key]} target="_blank" rel="noreferrer">
+                {switchIcons(key)}
+              </a>
+            )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SocialIcons;
+
+SocialIcons.propTypes = {
+  socialIcons: PropTypes.shape({}),
+};

package/src/components/atoms/social-icons/social-icons.module.scss

@@ -0,0 +1,33 @@
+.container {
+  width: 100%;
+  @include flex-direction(column);
+  .title{
+    padding-bottom: 1.6rem;
+      font-weight: 600;
+      font-size: 1.6rem;
+      line-height: 2.4rem;    
+      color: var(--color-33);
+      @include min(tablet){
+        font-weight: bold;
+        font-size: 3.6rem;
+        line-height: 4.6rem;
+    }
+  }
+  .socialIcons{
+    display: inline-flex;
+    a {
+      display: inline-block;
+      width: 4rem;
+      height: 4rem;
+      line-height: 4.7rem;
+      border-radius: 50%;
+      background: var(--color-52);
+      margin: 0 1.6rem 0 0;
+      text-align: center;
+      font-size: 2rem;
+      svg{
+          color: var(--color-16);
+      }
+    }
+  }
+}

package/src/components/atoms/social-icons/social-icons.stories.js

@@ -0,0 +1,55 @@
+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 SocialIcons from '.';
+
+const socialIcons =
+  siteSchema &&
+  (({ instagram, facebook, twitter, linkedin, youtube }) => ({
+    instagram,
+    facebook,
+    twitter,
+    linkedin,
+    youtube,
+  }))(siteSchema);
+
+export default {
+  title: 'Matrix-Theme/Atoms/Social Icons',
+  component: SocialIcons,
+  argTypes: {
+    socialIcons: {
+      name: 'social icons',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'social icons object data',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays social icons',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <SocialIcons {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  socialIcons,
+};

package/src/components/atoms/social-icons/social-icons.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import SocialIcons from '.';
+
+const socialIcons =
+  siteSchema &&
+  (({ instagram, facebook, twitter, linkedin, youtube }) => ({
+    instagram,
+    facebook,
+    twitter,
+    linkedin,
+    youtube,
+  }))(siteSchema);
+
+const socialIconsLength = Object.keys(socialIcons);
+
+describe('SocialIcons Component', () => {
+  test('render with props and social icons list', () => {
+    const { container } = render(<SocialIcons socialIcons={socialIcons} />);
+    expect(container).toBeTruthy();
+    const socialLinksWrapper = container.querySelector('.socialIcons');
+    expect(socialLinksWrapper.querySelectorAll('a')).toHaveLength(socialIconsLength.length);
+    expect(socialLinksWrapper.querySelectorAll('a')[2].innerText).toEqual(siteSchema[2]);
+    expect(socialLinksWrapper.querySelectorAll('a')[4].innerText).toEqual(siteSchema[4]);
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/pages/contact-us/contact-us.module.scss

@@ -0,0 +1,86 @@
+.pageContainer {
+  background-color: white;
+  padding: 6rem 0 0;
+  @include min(laptop) {
+    padding: 8rem 0 0;
+  }
+  .contactUsContainer {
+    max-width: var(--main-container-max);
+    margin: 0 auto;
+    @include flex-direction(column);
+    padding: 1.6rem 2.4rem;
+    background-color: transparent;
+
+    header{
+      padding-top: 0;
+      > div{
+        padding: 0;
+        a, li{
+          font-weight: normal;
+          font-size: 1.4rem;
+          line-height: 2.4rem;
+          color:var(--color-41);
+        }
+        div:last-of-type{
+          display: none;
+        }
+      }
+    }
+
+    .contactBox {
+      width: 100%;
+      padding-top: 1.2rem;
+      padding-bottom: 4.6rem;
+      border-radius: var(--border-radius);
+      @include min(tablet) {
+        @include flex-direction(row);
+        padding-bottom: 3.3rem;
+      }
+    }
+    .formWrapper {
+      flex-basis: 100%;
+      padding: 0;
+      p {
+        font-weight: normal;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        color: var(--color-38);
+        padding-top: 0.8rem;
+      }
+      h1 {
+        margin: 0;
+        font-weight: bold;
+        font-size: 3.6rem;
+        line-height: 4.6rem;
+        color: var(--color-33);
+      }
+      @include min(tablet) {
+        flex-basis: 61rem;
+        padding-right: 3.3rem;
+      }
+    }
+    .authors {
+      width: 100%;
+      @include min(desktop) {
+      }
+      ul {
+        width: 100%;
+        @include flex-direction(column);
+        @include min(tablet) {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-gap: 1.6rem;
+        }
+        @include min(desktop) {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+        li {
+          margin-bottom: 1.6rem;
+          @include min(tablet) {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/pages/contact-us/contact-us.stories.js

@@ -0,0 +1,92 @@
+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 { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';
+import { authors } from 'gatsby-core-theme/tests/factories/modules/contact-us-authors.factory';
+import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+
+// import PopupCard from '.';
+import ContactUs from '.';
+
+const page = {};
+page.authors = { ...authors };
+page.siteSchema = { ...siteSchema };
+
+export default {
+  title: 'Matrix-Theme/Pages/Contact Us',
+  component: ContactUs,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'page object',
+      siteSchema: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+      authors: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+    hasHeader: {
+      name: 'hasHeader',
+      type: { name: 'bool', required: true },
+      defaultValue: true,
+      description: 'page Header',
+    },
+    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 Contact Us page',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <ContactUs {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  page,
+  hasHeader: false,
+};

package/src/components/pages/contact-us/contact-us.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { authors } from 'gatsby-core-theme/tests/factories/modules/contact-us-authors.factory';
+import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import ContactUs from '.';
+
+describe('ContactUs Component', () => {
+  const page = {};
+  page.authors = { ...authors };
+  page.siteSchema = { ...siteSchema };
+  const authorLength = Object.keys(authors).length;
+
+  test('render with props, authors and social icons list', () => {
+    const { container } = render(<ContactUs page={page} hasHeader={false} submitUrl="submit" />);
+    expect(container).toBeTruthy();
+    const authorsListContainer = container.querySelector('ul');
+    expect(authorsListContainer.querySelectorAll('li')).toHaveLength(authorLength);
+    expect(container.querySelector('H1').innerHTML).toBe('Contact Us');
+    const socialListContainer = container.querySelector('.socialIcons');
+    expect(socialListContainer.querySelectorAll('a')).toHaveLength(5);
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/pages/contact-us/index.js

@@ -1,9 +1,91 @@
-import React from 'react';
+/* eslint-disable react/no-unescaped-entities */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import Form from 'gatsby-core-theme/src/components/organisms/form';
+import Header from '../../molecules/header';
+import AuthorCard from '../../atoms/author-card';
+import SocialIcons from '../../atoms/social-icons';
+import styles from './contact-us.module.scss';
+import { translate } from '~helpers/getters';
+
+const ContactUs = ({
+  page,
+  hasHeader = true,
+  submitUrl,
+  successMessage = 'Message sent successfully.',
+  failMessage = 'Message failed to send.',
+  validationMessage = 'Fill all the required fields.',
+}) => {
+  const { translations } = useContext(Context) || {};
+
+  const { siteSchema, authors } = page || {};
+  const authorsObjKeys = authors && Object.keys(authors);
+  const socialIcons =
+    siteSchema &&
+    (({ instagram, facebook, twitter, linkedin, youtube }) => ({
+      instagram,
+      facebook,
+      twitter,
+      linkedin,
+      youtube,
+    }))(siteSchema);
 
-const ContactUs = () => {
   return (
-    <>this component created as a template and will be overridden in each matrix site</>
+    <div className={styles.pageContainer}>
+      <div className={styles.contactUsContainer}>
+        {hasHeader && <Header section={page} />}
+        <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
+              hasButton
+              buttonLabel="Send"
+              submitUrl={submitUrl}
+              successMessage={successMessage}
+              failMessage={failMessage}
+              validationMessage={validationMessage}
+            />
+          </div>
+          <div className={styles.socialIcons}>
+            {siteSchema && <SocialIcons socialIcons={socialIcons} />}
+          </div>
+        </div>
+        <div className={styles.authors}>
+          <ul>
+            {authors &&
+              authorsObjKeys.map((key) => (
+                <li key={keygen()}>
+                  <AuthorCard author={authors[key]} />
+                </li>
+              ))}
+          </ul>
+        </div>
+      </div>
+    </div>
   );
 };
 
 export default ContactUs;
+
+ContactUs.propTypes = {
+  page: PropTypes.shape({
+    siteSchema: PropTypes.shape({}),
+    authors: PropTypes.shape({}),
+  }).isRequired,
+  hasHeader: PropTypes.bool.isRequired,
+  submitUrl: PropTypes.string,
+  successMessage: PropTypes.string,
+  failMessage: PropTypes.string,
+  validationMessage: PropTypes.string,
+};