gatsby-matrix-theme 2.3.4 → 2.3.8

package/CHANGELOG.md

@@ -1,3 +1,58 @@
+## [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)
+
+
+### Bug Fixes
+
+* correction to typo ([b50be3c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b50be3c5e42f2560f5850f6b9b8e624d56790fe0))
+* force load lazy images on tab change ([fa06336](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa06336730891bed815cbf1867d4ca870d257fbb))
+* general fixes ([5aef217](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5aef217afd001c09c8baa51ce75dc087a28f8294))
+* highlight search query on auto complete ([2aee5da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2aee5da1c4e5b4d790ee1a1c5a687f5f790d244b))
+
+
+* Merge branch 'tm-2478-search' into 'master' ([a86ac37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a86ac379825d5599b066d9f13b081c8ff7b8f4b2))
+
+## [2.3.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.5...v2.3.6) (2021-11-18)
+
+
+### Bug Fixes
+
+* storybook pipeline ([29e7f34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29e7f34ca9b04a011c2784d9a7e8c930fd900cfa))
+
+
+### Config
+
+* updated core theme version ([0552c2a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0552c2a93a4cf6716d2bd7be05e7b9f9ce58c5f5))
+
+## [2.3.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.4...v2.3.5) (2021-11-16)
+
+
+### Bug Fixes
+
+* menu and sitemap fixes ([1ab7026](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ab70262191e5129630e2cdd9d802a837f5b9f7c))
+
+
+* Merge branch 'tm-2593-2587-menu-sitemap-fixes' into 'master' ([e79806b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e79806b8abaaadc9f3caa2ca9bc0ff755cd75ce7))
+
 ## [2.3.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.3...v2.3.4) (2021-11-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.3.4",
+  "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.0",
+    "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/search/autocomplete/article.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Article = ({ item = {}, Button = <GrFormNext /> }) => (
+const Article = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="article-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ Article.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Article;

package/src/components/atoms/search/autocomplete/game.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Game = ({ item = {}, Button = <GrFormNext /> }) => (
+const Game = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="game-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ Game.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Game;

package/src/components/atoms/search/autocomplete/operator.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Operator = ({ item = {}, Button = <GrFormNext /> }) => (
+const Operator = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={`/${item.path}`} className="operator-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -16,6 +22,7 @@ Operator.propTypes = {
     path: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Operator;

package/src/components/atoms/search/autocomplete/payment_methods.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const PaymentMethods = ({ item = {}, Button = <GrFormNext /> }) => (
+const PaymentMethods = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="payment-method-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ PaymentMethods.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default PaymentMethods;

package/src/components/atoms/search/autocomplete/software_provider.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const SoftwareProvider = ({ item = {}, Button = <GrFormNext /> }) => (
+const SoftwareProvider = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="software-provider-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ SoftwareProvider.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default SoftwareProvider;

package/src/components/atoms/sitemap/index.js

@@ -1,11 +1,13 @@
 /* eslint-disable array-callback-return */
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { BiSitemap } from 'react-icons/bi';
 import { IoMdLink } from 'react-icons/io';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Masonry from 'react-masonry-css';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './sitemap.module.scss';
 import Link from '~hooks/link';
 
@@ -15,10 +17,15 @@ const Sitemap = ({
   templateIcon = <BiSitemap />,
   linkIcon = <IoMdLink />,
 }) => {
+  const { translations } = useContext(Context) || {};
   const market = Object.keys(sitemapData)[0];
 
   const getTemplateName = (template) => {
-    const templateName = templates[template].short_name.replace('_', ' ');
+    const templateName = translate(
+      translations,
+      templates[template].short_name,
+      templates[template].short_name.replace('_', ' ')
+    );
     const templatePages = sitemapData[market][template];
     const templatePagesCount = templatePages && templatePages.length;
 

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;
+          }
+        }
+      }
+    }
+  }
+}