gatsby-core-theme 30.0.49 → 30.0.50

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [30.0.50](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.49...v30.0.50) (2024-01-11)
+
+
+### Bug Fixes
+
+* disable autocomplete ([1a3b7b3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1a3b7b3a8c06a039af1bfa67666d013aeb086035))
+
+
+* Merge branch 'tm-3972-disable-autocomplete' into 'master' ([41831ba](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/41831ba7d12de622f5468bbea99c96c3909db1e2))
+
 ## [30.0.49](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.48...v30.0.49) (2024-01-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.49",
+  "version": "30.0.50",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/organisms/search/index.js

@@ -1,7 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import { navigate } from 'gatsby';
 import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
+import { leftTrim } from '~helpers/strings';
 
 import { toggleScroll } from '~helpers/scroll';
 
@@ -9,23 +10,10 @@ import { NavigationContext } from '../navigation/navigationContext';
 
 import styles from './search.module.scss';
 
-const SearchForm = ({
-  className,
-  searchIcon,
-  iconWidth = 24,
-  iconHeight = 24,
-  pageContext,
-  searchURLPageName,
-}) => {
+const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 }) => {
   const { showSearch, setShowSearch, setShowMenu, showMenu } = useContext(NavigationContext);
-  const Search = showSearch ? loadable(() => import('~molecules/search')) : <></>;
-  const Operator = showSearch ? (
-    loadable(() => import('~atoms/search/autocomplete/operator'))
-  ) : (
-    <></>
-  );
-  const Game = showSearch ? loadable(() => import('~atoms/search/autocomplete/game')) : <></>;
-  const Article = showSearch ? loadable(() => import('~atoms/search/autocomplete/article')) : <></>;
+  const [searchBoxQuery, setSearchBoxQuery] = useState();
+  const searchInputRef = useRef();
 
   const handleOnSearchIconClick = () => {
     setShowSearch(!showSearch);
@@ -45,6 +33,20 @@ const SearchForm = ({
     }
   };
 
+  const formSubmitBoxHandler = (e) => {
+    e.preventDefault();
+    if (searchBoxQuery === '') {
+      e.target.querySelector('input').focus();
+    } else {
+      navigate(`/s?s=${searchBoxQuery}`);
+    }
+  };
+
+  useEffect(() => {
+    // eslint-disable-next-line no-unused-expressions
+    showSearch && searchInputRef.current.focus();
+  }, [showSearch]);
+
   return (
     <div className={className || ''}>
       <button
@@ -71,30 +73,22 @@ const SearchForm = ({
           aria-label="Close search"
           className={`${styles.searchForm || ''} ${styles.show || ''}`}
         >
-          <Search
-            pageContext={pageContext}
-            searchURLPageName={searchURLPageName}
-            searchIcon={searchIcon}
-            formSearchOptions={{
-              autoComplete: true,
-              sort: true,
-              limit: 3,
-            }}
-          >
-            {(item) => (
-              <>
-                <div type="operator">
-                  <Operator item={item} />
-                </div>
-                <div type="game">
-                  <Game item={item} />
-                </div>
-                <div type="article">
-                  <Article item={item} />
-                </div>
-              </>
-            )}
-          </Search>
+          <form onSubmit={formSubmitBoxHandler} className={styles.form || ''}>
+            <input
+              type="text"
+              aria-label="Søk spill eller casino her"
+              placeholder="Søk spill eller casino her"
+              className={styles.formInput || ''}
+              maxLength="60"
+              ref={searchInputRef}
+              onChange={(e) => setSearchBoxQuery(leftTrim(e.target.value))}
+            />
+            <div className={styles.searchButton || ''}>
+              <button aria-label="Search" type="submit" className="search-gtm btn-cta">
+                {searchIcon === null ? <FaSearch /> : <img alt="search" src={searchIcon} />}
+              </button>
+            </div>
+          </form>
         </div>
       )}
     </div>
@@ -107,7 +101,6 @@ SearchForm.propTypes = {
   iconWidth: PropTypes.number,
   iconHeight: PropTypes.number,
   pageContext: PropTypes.shape({}),
-  searchURLPageName: PropTypes.string,
 };
 
 export default SearchForm;

package/src/components/organisms/search/search.module.scss

@@ -18,3 +18,45 @@
     width: 100%;
   }
 }
+
+
+.form {
+  width: 100%;
+  max-width: var(--main-container-max);
+  padding: 0 1.6rem;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: var(--search-top-space, 2.4rem);
+  left: 50%;
+  transform: translateX(-50%);
+  >input{
+    align-items: center;
+    border-radius: var(--border-radius);
+    color: #0e1118;
+    display: flex;
+    font-size: 1.8rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 2.7rem;
+    padding: 2.2rem 1.6rem;
+    width: 100%;
+  }
+
+  .searchButton > button >img{
+    filter: brightness(0);
+    height: 2.4rem;
+    width: 2.4rem;
+  }
+
+  .searchButton {
+    position: absolute;
+    right: 3rem;
+    top: 2.3rem;
+
+    svg {
+      color: var(--nav-icon-color);
+      font-size: 3rem;
+    }
+  }
+}