Merge pull request #1538 from navikt/Bruke-Aksel-kompontent-i-søkefeltet

Bruk av Aksel komponent i søket i den gamle (eksisterende) dekoratøren
navikt · May 13, 2024 · bcadf40 · bcadf40
2 parents ddf3bee + 2560027
commit bcadf40
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 227 deletions.
diff --git a/src/komponenter/header/header-regular/common/sok/Sok.scss b/src/komponenter/header/header-regular/common/sok/Sok.scss
@@ -1,29 +1,11 @@
 @use 'src/styling-variabler.scss' as sv;
 
 .header-linje {
-    .sok-container {
-        position: relative;
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-    }
-
-    .sok-input-resultat {
-        position: relative;
-        width: 100%;
-    }
-
     @media #{sv.$screen-mobile} {
         .sok-container {
             margin-bottom: 1rem;
             margin-top: 0.5rem;
             z-index: 101;
-        }
-
-        .sok-input-resultat {
-            position: relative;
-            width: 100%;
-        }
+        }   
     }
 }
diff --git a/src/komponenter/header/header-regular/common/sok/Sok.tsx b/src/komponenter/header/header-regular/common/sok/Sok.tsx
@@ -101,47 +101,45 @@ const Sok = (props: Props) => {
             onSubmit={onSubmit}
         >
             <div className="sok-container">
-                <div className="sok-input-resultat">
-                    <SokInput
-                        onChange={(value: string) => {
-                            setSearchInput(value);
-                            if (value.length > 2) {
-                                setLoading(true);
-                                fetchSearchDebounced({
-                                    value,
-                                    audience,
-                                    language,
-                                    environment,
-                                    setLoading,
-                                    setError,
-                                    setResult,
-                                });
-                            } else {
-                                setLoading(false);
-                            }
-                        }}
-                        className={klassenavn}
-                        language={language}
-                        audience={audience}
-                        writtenInput={searchInput}
-                        onReset={onReset}
-                        id={props.id}
-                    />
-                    {loading ? (
-                        <Spinner tekstId={'spinner-sok'} />
-                    ) : (
-                        result &&
-                        searchInput.length > 2 && (
-                            <SokResultater
-                                writtenInput={searchInput}
-                                result={result}
-                                numberOfResults={MAX_HITS_TO_DISPLAY}
-                                language={language}
-                                fetchError={error}
-                            />
-                        )
-                    )}
-                </div>
+                <SokInput
+                    onChange={(value: string) => {
+                        setSearchInput(value);
+                        if (value.length > 2) {
+                            setLoading(true);
+                            fetchSearchDebounced({
+                                value,
+                                audience,
+                                language,
+                                environment,
+                                setLoading,
+                                setError,
+                                setResult,
+                            });
+                        } else {
+                            setLoading(false);
+                        }
+                    }}
+                    className={klassenavn}
+                    language={language}
+                    audience={audience}
+                    writtenInput={searchInput}
+                    onReset={onReset}
+                    id={props.id}
+                />
+                {loading ? (
+                    <Spinner tekstId={'spinner-sok'} />
+                ) : (
+                    result &&
+                    searchInput.length > 2 && (
+                        <SokResultater
+                            writtenInput={searchInput}
+                            result={result}
+                            numberOfResults={MAX_HITS_TO_DISPLAY}
+                            language={language}
+                            fetchError={error}
+                        />
+                    )
+                )}
             </div>
         </form>
     );

diff --git a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.scss b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.scss
@@ -1,64 +1,16 @@
 @use 'src/styling-variabler.scss' as sv;
 
-.sok-input-resultat {
-    .sok-input-container {
-        position: relative;
-        display: flex;
-    }
-    .sok-input {
-        margin: 0;
-        width: 100%;
-
-        input {
-            margin-top: 0;
-        }
-    }
-    @media #{sv.$screen-desktop} {
-        .sok-input {
-            input {
-                padding: 0.75rem;
-                border: 2px solid var(--a-blue-500);
-                &::-ms-clear {
-                    display: none;
-                }
-            }
-
-            .skjemaelement__input {
-                padding-right: 12rem;
-            }
-        }
-        .sok .sok-container {
-            width: auto;
-            justify-content: center;
-            align-items: flex-start;
-            z-index: initial;
+.sok-input {
+    margin: 0;
+    width: 100%;
 
-            .sok-ikon {
-                position: relative;
-                top: 0.35rem;
-                right: 2.75rem;
-                pointer-events: none;
-            }
-        }
+    input {
+        margin-top: 0;
     }
-    @media #{sv.$screen-mobile} {
-        .sok-input__tittel {
-            margin-bottom: 1rem;
-        }
-        .sok-input {
-            input {
-                padding: 0.7rem 1rem;
-                background-color: white;
-                border: 2px solid var(--a-blue-500);
 
-                &:focus,
-                &:active {
-                    border: 2px solid var(--a-blue-500);
-                }
-            }
-            .skjemaelement__input {
-                padding-right: 8.5rem;
-            }
-        }
+    .navds-search__button-search {
+        border-radius: 0;
+        border-top-right-radius: var(--a-border-radius-medium);
+        border-bottom-right-radius: var(--a-border-radius-medium);
     }
 }
diff --git a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx
@@ -1,10 +1,10 @@
 import { finnTekst } from 'tekster/finn-tekst';
 import { Locale } from 'store/reducers/language-duck';
-import SokKnapper from './SokKnapper';
 import React from 'react';
 import { verifyWindowObj } from 'utils/Environment';
-import { TextField } from '@navikt/ds-react';
-import 'komponenter/header/header-regular/common/sok/sok-innhold/SokInput.scss';
+import { Search } from '@navikt/ds-react';
+import './SokInput.scss';
+
 type Props = {
     className: string;
     writtenInput: string;
@@ -21,20 +21,19 @@ export const SokInput = (props: Props) => {
     const inputValue = verifyWindowObj() ? writtenInput || '' : undefined;
 
     return (
-        <>
-            <div className="sok-input-container">
-                <TextField
-                    id={id}
-                    onChange={(e) => onChange(e.target.value)}
-                    className={className}
-                    value={inputValue}
-                    type="text"
-                    label={finnTekst('sok-knapp-sokefelt', language, audience)}
-                    autoComplete="off"
-                />
-                <SokKnapper writtenInput={writtenInput} onReset={onReset} id={id} />
-            </div>
-        </>
+        <Search
+            id={id}
+            variant="primary"
+            onChange={(value) => onChange(value)}
+            onClear={onReset}
+            className={className}
+            value={inputValue}
+            maxLength={100}
+            type="text"
+            hideLabel={false}
+            label={finnTekst('sok-knapp-sokefelt', language, audience)}
+            autoComplete="off"
+        />
     );
 };
 export default SokInput;