gatsby-matrix-theme 2.3.6 → 2.3.7

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "2.3.6",
+  "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.6.3",
+    "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/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/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';
@@ -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/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/public/iframe.html

@@ -135,4 +135,4 @@
             
         
             
-              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.76a8717d.iframe.bundle.js"></script><script src="vendors~main.c0720eee.iframe.bundle.js"></script><script src="main.927cac84.iframe.bundle.js"></script></body></html>
+              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.76a8717d.iframe.bundle.js"></script><script src="vendors~main.364411ac.iframe.bundle.js"></script><script src="main.b9b80be9.iframe.bundle.js"></script></body></html>