gatsby-core-theme 1.3.0 → 1.4.2

package/.storybook/main.js

@@ -21,9 +21,7 @@ module.exports = {
         {
           loader: require.resolve('sass-resources-loader'),
           options: {
-            resources: [
-              path.resolve(__dirname, '../src/styles/globals.scss'),
-            ],
+            resources: [path.resolve(__dirname, '../src/styles/globals.scss')],
           },
         },
       ],
@@ -46,6 +44,7 @@ module.exports = {
       '~helpers': path.resolve(__dirname, '../src/helpers'),
       '~hooks': path.resolve(__dirname, '../src/hooks'),
       '~tests': path.resolve(__dirname, '../tests'),
+      '~context': path.resolve(__dirname, '../src/context'),
     };
 
     config.resolve.alias['$virtual/lazy-client-sync-requires'] = path.resolve(

package/.storybook/preview.js

@@ -19,10 +19,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: [
-        'Gatsby-Theme',
-        ['Atoms', 'Molecules', 'Organisms', 'Pages', 'Hooks']
-      ],
+      order: ['Gatsby-Theme', ['Atoms', 'Molecules', 'Organisms', 'Pages', 'Hooks']],
     },
   },
 };

package/CHANGELOG.md

@@ -1,3 +1,97 @@
+## [1.4.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.4.1...v1.4.2) (2021-11-03)
+
+
+### Bug Fixes
+
+* removed commented code in tracker ([0071494](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/00714945fc9737ffb90f79a2b068ac74ef450d34))
+
+## [1.4.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.4.0...v1.4.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* authors added on contact us page ([39ab905](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/39ab9058ca760444ae9ed9fdab8ca9be431e3627))
+* fix demo search data ([48e4464](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/48e4464ed1f5ed5587a04ea4fe120daaed50c1e3))
+* fix loadmore on search ([92e9ed1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/92e9ed1e5e6b315c513f215926bce003bebdf836))
+* fixed an object on context page ([762d1b7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/762d1b7690d758871ed30fb98a713578fd27b1b2))
+* slider fixed bug ([7ac3faf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7ac3faf26b5cb8fd0e098bb53a4f8962b747dbbd))
+* throttle silder ([c8d8c52](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c8d8c527e482adb6d70b44a40e715c5d188fdad9))
+
+
+### Code Refactoring
+
+* add gtm classes ([65cc36a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/65cc36a5e821e1a5bab75dafcf28daca04a189a3))
+* changes to classnames ([e90ae2e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e90ae2e71735ba56106e269ed12eef8cd5ad460e))
+* more gtm classes ([6cbfb8e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6cbfb8efb1007fbb461768c02b6d6e1610d60afd))
+
+
+### Config
+
+* merge master ([459dea5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/459dea54398ebaf72d9ec832f60caa7ddc6518a2))
+* merge master ([bc1c508](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bc1c50856d7007c13dd98480524f3a6945fe00aa))
+
+
+* Merge branch 'tm-2478-search' into 'master' ([05280e0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/05280e01f40e1c8e853e578aedde5a35e94cf4df))
+* Merge branch 'tm-2565-authors' into 'master' ([a18e732](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a18e7327e918ee4b096419df99b35f48163182a6))
+* Merge branch 'tm-2462-gtm-classes' into 'master' ([5886be6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5886be6b0751abe09705b3bf12a8447192ba314a))
+* Merge branch 'tm-2538-slider-fixed-bug' into 'master' ([269a1a6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/269a1a6631ec390902fe77c8ad59208d08c5d015))
+
+
+### Tests
+
+* changes to test script ([ea920df](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ea920dfa509210968b0348de365ec405b3432e88))
+* changes to test script ([e0a0adc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e0a0adcf062a8601b89eca75c72f25633a97120f))
+* changes to test script ([9c14c64](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9c14c64c0eeefde4890edb2c5cb1a67af5d48c67))
+
+# [1.4.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.3.1...v1.4.0) (2021-10-29)
+
+
+### Bug Fixes
+
+* added a check for profile page link ([cb687c3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cb687c3cf6a7aef0a232090cd42296d74eaafad4))
+* added operator name placeholder in tracker main text ([fc03455](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fc034552bcb32b6d9ea199646fb0b6ea59de9ce5))
+* added scroll to slider ([6e369b9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6e369b9543db4e69ff77778ad0c12a8883f52604))
+* merged master branch ([c54d5ee](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c54d5ee8456c9aad92df30025177e7467cea1a7e))
+* site schema to context ([61b6567](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/61b6567e8305036509a021855b0626f670717771))
+
+
+### Code Refactoring
+
+* fix tests ([6c11800](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6c1180048827fd5da419868040e2dafd0f27c4db))
+* merge master into branch ([4d93726](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4d93726d4e15492ecbe5acdfad34d99f2d40dd86))
+* merge master into branch ([34b8232](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/34b8232419d43edba2a2e4f6dc3b45d36fe56c88))
+* moved translations to global context ([53b4208](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/53b42087a3283a797ad4ae7e113fce4b350d0703))
+* replace translationsporvider at test with empty object check ([8bdcd5f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8bdcd5f6457ce02cb6e915439b86f2248431156a))
+* return sports variable after merging branches ([f3669b9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f3669b91b58ac6388f005bb227a883e5e414b7f9))
+* update components to remove build errors ([9b18785](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9b187858f04a9cbbde6579a89a98b0fec3841de8))
+* update components to remove build errors ([088a42a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/088a42ad9a7b9dc6d50577a362ccef43dca68374))
+
+
+* Merge branch 'tm-2565-site-schema-to-context' into 'master' ([7ea2653](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7ea26534ab12d47b7fb3940fb8092d130daf611c))
+* Merge branch 'master' into my branch ([2c55d4a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2c55d4a2fec98a3049f361eebe4d134fe6aa2811))
+* Merge branch 'tm-2564-404page' into 'master' ([41c010b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/41c010b7612b90c9a4f7a9e831080225e7fc4671))
+* Merge branch 'master' into 404 MR ([1336ef7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1336ef79ddf93c091116b6516965270a21d428f9))
+* Merge branch 'tm-2539-html-sitemap' into 'master' ([4a98f89](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4a98f895b9efb54c76a35649a217c7d98d6c7ed1))
+* Merge branch 'tm-2543-fix-translation-refactor' into 'master' ([f0d67a3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f0d67a30134c2db528e1c6c0c02e5fe4672a2b59))
+* Merge branch 'tm-2543-translations-refactoring' into 'master' ([4eb1f7d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4eb1f7d05cf6e5404968746218c0d90552b5feaf))
+* Merge branch 'tm-2517-tracker-page' into 'master' ([0329e5e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0329e5ef286cdd192c741639f0df841a89f60c28))
+* Merge branch 'master' into 'tm-2543-translations-refactoring' ([fe32751](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fe3275166f21d1136716fb8303d8abee96aab302))
+* Merge branch 'tm-2538-slides-change-onscroll' into 'master' ([12a5d4e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/12a5d4e7a6273e9ae0445446fd00dbc47ce33b75))
+* Merge branch 'tm-2551-update-theme-to-fix-build-errors' into 'master' ([00f7c27](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/00f7c27422f3575f3161b42d2ef16c27d64c6a4c))
+
+
+### Features
+
+* added html sitemap page ([cc30b06](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cc30b06d39400a8464e65ba08d272cffff0fe72b))
+* replaced static 404 with data from hercules ([37c2172](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/37c21725e427357e84bef00e7a0c4cb9d1bdcdde))
+
+## [1.3.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.3.0...v1.3.1) (2021-10-19)
+
+
+### Bug Fixes
+
+* author component ([7d64a02](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7d64a02746c64a87fd56b15cfe3040184ef69207))
+
 # [1.3.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.6...v1.3.0) (2021-10-18)
 
 

package/gatsby-node.esm.js

@@ -5,7 +5,7 @@ import { cloneDeep, chunk } from 'lodash';
 import chalk from 'chalk';
 import { getData, getLocalData } from './src/helpers/api';
 import { generateTrackerLink } from './src/helpers/generators';
-import processor from './src/helpers/processor';
+import processor, { processSitemapPages } from './src/helpers/processor';
 
 const fs = require('fs');
 
@@ -15,13 +15,18 @@ const path = require('path');
 
 let preconnectLinks = null;
 let pages = null;
+let htmlSitemapPages = null;
 let marketSections = [];
 let prefilledModules = [];
 let siteInfo = null;
 let operators = null;
 let translations = null;
 let languageKey = null;
+let context404 = null;
 let sports = null;
+let siteSchema = null;
+let templates = null;
+let authors = null;
 
 function createArchivePage(pageObject, marketSections, prefilledModules, createPage) {
   const archiveModuleIndex = pageObject.sections.main.modules.findIndex(
@@ -143,8 +148,10 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
   // add data to modules
   const processed = processor.run(response, themeOptions, fs);
   pages = processed.pages;
+  htmlSitemapPages = processSitemapPages(pages, processed.site_markets);
   siteInfo = processed.general;
   operators = processed.relations.operator;
+  templates = processed.templates;
   // eslint-disable-next-line prefer-destructuring
   languageKey = Object.keys(processed.relations.translations)[0];
   translations = processed.relations.translations[languageKey];
@@ -185,7 +192,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         const processedPage = page;
         processedPage.preconnect_links = preconnectLinks;
 
-        page.translations = translations;
+        page.translations = {};
 
         if (hasArchiveModule(page)) {
           createArchivePage(page, marketSections, prefilledModules, createPage);
@@ -195,20 +202,44 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         if (page.type === 'event' && !page.relation.event) {
           return;
         }
+        siteSchema = response.schema[page['market_id']];
+        authors = response.authors;
 
-        createPage({
-          path: page.path.charAt(0) === '/' ? page.path : `/${page.path}`,
-          component: require.resolve(
-            page.path === 'preview' ? './src/components/app-preview.js' : './src/components/app.js'
-          ),
-          context: {
-            page,
-            marketSections,
-            prefilledModules,
-            siteInfo,
-            ...themeOptions,
-          },
-        });
+        const contextData = {
+          page,
+          marketSections,
+          prefilledModules,
+          siteInfo,
+          ...themeOptions,
+        };
+
+        if (page.path === 'contact-us') {
+          createPage({
+            path: `/${page.path}`,
+            component: require.resolve('./src/components/app.js'),
+            context: {
+              ...contextData,
+              siteSchema,
+              authors,
+            },
+          });
+        } else if (page.path === '404') {
+          context404 = contextData;
+        } else {
+          createPage({
+            path: page.path.charAt(0) === '/' ? page.path : `/${page.path}`,
+            component: require.resolve(
+              page.path === 'preview'
+                ? './src/components/app-preview.js'
+                : './src/components/app.js'
+            ),
+            context: {
+              ...contextData,
+              siteSchema,
+              translations,
+            },
+          });
+        }
 
         // Operator tracker pages
         if (page.type === 'operator') {
@@ -257,10 +288,12 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
 
 exports.onCreatePage = ({ page, actions }) => {
   const { createPage } = actions;
-  if (page.path.includes('404')) {
+
+  if (page.path.includes('sitemap')) {
     const pageNotFoundData = {
-      meta_title: 'Page not found',
-      template: '404',
+      meta_title: 'Sitemap',
+      template: 'sitemap',
+      title: 'Site Map',
       type: 'page',
       sections: {
         main: null,
@@ -275,10 +308,16 @@ exports.onCreatePage = ({ page, actions }) => {
       },
     };
     page = Object.assign(pageNotFoundData, page); // eslint-disable-line no-param-reassign
+    createPage({
+      path: page.path,
+      component: require.resolve('./src/pages/sitemap/'),
+      context: { page, siteInfo, marketSections, sitemapData: { ...htmlSitemapPages }, templates },
+    });
+  } else if (page.path.includes('404')) {
     createPage({
       path: page.path,
       component: require.resolve('./src/pages/404/'),
-      context: { page, marketSections, prefilledModules, siteInfo },
+      context: context404,
     });
   } else {
     createPage({
@@ -300,6 +339,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         '~helpers': path.resolve(__dirname, 'src/helpers'),
         '~hooks': path.resolve(__dirname, 'src/hooks'),
         '~tests': path.resolve(__dirname, 'tests'),
+        '~context': path.resolve(__dirname, 'src/context'),
       },
     },
   });

package/jest.config.js

@@ -14,6 +14,7 @@ module.exports = {
     '^~helpers(.*)$': '<rootDir>/src/helpers$1',
     '^~hooks(.*)$': '<rootDir>/src/hooks$1',
     '^~tests(.*)$': '<rootDir>/tests$1',
+    '^~context(.*)$': '<rootDir>/src/context$1',
     // JSON Data
     'data.json': '<rootDir>/__mocks__/search-data.json',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.3.0",
+  "version": "1.4.2",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/app.js

@@ -1,21 +1,26 @@
+/* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import TranslationsProvider from '~context/TranslationsProvider';
 import Body from '~pages/body';
 import Head from '~organisms/head';
 
-const App = ({ pageContext }) => (
-  <>
-    <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
-    <Body pageContext={pageContext} />
-  </>
-);
+const App = ({ pageContext }) => {
+  const { translations } = pageContext;
+  return (
+    <TranslationsProvider value={{ translations }}>
+      <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
+      <Body pageContext={pageContext} />
+    </TranslationsProvider>
+  );
+};
 
 App.propTypes = {
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
       id: PropTypes.number,
     }),
+    translations: PropTypes.object,
     siteInfo: PropTypes.shape({
       robots_txt: PropTypes.string,
       site_logo: PropTypes.string,

package/src/components/atoms/archive/items/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Cards from '~organisms/cards';
 
 // Test included with archive & cards test
-const Items = ({ module , page }) => <Cards module={module} page={page} />;
+const Items = ({ module, page }) => <Cards module={module} page={page} />;
 
 Items.propTypes = {
   module: PropTypes.shape({

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

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -19,7 +20,7 @@ const Author = ({
     <>
       {link && icon && (
         <div className={styles.authorIcon}>
-          <a href={link} target="_blank" rel="noreferrer">
+          <a href={link} target="_blank" rel="noreferrer" className="author-gtm">
             {icon}
           </a>
         </div>
@@ -31,7 +32,7 @@ const Author = ({
           (authorProfile ? (
             <>
               {`${prefix} `}
-              <Link to={authorProfile} title={name}>
+              <Link to={authorProfile} className="author-gtm" title={name}>
                 {name}
               </Link>
             </>

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

@@ -2,17 +2,13 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import getPageData from '~tests/factories/pages/default.factory';
 import { authorObject } from '~tests/factories/modules/author-box.factory';
 import AuthorBox from '.';
 
 describe('author box component', () => {
   test('render', () => {
-    const page = getPageData;
     const author = authorObject;
-    const { container, getByText } = render(
-      <AuthorBox author={author} translations={page.translations} />
-    );
+    const { container, getByText } = render(<AuthorBox author={author} />);
     expect(container).toBeTruthy();
     // Logo
     expect(container.querySelector('img')).toBeFalsy();

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

@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { translate } from '~helpers/getters';
 import styles from './author-box.module.scss';
 import LazyImage from '~hooks/lazy-image';
 import Link from '~hooks/link';
+import { Context } from '~context/TranslationsProvider';
 
-export default function AuthorBox({ author, translations }) {
+export default function AuthorBox({ author }) {
+  const { translations } = useContext(Context) || {};
   const socialLinks = [
-    { link: author.facebook_profile, icon: <FaFacebookSquare /> },
-    { link: author.instagram_profile, icon: <FaInstagram /> },
-    { link: author.linkedin_profile, icon: <FaLinkedin /> },
-    { link: author.twitter_profile, icon: <FaTwitter /> },
+    { id: 'fb', link: author.facebook_profile, icon: <FaFacebookSquare /> },
+    { id: 'ig', link: author.instagram_profile, icon: <FaInstagram /> },
+    { id: 'li', link: author.linkedin_profile, icon: <FaLinkedin /> },
+    { id: 'tw', link: author.twitter_profile, icon: <FaTwitter /> },
   ];
   return (
     <div className={styles.container}>
@@ -30,17 +32,32 @@ export default function AuthorBox({ author, translations }) {
           <div className={styles.links}>
             <p className={styles.contactLinks}>
               {author.email_address && (
-                <a href={`mailto:${author.email_address}`} target="_blank" rel="noreferrer">
+                <a
+                  href={`mailto:${author.email_address}`}
+                  className="author-gtm"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   Email
                 </a>
               )}
               {author.personal_website && (
-                <a href={author.personal_website} target="_blank" rel="noreferrer">
+                <a
+                  href={author.personal_website}
+                  className="author-gtm"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   Website
                 </a>
               )}
               {author.additional_url && (
-                <a href={author.additional_url} target="_blank" rel="noreferrer">
+                <a
+                  href={author.additional_url}
+                  className="author-gtm"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   Contact
                 </a>
               )}
@@ -50,16 +67,28 @@ export default function AuthorBox({ author, translations }) {
                 .filter((socialLink) => socialLink.link)
                 .map((filteredLinks) => (
                   // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                  <a href={filteredLinks.link} target="_blank" rel="noreferrer">
+                  <a
+                    href={filteredLinks.link}
+                    className="author-gtm"
+                    target="_blank"
+                    rel="noreferrer"
+                    key={`author-box-link-${filteredLinks.id}`}
+                  >
                     {filteredLinks.icon}
                   </a>
                 ))}
             </p>
             <p className={styles.biography}>{author.biography}</p>
           </div>
-          <Link to={author.profile_page_path} title="Read More" className={styles.button}>
-            {translate(translations, 'read_more', 'Read More')}
-          </Link>
+          {author.profile_page_path && (
+            <Link
+              to={author.profile_page_path}
+              title="Read More"
+              className={`${styles.button} author-gtm`}
+            >
+              {translate(translations, 'read_more', 'Read More')}
+            </Link>
+          )}
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import PropTypes from 'prop-types';
 import Link from '~hooks/link';
@@ -6,8 +6,11 @@ import Link from '~hooks/link';
 import styles from './breadcrumbs.module.scss';
 import keygen from '~helpers/keygen';
 import { translate } from '~helpers/getters';
+import { Context } from '~context/TranslationsProvider';
 
 function Breadcrumbs({ page, separator = <span> / </span> }) {
+  const { translations } = useContext(Context) || {};
+
   if (page.path === '/') {
     return <></>;
   }
@@ -15,8 +18,8 @@ function Breadcrumbs({ page, separator = <span> / </span> }) {
   return (
     <ol className={styles.breadcrumbs}>
       <li className={styles.item}>
-        <Link to="/" title="Home">
-          {translate(page.translations, 'Home', 'Home')}
+        <Link to="/" title="Home" className="breadcrumbs-gtm">
+          {translate(translations, 'Home', 'Home')}
         </Link>
         {separator}
       </li>
@@ -24,7 +27,7 @@ function Breadcrumbs({ page, separator = <span> / </span> }) {
         page.breadcrumbs.map((breadcrumb) => (
           <li key={keygen()} className={styles.item}>
             {breadcrumb.path ? (
-              <Link to={breadcrumb.path} title={breadcrumb.label}>
+              <Link to={breadcrumb.path} title={breadcrumb.label} className="breadcrumbs-gtm">
                 {breadcrumb.label}
               </Link>
             ) : (
@@ -44,6 +47,7 @@ Breadcrumbs.propTypes = {
     path: PropTypes.string,
     breadcrumbs: PropTypes.arrayOf(PropTypes.object),
     vanity_label: PropTypes.string,
+    translations: PropTypes.shape({}),
   }).isRequired,
   separator: PropTypes.element,
 };

package/src/components/atoms/button/button.test.js

@@ -32,6 +32,13 @@ describe('Button Component', () => {
     expect(container.querySelectorAll('a.primary')).toHaveLength(0);
     expect(getByText('sample text').closest('a')).toHaveAttribute('href', '/example');
   });
+
+  test('check for GTM class', () => {
+    const { getByText } = render(
+      <Button to="/example" btnText="sample text" gtmClass="sample-gtm" primaryColor={false} />
+    );
+    expect(getByText('sample text').closest('a').classList.contains('sample-gtm')).toBe(true);
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -18,6 +18,7 @@ function Button({
   disabled = false,
   tertiary = false,
   noStyle = false,
+  gtmClass = '',
 }) {
   const classes = `${styles.ctaBtn} ${primaryColor ? styles.primary : styles.secondary} ${
     invertColors && styles.invertColors
@@ -29,7 +30,12 @@ function Button({
 
   if (isButton) {
     return (
-      <button type="submit" onClick={onClick} className={classes} disabled={disabled}>
+      <button
+        type="submit"
+        onClick={onClick}
+        className={`${classes} ${gtmClass} btn-cta`}
+        disabled={disabled}
+      >
         {btnText}
       </button>
     );
@@ -37,7 +43,7 @@ function Button({
 
   if (isInternalLink) {
     return (
-      <Link className={classes} to={to} title={btnTitle} aria-label={btnTitle}>
+      <Link className={`${classes} ${gtmClass}`} to={to} title={btnTitle} aria-label={btnTitle}>
         {btnText}
       </Link>
     );
@@ -50,7 +56,7 @@ function Button({
       aria-label={btnTitle}
       onClick={onClick}
       target={!isAnchorLink && targetBlank ? '_blank' : ''}
-      className={classes}
+      className={`${classes} ${gtmClass}`}
       rel="nofollow noreferrer"
     >
       {btnText}
@@ -72,6 +78,7 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   tertiary: PropTypes.bool,
   noStyle: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default Button;

package/src/components/atoms/carousel/arrow/index.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 
 import styles from './arrow.module.scss';
 
-const Arrow = ({ direction, content = '', onClick, onKeyDown, disabled }) => (
+const Arrow = ({ direction, content = '', onClick, onKeyDown, disabled, gtmClass = '' }) => (
   <button
     type="button"
-    className={`${styles.arrow} ${styles[direction]}`}
+    className={`${styles.arrow} ${styles[direction]} ${gtmClass} carousel-arrow-gtm btn-cta`}
     onClick={onClick}
     onKeyDown={onKeyDown}
     disabled={disabled}
@@ -21,6 +21,7 @@ Arrow.propTypes = {
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   disabled: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default Arrow;

package/src/components/atoms/carousel/pagination-item/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styles from './pagination-item.module.scss';
 import keygen from '~helpers/keygen';
 
-const PaginationItem = ({ type, paginationHandler, slideIndex, totalSlides }) => {
+const PaginationItem = ({ type, paginationHandler, slideIndex, totalSlides, gtmClass = '' }) => {
   const pages = [];
 
   for (let i = 0; i < totalSlides; i += 1) {
@@ -19,7 +19,7 @@ const PaginationItem = ({ type, paginationHandler, slideIndex, totalSlides }) =>
         type="button"
         tabIndex="0"
         aria-label={`Slide ${i + 1}`}
-        className={classes}
+        className={`${classes} ${gtmClass} carousel-pagination-gtm btn-cta`}
       />
     );
   }
@@ -32,6 +32,7 @@ PaginationItem.propTypes = {
   paginationHandler: PropTypes.func,
   slideIndex: PropTypes.number,
   totalSlides: PropTypes.number,
+  gtmClass: PropTypes.string,
 };
 
 export default PaginationItem;

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

@@ -43,7 +43,9 @@ const Collapse = ({
           <button
             type="button"
             onClick={clickHandler}
-            className={`${styles.button} ${maxHeightStyle !== 0 ? styles.invertArrow : ''}`}
+            className={`${styles.button} ${
+              maxHeightStyle !== 0 ? styles.invertArrow : ''
+            } collapse-gtm btn-cta`}
           >
             {buttonText}
           </button>