gatsby-matrix-theme 2.3.6 → 3.0.1

package/CHANGELOG.md

@@ -1,3 +1,70 @@
+## [3.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.0...v3.0.1) (2021-11-24)
+
+
+### Bug Fixes
+
+* core theme update and general fixes ([26fe04d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/26fe04d969b8bd0d0505e576c2422e4c8a7a2653))
+* translation fix ([d115bc0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d115bc0f7d4d032107eb62033d54fa9952a17fc8))
+
+
+* Merge branch 'general_fixes' into 'master' ([ae536eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae536eb6882679b2495bce34b557144753c7c6c9))
+
+# [3.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.8...v3.0.0) (2021-11-24)
+
+
+### Bug Fixes
+
+* accessibility fixes ([d43d834](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d43d83448879a5806c6927ec35942dee2b5c2236))
+* tab change lazyload issue ([f41e887](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f41e887022bc4779f411ff1a9fffe3e158fcc8cb))
+
+
+### Code Refactoring
+
+* fixes on accessibility ([946ec97](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/946ec9757eee7d8a77b4a5be830d860409a6b4c8))
+
+
+### Config
+
+* updated core theme version ([d7f394d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d7f394d5c312f1dc2e1a09a57a5b6f7829529158))
+
+
+* Merge branch 'tm-2478-search' into 'master' ([47022c5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/47022c50b9ee86cada8cfab92acfce25afe6216d))
+* Merge branch 'master' into tm-2478-search ([24c25cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/24c25cd408240021bc6c67b6c1e4983e222e25bf))
+* Merge branch 'tm-2595-accessibility-scores' into 'master' ([191f7ce](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/191f7cee4eedeee855e8848d20c6910ff1db1195))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.3.6",
+  "version": "3.0.1",
   "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.3",
+    "gatsby-core-theme": "^1.6.8",
     "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/article-card/index.js

@@ -32,7 +32,7 @@ const ArticleCard = ({ item }) => {
     <BaseCard item={item} cardType="article">
       {!featured && (
         <div className={styles.cardBanner}>
-          <Link to={path} className="article-card-gtm">
+          <Link to={path} className="article-card-gtm" aria-label={`${title} Link`}>
             {banner ? (
               <LazyImage src={imagePrettyUrl(banner)} alt={title} />
             ) : (

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

@@ -25,7 +25,7 @@ const GameCard = ({ item, button_text = 'play_now' }) => {
     <BaseCard item={item} isLinked cardType="game">
       {!featured && (
         <div className={styles.cardBanner}>
-          <Link to={path} className="game-card-gtm">
+          <Link to={path} className="game-card-gtm" aria-label={`${title} Link`}>
             <LazyImage src={imagePrettyUrl(banner)} alt={title} />
           </Link>
         </div>

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

@@ -3,22 +3,20 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from 'react-icons/fa';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import { imagePrettyUrl, prettyTracker, translate } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import BaseCard from '../base-card';
 import styles from './operator-card.module.scss';
 
 const OperatorCard = ({ item, featured = false, number }) => {
   const { relation, path } = item;
-  const prettyLink = prettyTracker(relation);
   const reviewPath = path || relation.path;
   const status = relation?.status;
-  const isActive = status === 'active';
   const isInactive = status === 'inactive';
   const backgroundImage = number === 1 ? 'featuredCasino' : null;
   const { translations } = useContext(Context) || {};
@@ -71,15 +69,12 @@ const OperatorCard = ({ item, featured = false, number }) => {
             </Link>
           </div>
           <div className={`${styles.cardButtons}`}>
-            {isActive && (
-              <Button
-                to={prettyLink}
-                btnText={translate(translations, 'play_now', 'Sign Up')}
-                isInternalLink={false}
-                disabled={!isActive}
-                gtmClass="operator-card-gtm btn-cta"
-              />
-            )}
+            <OperatorCta
+              tracker="main"
+              operator={relation}
+              playText={translate(translations, 'play_now', 'Play Now')}
+              gtmClass="operator-card-gtm btn-cta"
+            />
           </div>
           {relation?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
             <div className={styles.tnc}>

package/src/components/atoms/cards/payment-method-card/index.js

@@ -17,7 +17,11 @@ const PaymentMethodCard = ({ item, showTitle = true, showDesc = true }) => {
     <BaseCard item={item} cardType="payment_method">
       <div className={styles.content}>
         <div className={styles.header}>
-          <Link className={`${styles.links} payment-method-card-gtm`} to={path}>
+          <Link
+            className={`${styles.links} payment-method-card-gtm`}
+            aria-label={`${title} Link`}
+            to={path}
+          >
             <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
           </Link>
           {showTitle && (

package/src/components/atoms/cards/software-provider-card/index.js

@@ -26,7 +26,11 @@ const SoftwareProviderCard = ({
     <BaseCard item={item} cardType="software_provider">
       <div className={styles.content}>
         <div className={styles.header}>
-          <Link className={`${styles.links} software-provider-card-gtm`} to={path}>
+          <Link
+            className={`${styles.links} software-provider-card-gtm`}
+            aria-label={`${title} Link`}
+            to={path}
+          >
             <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
           </Link>
           {showTitle && (

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/social-icons/index.js

@@ -0,0 +1,56 @@
+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()}
+                aria-label={`${key} Link`}
+                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();
+});