gatsby-matrix-theme 2.0.5 → 2.2.0

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';
@@ -46,11 +50,14 @@ const Search = ({
   const [sortQuery, setSortQuery] = useState({});
   const [searchQuery, setSearchQuery] = useState(searchQueryInit);
   const [searchBoxQuery, setSearchBoxQuery] = useState('');
+  const noResultsText = noResults.replace('[keyword]', searchQuery);
 
   const loadingRef = useRef(React.createRef());
   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
@@ -245,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>
     );
@@ -269,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>
@@ -292,14 +309,14 @@ 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>
           </form>
           {searchResultsRef.current.length === 0 && formSearchOptionsCopy === null ? (
             <div>
-              <span className={styles.noResults}>{noResults}</span>
+              <span className={styles.noResults}>{noResultsText}</span>
             </div>
           ) : null}
           {searchResultsRef.current.length !== 0 && (
@@ -310,6 +327,7 @@ const Search = ({
                   {...pageSearchOptionsCopy.tabsOptions}
                   activeTabClass="searchActive"
                   headerClass="searchHeader"
+                  gtmClass="search-tabs-menu-gtm"
                 >
                   {items}
                 </Tabs>
@@ -332,6 +350,7 @@ const Search = ({
                     items,
                     model_type: type,
                     title: titleObj ? titleObj.title : '',
+                    pagination_type: 'load_more',
                     ...pageSearchOptionsCopy.archiveOptions.includeOptions,
                   };
                 }
@@ -353,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} />}
             </>
           )}

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

@@ -68,7 +68,7 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
         type="button"
         aria-label="Search"
         onClick={handleOnSearchIconClick}
-        className={`${styles.searchButton} ${showSearch && styles.active}`}
+        className={`${styles.searchButton} ${showSearch && styles.active} search-gtm btn-cta`}
       >
         {searchIcon === null ? (
           <FaSearch />
@@ -92,6 +92,7 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
               autoComplete: true,
               sort: true,
               limit: 3,
+              showViewResultsText: false,
             }}
           >
             {(item) => (

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -24,6 +24,8 @@ function Body({ pageContext }) {
   const footerNavigationData = pageContext?.marketSections?.footer_navigation || null;
   const isHomePage = pageContext?.page && pageContext?.page.path === '/';
   const pageType = pageContext.page.type;
+  const is404 = pageContext.page.path.includes('404');
+
   const Popup = pageContext?.marketSections?.popup
     ? loadable(() => import(`../../../../components/organisms/popup`))
     : null;
@@ -42,12 +44,13 @@ function Body({ pageContext }) {
   const status = pageContext.page.relation?.status;
 
   const hideBanner = status === 'inactive' || status === 'coming_soon';
-  const { template, translations } = pageContext.page;
+  const { template } = pageContext.page;
 
   const popupData = pageContext?.marketSections?.popup?.modules?.find((m) => m.name === 'top_list');
-  const FooterNavigation = footerNavigationData
-    ? loadable(() => import(`../../../../components/organisms/footer-navigation`))
-    : null;
+  const FooterNavigation =
+    footerNavigationData && pageType !== 'operator'
+      ? loadable(() => import(`../../../../components/organisms/footer-navigation`))
+      : null;
 
   return (
     <>
@@ -55,7 +58,6 @@ function Body({ pageContext }) {
         <Navigation
           template={template}
           section={navigation}
-          translations={translations}
           searchIcon="../../../../../../images/search.svg"
           menu="main_menu"
           options={{
@@ -76,7 +78,7 @@ function Body({ pageContext }) {
         <ContactUs page={pageContext} />
       ) : (
         <>
-          {!isSearch && <Header section={pageContext} />}
+          {!isSearch && !is404 && <Header section={pageContext} />}
           {main && <Main section={main} page={pageContext.page} />}
           {pageType === 'operator' && !hideBanner && (
             <OperatorBanner
@@ -114,10 +116,14 @@ function Body({ pageContext }) {
         <p>
           We use cookies in order to optimise our site and improve your experience with us. By using
           the site you consent to our
-          <a href="/cookies"> &nbsp; Cookie Policy</a>.
+          <a href="/cookies" className="cookie-consent-gtm">
+            {' '}
+            &nbsp; Cookie Policy
+          </a>
+          .
         </p>
       </CookieConsent>
-      {Popup && popupData && <Popup module={popupData} translations={translations} />}
+      {Popup && popupData && <Popup module={popupData} />}
     </>
   );
 }
@@ -130,7 +136,6 @@ Body.propTypes = {
       type: PropTypes.string,
       path: PropTypes.string,
       template: PropTypes.string,
-      translations: PropTypes.shape({}),
       relation: PropTypes.shape({
         status: PropTypes.string,
         logo_url: PropTypes.string,