Designjusteringer (#1539)

* Endret styling og tekst. Css på pila Flere treff må legges til * Lagt til Sok-flere-treff-se i ledetekster * Fjernet utkommentert tekst * Lagt til css for pil * Fjernet div og justert css * Endret søkeforslagingress til en heading * Fjernet reactnode i Søkeforslagingress
navikt · Jun 3, 2024 · 17ec0f1 · 17ec0f1
1 parent bcadf40
commit 17ec0f1
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 48 deletions.
diff --git a/src/komponenter/header/header-regular/common/sok/Sok.tsx b/src/komponenter/header/header-regular/common/sok/Sok.tsx
@@ -132,6 +132,7 @@ const Sok = (props: Props) => {
                     result &&
                     searchInput.length > 2 && (
                         <SokResultater
+                            audience={audience}
                             writtenInput={searchInput}
                             result={result}
                             numberOfResults={MAX_HITS_TO_DISPLAY}

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
@@ -1,14 +1,14 @@
 @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;
@@ -32,6 +32,11 @@
     }
 }
 
+.sokeresultat-treff-pil {
+    margin-left: 0.5rem;
+    font-size: 1.25rem;
+}
+
 .sokeresultat-container {
     list-style: none;
     flex-direction: column;
@@ -73,7 +78,7 @@
 }
 
 .sokeresultat-liste {
-    margin: 0.25rem 0 0 0;
+    margin: 0.25rem 0 1rem 0;
     padding: 0;
 }
 
@@ -126,4 +131,3 @@
         display: flex;
     }
 }
-
diff --git a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.tsx b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.tsx
@@ -11,8 +11,9 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { useDispatch } from 'react-redux';
 import { lukkAlleDropdowns } from 'store/reducers/dropdown-toggle-duck';
-import { Alert, Link } from '@navikt/ds-react';
+import { Alert, Heading, Link } from '@navikt/ds-react';
 import { logAmplitudeEvent } from 'utils/analytics/amplitude';
+import { ArrowRightIcon } from '@navikt/aksel-icons';
 
 import 'komponenter/header/header-regular/common/sok/sok-innhold/SokResultater.scss';
 
@@ -22,6 +23,7 @@ type Props = {
     numberOfResults: number;
     language: Locale;
     fetchError?: string | boolean;
+    audience: string;
 };
 
 const removeDuplicates = (items: Soketreff[]) =>
@@ -31,11 +33,9 @@ const removeDuplicates = (items: Soketreff[]) =>
     );
 
 export const SokResultater = (props: Props) => {
-    const { language, fetchError } = props;
-    const { writtenInput, result, numberOfResults } = props;
+    const { language, fetchError, audience, writtenInput, result, numberOfResults } = props;
     const { XP_BASE_URL } = useSelector((state: AppState) => state.environment);
     const itemsFiltered = removeDuplicates(result.hits) || result.hits;
-    const itemsSpliced = itemsFiltered.slice(0, numberOfResults);
     const dispatch = useDispatch();
 
     return (
@@ -47,6 +47,18 @@ export const SokResultater = (props: Props) => {
                     </Alert>
                 </div>
             )}
+            {!fetchError && (
+                <>
+                    <Heading level="2" size="small" role="status">
+                        {result.total} {finnTekst('sok-resultater', language)}
+                        {' for '} &laquo;{`${writtenInput}`}&raquo; {' for '}
+                        {finnTekst('sok-audience', language, audience)}
+                    </Heading>
+                    <Link className={'typo-element'} href={`${XP_BASE_URL}/sok?ord=${writtenInput}`}>
+                        {`${finnTekst('sok-alle-treff', language)} `}
+                    </Link>
+                </>
+            )}
             {!fetchError && itemsFiltered.length ? (
                 <ul className="sokeresultat-liste">
                     {itemsFiltered.slice(0, numberOfResults).map((item, index) => {
@@ -84,29 +96,11 @@ export const SokResultater = (props: Props) => {
                     })}
                 </ul>
             ) : null}
-
-            {!fetchError && itemsFiltered.length ? (
-                <div className={'sokeresultat-treff'}>
-                    <div role={'status'}>
-                        {finnTekst('sok-viser', language)} {itemsSpliced.length} {finnTekst('sok-av', language)}{' '}
-                        {result.total} {finnTekst('sok-resultater', language)}
-                    </div>
-                    {result.total > itemsFiltered.length && (
-                        <Link className={'typo-element'} href={`${XP_BASE_URL}/sok?ord=${writtenInput}`}>{`${finnTekst(
-                            'se-alle-treff',
-                            language
-                        )} ("${writtenInput}")`}</Link>
-                    )}
-                </div>
-            ) : null}
-
-            {!fetchError && !itemsFiltered.length && (
-                <div className={'sokeresultat-treff'} role={'status'}>
-                    <SokeforslagIngress
-                        className="sok-resultat-listItem"
-                        displayName={`${finnTekst('sok-ingen-treff', language)} (${writtenInput})`}
-                    />
-                </div>
+            {result.total > itemsFiltered.length && (
+                <Link className={'typo-element'} href={`${XP_BASE_URL}/sok?ord=${writtenInput}`}>
+                    {finnTekst('sok-flere-treff', language)}
+                    {<ArrowRightIcon className="sokeresultat-treff-pil" />}
+                </Link>
             )}
         </div>
     );

diff --git a/src/tekster/ledetekster.ts b/src/tekster/ledetekster.ts
@@ -122,24 +122,24 @@ export const ledetekster = {
     'sok-knapp-sokefelt': (input: string) => `Søk i innhold for ${input}`,
     'sok-knapp-sokefelt-en': 'Search nav.no',
     'sok-knapp-sokefelt-se': 'Oza nav.no',
+    'sok-audience': (input: string) => ` ${input}`,
+    'sok-audience-en': (input: string) => ` ${input}`,
+    'sok-audience-se': (input: string) => ` ${input}`,
     'sok-input-label': 'Søk',
     'sok-input-label-en': 'Search',
     'sok-input-label-se': 'Ohcat',
-    'sok-ingen-treff': 'Ingen treff for',
-    'sok-ingen-treff-en': 'No hits for',
-    'sok-ingen-treff-se': 'Ingen treff for',
-    'sok-viser': 'Viser',
-    'sok-viser-en': 'Showing',
-    'sok-viser-se': 'Viser',
+    'sok-flere-treff': 'Flere treff',
+    'sok-flere-treff-en': 'More hits',
+    'sok-flere-treff-se': 'Flere treff',
     'sok-av': 'av',
     'sok-av-en': 'of',
     'sok-av-se': 'av',
-    'sok-resultater': 'resultater',
-    'sok-resultater-en': 'result',
-    'sok-resultater-se': 'resultater',
-    'se-alle-treff': 'Se alle treff',
-    'se-alle-treff-en': 'See all hits',
-    'se-alle-treff-se': 'Se alle treff',
+    'sok-resultater': 'treff',
+    'sok-resultater-en': 'hits',
+    'sok-resultater-se': 'treff',
+    'sok-alle-treff': 'Endre søkefilter for å se andre treff',
+    'sok-alle-treff-en': 'Change search filter to see other hits',
+    'sok-alle-treff-se': 'Endre søkefilter for å se andre treff',
     'tilbake-til-overskrift': 'Tilbake til oversikt',
     'tilbake-til-overskrift-en': 'Back to menu',
     'tilbake-til-overskrift-se': 'Tilbake til oversikt',