feat(søk.tsx, søkeresultat.tsx, søkeresultater.tsx): kan sende inn eg…

…endefinert visning til Søk.tsx (#1580) Skal kunne sende inn alternativ visning dersom personsøk ikke returnerer en fagsakId
navikt · Sep 25, 2024 · 9c845e1 · 9c845e1
1 parent 86ac778
commit 9c845e1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/packages/familie-header/src/søk/Søk.tsx b/packages/familie-header/src/søk/Søk.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import '@navikt/ds-css';
 import { Ressurs, RessursStatus } from '@navikt/familie-typer/dist';
@@ -20,6 +20,7 @@ export interface SøkProps {
     søkeresultatOnClick: (søkResultat: ISøkeresultat) => void;
     placeholder?: string;
     size?: 'small' | 'medium';
+    ingenFagsakKomponent?: ReactNode;
 }
 
 const SøkContainer = styled.div`
@@ -43,6 +44,7 @@ export const Søk = ({
     placeholder,
     label,
     size = 'small',
+    ingenFagsakKomponent,
 }: SøkProps) => {
     const {
         ankerRef,
@@ -106,6 +108,7 @@ export const Søk = ({
                             søkeresultatOnClick={søkeresultatOnClick}
                             søkeresultater={søkeresultater}
                             valgtSøkeresultat={valgtSøkeresultat}
+                            ingenFagsakKomponent={ingenFagsakKomponent}
                         />
                     </Popover.Content>
                 </Popover>

diff --git a/packages/familie-header/src/søk/Søkeresultat.tsx b/packages/familie-header/src/søk/Søkeresultat.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import styled from 'styled-components';
 import { adressebeskyttelsestyper } from '@navikt/familie-typer';
@@ -18,6 +18,7 @@ interface Props {
     søkeresultater: ISøkeresultat[];
     valgtSøkeresultat: number;
     settValgtSøkeresultat: (søkeresultatIndex: number) => void;
+    ingenFagsakKomponent?: ReactNode;
 }
 
 const ResultatListe = styled.ul`
@@ -31,6 +32,7 @@ const ResultatListeElement = styled.li<{ $fokus: boolean }>`
     padding: 0.5rem;
     outline: ${({ $fokus }) => ($fokus ? `3px solid var(--a-orange-300)` : '')};
     border-radius: 8px;
+
     &:hover {
         background-color: var(--a-gray-100);
         cursor: pointer;
@@ -61,6 +63,7 @@ const Søkeresultat: React.FC<Props> = ({
     søkeresultatOnClick,
     søkeresultater,
     valgtSøkeresultat,
+    ingenFagsakKomponent,
 }) => {
     return søkeresultater.length > 0 ? (
         <ResultatListe aria-labelledby={inputId}>
@@ -103,13 +106,9 @@ const Søkeresultat: React.FC<Props> = ({
                                     </BodyShort>
 
                                     {!søkeresultat.fagsakId && søkeresultat.harTilgang && (
-                                        <BodyShort size={'small'}>
-                                            {`Ingen fagsak. ${
-                                                !søkeresultat.fagsakId
-                                                    ? 'Trykk for å opprette >'
-                                                    : ''
-                                            }`}
-                                        </BodyShort>
+                                        <ResultatVisningUtenFagsak
+                                            ingenFagsakKomponent={ingenFagsakKomponent}
+                                        />
                                     )}
                                 </div>
                             </ResultatListeElementKnapp>
@@ -123,4 +122,14 @@ const Søkeresultat: React.FC<Props> = ({
     );
 };
 
+const ResultatVisningUtenFagsak: React.FC<{ ingenFagsakKomponent?: ReactNode }> = ({
+    ingenFagsakKomponent,
+}) => {
+    if (ingenFagsakKomponent) {
+        return ingenFagsakKomponent;
+    }
+
+    return <BodyShort size={'small'}>{`Ingen fagsak. Trykk for å opprette.`}</BodyShort>;
+};
+
 export default Søkeresultat;
diff --git a/packages/familie-header/src/søk/Søkeresultater.tsx b/packages/familie-header/src/søk/Søkeresultater.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { Ressurs, RessursStatus } from '@navikt/familie-typer';
 import { inputId } from '.';
@@ -15,6 +15,7 @@ interface Props {
     søkeresultater: Ressurs<ISøkeresultat[]>;
     valgtSøkeresultat: number;
     settValgtSøkeresultat: (søkeresultatIndex: number) => void;
+    ingenFagsakKomponent?: ReactNode;
 }
 
 export const StyledAlertStripe = styled(Alert)`
@@ -27,6 +28,7 @@ const Søkeresultater: React.FC<Props> = ({
     søkeresultatOnClick,
     søkeresultater,
     valgtSøkeresultat,
+    ingenFagsakKomponent,
 }) => {
     switch (søkeresultater.status) {
         case RessursStatus.SUKSESS:
@@ -37,6 +39,7 @@ const Søkeresultater: React.FC<Props> = ({
                     settValgtSøkeresultat={settValgtSøkeresultat}
                     formaterResultat={formaterResultat}
                     søkeresultatOnClick={søkeresultatOnClick}
+                    ingenFagsakKomponent={ingenFagsakKomponent}
                 />
             );
         case RessursStatus.FEILET: