gatsby-matrix-theme 2.3.3 → 2.3.7

package/CHANGELOG.md

@@ -1,3 +1,62 @@
+## [2.3.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.6...v2.3.7) (2021-11-22)
+
+
+### Bug Fixes
+
+* correction to typo ([b50be3c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b50be3c5e42f2560f5850f6b9b8e624d56790fe0))
+* force load lazy images on tab change ([fa06336](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa06336730891bed815cbf1867d4ca870d257fbb))
+* general fixes ([5aef217](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5aef217afd001c09c8baa51ce75dc087a28f8294))
+* highlight search query on auto complete ([2aee5da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2aee5da1c4e5b4d790ee1a1c5a687f5f790d244b))
+
+
+* Merge branch 'tm-2478-search' into 'master' ([a86ac37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a86ac379825d5599b066d9f13b081c8ff7b8f4b2))
+
+## [2.3.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.5...v2.3.6) (2021-11-18)
+
+
+### Bug Fixes
+
+* storybook pipeline ([29e7f34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29e7f34ca9b04a011c2784d9a7e8c930fd900cfa))
+
+
+### Config
+
+* updated core theme version ([0552c2a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0552c2a93a4cf6716d2bd7be05e7b9f9ce58c5f5))
+
+## [2.3.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.4...v2.3.5) (2021-11-16)
+
+
+### Bug Fixes
+
+* menu and sitemap fixes ([1ab7026](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ab70262191e5129630e2cdd9d802a837f5b9f7c))
+
+
+* Merge branch 'tm-2593-2587-menu-sitemap-fixes' into 'master' ([e79806b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e79806b8abaaadc9f3caa2ca9bc0ff755cd75ce7))
+
+## [2.3.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.3...v2.3.4) (2021-11-15)
+
+
+### Bug Fixes
+
+* replaced title tag of cards h2 to span ([ba1c695](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ba1c695ef4af00b05aed04152762bdeedc0572db))
+* stack table styling ([f133647](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f13364772731c70422509482cf683da8577e0ea2))
+
+
+### Code Refactoring
+
+* update newsletter hide on scroll functionality ([773b9da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/773b9da4defef0c6001fe718dc29fe4f99a1ebd4))
+* update newsletter hide on scroll functionality ([1319fe3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1319fe3fb096cd6d9ea3182cbe8cead6ffd5a9c4))
+
+
+### Config
+
+* updated core theme version and content styling fixes ([f7b79f5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f7b79f511a8a76bbcec596505833fb9350b35aa5))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([f6ac4ae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f6ac4ae3bb416dc5d0ab52a5b891d7d6a03c995a))
+* Merge branch 'tm-2492-update-newsletter-hide-on-scroll' into 'master' ([75de895](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/75de89531ef472e96d1ee309ccc514c4635e2d5c))
+* Merge branch 'TM-255-incorrect-heading' into 'master' ([5b0d348](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5b0d3487365ceefaa2e4f8ba22ef80b70d44670a))
+
 ## [2.3.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.2...v2.3.3) (2021-11-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.3.3",
+  "version": "2.3.7",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.5.0",
+    "gatsby-core-theme": "^1.6.5",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/article-card/index.js

@@ -47,7 +47,7 @@ const ArticleCard = ({ item }) => {
       )}
       <div className={`${styles.cardContent} ${featured && styles.featured}`}>
         <Link to={path} className="article-card-gtm">
-          <h2 className={styles.cardTitle}>{title}</h2>
+          <span className={styles.cardTitle}>{title}</span>
         </Link>
         <Button
           to={path}

package/src/components/atoms/cards/base-card/base-card.module.scss

@@ -6,6 +6,11 @@
   border-radius: var(--border-radius);
   border: 1px solid #f1f1f1;
   position: relative;
+  a{
+    span{
+      font-weight: 500;
+    }
+  }
   &.article {
     height: 30rem;
   }

package/src/components/atoms/cards/game-card/index.js

@@ -32,7 +32,7 @@ const GameCard = ({ item, button_text = 'play_now' }) => {
       )}
       <div className={`${styles.cardContent} ${featured && styles.featured}`}>
         <Link to={path} className="game-card-gtm">
-          <h2 className={styles.cardTitle}>{title}</h2>
+          <span className={styles.cardTitle}>{title}</span>
         </Link>
         <div className={styles.cardMeta}>
           <div className={styles.cardProvider}>{relation && relation?.game_provider?.name}</div>

package/src/components/atoms/cards/payment-method-card/index.js

@@ -22,7 +22,7 @@ const PaymentMethodCard = ({ item, showTitle = true, showDesc = true }) => {
           </Link>
           {showTitle && (
             <Link className={`${styles.links} payment-method-card-gtm`} to={path}>
-              <h2 className={styles.title}>{title}</h2>
+              <span className={styles.title}>{title}</span>
             </Link>
           )}
         </div>

package/src/components/atoms/cards/software-provider-card/index.js

@@ -31,7 +31,7 @@ const SoftwareProviderCard = ({
           </Link>
           {showTitle && (
             <Link className={`${styles.links} software-provider-card-gtm`} to={path}>
-              <h2 className={styles.title}>{title}</h2>
+              <span className={styles.title}>{title}</span>
             </Link>
           )}
         </div>

package/src/components/atoms/search/autocomplete/article.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Article = ({ item = {}, Button = <GrFormNext /> }) => (
+const Article = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="article-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ Article.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Article;

package/src/components/atoms/search/autocomplete/game.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Game = ({ item = {}, Button = <GrFormNext /> }) => (
+const Game = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="game-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ Game.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Game;

package/src/components/atoms/search/autocomplete/operator.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const Operator = ({ item = {}, Button = <GrFormNext /> }) => (
+const Operator = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={`/${item.path}`} className="operator-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -16,6 +22,7 @@ Operator.propTypes = {
     path: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default Operator;

package/src/components/atoms/search/autocomplete/payment_methods.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const PaymentMethods = ({ item = {}, Button = <GrFormNext /> }) => (
+const PaymentMethods = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="payment-method-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ PaymentMethods.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default PaymentMethods;

package/src/components/atoms/search/autocomplete/software_provider.js

@@ -1,11 +1,17 @@
+/* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GrFormNext } from 'react-icons/gr';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 
-const SoftwareProvider = ({ item = {}, Button = <GrFormNext /> }) => (
+const SoftwareProvider = ({ item = {}, Button = <GrFormNext />, searchQuery }) => (
   <Link to={item.path} className="software-provider-gtm">
-    <h1>{item.title}</h1>
+    <h1
+      dangerouslySetInnerHTML={{
+        __html: splitSearchQuery(item.title, searchQuery),
+      }}
+    />
     {Button}
   </Link>
 );
@@ -15,6 +21,7 @@ SoftwareProvider.propTypes = {
     title: PropTypes.string,
   }).isRequired,
   Button: PropTypes.func,
+  searchQuery: PropTypes.string,
 };
 
 export default SoftwareProvider;

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

@@ -1,11 +1,13 @@
 /* eslint-disable array-callback-return */
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { BiSitemap } from 'react-icons/bi';
 import { IoMdLink } from 'react-icons/io';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Masonry from 'react-masonry-css';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './sitemap.module.scss';
 import Link from '~hooks/link';
 
@@ -15,10 +17,15 @@ const Sitemap = ({
   templateIcon = <BiSitemap />,
   linkIcon = <IoMdLink />,
 }) => {
+  const { translations } = useContext(Context) || {};
   const market = Object.keys(sitemapData)[0];
 
   const getTemplateName = (template) => {
-    const templateName = templates[template].short_name.replace('_', ' ');
+    const templateName = translate(
+      translations,
+      templates[template].short_name,
+      templates[template].short_name.replace('_', ' ')
+    );
     const templatePages = sitemapData[market][template];
     const templatePagesCount = templatePages && templatePages.length;
 

package/src/components/molecules/newsletter/index.js

@@ -22,6 +22,7 @@ const Newsletter = ({
   buttonText = 'Hent dine freespins',
   formAction = '',
   newsletterListId = '',
+  hideButtonOnScroll = true,
   footer = false,
 }) => {
   const [toggleNewsetter, setToggleNewsletter] = useState(false);
@@ -61,7 +62,7 @@ const Newsletter = ({
     >
       {!footer && page && page.template !== 'operator_review' && (
         <Button
-          active={!!(!toggleNewsetter && !toggleOnScroll)}
+          active={!!(!toggleNewsetter && (!hideButtonOnScroll || !toggleOnScroll))}
           text={openBtnText}
           toggleNewsLetter={() => setToggleNewsletter(!toggleNewsetter)}
           gtmClass="newsletter-gtm btn-cta"
@@ -70,7 +71,7 @@ const Newsletter = ({
       <div
         className={
           !footer
-            ? toggleNewsetter && !toggleOnScroll
+            ? toggleNewsetter && (!hideButtonOnScroll || !toggleOnScroll)
               ? `${styles.form} ${styles.active}`
               : styles.form
             : styles.newsletter
@@ -111,6 +112,7 @@ Newsletter.propTypes = {
     path: PropTypes.string,
     template: PropTypes.string,
   }),
+  hideButtonOnScroll: PropTypes.bool,
   footer: PropTypes.bool,
 };
 

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

@@ -39,6 +39,11 @@
           &:last-child {
             border-top-right-radius: var(--table-border-radius);
           }
+
+          a {
+            color: white !important;
+            text-decoration: underline;
+          }
         }
       }
     }

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

@@ -75,7 +75,7 @@ const Search = ({
 
   // Get the child by the given type - a data object is required
   const getChildType = (item, type) =>
-    children(item).props.children.find((child) => child.props.type === type);
+    children(item, searchQuery).props.children.find((child) => child.props.type === type);
 
   // Prepare search result for auto complete
   const loadAutoComplete = useCallback(() => {

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

@@ -16,7 +16,13 @@ export default (props) => {
           import(`../../../../components/molecules/toplist/row/variant-one`)
         );
         customCardComponent = (prop) => (
-          <ToplistRow item={prop.item.relation} layout="grid" tracker="main" number={prop.number} />
+          <ToplistRow
+            page={prop.item}
+            item={prop.item.relation}
+            layout="grid"
+            tracker="main"
+            number={prop.number}
+          />
         );
       } else {
         customCardComponent = loadable(() =>

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

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import NavigationProvider from 'gatsby-core-theme/src/components/organisms/navigation/navigationContext.js';
-import { getSiteName } from 'gatsby-core-theme/src/helpers/getters';
 import styles from 'gatsby-core-theme/src/components/organisms/navigation/navigation.module.scss';
 import Link from '~hooks/link';
 import Menu from '~molecules/menu';
@@ -23,7 +22,7 @@ const Navigation = ({
       animation: 'collapse',
       closeHandler: null,
       stopScrollOnOpen: true,
-      canOpenAllSubMenus: false,
+      canOpenAllSubMenus: true,
       subMenuDropDownButton: true,
     },
     desktop: {
@@ -61,7 +60,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}>
-            <img alt={getSiteName()} src={logo} width={logoWidth} height={logoHeight} />
+            <img
+              alt={process.env.GATSBY_SITE_NAME}
+              src={logo}
+              width={logoWidth}
+              height={logoHeight}
+            />
           </Link>
           {showMenu && (
             <>

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

@@ -95,22 +95,22 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
               showViewResultsText: false,
             }}
           >
-            {(item) => (
+            {(item, searchQuery) => (
               <>
                 <div type="operator">
-                  <Operator item={item} />
+                  <Operator item={item} searchQuery={searchQuery} />
                 </div>
                 <div type="game">
-                  <Game item={item} />
+                  <Game item={item} searchQuery={searchQuery} />
                 </div>
                 <div type="article">
-                  <Article item={item} />
+                  <Article item={item} searchQuery={searchQuery} />
                 </div>
                 <div type="payment_method">
-                  <PaymentMethods item={item} />
+                  <PaymentMethods item={item} searchQuery={searchQuery} />
                 </div>
                 <div type="software_provider">
-                  <SoftwareProvider item={item} />
+                  <SoftwareProvider item={item} searchQuery={searchQuery} />
                 </div>
               </>
             )}

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

@@ -65,7 +65,7 @@ function Body({ pageContext, children }) {
               animation: 'collapseFull',
               closeHandler: null,
               stopScrollOnOpen: true,
-              canOpenAllSubMenus: false,
+              canOpenAllSubMenus: true,
               subMenuDropDownButton: true,
             },
             desktop: {

package/src/gatsby-core-theme/pages/sitemap/index.js

@@ -2,18 +2,22 @@
 /* eslint-disable react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
+import TranslationsProvider from 'gatsby-core-theme/src/context/TranslationsProvider';
 import Body from '~pages/body';
 import Head from '~organisms/head';
 import SitemapLinks from '../../../components/atoms/sitemap';
 
-const Sitemap = ({ pageContext }) => (
-  <>
-    <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
-    <Body pageContext={pageContext}>
-      <SitemapLinks sitemapData={pageContext.sitemapData} templates={pageContext.templates} />
-    </Body>
-  </>
-);
+const Sitemap = ({ pageContext }) => {
+  const { translations } = pageContext.page;
+  return (
+    <TranslationsProvider value={{ translations }}>
+      <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
+      <Body pageContext={pageContext}>
+        <SitemapLinks sitemapData={pageContext.sitemapData} templates={pageContext.templates} />
+      </Body>
+    </TranslationsProvider>
+  );
+};
 
 Sitemap.propTypes = {
   pageContext: PropTypes.shape({

package/src/helpers/splitSearchQuery.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export const splitSearchQuery = (text, searchQuery) =>
+  text.replace(new RegExp(searchQuery, 'gi'), (match) => `<label>${match}</label>`);

package/src/hooks/tabs/index.js

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext, useState } 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 TabList from './tab/tab-list';
@@ -89,6 +91,7 @@ const Tabs = ({
   };
 
   function onClickTabItem(tabId) {
+    forceCheck();
     setActiveTab(tabId);
   }
   return (

package/storybook/.ci.yml

@@ -23,7 +23,7 @@ Storybook Build:
 
 
 Storybook Deploy:
-  image: git.ilcd.rocks:4567/core/gatsby-theme-gig-media/full:latest
+  image: git.ilcd.rocks:4567/team-floyd/themes/gatsby-themes:node14
   stage: deploy
   tags:
     - floyd-runner-test