gatsby-matrix-theme 2.0.5 → 2.2.0

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

@@ -1,10 +1,11 @@
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
 import Search from 'gatsby-core-theme/src/components/molecules/search';
 import moduleStyles from 'gatsby-core-theme/src/components/molecules/module/module.module.scss';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import CardArticle from '../../../../components/atoms/cards/article-card';
 import CardGame from '../../../../components/atoms/cards/game-card';
 import CardOperator from '../../../../components/atoms/cards/operator-card';
@@ -12,85 +13,89 @@ import PaymentMethods from '../../../../components/atoms/cards/payment-method-ca
 import SoftwareProvider from '../../../../components/atoms/cards/software-provider-card';
 import styles from './search.module.scss';
 
-const SearchContent = ({ page }) => (
-  <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
-    {page.path && <Breadcrumbs page={page} />}
-    <Search
-      page={page}
-      searchIcon="../../../../../../images/search.svg"
-      pageSearchOptions={{
-        searchTitle: translate(page?.translations, 'search_results_for', 'Search Results for:'),
-        useArchive: true,
-        archiveOptions: {
-          titles: [
-            { type: 'operator', title: translate(page?.translations, 'casino', 'Casino') },
-            { type: 'game', title: translate(page?.translations, 'slots', 'Slots') },
-            { type: 'article', title: translate(page?.translations, 'news', 'News') },
+const SearchContent = ({ page }) => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
+      {page.path && <Breadcrumbs page={page} />}
+      <Search
+        page={page}
+        searchIcon="../../../../../../images/search.svg"
+        pageSearchOptions={{
+          searchTitle: translate(translations, 'search_results_for', 'Search Results for:'),
+          useArchive: true,
+          archiveOptions: {
+            titles: [
+              { type: 'operator', title: translate(translations, 'casino', 'Casino') },
+              { type: 'game', title: translate(translations, 'slots', 'Slots') },
+              { type: 'article', title: translate(translations, 'news', 'News') },
+              {
+                type: 'payment_method',
+                title: translate(translations, 'payment_method', 'Payment method'),
+              },
+              {
+                type: 'software_provider',
+                title: translate(translations, 'software_provider', 'Software Provider'),
+              },
+            ],
+            includeOptions: {
+              desktop_num_of_columns: '3',
+              mobile_num_of_columns: '1',
+              tablet_num_of_columns: '3',
+            },
+          },
+          tabs: true,
+          tabsOptions: { showAll: translate(translations, 'all', 'All'), tabsAlign: 'left' },
+          sort: [
+            {
+              name: translate(translations, 'most_relevant', 'Most Relevant'),
+              field: 'id',
+              type: 'number',
+            },
             {
-              type: 'payment_method',
-              title: translate(page?.translations, 'payment_method', 'Payment method'),
+              name: translate(translations, 'latest', 'Latest'),
+              field: 'created_at',
+              type: 'date',
             },
             {
-              type: 'software_provider',
-              title: translate(page?.translations, 'software_provider', 'Software Provider'),
+              name: translate(translations, 'by_title', 'By Title'),
+              field: 'title',
+              type: 'string',
             },
           ],
-          includeOptions: {
-            desktop_num_of_columns: '3',
-            mobile_num_of_columns: '1',
-            tablet_num_of_columns: '3',
+          loadMore: {
+            label: translate(translations, 'show_more', 'Show more'),
+            limit: 3,
+            increment: 6,
+            usePrimaryButton: false,
+            useInvertColors: true,
           },
-        },
-        tabs: true,
-        tabsOptions: { showAll: translate(page?.translations, 'all', 'All'), tabsAlign: 'left' },
-        sort: [
-          {
-            name: translate(page?.translations, 'most_relevant', 'Most Relevant'),
-            field: 'id',
-            type: 'number',
-          },
-          {
-            name: translate(page?.translations, 'latest', 'Latest'),
-            field: 'created_at',
-            type: 'date',
-          },
-          {
-            name: translate(page?.translations, 'by_title', 'By Title'),
-            field: 'title',
-            type: 'string',
-          },
-        ],
-        loadMore: {
-          label: translate(page?.translations, 'show_more', 'Show more'),
-          limit: 3,
-          increment: 6,
-          usePrimaryButton: false,
-          useInvertColors: true,
-        },
-      }}
-    >
-      {(item) => (
-        <>
-          <div type="operator">
-            <CardOperator item={item} />
-          </div>
-          <div type="game">
-            <CardGame item={item} />
-          </div>
-          <div type="article">
-            <CardArticle item={item} />
-          </div>
-          <div type="payment_method">
-            <PaymentMethods item={item} />
-          </div>
-          <div type="software_provider">
-            <SoftwareProvider item={item} />
-          </div>
-        </>
-      )}
-    </Search>
-  </div>
-);
+        }}
+      >
+        {(item) => (
+          <>
+            <div type="operator">
+              <CardOperator item={item} />
+            </div>
+            <div type="game">
+              <CardGame item={item} />
+            </div>
+            <div type="article">
+              <CardArticle item={item} />
+            </div>
+            <div type="payment_method">
+              <PaymentMethods item={item} />
+            </div>
+            <div type="software_provider">
+              <SoftwareProvider item={item} />
+            </div>
+          </>
+        )}
+      </Search>
+    </div>
+  );
+};
 
 SearchContent.propTypes = {
   page: PropTypes.shape({

package/src/hooks/tabs/index.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import TabList from './tab/tab-list';
 import styles from './tabs.module.scss';
 
@@ -14,7 +15,7 @@ const Tabs = ({
   activeTabClass = '',
   HeaderComp,
   headerClass = '',
-  translations,
+  gtmClass = '',
 }) => {
   const showAllTabId = `${showAll}_0`;
   const showTabs = children.length > 1;
@@ -22,6 +23,7 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
   const CustomTag = `${module?.module_title_tag}`;
+  const { translations } = useContext(Context) || {};
   const monthNames = [
     'January',
     'February',
@@ -104,7 +106,7 @@ const Tabs = ({
             showAll={showAll}
             alignRight={tabsAlign === 'right'}
             module={module}
-            translations={translations}
+            gtmClass={gtmClass}
           />
         )}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
@@ -139,7 +141,7 @@ Tabs.propTypes = {
   title: PropTypes.string,
   module: PropTypes.shape({}),
   siteName: PropTypes.string,
-  translations: PropTypes.shape({}),
+  gtmClass: PropTypes.string,
 };
 
 export default Tabs;

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

@@ -14,6 +14,7 @@ const TabList = ({
   activeTabClass = '',
   showAll,
   alignRight = false,
+  gtmClass = '',
 }) => {
   const [tabItems, setTabItems] = useState(items);
 
@@ -38,7 +39,7 @@ const TabList = ({
     <div className={`${styles.tabList} ${alignRight && styles.right}`}>
       <button
         ref={filterBtn}
-        className={styles.select}
+        className={`${styles.select} ${gtmClass} btn-cta`}
         type="button"
         onClick={showDropdown}
         data-id="select-button"
@@ -59,6 +60,7 @@ const TabList = ({
               label={label}
               onClick={onClick}
               toggleDropdown={showDropdown}
+              gtmClass={gtmClass}
             />
           );
         })}
@@ -74,6 +76,7 @@ TabList.propTypes = {
   activeTab: PropTypes.string,
   activeTabClass: PropTypes.string,
   alignRight: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default TabList;

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

@@ -2,39 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './tab.module.scss';
 
-const Tab = ({ label, onClick, activeTab, activeTabClass = '', tabId, toggleDropdown }) => {
-    let className = '';
+const Tab = ({
+  label,
+  onClick,
+  activeTab,
+  activeTabClass = '',
+  tabId,
+  toggleDropdown,
+  gtmClass = '',
+}) => {
+  let className = '';
 
-    if (activeTab === tabId) {
-        if (activeTabClass !== '') {
-            className = ` ${styles[activeTabClass]}`;
-        } else {
-            className = ` ${styles.active}`;
-        }
+  if (activeTab === tabId) {
+    if (activeTabClass !== '') {
+      className = ` ${styles[activeTabClass]}`;
+    } else {
+      className = ` ${styles.active}`;
     }
+  }
 
-    return (
-        <li className={styles.tabListItem}>
-            <button
-                className={className}
-                type="button"
-                onClick={() => {
-                    onClick(tabId);
-                    toggleDropdown();
-                }}
-            >
-                {label}
-            </button>
-        </li>
-    );
+  return (
+    <li className={styles.tabListItem}>
+      <button
+        className={`${className} ${gtmClass} tabs-menu-gtm btn-cta`}
+        type="button"
+        onClick={() => {
+          onClick(tabId);
+          toggleDropdown();
+        }}
+      >
+        {label}
+      </button>
+    </li>
+  );
 };
 Tab.propTypes = {
-    onClick: PropTypes.func,
-    toggleDropdown: PropTypes.func,
-    activeTab: PropTypes.string,
-    activeTabClass: PropTypes.string,
-    tabId: PropTypes.string,
-    label: PropTypes.string,
+  onClick: PropTypes.func,
+  toggleDropdown: PropTypes.func,
+  activeTab: PropTypes.string,
+  activeTabClass: PropTypes.string,
+  tabId: PropTypes.string,
+  label: PropTypes.string,
+  gtmClass: PropTypes.string,
 };
 
 export default Tab;