Endret styling og tekst. Css på pila Flere treff må legges til

navikt · May 31, 2024 · 3870a94 · 3870a94
1 parent bcadf40
commit 3870a94
Show file tree

Hide file tree

Showing 5 changed files with 54 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;
@@ -73,7 +73,7 @@
 }
 
 .sokeresultat-liste {
-    margin: 0.25rem 0 0 0;
+    margin: 0.25rem 0 1rem 0;
     padding: 0;
 }
 
@@ -126,4 +126,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
@@ -13,6 +13,7 @@ import { useDispatch } from 'react-redux';
 import { lukkAlleDropdowns } from 'store/reducers/dropdown-toggle-duck';
 import { Alert, 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,10 @@ 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 itemsSpliced = itemsFiltered.slice(0, numberOfResults);
     const dispatch = useDispatch();
 
     return (
@@ -47,6 +48,26 @@ export const SokResultater = (props: Props) => {
                     </Alert>
                 </div>
             )}
+            {!fetchError && (
+                <div className={'sokeresultat-treff'} role={'status'}>
+                    <SokeforslagIngress
+                        className="sok-resultat-listItem"
+                        displayName={
+                            <div role={'status'}>
+                                {result.total} {finnTekst('sok-resultater', language)}
+                                {' for '} &laquo;{`${writtenInput}`}&raquo; {' for '}
+                                {finnTekst('sok-audience', language, audience)}
+                            </div>
+                        }
+                    />
+                    {
+                        <Link className={'typo-element'} href={`${XP_BASE_URL}/sok?ord=${writtenInput}`}>{`${finnTekst(
+                            'sok-alle-treff',
+                            language
+                        )} `}</Link>
+                    }
+                </div>
+            )}
             {!fetchError && itemsFiltered.length ? (
                 <ul className="sokeresultat-liste">
                     {itemsFiltered.slice(0, numberOfResults).map((item, index) => {
@@ -84,29 +105,15 @@ 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}`}>
+                    {
+                        <div>
+                            {finnTekst('sok-flere-treff', language)}
+                            {<ArrowRightIcon title="a11y-title" fontSize="1rem" />}
+                        </div>
+                    }
+                </Link>
             )}
         </div>
     );

diff --git a/src/komponenter/header/header-regular/common/sok/sok-innhold/SokeforslagIngress.tsx b/src/komponenter/header/header-regular/common/sok/sok-innhold/SokeforslagIngress.tsx
@@ -4,7 +4,7 @@ import { Heading } from '@navikt/ds-react';
 
 interface Props {
     className: string;
-    displayName?: string;
+    displayName?: string | React.ReactNode;
 }
 const SokeforslagIngress = (props: Props) => {
     const { className, displayName } = props;

diff --git a/src/tekster/ledetekster.ts b/src/tekster/ledetekster.ts
@@ -122,24 +122,23 @@ 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-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',