Repository: navikt/fp-frontend
Pull request #6314: TFP-6079: gjenbruk av dokument-faner
Author: login: sirimykland
Created: 2025-04-03T14:36:07Z | Merged: 2025-04-04T10:46:01Z



Diff:
diff --git a/apps/fp-frontend-app/src/behandlingsupport/dokument/DokumentIndex.tsx b/apps/fp-frontend-app/src/behandlingsupport/dokument/DokumentIndex.tsx
index fb56d35d42b..602ec8824c2 100644
--- a/apps/fp-frontend-app/src/behandlingsupport/dokument/DokumentIndex.tsx
+++ b/apps/fp-frontend-app/src/behandlingsupport/dokument/DokumentIndex.tsx
@@ -4,26 +4,12 @@ import { useIntl } from 'react-intl';
 import { LoadingPanel } from '@navikt/ft-ui-komponenter';
 import { useQuery } from '@tanstack/react-query';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import { DokumenterSakIndex } from '@navikt/fp-sak-dokumenter';
 import type { Dokument } from '@navikt/fp-types';
 
 import { useFagsakApi } from '../../data/fagsakApi';
 import { SupportHeaderAndContent } from '../SupportHeader';
 
-const selectDocument =
-  (saksNr: string) =>
-  (_e: React.SyntheticEvent, _id?: number | string, document?: Dokument): void => {
-    if (document) {
-      const newWindow = window.open(hentDokumentLenke(saksNr, document.journalpostId, document.dokumentId), '_blank');
-      if (newWindow) {
-        setTimeout(() => {
-          newWindow.document.title = document.tittel || 'Dokument';
-        }, 1000);
-      }
-    }
-  };
-
 const sorterDokumenter = (dok1: Dokument, dok2: Dokument): number => {
   if (!dok1.tidspunkt) {
     return +1;
@@ -74,11 +60,7 @@ export const DokumentIndex = ({
       antall={sorterteDokumenter.length}
       toggleVisUtvidetBehandlingDetaljerKnapp={toggleVisUtvidetBehandlingDetaljerKnapp}
     >
-      <DokumenterSakIndex
-        documents={sorterteDokumenter}
-        selectDocumentCallback={selectDocument(saksnummer)}
-        behandlingUuid={behandlingUuid}
-      />
+      <DokumenterSakIndex documents={sorterteDokumenter} saksnummer={saksnummer} behandlingUuid={behandlingUuid} />
     </SupportHeaderAndContent>
   );
 };
diff --git a/packages/fakta/fakta-arbeid-og-inntekt/package.json b/packages/fakta/fakta-arbeid-og-inntekt/package.json
index 8eebfeaa9ab..fd9dc4b0173 100644
--- a/packages/fakta/fakta-arbeid-og-inntekt/package.json
+++ b/packages/fakta/fakta-arbeid-og-inntekt/package.json
@@ -27,6 +27,7 @@
     "@navikt/fp-modal-sett-pa-vent": "workspace:*",
     "@navikt/fp-types": "workspace:*",
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/fp-utils": "workspace:*",
     "@navikt/ft-form-hooks": "6.2.9",
     "@navikt/ft-form-validators": "3.1.11",
diff --git a/packages/fakta/fakta-arbeid-og-inntekt/src/components/felles/InntektsmeldingOpplysningerPanel.tsx b/packages/fakta/fakta-arbeid-og-inntekt/src/components/felles/InntektsmeldingOpplysningerPanel.tsx
index 0e8d7922068..d069b153969 100644
--- a/packages/fakta/fakta-arbeid-og-inntekt/src/components/felles/InntektsmeldingOpplysningerPanel.tsx
+++ b/packages/fakta/fakta-arbeid-og-inntekt/src/components/felles/InntektsmeldingOpplysningerPanel.tsx
@@ -1,14 +1,15 @@
 import { FormattedMessage } from 'react-intl';
 
 import { FileFillIcon, PhoneFillIcon } from '@navikt/aksel-icons';
-import { BodyShort, Detail, HStack, Label, Link, VStack } from '@navikt/ds-react';
+import { BodyShort, Detail, HStack, Label, VStack } from '@navikt/ds-react';
 import { DateLabel, PeriodLabel } from '@navikt/ft-ui-komponenter';
 import { formatCurrencyNoKr } from '@navikt/ft-utils';
 
 import { getKodeverknavnFraKode, KodeverkType } from '@navikt/fp-kodeverk';
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { AlleKodeverk, AoIArbeidsforhold, Inntektsmelding } from '@navikt/fp-types';
 
+import { DokumentLink } from '../../../../../ui-komponenter';
+
 import styles from './inntektsmeldingOpplysningerPanel.module.css';
 
 interface Props {
@@ -115,9 +116,10 @@ export const InntektsmeldingOpplysningerPanel = ({
           <BodyShort size="small">{formatCurrencyNoKr(inntektsmelding.refusjonPrMnd)}</BodyShort>
         </HStack>
       )}
-      <Link
-        href={hentDokumentLenke(saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId)}
-        target="_blank"
+      <DokumentLink
+        saksnummer={saksnummer}
+        journalpostId={inntektsmelding.journalpostId}
+        dokumentId={inntektsmelding.dokumentId}
       >
         <span>
           <BodyShort size="small" className={styles.inline}>
@@ -125,7 +127,7 @@ export const InntektsmeldingOpplysningerPanel = ({
           </BodyShort>
         </span>
         <FileFillIcon className={styles.docIcon} />
-      </Link>
+      </DokumentLink>
     </VStack>
     <HStack gap="4">
       <PhoneFillIcon className={styles.phoneIcon} />
diff --git a/packages/fakta/fakta-inntektsmelding/src/components/Arbeidsgiver.tsx b/packages/fakta/fakta-inntektsmelding/src/components/Arbeidsgiver.tsx
index 94532c85c04..1c5099e220d 100644
--- a/packages/fakta/fakta-inntektsmelding/src/components/Arbeidsgiver.tsx
+++ b/packages/fakta/fakta-inntektsmelding/src/components/Arbeidsgiver.tsx
@@ -1,22 +1,21 @@
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import type { ArbeidsgiverOpplysningerPerId } from '@navikt/fp-types';
+import type { ArbeidsgiverOpplysninger } from '@navikt/fp-types';
 
 import { InntektsmeldingInfoBlokk } from './InntektsmeldingInfoBlokk';
 
 export const Arbeidsgiver = ({
-  arbeidsgiverOpplysningerPerId,
+  arbeidsgiverOpplysninger,
   arbeidsgiverIdent,
 }: {
-  arbeidsgiverOpplysningerPerId: ArbeidsgiverOpplysningerPerId;
+  arbeidsgiverOpplysninger: ArbeidsgiverOpplysninger;
   arbeidsgiverIdent: string;
 }) => {
   const intl = useIntl();
   return (
     <InntektsmeldingInfoBlokk tittel={intl.formatMessage({ id: 'InntektsmeldingFaktaPanel.arbeidsgiver.heading' })}>
       <span>
-        <FormattedMessage id="InntektsmeldingFaktaPanel.arbeidsgiver.navn" />:{' '}
-        {arbeidsgiverOpplysningerPerId[arbeidsgiverIdent]?.navn ?? '-'}
+        <FormattedMessage id="InntektsmeldingFaktaPanel.arbeidsgiver.navn" />: {arbeidsgiverOpplysninger.navn}
       </span>
       <span>
         <FormattedMessage id="InntektsmeldingFaktaPanel.arbeidsgiver.underenhet" />: {arbeidsgiverIdent}
diff --git a/packages/fakta/fakta-inntektsmelding/src/components/InntektsmeldingInnhold.tsx b/packages/fakta/fakta-inntektsmelding/src/components/InntektsmeldingInnhold.tsx
index c869ba78745..01a209c4ea9 100644
--- a/packages/fakta/fakta-inntektsmelding/src/components/InntektsmeldingInnhold.tsx
+++ b/packages/fakta/fakta-inntektsmelding/src/components/InntektsmeldingInnhold.tsx
@@ -36,11 +36,15 @@ export const InntektsmeldingInnhold = ({
           <FormattedMessage id="InntektsmeldingFaktaPanel.innsendingstidspunkt" />{' '}
           <DateTimeLabel dateTimeString={inntektsmelding.innsendingstidspunkt} separator="kl" />
         </Heading>
-        <LastNedPdfKnapp fagsak={fagsak} inntektsmelding={inntektsmelding} />
+        <LastNedPdfKnapp
+          fagsak={fagsak}
+          inntektsmelding={inntektsmelding}
+          arbeidsgiverOpplysninger={arbeidsgiverOpplysningerPerId[inntektsmelding.arbeidsgiverIdent]}
+        />
       </HStack>
       <HGrid columns={3} gap="8">
         <Arbeidsgiver
-          arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
+          arbeidsgiverOpplysninger={arbeidsgiverOpplysningerPerId[inntektsmelding.arbeidsgiverIdent]}
           arbeidsgiverIdent={inntektsmelding.arbeidsgiverIdent}
         />
 
diff --git a/packages/fakta/fakta-inntektsmelding/src/components/LastNedPdf.tsx b/packages/fakta/fakta-inntektsmelding/src/components/LastNedPdf.tsx
index ea52a5a5fcc..40acdab7f8e 100644
--- a/packages/fakta/fakta-inntektsmelding/src/components/LastNedPdf.tsx
+++ b/packages/fakta/fakta-inntektsmelding/src/components/LastNedPdf.tsx
@@ -3,19 +3,26 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ArrowForwardIcon } from '@navikt/aksel-icons';
 import { BodyLong, Button, Modal } from '@navikt/ds-react';
+import { dateFormat } from '@navikt/ft-utils';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
-import type { Fagsak, Inntektsmelding } from '@navikt/fp-types';
+import type { ArbeidsgiverOpplysninger, Fagsak, Inntektsmelding } from '@navikt/fp-types';
+import { åpneDokument } from '@navikt/fp-utils';
 
-export const LastNedPdfKnapp = ({ inntektsmelding, fagsak }: { fagsak: Fagsak; inntektsmelding: Inntektsmelding }) => {
+export const LastNedPdfKnapp = ({
+  inntektsmelding,
+  fagsak,
+  arbeidsgiverOpplysninger,
+}: {
+  fagsak: Fagsak;
+  inntektsmelding: Inntektsmelding;
+  arbeidsgiverOpplysninger: ArbeidsgiverOpplysninger;
+}) => {
+  const tittel = `IM ${arbeidsgiverOpplysninger.navn} - ${dateFormat(inntektsmelding.motattDato)}`;
   return (
     <Button
       type="button"
       onClick={() => {
-        window.open(
-          hentDokumentLenke(fagsak.saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId),
-          '_blank',
-        );
+        åpneDokument(fagsak.saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId, tittel);
       }}
       variant="secondary"
       size="small"
@@ -53,10 +60,7 @@ export const LastNedPdfModalKnapp = ({
           <Button
             type="button"
             onClick={() => {
-              window.open(
-                hentDokumentLenke(fagsak.saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId),
-                '_blank',
-              );
+              åpneDokument(fagsak.saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId);
               ref.current?.close();
             }}
             variant="primary"
diff --git a/packages/fakta/fakta-permisjon/src/components/InntektsmeldingOpplysningerPanel.tsx b/packages/fakta/fakta-permisjon/src/components/InntektsmeldingOpplysningerPanel.tsx
index 36b76ca63b0..f7d4b2bc27e 100644
--- a/packages/fakta/fakta-permisjon/src/components/InntektsmeldingOpplysningerPanel.tsx
+++ b/packages/fakta/fakta-permisjon/src/components/InntektsmeldingOpplysningerPanel.tsx
@@ -1,12 +1,13 @@
 import { FormattedMessage } from 'react-intl';
 
 import { FileFillIcon, PhoneFillIcon } from '@navikt/aksel-icons';
-import { BodyShort, Detail, HStack, Label, Link, VStack } from '@navikt/ds-react';
+import { BodyShort, Detail, HStack, Label, VStack } from '@navikt/ds-react';
 import { formatCurrencyNoKr } from '@navikt/ft-utils';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { Inntektsmelding } from '@navikt/fp-types';
 
+import { DokumentLink } from '../../../../ui-komponenter';
+
 import styles from './inntektsmeldingOpplysningerPanel.module.css';
 
 interface Props {
@@ -44,17 +45,18 @@ export const InntektsmeldingOpplysningerPanel = ({ saksnummer, inntektsmelding }
         <BodyShort size="small">{formatCurrencyNoKr(inntektsmelding.refusjonPrMnd)}</BodyShort>
       </HStack>
     )}
-    <Link
-      href={hentDokumentLenke(saksnummer, inntektsmelding.journalpostId, inntektsmelding.dokumentId)}
-      target="_blank"
+    <DokumentLink
+      saksnummer={saksnummer}
+      journalpostId={inntektsmelding.journalpostId}
+      dokumentId={inntektsmelding.dokumentId}
     >
-      <span>
+      <HStack gap="1">
         <BodyShort size="small" className={styles.inline}>
           <FormattedMessage id="InntektsmeldingOpplysningerPanel.ÅpneInntektsmelding" />
         </BodyShort>
-      </span>
-      <FileFillIcon className={styles.docIcon} />
-    </Link>
+        <FileFillIcon className={styles.docIcon} />
+      </HStack>
+    </DokumentLink>
     <HStack gap="4" align="center">
       <PhoneFillIcon className={styles.phoneIcon} />
       <VStack gap="1">
diff --git a/packages/prosess/prosess-innsyn/package.json b/packages/prosess/prosess-innsyn/package.json
index 649756e4d13..7ac79246f20 100644
--- a/packages/prosess/prosess-innsyn/package.json
+++ b/packages/prosess/prosess-innsyn/package.json
@@ -27,6 +27,7 @@
     "@navikt/fp-prosess-felles": "workspace:*",
     "@navikt/fp-types": "workspace:*",
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/fp-utils": "workspace:*",
     "@navikt/ft-form-hooks": "6.2.9",
     "@navikt/ft-form-validators": "3.1.11",
diff --git a/packages/prosess/prosess-innsyn/src/components/DocumentListInnsyn.tsx b/packages/prosess/prosess-innsyn/src/components/DocumentListInnsyn.tsx
index b8500527f43..49db5eaa8cd 100644
--- a/packages/prosess/prosess-innsyn/src/components/DocumentListInnsyn.tsx
+++ b/packages/prosess/prosess-innsyn/src/components/DocumentListInnsyn.tsx
@@ -7,9 +7,10 @@ import { CheckboxField } from '@navikt/ft-form-hooks';
 import { DateTimeLabel } from '@navikt/ft-ui-komponenter';
 
 import { Kommunikasjonsretning } from '@navikt/fp-kodeverk';
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { Dokument } from '@navikt/fp-types';
 
+import { DokumentLink } from '../../../../ui-komponenter';
+
 import styles from './documentListInnsyn.module.css';
 
 const getDirectionImage = (document: Dokument, intl: IntlShape): ReactElement => {
@@ -102,14 +103,12 @@ export const DocumentListInnsyn = ({ documents, saksNr, readOnly = false }: Prop
                 </Table.DataCell>
                 <Table.DataCell hidden={readOnly}>{img}</Table.DataCell>
                 <Table.DataCell className={styles.linkCol}>
-                  <a
-                    href={hentDokumentLenke(saksNr, document.journalpostId, document.dokumentId)}
-                    className="lenke lenke--frittstaende"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {document.tittel}
-                  </a>
+                  <DokumentLink
+                    saksnummer={saksNr}
+                    journalpostId={document.journalpostId}
+                    dokumentId={document.dokumentId}
+                    dokumentTittel={document.tittel}
+                  />
                 </Table.DataCell>
                 <Table.DataCell hidden={readOnly}>
                   {document.tidspunkt ? (
diff --git a/packages/prosess/prosess-vedtak-innsyn/package.json b/packages/prosess/prosess-vedtak-innsyn/package.json
index 2b40aa16081..40744dd2810 100644
--- a/packages/prosess/prosess-vedtak-innsyn/package.json
+++ b/packages/prosess/prosess-vedtak-innsyn/package.json
@@ -26,6 +26,7 @@
     "@navikt/fp-prosess-felles": "workspace:*",
     "@navikt/fp-types": "workspace:*",
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/fp-utils": "workspace:*",
     "@navikt/ft-form-hooks": "6.2.9",
     "@navikt/ft-form-validators": "3.1.11",
diff --git a/packages/prosess/prosess-vedtak-innsyn/src/components/DocumentListVedtakInnsyn.tsx b/packages/prosess/prosess-vedtak-innsyn/src/components/DocumentListVedtakInnsyn.tsx
index 5bc072aaf03..cb1483e553b 100644
--- a/packages/prosess/prosess-vedtak-innsyn/src/components/DocumentListVedtakInnsyn.tsx
+++ b/packages/prosess/prosess-vedtak-innsyn/src/components/DocumentListVedtakInnsyn.tsx
@@ -2,9 +2,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { BodyShort, Detail, Table } from '@navikt/ds-react';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { Dokument } from '@navikt/fp-types';
 
+import { DokumentLink } from '../../../../ui-komponenter';
+
 import styles from './documentListVedtakInnsyn.module.css';
 
 interface Props {
@@ -48,14 +49,12 @@ export const DocumentListVedtakInnsyn = ({ documents, saksNr }: Props) => {
             return (
               <Table.Row key={dokId}>
                 <Table.DataCell className={styles.linkCol}>
-                  <a
-                    href={hentDokumentLenke(saksNr, document.journalpostId, document.dokumentId)}
-                    className="lenke lenke--frittstaende"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {document.tittel}
-                  </a>
+                  <DokumentLink
+                    saksnummer={saksNr}
+                    journalpostId={document.journalpostId}
+                    dokumentId={document.dokumentId}
+                    dokumentTittel={document.tittel}
+                  />
                 </Table.DataCell>
               </Table.Row>
             );
diff --git a/packages/prosess/prosess-vedtak/package.json b/packages/prosess/prosess-vedtak/package.json
index e6b00d7844d..26c184e6e42 100644
--- a/packages/prosess/prosess-vedtak/package.json
+++ b/packages/prosess/prosess-vedtak/package.json
@@ -31,6 +31,7 @@
     "@navikt/fp-prosess-felles": "workspace:*",
     "@navikt/fp-types": "workspace:*",
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/fp-utils": "workspace:*",
     "@navikt/ft-form-hooks": "6.2.9",
     "@navikt/ft-form-validators": "3.1.11",
diff --git a/packages/prosess/prosess-vedtak/src/components/felles/DokumentVisning.tsx b/packages/prosess/prosess-vedtak/src/components/felles/DokumentVisning.tsx
index fd05383a21c..86389124985 100644
--- a/packages/prosess/prosess-vedtak/src/components/felles/DokumentVisning.tsx
+++ b/packages/prosess/prosess-vedtak/src/components/felles/DokumentVisning.tsx
@@ -1,12 +1,13 @@
 import { useIntl } from 'react-intl';
 
 import { FileIcon } from '@navikt/aksel-icons';
-import { BodyShort, HStack, Link } from '@navikt/ds-react';
+import { BodyShort, HStack } from '@navikt/ds-react';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { OppgaveDokument } from '@navikt/fp-types';
 import { usePanelDataContext } from '@navikt/fp-utils';
 
+import { DokumentLink } from '../../../../../ui-komponenter';
+
 interface Props {
   dokument: OppgaveDokument;
 }
@@ -14,15 +15,18 @@ interface Props {
 export const DokumentVisning = ({ dokument }: Props) => {
   const { fagsak } = usePanelDataContext();
   const intl = useIntl();
-
+  const tittel = dokument.tittel ?? intl.formatMessage({ id: 'DokumentVisning.UkjentTittel' });
   return (
-    <Link href={hentDokumentLenke(fagsak.saksnummer, dokument.journalpostId, dokument.dokumentId)} target="_blank">
+    <DokumentLink
+      saksnummer={fagsak.saksnummer}
+      journalpostId={dokument.journalpostId}
+      dokumentId={dokument.dokumentId}
+      dokumentTittel={tittel}
+    >
       <HStack gap="1">
         <FileIcon width="20" height="20" aria-label={intl.formatMessage({ id: 'DokumentVisning.FilIkon' })} />
-        <BodyShort size="small">
-          {dokument.tittel ? dokument.tittel : intl.formatMessage({ id: 'DokumentVisning.UkjentTittel' })}
-        </BodyShort>
+        <BodyShort size="small">{tittel}</BodyShort>
       </HStack>
-    </Link>
+    </DokumentLink>
   );
 };
diff --git a/packages/sak/dokumenter/package.json b/packages/sak/dokumenter/package.json
index 024f87d6898..48a568499da 100644
--- a/packages/sak/dokumenter/package.json
+++ b/packages/sak/dokumenter/package.json
@@ -26,6 +26,7 @@
     "@navikt/ds-react": "7.18.0",
     "@navikt/fp-kodeverk": "workspace:*",
     "@navikt/fp-types": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/ft-ui-komponenter": "4.0.0",
     "@navikt/ft-utils": "3.3.1",
     "react": "19.1.0",
diff --git a/packages/sak/dokumenter/src/DokumenterSakIndex.stories.tsx b/packages/sak/dokumenter/src/DokumenterSakIndex.stories.tsx
index c18fad7522a..060547912cd 100644
--- a/packages/sak/dokumenter/src/DokumenterSakIndex.stories.tsx
+++ b/packages/sak/dokumenter/src/DokumenterSakIndex.stories.tsx
@@ -1,4 +1,3 @@
-import { action } from '@storybook/addon-actions';
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { DecoratorFunction } from '@storybook/types';
 
@@ -27,7 +26,7 @@ const meta = {
   component: DokumenterSakIndex,
   decorators: [withStyleProvider],
   args: {
-    selectDocumentCallback: action('button-click'),
+    saksnummer: '2',
     behandlingUuid: '1',
   },
 } satisfies Meta<typeof DokumenterSakIndex>;
diff --git a/packages/sak/dokumenter/src/DokumenterSakIndex.tsx b/packages/sak/dokumenter/src/DokumenterSakIndex.tsx
index c91b9978858..08e08ea9830 100644
--- a/packages/sak/dokumenter/src/DokumenterSakIndex.tsx
+++ b/packages/sak/dokumenter/src/DokumenterSakIndex.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { RawIntlProvider } from 'react-intl';
 
 import { createIntl } from '@navikt/ft-utils';
@@ -13,7 +12,7 @@ const intl = createIntl(messages);
 
 interface Props {
   documents: Dokument[];
-  selectDocumentCallback: (e: React.SyntheticEvent, id?: number | string, dokument?: Dokument) => void;
+  saksnummer: string;
   behandlingUuid?: string;
 }
 
diff --git a/packages/sak/dokumenter/src/components/DocumentList.tsx b/packages/sak/dokumenter/src/components/DocumentList.tsx
index 15292eef9bb..6252f59101a 100644
--- a/packages/sak/dokumenter/src/components/DocumentList.tsx
+++ b/packages/sak/dokumenter/src/components/DocumentList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import {
@@ -7,18 +7,21 @@ import {
   NotePencilFillIcon,
   StarFillIcon,
 } from '@navikt/aksel-icons';
-import { BodyShort, Button, Checkbox, Link, type SortState, Table } from '@navikt/ds-react';
+import { BodyShort, Button, Checkbox, type SortState, Table } from '@navikt/ds-react';
 import { DateTimeLabel } from '@navikt/ft-ui-komponenter';
 
 import { Kommunikasjonsretning } from '@navikt/fp-kodeverk';
 import type { Dokument } from '@navikt/fp-types';
+import { åpneDokument } from '@navikt/fp-utils';
+
+import { DokumentLink } from '../../../../ui-komponenter';
 
 import styles from './documentList.module.css';
 
 interface Props {
   documents: Dokument[];
   behandlingUuid?: string;
-  selectDocumentCallback: (e: React.SyntheticEvent, id?: number | string, dokument?: Dokument) => void;
+  saksnummer: string;
 }
 
 type TableHeaders = 'kommunikasjonsretning' | 'tittel' | 'gjelderFor' | 'tidspunkt';
@@ -71,7 +74,7 @@ const KommunikasjonsretningIkon = ({ kommunikasjonsretning }: { kommunikasjonsre
  * trigget når saksbehandler velger et dokument. Finnes ingen dokumenter blir det kun vist en label
  * som viser at ingen dokumenter finnes på fagsak.
  */
-export const DocumentList = ({ documents, behandlingUuid, selectDocumentCallback }: Props) => {
+export const DocumentList = ({ documents, behandlingUuid, saksnummer }: Props) => {
   const intl = useIntl();
 
   // Logikk for å toggle checkboxes tilpasset fra Aksel-eksempel: https://aksel.nav.no/komponenter/core/table#tabledemo-selectable
@@ -130,14 +133,14 @@ export const DocumentList = ({ documents, behandlingUuid, selectDocumentCallback
     <>
       {valgteDokumentIder.length > 0 && (
         <Button
-          onClick={event =>
-            valgteDokumentIder.forEach(dokumentId =>
-              selectDocumentCallback(
-                event,
-                dokumentId,
-                documents.find(document => document.dokumentId === dokumentId),
-              ),
-            )
+          onClick={() =>
+            documents
+              .filter(d => valgteDokumentIder.includes(d.dokumentId))
+              .forEach(dokument => {
+                if (dokument) {
+                  åpneDokument(saksnummer, dokument.journalpostId, dokument.dokumentId, dokument.tittel);
+                }
+              })
           }
           className={styles.openDocumentButton}
           size="small"
@@ -199,14 +202,12 @@ export const DocumentList = ({ documents, behandlingUuid, selectDocumentCallback
                   document.behandlingUuidList.includes(behandlingUuid) && (
                     <StarFillIcon className={styles.image} title={intl.formatMessage({ id: 'DocumentList.IBruk' })} />
                   )}
-                {/* Ideelt sett hadde vi brukt en lenke som direkte åpnet dokumentet i ny fane.
-                Men fordi denne komponent kun har ansvar for å gi callback på ønsket dokument så må det brukes onClick */}
-                <Link
-                  className={styles.dokumentlenke}
-                  onClick={event => selectDocumentCallback(event, document.dokumentId, document)}
-                >
-                  {document.tittel}
-                </Link>
+                <DokumentLink
+                  saksnummer={saksnummer}
+                  journalpostId={document.journalpostId}
+                  dokumentId={document.dokumentId}
+                  dokumentTittel={document.tittel}
+                />
               </Table.DataCell>
               <Table.DataCell>{document.gjelderFor}</Table.DataCell>
               <Table.DataCell>
diff --git a/packages/sak/historikk/package.json b/packages/sak/historikk/package.json
index 4082e7a3354..777d3579ebd 100644
--- a/packages/sak/historikk/package.json
+++ b/packages/sak/historikk/package.json
@@ -27,6 +27,7 @@
     "@navikt/fp-konstanter": "workspace:*",
     "@navikt/fp-storybook-utils": "workspace:*",
     "@navikt/fp-types": "workspace:*",
+    "@navikt/fp-ui-komponenter": "workspace:*",
     "@navikt/ft-hooks": "2.1.6",
     "@navikt/ft-utils": "3.3.1",
     "dayjs": "1.11.13",
diff --git a/packages/sak/historikk/src/components/HistorikkInnslag/HistorikkDokumentLenke.tsx b/packages/sak/historikk/src/components/HistorikkInnslag/HistorikkDokumentLenke.tsx
index 8ae97ec3802..dc07b5ecc80 100644
--- a/packages/sak/historikk/src/components/HistorikkInnslag/HistorikkDokumentLenke.tsx
+++ b/packages/sak/historikk/src/components/HistorikkInnslag/HistorikkDokumentLenke.tsx
@@ -1,9 +1,10 @@
 import { FileIcon } from '@navikt/aksel-icons';
 import { BodyShort, HStack } from '@navikt/ds-react';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
 import type { HistorikkInnslagDokumentLink } from '@navikt/fp-types';
 
+import { DokumentLink } from '../../../../../ui-komponenter';
+
 interface Props {
   dokumentLenke: HistorikkInnslagDokumentLink;
   saksnummer: string;
@@ -13,25 +14,18 @@ export const HistorikkDokumentLenke = ({
   dokumentLenke: { tag, journalpostId, dokumentId, utgått },
   saksnummer,
 }: Props) => {
-  if (utgått) {
-    return (
-      <HStack align="center" gap="1">
-        <FileIcon title={tag} width={24} height={24} />
-        <BodyShort size="small">{tag}</BodyShort>
-      </HStack>
-    );
-  }
-  return (
-    <HStack
-      as="a"
-      align="center"
-      gap="1"
-      href={hentDokumentLenke(saksnummer, journalpostId, dokumentId)}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+  const dokument = (
+    <HStack align="center" gap="1">
       <FileIcon title={tag} width={24} height={24} />
-      {tag}
+      <BodyShort>{tag}</BodyShort>
     </HStack>
   );
+
+  return utgått ? (
+    dokument
+  ) : (
+    <DokumentLink saksnummer={saksnummer} journalpostId={journalpostId} dokumentId={dokumentId} dokumentTittel={tag}>
+      {dokument}
+    </DokumentLink>
+  );
 };
diff --git a/packages/ui-komponenter/index.ts b/packages/ui-komponenter/index.ts
new file mode 100644
index 00000000000..eda542e56b6
--- /dev/null
+++ b/packages/ui-komponenter/index.ts
@@ -0,0 +1 @@
+export { DokumentLink } from './src/DokumentLink';
diff --git a/packages/ui-komponenter/package.json b/packages/ui-komponenter/package.json
new file mode 100644
index 00000000000..542d1d2820d
--- /dev/null
+++ b/packages/ui-komponenter/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@navikt/fp-ui-komponenter",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "scripts": {
+    "tsc": "tsc --pretty",
+    "eslint": "eslint \"src/**/*.ts*\" --color",
+    "eslint:fix": "eslint --fix \"src/**/*.ts*\" --color",
+    "prettier": "prettier --write src",
+    "clean": "rm -rf ./dist ./node_modules"
+  },
+  "dependencies": {
+    "@navikt/ds-react": "7.18.0",
+    "@navikt/fp-types": "workspace:^",
+    "@navikt/fp-utils": "workspace:^",
+    "react": "19.1.0"
+  },
+  "devDependencies": {
+    "eslint": "9.23.0",
+    "typescript": "5.8.2",
+    "vite": "6.2.4"
+  }
+}
diff --git a/packages/ui-komponenter/src/DokumentLink.tsx b/packages/ui-komponenter/src/DokumentLink.tsx
new file mode 100644
index 00000000000..4c3b13bd9b2
--- /dev/null
+++ b/packages/ui-komponenter/src/DokumentLink.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+import { åpneVindu } from '@navikt/fp-utils';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
+  journalpostId: string;
+  dokumentId: string;
+  dokumentTittel?: string;
+  children?: React.ReactNode;
+}) => {
+  const target = `${journalpostId}-${dokumentId}`;
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+
+  return (
+    <Link href={url} target={target} rel="noopener noreferrer" onClick={openDocumentFromLink(dokumentTittel)}>
+      {children ?? dokumentTittel}
+    </Link>
+  );
+};
+
+const openDocumentFromLink =
+  (dokumentTittel?: string) =>
+  (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
+    if (dokumentTittel) {
+      åpneVindu(event.currentTarget.href, event.currentTarget.target, dokumentTittel);
+    }
+  };
diff --git a/packages/ui-komponenter/tsconfig.json b/packages/ui-komponenter/tsconfig.json
new file mode 100644
index 00000000000..47c5b53f956
--- /dev/null
+++ b/packages/ui-komponenter/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "include": ["./", "../../@types/externals.d.ts"],
+  "exclude": ["node_modules", "**.spec.ts"],
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 968042fe8af..1073dfd0d61 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -1,5 +1,6 @@
-export { MellomlagretFormDataProvider, useMellomlagretFormData } from './src/context/MellomlagretFormDataContext.tsx';
+export { MellomlagretFormDataProvider, useMellomlagretFormData } from './src/context/MellomlagretFormDataContext';
 export { PanelDataProvider, usePanelDataContext } from './src/context/PanelDataContext';
 export { PanelOverstyringProvider, usePanelOverstyring } from './src/context/PanelOverstyringContext';
 export { notEmpty } from './src/notEmpty';
 export { assertUnreachable } from './src/switchCaseUtils';
+export { åpneDokument, åpneVindu } from './src/åpneDokument';
diff --git "a/packages/utils/src/\303\245pneDokument.ts" "b/packages/utils/src/\303\245pneDokument.ts"
new file mode 100644
index 00000000000..89704b48637
--- /dev/null
+++ "b/packages/utils/src/\303\245pneDokument.ts"
@@ -0,0 +1,23 @@
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const åpneDokument = (
+  saksnummer: string,
+  journalpostId: string,
+  dokumentId: string,
+  dokumentTittel?: string,
+): void => {
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+  const target = `${journalpostId}-${dokumentId}`;
+  if (dokumentTittel) {
+    åpneVindu(url, target, dokumentTittel);
+  }
+};
+
+export const åpneVindu = (url: string, target: string, dokumentTittel: string): void => {
+  const dokumentVindu = window.open(url, target);
+  if (dokumentVindu) {
+    setTimeout(() => {
+      dokumentVindu.document.title = dokumentTittel;
+    }, 1000);
+  }
+};
diff --git a/yarn.lock b/yarn.lock
index 33332068ec2..df62a92fcaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2419,6 +2419,7 @@ __metadata:
     "@navikt/fp-storybook-utils": "workspace:*"
     "@navikt/fp-types": "workspace:*"
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/fp-utils": "workspace:*"
     "@navikt/ft-form-hooks": 6.2.9
     "@navikt/ft-form-validators": 3.1.11
@@ -3711,6 +3712,7 @@ __metadata:
     "@navikt/fp-storybook-utils": "workspace:*"
     "@navikt/fp-types": "workspace:*"
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/fp-utils": "workspace:*"
     "@navikt/ft-form-hooks": 6.2.9
     "@navikt/ft-form-validators": 3.1.11
@@ -3972,6 +3974,7 @@ __metadata:
     "@navikt/fp-storybook-utils": "workspace:*"
     "@navikt/fp-types": "workspace:*"
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/fp-utils": "workspace:*"
     "@navikt/ft-form-hooks": 6.2.9
     "@navikt/ft-form-validators": 3.1.11
@@ -4044,6 +4047,7 @@ __metadata:
     "@navikt/fp-storybook-utils": "workspace:*"
     "@navikt/fp-types": "workspace:*"
     "@navikt/fp-types-avklar-aksjonspunkter": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/fp-utils": "workspace:*"
     "@navikt/ft-form-hooks": 6.2.9
     "@navikt/ft-form-validators": 3.1.11
@@ -4494,6 +4498,7 @@ __metadata:
     "@navikt/ds-react": 7.18.0
     "@navikt/fp-kodeverk": "workspace:*"
     "@navikt/fp-types": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/ft-ui-komponenter": 4.0.0
     "@navikt/ft-utils": 3.3.1
     "@storybook/addon-actions": 8.6.11
@@ -4552,6 +4557,7 @@ __metadata:
     "@navikt/fp-konstanter": "workspace:*"
     "@navikt/fp-storybook-utils": "workspace:*"
     "@navikt/fp-types": "workspace:*"
+    "@navikt/fp-ui-komponenter": "workspace:*"
     "@navikt/fp-utils-test": "workspace:*"
     "@navikt/ft-hooks": 2.1.6
     "@navikt/ft-utils": 3.3.1
@@ -5063,6 +5069,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@navikt/fp-ui-komponenter@workspace:*, @navikt/fp-ui-komponenter@workspace:packages/ui-komponenter":
+  version: 0.0.0-use.local
+  resolution: "@navikt/fp-ui-komponenter@workspace:packages/ui-komponenter"
+  dependencies:
+    "@navikt/ds-react": 7.18.0
+    "@navikt/fp-types": "workspace:^"
+    "@navikt/fp-utils": "workspace:^"
+    eslint: 9.23.0
+    react: 19.1.0
+    typescript: 5.8.2
+    vite: 6.2.4
+  languageName: unknown
+  linkType: soft
+
 "@navikt/fp-utbetalingsdata-is15@workspace:*, @navikt/fp-utbetalingsdata-is15@workspace:packages/utbetalingsdata-is15":
   version: 0.0.0-use.local
   resolution: "@navikt/fp-utbetalingsdata-is15@workspace:packages/utbetalingsdata-is15"
@@ -5103,7 +5123,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/fp-utils@workspace:*, @navikt/fp-utils@workspace:packages/utils":
+"@navikt/fp-utils@workspace:*, @navikt/fp-utils@workspace:^, @navikt/fp-utils@workspace:packages/utils":
   version: 0.0.0-use.local
   resolution: "@navikt/fp-utils@workspace:packages/utils"
   dependencies:


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR refactors how document links are handled across several components to enable reuse of tab functionality by replacing direct calls to hentDokumentLenke and window.open with a standardized DokumentLink component and åpneDokument function.  
- Replaces custom link callbacks with the new DokumentLink component across document list and detail views.  
- Adjusts component props to use saksnummer instead of callback functions for opening documents.  
- Updates related PDF button and arbeidsgiver component implementations to align with the new document linking approach.

### Reviewed Changes

Copilot reviewed 18 out of 25 changed files in this pull request and generated 1 comment.

<details>
<summary>Show a summary per file</summary>

| File | Description |
| ---- | ----------- |
| packages/sak/dokumenter/src/components/DocumentList.tsx | Removed selectDocumentCallback and updated onClick to use åpneDokument with saksnummer. |
| packages/sak/dokumenter/src/DokumenterSakIndex.tsx | Replaced callback prop with saksnummer prop. |
| packages/prosess/prosess-vedtak/src/components/felles/DokumentVisning.tsx | Swapped Link for DokumentLink and simplified title handling. |
| packages/prosess/prosess-vedtak-innsyn/src/components/DocumentListVedtakInnsyn.tsx | Replaced direct URL link with DokumentLink. |
| packages/prosess/prosess-innsyn/src/components/DocumentListInnsyn.tsx | Updated link rendering to use DokumentLink. |
| packages/felles/src/DokumentLink.tsx | Introduced the new DokumentLink component using hentDokumentLenke and a custom onClick handler. |
| packages/felles/index.ts | Exported the new DokumentLink component. |
| packages/fakta/* | Updated multiple components (InntektsmeldingOpplysningerPanel, LastNedPdf, InntektsmeldingInnhold, Arbeidsgiver) to use DokumentLink and åpneDokument. |
| apps/fp-frontend-app/src/behandlingsupport/dokument/DokumentIndex.tsx | Removed the selectDocument callback and updated DokumenterSakIndex usage to pass saksnummer. |
</details>


<details>
<summary>Files not reviewed (7)</summary>

* **packages/fakta/fakta-arbeid-og-inntekt/package.json**: Language not supported
* **packages/felles/package.json**: Language not supported
* **packages/felles/tsconfig.json**: Language not supported
* **packages/prosess/prosess-innsyn/package.json**: Language not supported
* **packages/prosess/prosess-vedtak-innsyn/package.json**: Language not supported
* **packages/prosess/prosess-vedtak/package.json**: Language not supported
* **packages/sak/dokumenter/package.json**: Language not supported
</details>

<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**packages/sak/dokumenter/src/components/DocumentList.tsx:136**
* Ensure that removing the event parameter in this onClick handler does not affect any necessary event behavior (e.g., preventing default actions) that might be relied upon elsewhere.
```
onClick={() => documents.filter(d => valgteDokumentIder.includes(d.dokumentId)).forEach(dokument => { if (dokument) { åpneDokument(saksnummer, dokument.journalpostId, dokument.dokumentId, dokument.tittel); } })}
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T14:36:47Z
user: login: remhol
body: Virker veldig bra! Fint å få gjenbrukbare komponenter og metoder på dette! 
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-04T06:02:25Z
user: login: tor-nav
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T06:31:40Z
user: login: remhol
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T06:36:42Z
user: login: sirimykland
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T08:11:21Z
user: login: tor-nav
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T08:27:00Z
user: login: sirimykland
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T08:30:15Z
user: login: remhol
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T08:31:09Z

Review comments:
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
+  journalpostId: string;
+  dokumentId: string;
+  dokumentTittel?: string;
+  children?: React.ReactNode;
+}) => {
+  const target = `${journalpostId}-${dokumentId}`;
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+
+  return (
+    <Link href={url} target={target} rel="noopener noreferrer" onClick={openDocumentFromLink(dokumentTittel)}>
+      {children ?? dokumentTittel}
+    </Link>
+  );
+};
+
+const openDocumentFromLink =
+  (dokumentTittel?: string) =>
+  (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
+    if (dokumentTittel) {
+      const dokumentVindu = window.open(event.currentTarget.href, event.currentTarget.target);
path: packages/felles/src/DokumentLink.tsx
user: login: Copilot
body: If window.open returns null, the subsequent document title update will fail. Consider adding error handling or fallback logic for cases where the new window cannot be opened.
created_at: 2025-04-03T14:36:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,19 +3,26 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ArrowForwardIcon } from '@navikt/aksel-icons';
 import { BodyLong, Button, Modal } from '@navikt/ds-react';
+import { dateFormat } from '@navikt/ft-utils';
 
-import { hentDokumentLenke } from '@navikt/fp-konstanter';
-import type { Fagsak, Inntektsmelding } from '@navikt/fp-types';
+import type { ArbeidsgiverOpplysninger, Fagsak, Inntektsmelding } from '@navikt/fp-types';
+import { åpneDokument } from '@navikt/fp-utils';
 
-export const LastNedPdfKnapp = ({ inntektsmelding, fagsak }: { fagsak: Fagsak; inntektsmelding: Inntektsmelding }) => {
+export const LastNedPdfKnapp = ({
+  inntektsmelding,
+  fagsak,
+  arbeidsgiverOpplysninger,
+}: {
+  fagsak: Fagsak;
path: packages/fakta/fakta-inntektsmelding/src/components/LastNedPdf.tsx
user: login: remhol
body: Hvis fagsak stort sett kun brukes her inne kan man kanskje hente den her i stedet for å sende inn? 
created_at: 2025-04-04T05:54:08Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
path: packages/felles/src/DokumentLink.tsx
user: login: remhol
body: Samme gjelder saksnummer her. Den hentes vel fra fagsak, og hvis fagsak ikke brukes til noe annet enn å bare sende noe videre innover så kan man kanskje bare hente her i stedet
created_at: 2025-04-04T05:56:36Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
+  journalpostId: string;
+  dokumentId: string;
+  dokumentTittel?: string;
+  children?: React.ReactNode;
+}) => {
+  const target = `${journalpostId}-${dokumentId}`;
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+
+  return (
+    <Link href={url} target={target} rel="noopener noreferrer" onClick={openDocumentFromLink(dokumentTittel)}>
+      {children ?? dokumentTittel}
+    </Link>
+  );
+};
+
+const openDocumentFromLink =
path: packages/felles/src/DokumentLink.tsx
user: login: remhol
body: Hva er forskjellen på åpneDokument fra fp-utils og denne metoden? 
created_at: 2025-04-04T05:58:56Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
path: packages/felles/src/DokumentLink.tsx
user: login: tor-nav
body: Kommentar til remhol: Sidan denne komponenten ligg i ei pakke med generelle komponentar er det nok best å senda inn props da ein ikkje nødvendigvis kan garantera at context med fagsak ligg i komponenttreet. 
created_at: 2025-04-04T06:22:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,27 @@
+{
+  "name": "@navikt/fp-felles",
path: packages/felles/package.json
user: login: tor-nav
body: Dette pakke-navnet er litt for generelt. Med eit sånt navn i ei pakke på toppnivå er det vanskeleg å sjå kva som passar inn her. Da blir det fort eit bøtteprosjekt for alt mogleg rart. 

Mogleg ein burde legga denne i ft-repoet, i ui-komponenter. Evt ha ein lokal versjon av dette prosjektet. Men veldig åpen for bedre navn enn det
created_at: 2025-04-04T06:26:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
path: packages/felles/src/DokumentLink.tsx
user: login: remhol
body: Aha! Det var jeg ikke klar over. Takk for forklaring! 
created_at: 2025-04-04T06:36:42Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,27 @@
+{
+  "name": "@navikt/fp-felles",
path: packages/felles/package.json
user: login: sirimykland
body: jeg er enig i at navnet er for generelt. Grunnen til at jeg la den her og ikke i ft-* er fordi den bruker `hentDokumentLenke` som er fp-spesifikk. Jeg tenker at så lenge den ikke direkte skal brukes av sif så er det litt rart om vi legger fp-komponenter der nå vi ber dem om å flytte flere av komponentene over til sitt eget repo.

Men jeg er veldig med på å lage en lokal versjon av `fp-ui-komponenter` 😄 Kan fikse det før jeg merger!
created_at: 2025-04-04T08:11:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,27 @@
+{
+  "name": "@navikt/fp-felles",
path: packages/felles/package.json
user: login: tor-nav
body: Ja einig i det du seier om å flytta til ft-repoet
created_at: 2025-04-04T08:27:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
+  journalpostId: string;
+  dokumentId: string;
+  dokumentTittel?: string;
+  children?: React.ReactNode;
+}) => {
+  const target = `${journalpostId}-${dokumentId}`;
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+
+  return (
+    <Link href={url} target={target} rel="noopener noreferrer" onClick={openDocumentFromLink(dokumentTittel)}>
+      {children ?? dokumentTittel}
+    </Link>
+  );
+};
+
+const openDocumentFromLink =
path: packages/felles/src/DokumentLink.tsx
user: login: sirimykland
body: De er veldig like, men primærforskjellen er at den ene passer til anchor-tag og den andre til button. Grunnen til at den bruker anchor-tag med href og onClick og ikke bare onClick alene er på grunn av skjermlesere og fordi en a-tag trenger href for å visuelt se ut som en lenke. På sikt kan vi sikkert gjøre noe for å bruke likt uttrykk på tvers.

Men jeg lkan smale det som er helt identisk i en ny `åpneVindu`-funskjon som kan brukes av `openDocumentFromLink` og `åpneDokument`

created_at: 2025-04-04T08:30:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Link } from '@navikt/ds-react';
+
+import { hentDokumentLenke } from '@navikt/fp-konstanter';
+
+export const DokumentLink = ({
+  saksnummer,
+  journalpostId,
+  dokumentId,
+  dokumentTittel,
+  children,
+}: {
+  saksnummer: string;
+  journalpostId: string;
+  dokumentId: string;
+  dokumentTittel?: string;
+  children?: React.ReactNode;
+}) => {
+  const target = `${journalpostId}-${dokumentId}`;
+  const url = hentDokumentLenke(saksnummer, journalpostId, dokumentId);
+
+  return (
+    <Link href={url} target={target} rel="noopener noreferrer" onClick={openDocumentFromLink(dokumentTittel)}>
+      {children ?? dokumentTittel}
+    </Link>
+  );
+};
+
+const openDocumentFromLink =
path: packages/felles/src/DokumentLink.tsx
user: login: remhol
body: Takk for forklaring! 😄 Sikkert lurt å samle ja, så ikke det utvikler seg i ulike retninger 
created_at: 2025-04-04T08:31:08Z
author_association: COLLABORATOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-04-04T10:42:59Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=navikt_fp-frontend&pullRequest=6314) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=navikt_fp-frontend&pullRequest=6314&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=navikt_fp-frontend&pullRequest=6314&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=navikt_fp-frontend&pullRequest=6314&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=navikt_fp-frontend&pullRequest=6314&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=navikt_fp-frontend&pullRequest=6314&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=navikt_fp-frontend&pullRequest=6314)


author_association: NONE