gatsby-core-theme 44.0.21 → 44.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [44.0.23](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.22...v44.0.23) (2025-04-23)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * autocomplete ([3ab3ece](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3ab3ece020d94e6df3ad15ab8bef9e8442f7f311))
7
+
8
+ ## [44.0.22](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.21...v44.0.22) (2025-04-21)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * search button ([697e86d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/697e86d41e560b3dc3f6ea360eb3a5816cdd60d0))
14
+
1
15
  ## [44.0.21](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.20...v44.0.21) (2025-04-21)
2
16
 
3
17
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gatsby-core-theme",
3
- "version": "44.0.21",
3
+ "version": "44.0.23",
4
4
  "description": "Gatsby Theme NPM Package",
5
5
  "author": "",
6
6
  "license": "ISC",
@@ -3,7 +3,7 @@
3
3
 
4
4
  gap: .8rem;
5
5
  width: 100%;
6
- background-color: var(--color-7);
6
+ background-color: var(--autocomplete-bg, #FFF);
7
7
  border-radius: .8rem;
8
8
  padding: 1.2rem;
9
9
 
@@ -4,14 +4,14 @@ import Button from 'gatsby-core-theme/src/components/atoms/button/button';
4
4
  import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
5
5
  import styles from './article.module.scss';
6
6
 
7
- const Article = ({ item = {} }) => (
7
+ const Article = ({ item = {}, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
8
8
  <li className={styles.row || ''}>
9
9
  <h3 className={styles.operatorTitle}>{item.title}</h3>
10
10
  <Button
11
- btnText=''
11
+ btnText={btnText}
12
12
  to={item?.path}
13
13
  gtmClass="autocomplete-article-item-gtm btn-cta"
14
- icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
14
+ icon={icon}
15
15
  />
16
16
  </li>
17
17
  );
@@ -20,6 +20,8 @@ Article.propTypes = {
20
20
  item: PropTypes.shape({
21
21
  title: PropTypes.string,
22
22
  }).isRequired,
23
+ btnText: PropTypes.string,
24
+ icon: PropTypes.node,
23
25
  };
24
26
 
25
27
  export default Article;
@@ -3,7 +3,7 @@
3
3
 
4
4
  gap: .8rem;
5
5
  width: 100%;
6
- background-color: var(--color-7);
6
+ background-color: var(--autocomplete-bg, #FFF);
7
7
  border-radius: .8rem;
8
8
  padding: 1.2rem;
9
9
 
@@ -4,14 +4,14 @@ import Button from 'gatsby-core-theme/src/components/atoms/button/button';
4
4
  import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
5
5
  import styles from './default.module.scss';
6
6
 
7
- const Default = ({ item = {} }) => (
7
+ const Default = ({ item = {}, btnText='', icon=<FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
8
8
  <li className={styles.row || ''}>
9
9
  <h3 className={styles.operatorTitle}>{item.title}</h3>
10
10
  <Button
11
- btnText=''
11
+ btnText={btnText}
12
12
  to={item?.path}
13
13
  gtmClass="autocomplete-article-item-gtm btn-cta"
14
- icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
14
+ icon={icon}
15
15
  />
16
16
  </li>
17
17
  );
@@ -20,6 +20,8 @@ Default.propTypes = {
20
20
  item: PropTypes.shape({
21
21
  title: PropTypes.string,
22
22
  }).isRequired,
23
+ btnText: PropTypes.string,
24
+ icon: PropTypes.node,
23
25
  };
24
26
 
25
27
  export default Default;
@@ -3,7 +3,7 @@
3
3
 
4
4
  gap: .8rem;
5
5
  width: 100%;
6
- background-color: var(--color-7);
6
+ background-color: var(--autocomplete-bg, #FFF);
7
7
  border-radius: .8rem;
8
8
  padding: 1.2rem;
9
9
 
@@ -6,7 +6,7 @@ import LazyImage from '~hooks/lazy-image';
6
6
  import { imagePrettyUrl } from '~helpers/getters';
7
7
  import styles from './game.module.scss';
8
8
 
9
- const Game = ({ item = {}, width = 56, height = 56 }) => {
9
+ const Game = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
10
10
  const { logo } = item;
11
11
 
12
12
  return (
@@ -20,9 +20,10 @@ const Game = ({ item = {}, width = 56, height = 56 }) => {
20
20
  />
21
21
  <h3 className={styles.gameTitle}>{item.title}</h3>
22
22
  <Button
23
+ btnText={btnText}
23
24
  to={item?.path}
24
25
  gtmClass="autocomplete-game-item-gtm btn-cta"
25
- icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
26
+ icon={icon}
26
27
  />
27
28
  </li>
28
29
  );
@@ -37,6 +38,8 @@ Game.propTypes = {
37
38
  }).isRequired,
38
39
  width: PropTypes.number,
39
40
  height: PropTypes.number,
41
+ btnText: PropTypes.string,
42
+ icon: PropTypes.node,
40
43
  };
41
44
 
42
45
  export default Game;
@@ -6,7 +6,7 @@ import LazyImage from '~hooks/lazy-image';
6
6
  import { imagePrettyUrl } from '~helpers/getters';
7
7
  import styles from './operator.module.scss';
8
8
 
9
- const Operator = ({ item = {}, width = 56, height = 56 }) => {
9
+ const Operator = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
10
10
  const { logo } = item;
11
11
  return (
12
12
  <li className={styles.row || ''}>
@@ -20,8 +20,9 @@ const Operator = ({ item = {}, width = 56, height = 56 }) => {
20
20
  <h3 className={styles.operatorTitle}>{item.title}</h3>
21
21
  <Button
22
22
  to={item?.path}
23
+ btnText={btnText}
23
24
  gtmClass="autocomplete-operator-item-gtm btn-cta"
24
- icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
25
+ icon={icon}
25
26
  />
26
27
  </li>
27
28
  );
@@ -36,6 +37,8 @@ Operator.propTypes = {
36
37
  }).isRequired,
37
38
  width: PropTypes.number,
38
39
  height: PropTypes.number,
40
+ btnText: PropTypes.string,
41
+ icon: PropTypes.node,
39
42
  };
40
43
 
41
44
  export default Operator;
@@ -3,7 +3,7 @@
3
3
 
4
4
  gap: .8rem;
5
5
  width: 100%;
6
- background-color: var(--color-7);
6
+ background-color: var(--autocomplete-bg, #FFF);
7
7
  border-radius: .8rem;
8
8
  padding: 1.2rem;
9
9
 
@@ -16,12 +16,6 @@
16
16
  border-radius: 4rem;
17
17
  }
18
18
 
19
- .searchButton {
20
- position: absolute;
21
- left: 1rem;
22
- top: 2.5rem;
23
- }
24
-
25
19
  .noData {
26
20
  padding: 2.4rem;
27
21
  font-weight: bold;
@@ -4,6 +4,7 @@
4
4
  import React, { useRef, useState, useEffect, Suspense } from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import { BiSearchAlt } from '@react-icons/all-files/bi/BiSearchAlt';
7
+ import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
7
8
  import loadSource from '../../../helpers/search-source';
8
9
  import useTranslate from '~hooks/useTranslate/useTranslate';
9
10
  import { toggleScroll } from '~helpers/scroll';
@@ -24,6 +25,7 @@ const SearchForm = ({
24
25
  marketPrefix = '/',
25
26
  startSearchAt = 3,
26
27
  isDisabled,
28
+ autoCompleteIcon = <IoIosArrowForward title="Search Icon" />,
27
29
  }) => {
28
30
  const { market, template } = pageContext.page;
29
31
  const [localSearch, setLocalSearch] = useState(false);
@@ -72,7 +74,7 @@ const SearchForm = ({
72
74
  try {
73
75
  autoCompleteData.current = autoCompleteData.current || await loadSource(market)
74
76
 
75
- setFilteredData(autoCompleteData.current.filter(item =>
77
+ setFilteredData(autoCompleteData.current.filter(item =>
76
78
  item.title.toLowerCase().includes(query.toLowerCase())
77
79
  ));
78
80
 
@@ -110,9 +112,8 @@ const SearchForm = ({
110
112
  type="button"
111
113
  aria-label="Search"
112
114
  onClick={handleOnSearchIconClick}
113
- className={`${styles.searchButton || ''} ${
114
- localSearch && (styles.active || '')
115
- } search-gtm btn-cta`}
115
+ className={`${styles.searchButton || ''} ${localSearch && (styles.active || '')
116
+ } search-gtm btn-cta`}
116
117
  disabled={isDisabled}
117
118
  >
118
119
  {searchIcon === null ? (
@@ -157,7 +158,7 @@ const SearchForm = ({
157
158
  {filteredData.length ? <ul>
158
159
  {filteredData.map((value) => {
159
160
  const PageTypeCard = getComponent(value.pageType);
160
- return <Suspense fallback={<Loading single />} key={keygen()}><PageTypeCard item={value} /></Suspense>
161
+ return <Suspense fallback={<Loading single />} key={keygen()}><PageTypeCard item={value} icon={autoCompleteIcon} /></Suspense>
161
162
  })}
162
163
  </ul> : <NoResults text={useTranslate('autocomplete_no_results', 'No Results Found')} />}
163
164
  </div>
@@ -184,7 +185,8 @@ SearchForm.propTypes = {
184
185
  }),
185
186
  marketPrefix: PropTypes.string,
186
187
  isDisabled: PropTypes.bool,
187
- startSearchAt: PropTypes.number
188
+ startSearchAt: PropTypes.number,
189
+ autoCompleteIcon: PropTypes.node,
188
190
  };
189
191
 
190
192
  export default SearchForm;
@@ -52,10 +52,6 @@
52
52
  }
53
53
 
54
54
  .searchButton {
55
- position: absolute;
56
- right: 3rem;
57
- top: 2.3rem;
58
-
59
55
  svg {
60
56
  color: var(--nav-icon-color);
61
57
  font-size: 3rem;