gatsby-matrix-theme 2.1.2 → 2.2.0

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

@@ -9,7 +9,6 @@ import Row from '../../molecules/toplist/row/variant-one';
 
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
   const template = page?.template;
-  const translations = page?.translations;
   const ComparisonTable =
     module?.style === 'comparison_table' ? loadable(() => import('./comparison-table')) : null;
 
@@ -21,14 +20,13 @@ const TopList = ({ module, toplistHeading, CustomRow, page }) => {
       page={page}
     />
   ) : (
-    <Tabs translations={page.translations} title={module.title} module={module} tabsAlign="right">
+    <Tabs title={module.title} module={module} tabsAlign="right" gtmClass="toplist-tabs-menu-gtm">
       {module.items.map((toplist) => (
         <div label={toplist.title} key={keygen()}>
           {toplistHeading}
           <List
             toplist={toplist}
             CustomRow={Row}
-            translations={translations}
             hasLoadMoreButton={toplist.show_load_more}
             initItemsCount={toplist.num_items_initial_load}
             loadItemsCount={toplist.num_items_load_more}
@@ -48,7 +46,7 @@ TopList.propTypes = {
   }),
   toplistHeading: PropTypes.element,
   CustomRow: PropTypes.func,
-  page: PropTypes.shape({ template: PropTypes.string, translations: PropTypes.shape({}) }),
+  page: PropTypes.shape({ template: PropTypes.string }),
 };
 
 export default TopList;

package/src/components/organisms/toplist/list/index.js

@@ -1,9 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
-import React, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { forceCheck } from 'react-lazyload';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import keygen from '~helpers/keygen';
 import Row from '~molecules/toplist/default-row';
 import Button from '~atoms/button';
@@ -16,13 +17,12 @@ export default function List({
   initItemsCount,
   loadItemsCount,
   pageTemplate,
-  translations,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
 
   const isPPCPage = pageTemplate && pageTemplate.toLowerCase() === 'ppc';
-
+  const { translations } = useContext(Context) || {};
   const elRefs = useRef([]);
 
   const addToRefs = (el, index) => {
@@ -66,7 +66,6 @@ export default function List({
                 tracker={toplist.tracker}
                 oneliner={toplist.one_liner}
                 isPPC={isPPCPage}
-                translations={translations}
                 index={index}
               />
             ) : (
@@ -84,6 +83,7 @@ export default function List({
             onClick={handleClick}
             invertColors
             primaryColor={false}
+            gtmClass="toplist-loadmore-btn-gtm btn-cta"
           />
         </div>
       )}
@@ -106,5 +106,4 @@ List.propTypes = {
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
-  translations: PropTypes.shape({}),
 };

package/src/gatsby-core-theme/components/atoms/module-title/index.js

@@ -1,17 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaAngleRight } from 'react-icons/fa';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import styles from './module-title.module.scss';
 import Link from '~hooks/link';
 
-const ModuleTitle = ({
-  module,
-  viewMoreIcon = <FaAngleRight />,
-  pageContext = null,
-  translations,
-}) => {
+const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = null }) => {
   const tabsToplist = module?.items?.length > 1 && module?.name === 'top_list';
   const CustomTag = `${module.module_title_tag}`;
   const monthNames = [
@@ -28,6 +24,7 @@ const ModuleTitle = ({
     'November',
     'December',
   ];
+  const { translations } = useContext(Context) || {};
   const d = new Date();
   const year = d.getFullYear();
   const month = monthNames[d.getMonth()];
@@ -91,7 +88,7 @@ const ModuleTitle = ({
           </span>
 
           {module.link_label && (
-            <Link to={module.link_value} className={styles.viewMore}>
+            <Link to={module.link_value} className={`${styles.viewMore} module-title-gtm`}>
               {module.link_label}
               {viewMoreIcon}
             </Link>

package/src/gatsby-core-theme/components/atoms/not-found/index.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Image from 'gatsby-core-theme/src/hooks/gatsby-img';
+
+import styles from './not-found.module.scss';
+
+const NotFound = ({ imagePath }) => (
+  <div className={styles.wrapper}>
+    <div className={styles.textBlock}>
+      <p>Oops! We can't seem to find that page anymore.</p>
+      <p>While you're here though, why not check out these top South African Casinos:</p>
+    </div>
+    <div className={styles.imgContainer}>
+      <Image filename={imagePath} width={381} height={144} alt="Not found" />
+    </div>
+  </div>
+);
+
+NotFound.propTypes = {
+  imagePath: PropTypes.string,
+};
+
+export default NotFound;

package/src/gatsby-core-theme/components/atoms/not-found/not-found.module.scss

@@ -0,0 +1,17 @@
+.wrapper {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  padding: 0 1.6rem;
+  margin-top: 8rem;
+
+  @include min(laptop) {
+    margin-top: 0;
+    padding: 0 2.4rem;
+  }
+
+  .textBlock {
+    @include min(tablet) {
+      max-width: 60%;
+    }
+  }
+}

package/src/gatsby-core-theme/components/atoms/spotlights/index.js

@@ -20,10 +20,10 @@ const Spotlights = ({ module, page }) => {
     const img = mode === 'icon' ? item.icon : item.image;
     return (
       <>
-        <span className={styles.itemImage}>
+        <span className={`${styles.itemImage} logo-cta`}>
           <LazyImage alt={item.label} src={imagePrettyUrl(img)} />
         </span>
-        <span className={styles.label}>{item.label}</span>
+        <span className={`${styles.label} name-cta`}>{item.label}</span>
       </>
     );
   };
@@ -58,11 +58,17 @@ const Spotlights = ({ module, page }) => {
             {path === 'about-us' ? (
               <>
                 {item.link.type === 'external' ? (
-                  <a href={item.link.value} title={item.label} target="_blank" rel="noreferrer">
+                  <a
+                    href={item.link.value}
+                    title={item.label}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="spotlights-gtm"
+                  >
                     {content(item)}
                   </a>
                 ) : (
-                  <Link to={item.link.value} title={item.label}>
+                  <Link to={item.link.value} title={item.label} className="spotlights-gtm">
                     {content(item)}
                   </Link>
                 )}
@@ -79,14 +85,18 @@ const Spotlights = ({ module, page }) => {
                         title={item.label}
                         target="_blank"
                         rel="noreferrer"
-                        className={styles.readMore}
+                        className={`${styles.readMore} spotlights-gtm`}
                       >
                         {item.link_text ? item.link_text : 'Read More'}
                       </a>
                     ) : (
                       <>
                         {item.link.value && (
-                          <Link to={item.link.value} title={item.label} className={styles.readMore}>
+                          <Link
+                            to={item.link.value}
+                            title={item.label}
+                            className={`${styles.readMore} spotlights-gtm`}
+                          >
                             {see_more_link.title ? see_more_link.title : 'Read More'}
                           </Link>
                         )}
@@ -98,11 +108,17 @@ const Spotlights = ({ module, page }) => {
             ) : (
               <div className={styles.pillarCards}>
                 {item.link.type === 'external' ? (
-                  <a href={item.link.value} title={item.label} target="_blank" rel="noreferrer">
+                  <a
+                    href={item.link.value}
+                    title={item.label}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="spotlights-gtm"
+                  >
                     {content(item)}
                   </a>
                 ) : (
-                  <Link to={item.link.value} title={item.label}>
+                  <Link to={item.link.value} title={item.label} className="spotlights-gtm">
                     {content(item)}
                   </Link>
                 )}
@@ -120,6 +136,7 @@ const Spotlights = ({ module, page }) => {
                     targetBlank={item.link.type === 'external'}
                     to={item.link.value}
                     primaryColor={false}
+                    gtmClass="spotlights-gtm btn-cta"
                   />
                 )}
               </div>

package/src/gatsby-core-theme/components/molecules/content/content.module.scss

@@ -1,16 +1,10 @@
 .content {
   width: 100%;
-  table{
-    @include min(tablet){
-        thead, tbody{
-          display: table;
-          width: 100%;
-          table-layout: fixed;
-        }
-      }
+  div {
+    display: flow-root;
   }
-  p{
-    margin-bottom: 24px;
+  p:not(:last-of-type) {
+    margin-bottom: 2.4rem;
   }
   table {
     width: 100% !important;
@@ -20,7 +14,14 @@
     font-weight: 400;
     table-layout: auto;
     @include link-color(var(--color-6));
-
+    @include min(tablet) {
+      thead,
+      tbody {
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+      }
+    }
     thead {
       tr {
         th {
@@ -54,6 +55,11 @@
           padding: 1rem;
           vertical-align: top;
           padding-left: 1.4rem;
+          a {
+            img {
+              width: 15rem;
+            }
+          }
         }
       }
 
@@ -102,17 +108,65 @@
     }
   }
 
+  .stackTable {
+    @include max(mobile) {
+      table {
+        border-collapse: inherit;
+        box-shadow: 0 2px 16px #17182f14;
+
+        thead {
+          display: none;
+        }
+
+        tbody {
+          tr {
+            &:first-child {
+              td {
+                color: var(--table-head-text);
+                background: var(--table-head-background);
+                
+                border-radius: 0;
+
+                &:first-child {
+                  border-top-left-radius: var(--table-border-radius);
+                  border-top-right-radius: var(--table-border-radius);
+                }
+              }
+            }
+
+            td {
+              display: block;
+              text-align: left;
+              border-bottom: 1px solid #bfd3e5;
+              width: 100% !important;
+            }
+
+            &:last-child {
+              td {
+                border-radius: 0;
+                &:last-child {
+                  border-bottom-right-radius: var(--table-border-radius);
+                  border-bottom-left-radius: var(--table-border-radius);
+                  border-bottom: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   .tableResponsive,
   .tableResponsive > div {
     box-sizing: content-box;
     width: 100%;
-    table{
+    table {
       display: block;
       width: 100%;
       @include overflow(overflow-x, auto, touch);
-      @include scrollbar(0.8rem, 0.8rem, var(--color-33));
-      
     }
+    @include scrollbar(0.8rem, 0.8rem, var(--color-33));
 
     * {
       box-sizing: content-box;
@@ -121,7 +175,10 @@
     td,
     th {
       @include max(tablet) {
-        min-width: 25rem;
+        min-width: 15rem;
+      }
+      img {
+        max-width: none;
       }
     }
   }
@@ -131,7 +188,7 @@
     color: var(--color-6);
     font-size: 1.6rem;
     list-style-position: inside;
-    padding: 1.6rem;
+    padding: 0 1.6rem 1.6rem;
 
     li {
       margin: 0.35rem 0;

package/src/gatsby-core-theme/components/molecules/content/index.js

@@ -50,6 +50,8 @@ const Content = ({ module }) => {
         return `${styles.tableResponsive} ${styles.firstTable}`;
       case 'table_2':
         return `${styles.tableResponsive} ${styles.secondTable}`;
+      case 'stack_table':
+        return styles.stackTable;
       case 'default_table':
         return `${styles.tableResponsive}`;
       case 'content_frame_style':

package/src/gatsby-core-theme/components/molecules/footer/index.js

@@ -25,7 +25,10 @@ const Footer = ({
       <div className={styles.topPart}>
         <div className={styles.links}>
           {footerMenu && showLinks && (
-            <LinkList lists={getExtraField(section?.extra_fields, footerMenu)} />
+            <LinkList
+              lists={getExtraField(section?.extra_fields, footerMenu)}
+              gtmClass="mobile-menu-gtm"
+            />
           )}
         </div>
 
@@ -54,6 +57,7 @@ const Footer = ({
               imageOnly
               singleList
               lists={getExtraField(section?.extra_fields, footerLogos)}
+              gtmClass="mobile-menu-gtm logo-cta"
             />
           )}
         </div>

package/src/gatsby-core-theme/components/molecules/main/index.js

@@ -19,8 +19,13 @@ const Main = ({ section = {}, page = {}, pageContext = {}, showNewsletter = fals
     typeof window !== 'undefined' && Boolean(getURLParam('subscribed'))
       ? loadable(() => import(`../../../../components/atoms/newsletter/success`))
       : null;
+  const NotFound = page.path.includes('404')
+    ? loadable(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
+    : null;
+
   return (
     <main className={styles.modulePage}>
+      {NotFound && <NotFound imagePath="404" />}
       {section.modules &&
         section.modules.map((module) => (
           <Module key={keygen()} module={module} page={page} pageContext={pageContext} />
@@ -28,7 +33,7 @@ const Main = ({ section = {}, page = {}, pageContext = {}, showNewsletter = fals
       {SearchPage && <SearchPage page={page} />}
       {showNewsletter && <Newsletter page={page} />}
       {NewsletterSuccess && showNewsletter && <NewsletterSuccess />}
-      {page.author && <AuthorBox author={page.author} translations={page.translations} />}
+      {page.author && <AuthorBox author={page.author} />}
     </main>
   );
 };

package/src/gatsby-core-theme/components/molecules/module/index.js

@@ -109,9 +109,7 @@ const Modules = ({ module, page, pageContext }) => {
           module.name
         } ${styles.module} ${module?.style && styles[module.style]} module`}
       >
-        {module.name !== 'top_list' && (
-          <ModuleTitle module={module} translations={page?.translations} />
-        )}
+        {module.name !== 'top_list' && <ModuleTitle module={module} />}
         <ModuleComponent module={module} page={page} pageContext={pageContext} {...extraProps} />
       </div>
     )

package/src/gatsby-core-theme/components/molecules/search/index.js

@@ -6,6 +6,10 @@ import { FaSearch } from 'react-icons/fa';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Tabs from 'gatsby-matrix-theme/src/hooks/tabs';
 import styles from 'gatsby-core-theme/src/components/molecules/search/search.module.scss';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import { getURLParam } from '~helpers/getters';
@@ -52,6 +56,8 @@ const Search = ({
   const searchInputRef = useRef(React.createRef());
   const formBoxInputRef = useRef(React.createRef());
 
+  const { translations } = useContext(Context) || {};
+
   // Store search results, in case of page search with tabs it's a multidimensal array grouped by types
   const searchResultsRef = useRef([]);
   // Store the search function object
@@ -246,7 +252,7 @@ const Search = ({
   // Use a default or given close button
   if (formSearchOptionsCopy !== null && formSearchOptionsCopy.searchButtonComponent === undefined) {
     formSearchOptionsCopy.searchButtonComponent = (
-      <button aria-label="Search" type="submit">
+      <button aria-label="Search" type="submit" className="search-gtm btn-cta">
         {searchIcon === null ? <FaSearch /> : <img alt="search" src={searchIcon} />}
       </button>
     );
@@ -270,6 +276,16 @@ const Search = ({
           {formSearchOptionsCopy.autoComplete && searchResultsRef.current.length > 0 && (
             <div className={styles.autocomplete}>
               {searchResultsRef.current.map((item) => getChildType(item, item.type))}
+              {formSearchOptionsCopy.showViewResultsText && (
+                <div className={styles.viewAllResults}>
+                  <Link
+                    to={`/${searchURLPageName}?${searchUrlParam}=${searchQuery}`}
+                    className="search-gtm"
+                  >
+                    <h1>{translate(translations, 'view_all', 'View All Results')}</h1>
+                  </Link>
+                </div>
+              )}
             </div>
           )}
         </form>
@@ -293,7 +309,7 @@ const Search = ({
               maxLength="60"
             />
             <div className={styles.searchButton}>
-              <button aria-label="Search" type="submit">
+              <button aria-label="Search" type="submit" className="search-gtm btn-cta">
                 {searchIcon === null ? <FaSearch /> : <img alt="search" src={searchIcon} />}
               </button>
             </div>
@@ -311,6 +327,7 @@ const Search = ({
                   {...pageSearchOptionsCopy.tabsOptions}
                   activeTabClass="searchActive"
                   headerClass="searchHeader"
+                  gtmClass="search-tabs-menu-gtm"
                 >
                   {items}
                 </Tabs>
@@ -333,6 +350,7 @@ const Search = ({
                     items,
                     model_type: type,
                     title: titleObj ? titleObj.title : '',
+                    pagination_type: 'load_more',
                     ...pageSearchOptionsCopy.archiveOptions.includeOptions,
                   };
                 }
@@ -354,7 +372,12 @@ const Search = ({
                             module_title_tag: 'h2',
                           }}
                         />
-                        <Archive module={items} loadMore={loadMore} page={page} />
+                        <Archive
+                          module={items}
+                          loadMore={loadMore}
+                          page={page}
+                          gtmClass="archive-gtm"
+                        />
                       </>
                     )}
                   </div>

package/src/gatsby-core-theme/components/organisms/anchor/anchor.module.scss

@@ -2,12 +2,16 @@
   .link {
     word-break: inherit;
     white-space: nowrap;
-
     background-color: var(--color-7);
     padding: 1rem 2.5rem;
     border-radius: 0.6rem;
     color: #000;
     font-weight: 400;
+    @include flex-align(center, center);
+
+    svg {
+      margin-left: 1rem;
+    }
 
     &:hover {
       background-color: var(--secondary-color);

package/src/gatsby-core-theme/components/organisms/anchor/index.js

@@ -5,7 +5,13 @@ import keygen from '~helpers/keygen';
 import { anchorLink } from '~helpers/strings';
 import styles from './anchor.module.scss';
 
-function Anchor({ module: { items }, headerOffset = 80, sliderGap = 0, isFixed = false }) {
+function Anchor({
+  module: { items },
+  headerOffset = 80,
+  sliderGap = 0,
+  isFixed = false,
+  icon = null,
+}) {
   const [isFixedMenu, setIsFixedMenu] = useState(false);
   if (isFixed && typeof window !== 'undefined') {
     window.addEventListener('scroll', () => {
@@ -47,15 +53,17 @@ function Anchor({ module: { items }, headerOffset = 80, sliderGap = 0, isFixed =
           usePagination={false}
           settings={{ numberOfSlides: 0, sliderGap }}
           className={styles.sliderWrapper}
+          gtmClass="anchor-carousel-gtm"
         >
           {items?.map((anchor) => (
             <a
-              className={styles.link}
+              className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
               key={keygen()}
               onClick={handleClick}
               href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
             >
               {anchor.label}
+              {icon}
             </a>
           ))}
         </Slider>
@@ -76,6 +84,7 @@ Anchor.propTypes = {
   sliderGap: PropTypes.number,
   styles: PropTypes.shape({}),
   isFixed: PropTypes.bool,
+  icon: PropTypes.element,
 };
 
 export default Anchor;

package/src/gatsby-core-theme/components/organisms/carousel/index.js

@@ -9,7 +9,7 @@ import Slide from '../../../../components/molecules/carousel/screenshot-slide';
 
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {} }) => {
+const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
   const [width] = useWindowSize();
   // render one item per slide
   const renderOne = (items) => {
@@ -17,7 +17,7 @@ const Carousel = ({ module = {}, settings = {} }) => {
     for (let i = 0; i < items.length; i += 1) {
       arr.push(
         <div key={keygen()} className={styles.carouselItem}>
-          <Slide item={items[i]} />
+          <Slide item={items[i]} gtmClass={gtmClass} />
         </div>
       );
     }
@@ -30,11 +30,11 @@ const Carousel = ({ module = {}, settings = {} }) => {
       arr.push(
         <div className={styles.slide} key={keygen()}>
           <div key={keygen()} className={styles.carouselItem}>
-            <Slide item={items[i]} />
+            <Slide item={items[i]} gtmClass={gtmClass} />
           </div>
           {items[i + 1] && (
             <div key={keygen()} className={styles.carouselItem}>
-              <Slide item={items[i + 1]} />
+              <Slide item={items[i + 1]} gtmClass={gtmClass} />
             </div>
           )}
         </div>
@@ -46,12 +46,22 @@ const Carousel = ({ module = {}, settings = {} }) => {
   return (
     <div className={styles.carouselContainer}>
       {width >= 991 && (
-        <Slider {...settings} className={styles.screenshotCarousel} useArrows={false}>
+        <Slider
+          {...settings}
+          className={styles.screenshotCarousel}
+          useArrows={false}
+          gtmClass={gtmClass}
+        >
           {renderTwo(module.items)}
         </Slider>
       )}
       {width < 991 && width > 0 && (
-        <Slider {...settings} className={styles.screenshotCarousel} useArrows={false}>
+        <Slider
+          {...settings}
+          className={styles.screenshotCarousel}
+          useArrows={false}
+          gtmClass={gtmClass}
+        >
           {renderOne(module.items)}
         </Slider>
       )}
@@ -72,6 +82,7 @@ Carousel.propTypes = {
   }),
   settings: PropTypes.shape(PropTypes.object),
   styles: PropTypes.object,
+  gtmClass: PropTypes.string,
 };
 
 export default Carousel;

package/src/gatsby-core-theme/components/organisms/navigation/index.js

@@ -60,12 +60,12 @@ const Navigation = ({
     >
       <nav className={styles.nav} style={{ justifyContent: logoPosition }} ref={navRef}>
         <NavigationProvider>
-          <Link className={styles.logo} to="/" onClick={onClickHandler}>
+          <Link className={`${styles.logo} main-menu-gtm logo-cta`} to="/" onClick={onClickHandler}>
             <img alt={getSiteName()} src={logo} width={logoWidth} height={logoHeight} />
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} />
+              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
               {hasSearch && <SearchForm className={styles.search} searchIcon={searchIcon} />}
             </>
           )}