From d43d91db8869977d2829b3285d03cba6aeac0db1 Mon Sep 17 00:00:00 2001 From: Skifjeld Date: Fri, 3 May 2024 10:38:21 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Henter=20inn=20Aksel-komponent=20til=20s?= =?UTF-8?q?=C3=B8ketfeltet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../header-regular/common/sok/sok-innhold/SokInput.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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 index 353ab4cb5..4e8f2016a 100644 --- 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,9 +1,8 @@ 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 { Search } from '@navikt/ds-react'; import 'komponenter/header/header-regular/common/sok/sok-innhold/SokInput.scss'; type Props = { className: string; @@ -15,7 +14,7 @@ type Props = { id: string; }; export const SokInput = (props: Props) => { - const { className, writtenInput, language, audience, onChange, onReset, id } = props; + const { className, writtenInput, language, audience, onChange, id } = props; // Only set the input value in the browser, to prevent execution-order // dependent SSR warnings under certain circumstances const inputValue = verifyWindowObj() ? writtenInput || '' : undefined; @@ -23,16 +22,15 @@ export const SokInput = (props: Props) => { return ( <>
- onChange(e.target.value)} + onChange={(value) => onChange(value)} className={className} value={inputValue} type="text" label={finnTekst('sok-knapp-sokefelt', language, audience)} autoComplete="off" /> -
); From 2756b2bfff9f25ff71b3276df1dc19e08efd941d Mon Sep 17 00:00:00 2001 From: Skifjeld Date: Mon, 6 May 2024 11:40:12 +0200 Subject: [PATCH 2/4] Endret styling --- .../header/header-regular/common/sok/Sok.scss | 20 +- .../header/header-regular/common/sok/Sok.tsx | 80 ++++---- .../common/sok/sok-innhold/SokInput.scss | 66 +------ .../common/sok/sok-innhold/SokInput.tsx | 8 +- .../common/sok/sok-innhold/SokResultater.scss | 184 +++++++++--------- 5 files changed, 145 insertions(+), 213 deletions(-) diff --git a/src/komponenter/header/header-regular/common/sok/Sok.scss b/src/komponenter/header/header-regular/common/sok/Sok.scss index dd8096d5b..6a7369cf7 100644 --- 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 index 029c466f8..7bf679023 100644 --- 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} >
-
- { - 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 ? ( - - ) : ( - result && - searchInput.length > 2 && ( - - ) - )} -
+ { + 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 ? ( + + ) : ( + result && + searchInput.length > 2 && ( + + ) + )}
); 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 index 5c4700d54..e4e2fbc8b 100644 --- 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 index 4e8f2016a..f311c6639 100644 --- a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx +++ b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx @@ -14,24 +14,26 @@ type Props = { id: string; }; export const SokInput = (props: Props) => { - const { className, writtenInput, language, audience, onChange, id } = props; + const { className, writtenInput, language, audience, onChange, onReset, id } = props; // Only set the input value in the browser, to prevent execution-order // dependent SSR warnings under certain circumstances const inputValue = verifyWindowObj() ? writtenInput || '' : undefined; return ( <> -
+
onChange(value)} + onReset={onReset} className={className} value={inputValue} type="text" label={finnTekst('sok-knapp-sokefelt', language, audience)} autoComplete="off" /> -
+ ); }; diff --git a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.scss b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.scss index a6f085856..26d52a7e0 100644 --- a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.scss +++ b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.scss @@ -1,45 +1,92 @@ @use 'src/styling-variabler.scss' as sv; @keyframes animateIn { - 0% { - opacity: 0; - transform: scale(0.6) translateY(-8px); - } +0% { + opacity: 0; + transform: scale(0.6) translateY(-8px); +} - 100% { - opacity: 1; - } +100% { + opacity: 1; +} +} +.sokeresultat-feil { + margin-top: 1rem; } -.sok-input-resultat { - .sokeresultat-feil { - margin-top: 1rem; +.sokeresultat-lenke { + width: 100%; + color: black; + cursor: pointer; + padding: 1rem 1rem 1rem 0; + font-weight: normal; + text-align: left; + text-decoration: none; + + &:focus { + outline: none; + color: white; + text-decoration: none; + background-color: var(--a-deepblue-500); + box-shadow: 0 0 0 2px var(--a-deepblue-500); } +} - .sokeresultat-lenke { - width: 100%; - color: black; - cursor: pointer; - padding: 1rem 1rem 1rem 0; - font-weight: normal; - text-align: left; - text-decoration: none; +.sokeresultat-container { + list-style: none; + flex-direction: column; + display: flex; + margin: 0; + padding: 1rem 0 0 0; - &:focus { - outline: none; - color: white; - text-decoration: none; - background-color: var(--a-deepblue-500); - box-shadow: 0 0 0 2px var(--a-deepblue-500); + li { + display: flex; + animation-name: animateIn; + animation-duration: 150ms; + animation-delay: calc(var(--index) * 50ms); + animation-fill-mode: both; + animation-timing-function: ease-in-out; + border-bottom: 1px solid var(--a-gray-400); + margin: 0 -0.5rem; + padding: 0 0.5rem; + + &:focus, + &:hover { + background-color: var(--a-gray-300); + font-weight: bold; } } - .sokeresultat-container { + li[aria-selected='true'] { + background-color: var(--a-gray-300); + font-weight: bold; + } + + .sok-resultat-listItem-text { + padding-left: 0; + } +} + +.sokeresultat-treff { + padding: 1rem 0; + word-break: break-word; +} + +.sokeresultat-liste { + margin: 0.25rem 0 0 0; + padding: 0; +} + +@media #{sv.$screen-mobile} { + .sokeresultat-liste { list-style: none; + padding: 0; + z-index: 1020; flex-direction: column; display: flex; - margin: 0; - padding: 1rem 0 0 0; + width: 100%; + overflow: hidden; + margin: 0.25rem 0 0 0; li { display: flex; @@ -48,15 +95,7 @@ animation-delay: calc(var(--index) * 50ms); animation-fill-mode: both; animation-timing-function: ease-in-out; - border-bottom: 1px solid var(--a-gray-400); - margin: 0 -0.5rem; - padding: 0 0.5rem; - - &:focus, - &:hover { - background-color: var(--a-gray-300); - font-weight: bold; - } + border: none; } li[aria-selected='true'] { @@ -64,68 +103,27 @@ font-weight: bold; } - .sok-resultat-listItem-text { - padding-left: 0; - } - } - - .sokeresultat-treff { - padding: 1rem 0; - word-break: break-word; - } - - .sokeresultat-liste { - margin: 0.25rem 0 0 0; - padding: 0; - } - - @media #{sv.$screen-mobile} { - .sokeresultat-liste { - list-style: none; + .sokeresultat-liste ul { padding: 0; - z-index: 1020; - flex-direction: column; - display: flex; - width: 100%; - overflow: hidden; - margin: 0.25rem 0 0 0; - - li { - display: flex; - animation-name: animateIn; - animation-duration: 150ms; - animation-delay: calc(var(--index) * 50ms); - animation-fill-mode: both; - animation-timing-function: ease-in-out; - border: none; - } - - li[aria-selected='true'] { - background-color: var(--a-gray-300); - font-weight: bold; - } - - .sokeresultat-liste ul { - padding: 0; - } - - .sok-resultat-listItem { - display: flex; - flex-direction: row; - align-items: center; - } - - .sok-resultat-chevron { - padding: 0 1rem 0 0; - } - - .sok-resultat-listItem-text { - padding-left: 2.25rem; - } } .sok-resultat-listItem { display: flex; + flex-direction: row; + align-items: center; + } + + .sok-resultat-chevron { + padding: 0 1rem 0 0; + } + + .sok-resultat-listItem-text { + padding-left: 2.25rem; } } + + .sok-resultat-listItem { + display: flex; + } } + From 38ee9f6b73650035e172c55017996e10ceeb2ecb Mon Sep 17 00:00:00 2001 From: Skifjeld Date: Tue, 7 May 2024 09:44:07 +0200 Subject: [PATCH 3/4] Lagt til maks. lengde i inputfelt --- .../common/sok/sok-innhold/SokInput.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) 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 index f311c6639..572fc0807 100644 --- a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx +++ b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx @@ -3,7 +3,8 @@ import { Locale } from 'store/reducers/language-duck'; import React from 'react'; import { verifyWindowObj } from 'utils/Environment'; import { Search } from '@navikt/ds-react'; -import 'komponenter/header/header-regular/common/sok/sok-innhold/SokInput.scss'; +import './SokInput.scss'; + type Props = { className: string; writtenInput: string; @@ -20,21 +21,18 @@ export const SokInput = (props: Props) => { const inputValue = verifyWindowObj() ? writtenInput || '' : undefined; return ( - <> -
- onChange(value)} - onReset={onReset} - className={className} - value={inputValue} - type="text" - label={finnTekst('sok-knapp-sokefelt', language, audience)} - autoComplete="off" - /> - - + onChange(value)} + onClear={onReset} + className={className} + value={inputValue} + maxLength={100} + type="text" + label={finnTekst('sok-knapp-sokefelt', language, audience)} + autoComplete="off" + /> ); }; export default SokInput; From 2560027be20a184c2e551b2aa697a143236d46ce Mon Sep 17 00:00:00 2001 From: Skifjeld Date: Mon, 13 May 2024 12:53:40 +0200 Subject: [PATCH 4/4] Lagt til hideLabel = false --- .../header/header-regular/common/sok/sok-innhold/SokInput.tsx | 1 + 1 file changed, 1 insertion(+) 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 index 572fc0807..2c1ed4191 100644 --- a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx +++ b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokInput.tsx @@ -30,6 +30,7 @@ export const SokInput = (props: Props) => { value={inputValue} maxLength={100} type="text" + hideLabel={false} label={finnTekst('sok-knapp-sokefelt', language, audience)} autoComplete="off" />