gatsby-core-theme 1.6.5 → 1.6.9

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+## [1.6.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.8...v1.6.9) (2021-11-24)
+
+
+### Bug Fixes
+
+* scroll-to-top fix ([8f7264c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8f7264cac3d4c0b11daaf1ddf5f08539e1bc5473))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([3d4fc0d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3d4fc0d86f199761b32785f0ced0ae1c8c3c5ebb))
+
+## [1.6.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.7...v1.6.8) (2021-11-24)
+
+
+### Bug Fixes
+
+* non main trackers ([adb1c71](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/adb1c71f34e7bc552696b358ea1cbbccf7b3d2e3))
+
+## [1.6.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.6...v1.6.7) (2021-11-24)
+
+
+### Bug Fixes
+
+* added translations to the archive page and fixes for link list ([69ebe2e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/69ebe2ef1fea637a093436ab015aa26058f9fde1))
+* fix some more links without accessible name ([2e8f905](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2e8f9053369a69c67935e45490f3c5cafdebd4c1))
+* fixes on accesibility ([6689ff1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6689ff182b750ef70143bdce779889805d88be02))
+* tab change lazyload issue ([a1c30c2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1c30c2a98a23048f653cd0d56f9a17d0e7affbd))
+
+
+### Code Refactoring
+
+* fixes on accessbility ([de7482a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/de7482ae746bc60e8939ed6031a6b883f61e2954))
+
+
+### Config
+
+* changing sitename for testing purposes ([391c01c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/391c01c7668771feacb551c4ae4e022c7c90db93))
+
+
+* Merge branch 'tm-2605-translations-in-archive' into 'master' ([9be0770](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9be07704de3e011af549f76ff67e570264766dc0))
+* Merge branch 'tm-2595-accessibility-scores' into 'master' ([c63653f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c63653f1bdac5e6abfa5a49d9029b7de8cd23e33))
+* Merge branch 'tm-2478-search' into 'master' ([a4fbd15](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a4fbd1528bcf9cde03dc2097e9b79c618a0f544a))
+
+## [1.6.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.5...v1.6.6) (2021-11-23)
+
+
+### Bug Fixes
+
+* added captcha on form ([a85dcb1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a85dcb1b6aa405cab07b4e2d235e63bb189f9511))
+* general fixes ([80bab76](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/80bab7614074a770f0d97a3c3499086701fe7bda))
+
+
+* Merge branch 'tm-2565-contact-us-page' into 'master' ([0563d78](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0563d781911004f3fb370e96fcca76066405cd60))
+
 ## [1.6.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.4...v1.6.5) (2021-11-22)
 
 

package/gatsby-node.esm.js

@@ -72,7 +72,7 @@ function createArchivePage(pageObject, marketSections, prefilledModules, createP
       createPage({
         path: page.path,
         component: require.resolve(appName),
-        context: { page, marketSections, prefilledModules, siteInfo },
+        context: { page, marketSections, prefilledModules, siteInfo, translations },
       });
     });
   } else {
@@ -84,7 +84,7 @@ function createArchivePage(pageObject, marketSections, prefilledModules, createP
     createPage({
       path: page.path,
       component: require.resolve(appName),
-      context: { page, marketSections, prefilledModules, siteInfo },
+      context: { page, marketSections, prefilledModules, siteInfo, translations },
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.5",
+  "version": "1.6.9",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -57,7 +57,7 @@
     "react": "^17.0.2",
     "react-cookies": "^0.1.1",
     "react-dom": "^17.0.2",
-    "react-google-recaptcha": "^2.0.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.2.0",
     "react-lazyload": "^2.6.5"

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

@@ -20,7 +20,13 @@ const Author = ({
     <>
       {link && icon && (
         <div className={styles.authorIcon}>
-          <a href={link} target="_blank" rel="noreferrer" className="author-gtm">
+          <a
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${name} Link`}
+            className="author-gtm"
+          >
             {icon}
           </a>
         </div>

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

@@ -73,6 +73,7 @@ export default function AuthorBox({ author }) {
                     target="_blank"
                     rel="noreferrer"
                     key={`author-box-link-${filteredLinks.id}`}
+                    aria-label={`${filteredLinks.id} Link`}
                   >
                     {filteredLinks.icon}
                   </a>

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

@@ -16,6 +16,7 @@ const Logo = ({ item = {} }) => {
         title={item.name}
         target="_blank"
         rel="noopener noreferrer"
+        aria-label={`${item.name} Link`}
       >
         <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url)} />
       </a>

package/src/components/atoms/menu/items/item/index.js

@@ -55,6 +55,7 @@ export default function Item({
     >
       {item.value?.includes('http') || item.value?.includes('www') ? (
         <a
+          aria-label={`${item?.title} link`}
           href={item.value}
           title={item.title}
           rel={`noreferrer ${item.nofollow && 'nofollow'}`}
@@ -82,6 +83,7 @@ export default function Item({
           to={item.value ? item.value : '#'}
           title={item.title}
           rel={item.nofollow && 'nofollow'}
+          aria-label={`${item?.title} link`}
         >
           <ItemImage />
           {item.title}
@@ -89,6 +91,7 @@ export default function Item({
       )}
       {options.mobile.subMenuDropDownButton && isMobile && hasChildren && (
         <button
+          aria-label={`${item?.title} Dropdown`}
           type="button"
           className={`${gtmClass} btn-cta`}
           onClick={(e) => {

package/src/components/atoms/open-graph/index.js

@@ -30,6 +30,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         role="button"
         className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 602)}
+        aria-label="Facebook Link"
       >
         <FaFacebookF />
       </a>
@@ -40,6 +41,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         role="button"
         className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 255)}
+        aria-label="Twitter Link"
       >
         <FaTwitter />
       </a>

package/src/components/atoms/scroll-to-top/index.js

@@ -1,25 +1,42 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { registerScroll } from '~helpers/scroll';
 import styles from './scroll-to-top.module.scss';
 
 const ScrollToTop = ({ scrollTo = '0' }) => {
-  registerScroll();
-
-  function scrollToTop(e) {
-    e.preventDefault();
-    window.scrollTo({
-      top: scrollTo,
-      behavior: 'smooth',
-    });
-  }
+  const [showScroll, setShowScroll] = useState(false);
+
+  const checkScrollTop = () => {
+    if (!showScroll && window.pageYOffset > 400) {
+      setShowScroll(true);
+    } else if (showScroll && window.pageYOffset <= 400) {
+      setShowScroll(false);
+    }
+  };
+
+  const scrollTop = () => {
+    window.scrollTo({ top: scrollTo, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', checkScrollTop);
+
+      return () => {
+        window.removeEventListener('scroll', checkScrollTop);
+      };
+    }
+
+    return null;
+  });
+
   return (
     <button
       type="button"
       aria-label="Scroll to top"
-      onClick={(e) => scrollToTop(e)}
+      onClick={(e) => scrollTop(e)}
       className={styles.scrollToTop}
+      style={{ display: showScroll ? 'flex' : 'none' }}
     />
   );
 };

package/src/components/atoms/scroll-to-top/scroll-to-top.module.scss

@@ -1,3 +1,9 @@
+body[data-scroll='0'] {
+  .scrollToTop {
+    opacity: 0;
+  }
+}
+
 .scrollToTop {
   z-index: map-get($z-index, scroll-to-top);
   border-radius: 50%;
@@ -6,9 +12,12 @@
   width: 64px;
   height: 64px;
   text-align: center;
-  
+  bottom: 0;
+  position: fixed;
+  right: 0;
+
   &:before {
-    @include arrow(#fff, 2rem, up, false);
+    @include arrow(#000, 2rem, up, false);
     position: absolute;
     bottom: calc(50% - 1.25rem);
     left: calc(50% - 1rem);

package/src/components/molecules/link-list/index.js

@@ -18,39 +18,37 @@ const LinkList = ({
   listIcon = <></>,
   multiIcon = false,
   classes,
-  once = false,
+  disableLazyLoad = false,
   height,
   width,
   gtmClass = '',
 }) => {
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
+
+    const LinkImage = () => {
+      return disableLazyLoad ? (
+        <img src={imagePrettyUrl(item.image)} width={width} height={height} alt={item.title} />
+      ) : (
+        <LazyImage
+          src={imagePrettyUrl(item.image)}
+          alt={item.title}
+          width={width}
+          height={height}
+        />
+      );
+    };
+
     return (
       <>
         {!imageOnly && (
           <>
             {multiIcon ? icon : listIcon}
             <span>{item.title}</span>
-            {item.image && (
-              <LazyImage
-                src={imagePrettyUrl(item.image)}
-                alt={item.title}
-                once={once}
-                width={width}
-                height={height}
-              />
-            )}
+            {item.image && <LinkImage />}
           </>
         )}
-        {item.image && imageOnly && (
-          <LazyImage
-            src={imagePrettyUrl(item.image)}
-            alt={item.title}
-            once={once}
-            width={width}
-            height={height}
-          />
-        )}
+        {item.image && imageOnly && <LinkImage />}
       </>
     );
   }
@@ -66,6 +64,7 @@ const LinkList = ({
               rel={`noreferrer ${item.nofollow && 'nofollow'}`}
               target="_blank"
               className={gtmClass}
+              aria-label={`${item.title} Link`}
             >
               {renderLinkContent(item, index)}
             </a>
@@ -75,6 +74,7 @@ const LinkList = ({
               title={item.title}
               className={gtmClass}
               rel={item.nofollow && 'nofollow'}
+              aria-label={`${item.title} Link`}
             >
               {renderLinkContent(item, index)}
             </Link>
@@ -130,7 +130,7 @@ LinkList.propTypes = {
   listIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.any, PropTypes.node]),
   multiIcon: PropTypes.bool,
   classes: PropTypes.string,
-  once: PropTypes.bool,
+  disableLazyLoad: PropTypes.bool,
   width: PropTypes.number,
   height: PropTypes.number,
   gtmClass: PropTypes.string,

package/src/components/molecules/link-list/link-list.stories.js

@@ -70,8 +70,8 @@ export default {
         type: null,
       },
     },
-    once: {
-      name: 'once',
+    disableLazyLoad: {
+      name: 'disableLazyLoad',
       type: { name: 'boolean', required: false },
       defaultValue: '',
       description:

package/src/components/molecules/operator-banner/index.js

@@ -47,6 +47,7 @@ export default function OperatorBanner({
                 title={operator?.name}
                 target="_blank"
                 rel="noreferrer"
+                aria-label={`${operator?.name} Link`}
               >
                 <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} />
               </a>

package/src/components/molecules/pagination/with-midpoints.js

@@ -34,6 +34,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Go to First Page"
           >
             {firstComp}
           </Link>
@@ -47,6 +48,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(current - 1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Previous Button"
           >
             {previousComp}
           </Link>
@@ -128,6 +130,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(current + 1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Next Button"
           >
             {nextComp}
           </Link>
@@ -141,6 +144,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(total)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Go to Last"
           >
             {lastComp}
           </Link>

package/src/components/molecules/toplist/default-row/index.js

@@ -31,6 +31,7 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
         className="casinos-top-list-gtm logo-cta"
         target="_blank"
         rel="noreferrer"
+        aria-label={`${item.name} Link`}
       >
         <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
       </a>

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

@@ -1,8 +1,6 @@
-.contactForm,
-.newsLetterForm {
+.contactForm {
   width: 100%;
-  max-width: 80rem;
-  margin: 0 auto;
+  padding-top: 1.6rem;
   form {
     width: 100%;
     @include flex-direction(column);
@@ -20,16 +18,17 @@
     .formGroup {
       width: 100%;
       display: inline-block;
+      background-color: var(--color-48);
       &.name {
-        width: calc(50% - 0.4rem);
-        margin-right: 0.8rem;
+        width: calc(50% - 0.8rem);
+        margin-right: 1.6rem;
       }
       &.email {
-        width: calc(50% - 0.4rem);
+        width: calc(50% - 0.8rem);
       }
       &.message {
         width: 100%;
-        margin-bottom: 1rem;
+        margin-bottom: 1.6rem;
       }
     }
   }
@@ -51,14 +50,14 @@
 
   input,
   textarea {
-    background: #f3f2f2;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: var(--color-48);
     border-radius: 0.3rem;
     font-size: 1.4rem;
+    line-height: 2.1rem;
     padding: 1.6rem;
     width: 100%;
     max-width: 100%;
-    //   border: none;
+    border: none;
     outline: none;
     &:invalid,
     &.invalid {
@@ -78,12 +77,16 @@
     display: none;
   }
 }
+
 .formButton {
+  display: inline-block;
   width: 100%;
+  margin-bottom: .8rem;
   button {
+    margin: 0;
     width: 100%;
     text-align: center;
-    height: 4.4rem;
+    height: 4.8rem;
     &:focus {
       border: none;
       outline: none;
@@ -92,37 +95,36 @@
   @include min(tablet) {
     width: 100%;
     button {
-      width: auto;
+      min-width: 16.2rem;
     }
   }
-  @include min(desktop) {
+  @include min(tablet) {
     width: auto;
     margin-right: 1.6rem;
     display: inline-block;
   }
 }
 .formAlerts {
-  width: 100%;
+  display: inline-block;
   order: -1;
   @include min(tablet) {
+    width: calc(100% - 18rem);
     order: unset;
   }
   @include min(desktop) {
-    width: calc(100% - 12rem);
     display: inline-block;
-    float: right;
   }
   div {
     border-radius: 0.4rem;
-    border: 1px solid #000;
+    border: 1px solid var(--color-33);
     font-size: 1.4rem;
     font-weight: 400;
     width: 100%;
     height: 4.4rem;
     padding: 1rem 1.6rem;
     &.alertSuccess {
-      border-color: var(--primary-color);
-      color: var(--primary-color);
+      border-color: var(--color-44);
+      color: var(--color-44) ;
     }
     &.alertDanger {
       border-color: var(--color-11);

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-
+import ReCAPTCHA from 'react-google-recaptcha';
 import Button from '~atoms/button';
 import styles from './form.module.scss';
 
@@ -13,11 +13,13 @@ const FormComponent = ({
   hasButton = true,
   buttonLabel = 'Submit',
 }) => {
+  const recaptchaRef = useRef();
   const [state, setState] = useState({
     loading: false,
     success: false,
     failed: false,
     isValid: true,
+    isDisabled: true,
     name: '',
     email: '',
     message: '',
@@ -41,14 +43,19 @@ const FormComponent = ({
   }
   const handleSubmit = (e) => {
     e.preventDefault();
-    const { name, email, message } = state;
-    if (name === '' || email === '' || (type === 'contact' && message === '')) {
-      setState({ ...state, isValid: false });
+    const { name, email, message, isDisabled } = state;
+    if (
+      name === '' ||
+      email === '' ||
+      (type === 'contact' && message === '') ||
+      isDisabled === true
+    ) {
+      setState({ ...state, isValid: false, success: false });
       return;
     }
 
     const form = e.target;
-    setState({ ...state, loading: true, success: false, failed: false });
+    setState({ ...state, loading: true, success: false, failed: false, isDisabled: true });
     postData(submitUrl, new FormData(form))
       .then((response) => {
         // on success
@@ -58,6 +65,7 @@ const FormComponent = ({
             success: true,
             loading: false,
             isValid: true,
+            isDisabled: true,
           });
         } else {
           // on error
@@ -78,8 +86,14 @@ const FormComponent = ({
           isValid: true,
         });
       });
+    recaptchaRef.current.reset();
   };
 
+  function recaptchaOnChange(value) {
+    // eslint-disable-next-line no-unused-expressions
+    value && setState({ ...state, isDisabled: false });
+  }
+
   return (
     <div
       className={`${styles.formComponent} ${
@@ -122,6 +136,13 @@ const FormComponent = ({
           </div>
         )}
         {/* if has button  */}
+        <div className={styles.recaptcha}>
+          <ReCAPTCHA
+            ref={recaptchaRef}
+            sitekey={`${process.env.RECAPTCHA_SITE_KEY}`}
+            onChange={recaptchaOnChange}
+          />
+        </div>
         {hasButton && (
           <div className={styles.formButton}>
             <Button

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

@@ -31,6 +31,12 @@ export function getRobotOptions(options) {
   if (process.env.GATSBY_ACTIVE_ENV === 'development') array.push('noindex,follow');
   return array.join();
 }
+
+function setName(string) {
+  const [name] = string.split('.');
+  return name[0].toUpperCase() + name.slice(1);
+}
+
 const Head = ({ page = {}, siteInfo }) => {
   const pageImage = getPageImage(page) ? getPageImage(page) : imagePrettyUrl(siteInfo?.site_logo);
   // When google re-indexes dev NSA and IRL, remove lines 28, 41, 42, 43 and process.env.GATSBY_ACTIVE_ENV !== 'development' from lines 24, 25, 27, 29, 43
@@ -43,7 +49,12 @@ const Head = ({ page = {}, siteInfo }) => {
       {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
         <meta name="robots" content={page.meta_robots.join()} />
       )}
-      {page.robot_options && <meta name="robots" content={getRobotOptions(page.robot_options)} />}
+
+      {page.robot_options && !page.path.includes('/page/') && (
+        <meta name="robots" content={getRobotOptions(page.robot_options)} />
+      )}
+      {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
+
       {process.env.GATSBY_ACTIVE_ENV === 'development' && (
         <meta name="googlebot" content="noindex,follow" />
       )}
@@ -51,11 +62,12 @@ const Head = ({ page = {}, siteInfo }) => {
       {page.preconnect_links &&
         page.preconnect_links.map((link) => <link key={keygen()} rel="preconnect" href={link} />)}
       <meta name="og:title" content={page.meta_title} />
-      <meta name="og:site_name" content={siteInfo?.site_name} />
+      <meta name="og:site_name" content={siteInfo?.site_name && setName(siteInfo?.site_name)} />
       <meta name="og:description" content={page.meta_description} />
-      <meta name="og:type" content="article" />
+      <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
       <meta name="og:image" content={pageImage} />
       <meta name="og:url" content={getUrl(page.path)} />
+
       {schemaGenerator(page, pageImage).map(
         (schema) =>
           schema && (

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

@@ -62,7 +62,12 @@ const Navigation = ({
     >
       <nav className={styles.nav} style={{ justifyContent: logoPosition }} ref={navRef}>
         <NavigationProvider>
-          <Link className={`${styles.logo} main-menu-gtm logo-cta`} to="/" onClick={onClickHandler}>
+          <Link
+            className={`${styles.logo} main-menu-gtm logo-cta`}
+            aria-label="Nav Logo"
+            to="/"
+            onClick={onClickHandler}
+          >
             <img alt="logo" src={logo} width={logoWidth} height={logoHeight} />
           </Link>
           {showMenu && (

package/src/components/pages/tracker/index.js

@@ -28,7 +28,10 @@ const Tracker = ({
   for (let i = 0; i < trackerLinks.length; i += 1) {
     const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
     if (path.includes(trackerLink)) {
-      tracker = operator.links[trackerLink];
+      tracker =
+        operator.links[
+          Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())
+        ];
       break;
     }
     if (path.includes('ppc_fallback')) {

package/src/hooks/tabs/index.js

@@ -25,7 +25,7 @@ const Tabs = ({
 
   function onClickTabItem(tabId) {
     setActiveTab(tabId);
-    forceCheck();
+    setTimeout(forceCheck);
   }
 
   return (

package/src/hooks/tabs/tab/tab-list.js

@@ -79,7 +79,7 @@ TabList.propTypes = {
   activeTab: PropTypes.string,
   activeTabClass: PropTypes.string,
   alignRight: PropTypes.bool,
-  gtmClass: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default TabList;

package/src/pages/404/404.test.js

@@ -10,12 +10,12 @@ describe('404', () => {
     const { container } = render(
       <PageNotFound
         pageContext={{
-          page: { sections: {} },
+          page: { sections: {}, path: '' },
           marketSections: {},
           siteInfo: {
             site_name: '',
-            site_logo: ''
-          }
+            site_logo: '',
+          },
         }}
       />
     );

package/src/styles/utils/variables/_colors.scss

@@ -49,4 +49,5 @@
   --color-45: #83ad10;
   --color-46: #cc8006;
   --color-47: #006695;
+  --color-48: #E5E5E5;
 }

package/tests/factories/modules/contact-us-authors.factory.js

@@ -0,0 +1,59 @@
+// eslint-disable-next-line import/prefer-default-export
+export const authors = {
+  1: {
+    author_title: 'Irish Sportsbook Specialist',
+    email_address: 'siobhan.aslett@irishluck.ie',
+    facebook_profile: null,
+    image: 'siobhan-aslett.png',
+    image_alt: 'Siobhan Aslett',
+    image_object: {
+      width: '1024',
+      height: '1024',
+      url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/siobhan-aslett.png',
+      filename: 'siobhan-aslett.png',
+    },
+    instagram_profile: null,
+    linkedin_profile: 'https://ie.linkedin.com/in/siobhan-aslett-b748091ab',
+    name: 'Siobhan Aslett',
+    twitter_profile: null,
+  },
+  2: {
+    author_title: 'Online Casino Specialist',
+    email_address: 'dermot.heathcote@irishluck.ie',
+    facebook_profile: null,
+    image: 'dermot-heathcote.png',
+    image_alt: null,
+    instagram_profile: null,
+    linkedin_profile: null,
+    image_object: {
+      width: '1024',
+      height: '1024',
+      url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/dermot-heathcote.png',
+      filename: 'dermot-heathcote.png',
+    },
+    name: 'Dermot Heathcote',
+    twitter_profile: null,
+  },
+  3: {
+    additional_url: null,
+    author_title: 'Junior Copywriter',
+    email_address: 'cameron.murphy@irishluck.ie',
+    facebook_profile: null,
+    image: 'cameron-murphy.jpeg',
+    image_alt: null,
+    image_asset_id: 37728,
+    image_object: {
+      width: '1024',
+      height: '1024',
+      url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/cameron-murphy.jpeg',
+      filename: 'cameron-murphy.jpeg',
+    },
+    instagram_profile: null,
+    linkedin_profile: null,
+    name: 'Cameron Murphy',
+    personal_website: null,
+    profile_page_path: 'about-us/cameron-murphy',
+    site_id: 1,
+    twitter_profile: null,
+  },
+};

package/tests/factories/modules/site-schema.factory.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/prefer-default-export
+export const siteSchema = {
+  address: null,
+  alias_site_name: null,
+  email: null,
+  facebook: 'https://www.facebook.com/',
+  instagram: 'https://www.instagram.com/',
+  linkedin: 'https://www.linkedin.com/',
+  organization_founding_date: null,
+  owned_by: null,
+  phone_number: null,
+  site_name: null,
+  spotify: 'https://www.spotify.com/',
+  twitter: 'https://www.twitter.com/',
+  wikipedia: 'https://www.wikipedia.com/',
+  youtube: 'https://www.youtube.com/',
+};