From 423ba5c2ab1288230bba125df3d12939af783cfb Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 13:19:31 +0200
Subject: [PATCH 01/10] Lag Lovreferanse-komponent, inkludert tester

---
 packages/v2/gui/package.json                  |  1 +
 .../lovreferanse/Lovreferanse.stories.tsx     | 85 +++++++++++++++++++
 .../src/shared/lovreferanse/Lovreferanse.tsx  | 51 +++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
 create mode 100644 packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx

diff --git a/packages/v2/gui/package.json b/packages/v2/gui/package.json
index 3c06ef091b..d598ed72af 100644
--- a/packages/v2/gui/package.json
+++ b/packages/v2/gui/package.json
@@ -7,6 +7,7 @@
   "exports": {
     "./app/*": "./src/app/*",
     "./sak/*": "./src/sak/*",
+    "./shared/*": "./src/shared/*",
     "./utils/*": "./src/utils/*",
     "./kodeverk/*": "./src/kodeverk/*",
     "./storybook/*": "./src/storybook/*"
diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
new file mode 100644
index 0000000000..45de286556
--- /dev/null
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import withMaxWidth from '@k9-sak-web/gui/storybook/decorators/withMaxWidth.js';
+import { expect, within } from '@storybook/test';
+import { Lovreferanse } from './Lovreferanse';
+
+const meta: Meta<typeof Lovreferanse> = {
+  title: 'gui/shared/lovreferanse/Lovreferanse.tsx',
+  component: Lovreferanse,
+  decorators: [withMaxWidth(420)],
+};
+export default meta;
+
+const elemsfinder = (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+  return {
+    canvas,
+    root: () => canvasElement,
+    linkEls: () => canvas.queryAllByRole('link'),
+  };
+};
+
+type Story = StoryObj<typeof Lovreferanse>;
+export const DefaultStory: Story = {
+  args: {
+    children: '§ 9-1',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls } = elemsfinder(canvasElement);
+    await step('Enkeltparagrafer blir riktig lenket', async () => {
+      await expect(linkEls()).toHaveLength(1);
+      await expect(linkEls()[0]).toHaveTextContent('9-1');
+      await expect(linkEls()[0]).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+    });
+  },
+};
+
+export const JamførParagraferBlirRiktigLenket: Story = {
+  args: {
+    children: '§ 9-1 jf 21-22',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls } = elemsfinder(canvasElement);
+    await step('Enkeltparagrafer blir riktig lenket', async () => {
+      await expect(linkEls()).toHaveLength(2);
+      const [firstLink, secondLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+
+      await expect(secondLink).toHaveTextContent('21-22');
+      await expect(secondLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§21-22');
+    });
+  },
+};
+
+export const TekstUtenParagraftegnBlirIkkeLenket: Story = {
+  args: {
+    children: '9-1 jf 21-22',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('Tekst uten paragraftegn blir ikke lenket', async () => {
+      await expect(linkEls()).toHaveLength(0);
+      await expect(root()).toHaveTextContent('9-1 jf 21-22');
+    });
+  },
+};
+
+export const DobbelparagraferBlirLenketRiktig: Story = {
+  args: {
+    children: '§§ 9-1 og 9-2',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls } = elemsfinder(canvasElement);
+    await step('Dobbeltparagrafer blir lenket riktig', async () => {
+      await expect(linkEls()).toHaveLength(2);
+      const [firstLink, secondLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+
+      await expect(secondLink).toHaveTextContent('9-2');
+      await expect(secondLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-2');
+    });
+  },
+};
diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
new file mode 100644
index 0000000000..344691f013
--- /dev/null
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
@@ -0,0 +1,51 @@
+import { Link } from '@navikt/ds-react';
+import { Fragment } from 'react';
+type LovreferanseProps = {
+  /**
+   * Lovreferanseteksten.
+   *
+   * Denne teksten antas å være på formatet "§ 9-1", "§§ 9-2 og 9-3", "§ 8", "§ 9-3 jamfør 8-9" osv. */
+  children: string;
+};
+
+/**
+ * Tar inn en tekst, og lenker eventuelle lovreferanser til deres definisjon på lovdata sine sider
+ *
+ * ```tsx
+ * <Lovreferanse>§ 9-1</Lovreferanse>
+ * <Lovreferanse>§§ 9-1 og 9-2 jf. 22-21</Lovreferanse>
+ * ```
+ * */
+export const Lovreferanse = ({ children }: LovreferanseProps) => {
+  return <span>{berikMedLovdataLenker(children)}</span>;
+};
+
+const berikMedLovdataLenker = (lovreferanse: string) => {
+  const grunnUrlen = 'https://lovdata.no/lov/1997-02-28-19/';
+
+  const seksjonsRegex = /(\d+(-\d+)?)/g;
+
+  if (!lovreferanse.includes('§')) {
+    return lovreferanse;
+  }
+
+  return lovreferanse.split(' ').map((part, index) => {
+    const kapittelOgKanskjeParagraf = part.match(seksjonsRegex)?.[0];
+
+    if (kapittelOgKanskjeParagraf) {
+      const link = kapittelOgKanskjeParagraf.includes('-')
+        ? `${grunnUrlen}§${kapittelOgKanskjeParagraf}`
+        : `${grunnUrlen}§${kapittelOgKanskjeParagraf}-1`;
+
+      return (
+        <Fragment key={index}>
+          <Link href={link} title="Les mer på Lovdata.no">
+            {kapittelOgKanskjeParagraf}
+          </Link>{' '}
+        </Fragment>
+      );
+    }
+
+    return <span key={index}>{part} </span>;
+  });
+};

From 556971cef2a8709cc84afd93b384551b1ec6ea92 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 13:20:15 +0200
Subject: [PATCH 02/10] Ta i bruk Lovreferanse-komponenten ett sted

---
 .../src/components/SoknadsfristVilkarHeader.spec.tsx         | 4 ++--
 .../src/components/SoknadsfristVilkarHeader.tsx              | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
index e7ee20e656..c814a912ae 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
@@ -15,7 +15,7 @@ describe('<SoknadsfristVilkarHeader>', () => {
           <SoknadsfristVilkarHeader
             erVilkarOk
             overstyringApKode="5011"
-            lovReferanse="§23"
+            lovReferanse="§ 9-2"
             overrideReadOnly={false}
             kanOverstyreAccess={{
               isEnabled: true,
@@ -31,6 +31,6 @@ describe('<SoknadsfristVilkarHeader>', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Søknadsfrist' })).toBeInTheDocument();
-    expect(screen.getByText('§23')).toBeInTheDocument();
+    expect(screen.getByText('§ 9-2')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
index c5284848aa..0580033941 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
@@ -10,6 +10,7 @@ import React, { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import styles from './SoknadsfristVilkarForm.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
   aksjonspunktCodes.some(code => code === aksjonspunktCode);
@@ -76,7 +77,9 @@ const SoknadsfristVilkarHeader = ({
           </FlexColumn>
           {lovReferanse && (
             <FlexColumn>
-              <Detail className={styles.vilkar}>{lovReferanse}</Detail>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanse}</Lovreferanse>
+              </Detail>
             </FlexColumn>
           )}
         </FlexRow>

From e85c57cb3f7c6b3a4cbbc1be02b1cc7113797a85 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 13:32:41 +0200
Subject: [PATCH 03/10] Bruk Lovreferanse-komponenten overalt vi viser
 lovreferanser

---
 .../OmsorgenForPanelDef.tsx                   |   2 +-
 .../src/vilkar/ProsessPanelTemplate.tsx       |   5 +-
 .../src/components/AldersvilkarStatus.tsx     |   5 +-
 .../VilkarresultatMedOverstyringHeader.tsx    | 129 ++++++++++++++++++
 .../VilkarresultatMedOverstyringHeader.tsx    | 129 ++++++++++++++++++
 .../VilkarresultatMedOverstyringHeader.tsx    |   5 +-
 .../src/SykdomProsessIndex.tsx                |   5 +-
 7 files changed, 275 insertions(+), 5 deletions(-)
 create mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
 create mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx

diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
index 9b33e6ed4c..ff7ac0414c 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
@@ -10,7 +10,7 @@ class OmsorgenForPanelDef extends ProsessStegPanelDef {
 
   getTekstKode = () => 'Inngangsvilkar.OmsorgenFor';
 
-  getKomponent = props => this.overstyringDef.getKomponent({ ...props, lovReferanse: '$ 9-5' });
+  getKomponent = props => this.overstyringDef.getKomponent({ ...props, lovReferanse: '§ 9-5' });
 
   getAksjonspunktKoder = () => [aksjonspunktCodes.OVERSTYR_OMSORGEN_FOR];
 
diff --git a/packages/prosess-felles/src/vilkar/ProsessPanelTemplate.tsx b/packages/prosess-felles/src/vilkar/ProsessPanelTemplate.tsx
index 913dabc227..239831c437 100644
--- a/packages/prosess-felles/src/vilkar/ProsessPanelTemplate.tsx
+++ b/packages/prosess-felles/src/vilkar/ProsessPanelTemplate.tsx
@@ -14,6 +14,7 @@ import React, { ReactNode } from 'react';
 import getPackageIntl from '../../i18n/getPackageIntl';
 import ProsessStegSubmitButton from '../ProsessStegSubmitButton';
 import styles from './prosessPanelTemplate.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 interface OwnProps {
   title: string;
@@ -70,7 +71,9 @@ const ProsessPanelTemplate = ({
           </FlexColumn>
           {lovReferanse && (
             <FlexColumn>
-              <Detail className={styles.vilkar}>{lovReferanse}</Detail>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanse}</Lovreferanse>
+              </Detail>
             </FlexColumn>
           )}
         </FlexRow>
diff --git a/packages/prosess-vilkar-alder/src/components/AldersvilkarStatus.tsx b/packages/prosess-vilkar-alder/src/components/AldersvilkarStatus.tsx
index 6db9546a48..0f666b2495 100644
--- a/packages/prosess-vilkar-alder/src/components/AldersvilkarStatus.tsx
+++ b/packages/prosess-vilkar-alder/src/components/AldersvilkarStatus.tsx
@@ -5,6 +5,7 @@ import Feilikon from '../icons/Feilikon';
 import Suksessikon from '../icons/Suksessikon';
 
 import styles from './AldersvilkarStatus.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 interface AldersVilkarAPProps {
   vilkarOppfylt: boolean;
@@ -26,7 +27,9 @@ const AldersVilkarStatus = ({
       <h2 className={styles.aksjonspunktNavn}>
         <FormattedMessage id="AlderVilkar.Status.Aldersvilkar" />
       </h2>
-      <p className={styles.vilkar}>{vilkarReferanse}</p>
+      <p className={styles.vilkar}>
+        <Lovreferanse>{vilkarReferanse}</Lovreferanse>
+      </p>
     </div>
     <p className={styles.vilkarStatus}>
       {vilkarOppfylt
diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
new file mode 100644
index 0000000000..c956c4c781
--- /dev/null
+++ b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
@@ -0,0 +1,129 @@
+import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
+import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
+import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg';
+import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg';
+import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
+import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import { Aksjonspunkt } from '@k9-sak-web/types';
+import { Detail, Heading, Label } from '@navikt/ds-react';
+import React, { SetStateAction } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import styles from './vilkarresultatMedOverstyringForm.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
+
+const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
+  aksjonspunktCodes.some(code => code === aksjonspunktCode);
+const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) =>
+  !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre;
+
+const getVilkarOkMessage = originalErVilkarOk => {
+  let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet';
+  if (originalErVilkarOk) {
+    messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt';
+  } else if (originalErVilkarOk === false) {
+    messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt';
+  }
+
+  return (
+    <Label size="small" as="p">
+      <FormattedMessage id={messageId} />
+    </Label>
+  );
+};
+
+interface VilkarresultatMedOverstyringHeaderProps {
+  aksjonspunktCodes: string[];
+  aksjonspunkter: Aksjonspunkt[];
+  erOverstyrt?: boolean;
+  kanOverstyreAccess?: {
+    isEnabled: boolean;
+  };
+  lovReferanse?: string;
+  originalErVilkarOk?: boolean;
+  overrideReadOnly: boolean;
+  overstyringApKode: string;
+  panelTittelKode: string;
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+}
+
+const VilkarresultatMedOverstyringHeader = ({
+  panelTittelKode,
+  erOverstyrt,
+  overstyringApKode,
+  lovReferanse,
+  originalErVilkarOk,
+  overrideReadOnly,
+  kanOverstyreAccess,
+  aksjonspunktCodes,
+  toggleOverstyring,
+}: Partial<VilkarresultatMedOverstyringHeaderProps>) => {
+  const togglePa = () => {
+    toggleOverstyring(oldArray => [...oldArray, overstyringApKode]);
+  };
+  return (
+    <>
+      <FlexContainer>
+        <FlexRow>
+          {!erOverstyrt && originalErVilkarOk !== undefined && (
+            <FlexColumn>
+              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
+            </FlexColumn>
+          )}
+          <FlexColumn>
+            <Heading size="small" level="2">
+              <FormattedMessage id={panelTittelKode} />
+            </Heading>
+          </FlexColumn>
+          {lovReferanse && (
+            <FlexColumn>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanse}</Lovreferanse>
+              </Detail>
+            </FlexColumn>
+          )}
+        </FlexRow>
+        <FlexRow>
+          <FlexColumn>
+            <VerticalSpacer eightPx />
+            {getVilkarOkMessage(originalErVilkarOk)}
+          </FlexColumn>
+          {originalErVilkarOk !== undefined &&
+            !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && (
+              <>
+                {!erOverstyrt && !overrideReadOnly && (
+                  <FlexColumn>
+                    <VerticalSpacer eightPx />
+                    <Image className={styles.key} src={keyImage} onClick={togglePa} />
+                  </FlexColumn>
+                )}
+                {(erOverstyrt || overrideReadOnly) && (
+                  <FlexColumn>
+                    <VerticalSpacer eightPx />
+                    <Image className={styles.keyWithoutCursor} src={keyUtgraetImage} />
+                  </FlexColumn>
+                )}
+              </>
+            )}
+        </FlexRow>
+      </FlexContainer>
+      <VerticalSpacer eightPx />
+    </>
+  );
+};
+
+const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => {
+  const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode);
+
+  return (state, ownProps) => {
+    const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status;
+    const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined;
+
+    return {
+      aksjonspunktCodes,
+      originalErVilkarOk: erVilkarOk,
+    };
+  };
+};
+
+export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader);
diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx
new file mode 100644
index 0000000000..c956c4c781
--- /dev/null
+++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx
@@ -0,0 +1,129 @@
+import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
+import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
+import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg';
+import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg';
+import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
+import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import { Aksjonspunkt } from '@k9-sak-web/types';
+import { Detail, Heading, Label } from '@navikt/ds-react';
+import React, { SetStateAction } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import styles from './vilkarresultatMedOverstyringForm.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
+
+const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
+  aksjonspunktCodes.some(code => code === aksjonspunktCode);
+const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) =>
+  !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre;
+
+const getVilkarOkMessage = originalErVilkarOk => {
+  let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet';
+  if (originalErVilkarOk) {
+    messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt';
+  } else if (originalErVilkarOk === false) {
+    messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt';
+  }
+
+  return (
+    <Label size="small" as="p">
+      <FormattedMessage id={messageId} />
+    </Label>
+  );
+};
+
+interface VilkarresultatMedOverstyringHeaderProps {
+  aksjonspunktCodes: string[];
+  aksjonspunkter: Aksjonspunkt[];
+  erOverstyrt?: boolean;
+  kanOverstyreAccess?: {
+    isEnabled: boolean;
+  };
+  lovReferanse?: string;
+  originalErVilkarOk?: boolean;
+  overrideReadOnly: boolean;
+  overstyringApKode: string;
+  panelTittelKode: string;
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+}
+
+const VilkarresultatMedOverstyringHeader = ({
+  panelTittelKode,
+  erOverstyrt,
+  overstyringApKode,
+  lovReferanse,
+  originalErVilkarOk,
+  overrideReadOnly,
+  kanOverstyreAccess,
+  aksjonspunktCodes,
+  toggleOverstyring,
+}: Partial<VilkarresultatMedOverstyringHeaderProps>) => {
+  const togglePa = () => {
+    toggleOverstyring(oldArray => [...oldArray, overstyringApKode]);
+  };
+  return (
+    <>
+      <FlexContainer>
+        <FlexRow>
+          {!erOverstyrt && originalErVilkarOk !== undefined && (
+            <FlexColumn>
+              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
+            </FlexColumn>
+          )}
+          <FlexColumn>
+            <Heading size="small" level="2">
+              <FormattedMessage id={panelTittelKode} />
+            </Heading>
+          </FlexColumn>
+          {lovReferanse && (
+            <FlexColumn>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanse}</Lovreferanse>
+              </Detail>
+            </FlexColumn>
+          )}
+        </FlexRow>
+        <FlexRow>
+          <FlexColumn>
+            <VerticalSpacer eightPx />
+            {getVilkarOkMessage(originalErVilkarOk)}
+          </FlexColumn>
+          {originalErVilkarOk !== undefined &&
+            !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && (
+              <>
+                {!erOverstyrt && !overrideReadOnly && (
+                  <FlexColumn>
+                    <VerticalSpacer eightPx />
+                    <Image className={styles.key} src={keyImage} onClick={togglePa} />
+                  </FlexColumn>
+                )}
+                {(erOverstyrt || overrideReadOnly) && (
+                  <FlexColumn>
+                    <VerticalSpacer eightPx />
+                    <Image className={styles.keyWithoutCursor} src={keyUtgraetImage} />
+                  </FlexColumn>
+                )}
+              </>
+            )}
+        </FlexRow>
+      </FlexContainer>
+      <VerticalSpacer eightPx />
+    </>
+  );
+};
+
+const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => {
+  const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode);
+
+  return (state, ownProps) => {
+    const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status;
+    const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined;
+
+    return {
+      aksjonspunktCodes,
+      originalErVilkarOk: erVilkarOk,
+    };
+  };
+};
+
+export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader);
diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
index 2b2b367d39..3a0dd19c2d 100644
--- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
+++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
@@ -9,6 +9,7 @@ import { Detail, Heading, Label } from '@navikt/ds-react';
 import { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './vilkarresultatMedOverstyringForm.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
   aksjonspunktCodes.some(code => code === aksjonspunktCode);
@@ -78,7 +79,9 @@ const VilkarresultatMedOverstyringHeader = ({
           </FlexColumn>
           {lovReferanse && (
             <FlexColumn>
-              <Detail className={styles.vilkar}>{lovReferanse}</Detail>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanse}</Lovreferanse>
+              </Detail>
             </FlexColumn>
           )}
         </FlexRow>
diff --git a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
index ed6b2d9429..60c078e7fe 100644
--- a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
+++ b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
@@ -15,6 +15,7 @@ import React from 'react';
 import { FormattedMessage, RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
 import messages from '../i18n/nb_NO.json';
 import styles from './sykdomProsessIndex.module.css';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 const cx = classNames.bind(styles);
 
@@ -105,7 +106,9 @@ const SykdomProsessIndex = ({ perioder, panelTittelKode, lovReferanse }: SykdomP
                 </Heading>
               </FlexColumn>
               <FlexColumn>
-                <Detail className={styles.vilkar}>{lovReferanseTekst}</Detail>
+                <Detail className={styles.vilkar}>
+                  <Lovreferanse>{lovReferanseTekst}</Lovreferanse>
+                </Detail>
               </FlexColumn>
             </FlexRow>
             <FlexRow>

From b39ed19a925ed6dd6e7e0ea99ddfac5c9b687cb6 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 13:59:04 +0200
Subject: [PATCH 04/10] =?UTF-8?q?=C3=85pne=20lenke=20i=20nytt=20vindu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
index 344691f013..3aa5896e9b 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
@@ -39,7 +39,7 @@ const berikMedLovdataLenker = (lovreferanse: string) => {
 
       return (
         <Fragment key={index}>
-          <Link href={link} title="Les mer på Lovdata.no">
+          <Link href={link} title="Les mer på Lovdata.no" target="_blank">
             {kapittelOgKanskjeParagraf}
           </Link>{' '}
         </Fragment>

From 9d151fa8927afdffc2771412d3cb7a2cf503961a Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 14:04:18 +0200
Subject: [PATCH 05/10] =?UTF-8?q?Slett=20filer=20som=20ikke=20burde=20v?=
 =?UTF-8?q?=C3=A6rt=20med?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VilkarresultatMedOverstyringHeader.tsx    | 129 ------------------
 .../VilkarresultatMedOverstyringHeader.tsx    | 129 ------------------
 2 files changed, 258 deletions(-)
 delete mode 100644 packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
 delete mode 100644 packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx

diff --git a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
deleted file mode 100644
index c956c4c781..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components-old/VilkarresultatMedOverstyringHeader.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
-import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg';
-import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg';
-import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
-import { Aksjonspunkt } from '@k9-sak-web/types';
-import { Detail, Heading, Label } from '@navikt/ds-react';
-import React, { SetStateAction } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import styles from './vilkarresultatMedOverstyringForm.module.css';
-import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
-
-const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
-  aksjonspunktCodes.some(code => code === aksjonspunktCode);
-const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) =>
-  !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre;
-
-const getVilkarOkMessage = originalErVilkarOk => {
-  let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet';
-  if (originalErVilkarOk) {
-    messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt';
-  } else if (originalErVilkarOk === false) {
-    messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt';
-  }
-
-  return (
-    <Label size="small" as="p">
-      <FormattedMessage id={messageId} />
-    </Label>
-  );
-};
-
-interface VilkarresultatMedOverstyringHeaderProps {
-  aksjonspunktCodes: string[];
-  aksjonspunkter: Aksjonspunkt[];
-  erOverstyrt?: boolean;
-  kanOverstyreAccess?: {
-    isEnabled: boolean;
-  };
-  lovReferanse?: string;
-  originalErVilkarOk?: boolean;
-  overrideReadOnly: boolean;
-  overstyringApKode: string;
-  panelTittelKode: string;
-  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
-}
-
-const VilkarresultatMedOverstyringHeader = ({
-  panelTittelKode,
-  erOverstyrt,
-  overstyringApKode,
-  lovReferanse,
-  originalErVilkarOk,
-  overrideReadOnly,
-  kanOverstyreAccess,
-  aksjonspunktCodes,
-  toggleOverstyring,
-}: Partial<VilkarresultatMedOverstyringHeaderProps>) => {
-  const togglePa = () => {
-    toggleOverstyring(oldArray => [...oldArray, overstyringApKode]);
-  };
-  return (
-    <>
-      <FlexContainer>
-        <FlexRow>
-          {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
-          )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
-          {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
-          )}
-        </FlexRow>
-        <FlexRow>
-          <FlexColumn>
-            <VerticalSpacer eightPx />
-            {getVilkarOkMessage(originalErVilkarOk)}
-          </FlexColumn>
-          {originalErVilkarOk !== undefined &&
-            !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && (
-              <>
-                {!erOverstyrt && !overrideReadOnly && (
-                  <FlexColumn>
-                    <VerticalSpacer eightPx />
-                    <Image className={styles.key} src={keyImage} onClick={togglePa} />
-                  </FlexColumn>
-                )}
-                {(erOverstyrt || overrideReadOnly) && (
-                  <FlexColumn>
-                    <VerticalSpacer eightPx />
-                    <Image className={styles.keyWithoutCursor} src={keyUtgraetImage} />
-                  </FlexColumn>
-                )}
-              </>
-            )}
-        </FlexRow>
-      </FlexContainer>
-      <VerticalSpacer eightPx />
-    </>
-  );
-};
-
-const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => {
-  const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode);
-
-  return (state, ownProps) => {
-    const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status;
-    const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined;
-
-    return {
-      aksjonspunktCodes,
-      originalErVilkarOk: erVilkarOk,
-    };
-  };
-};
-
-export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader);
diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx
deleted file mode 100644
index c956c4c781..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringHeader.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
-import keyUtgraetImage from '@fpsak-frontend/assets/images/key-1-rotert-utgraet.svg';
-import keyImage from '@fpsak-frontend/assets/images/key-1-rotert.svg';
-import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
-import { Aksjonspunkt } from '@k9-sak-web/types';
-import { Detail, Heading, Label } from '@navikt/ds-react';
-import React, { SetStateAction } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import styles from './vilkarresultatMedOverstyringForm.module.css';
-import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
-
-const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
-  aksjonspunktCodes.some(code => code === aksjonspunktCode);
-const isHidden = (kanOverstyre: boolean, aksjonspunktCodes: string[], aksjonspunktCode: string) =>
-  !isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre;
-
-const getVilkarOkMessage = originalErVilkarOk => {
-  let messageId = 'VilkarresultatMedOverstyringForm.IkkeBehandlet';
-  if (originalErVilkarOk) {
-    messageId = 'VilkarresultatMedOverstyringForm.ErOppfylt';
-  } else if (originalErVilkarOk === false) {
-    messageId = 'VilkarresultatMedOverstyringForm.ErIkkeOppfylt';
-  }
-
-  return (
-    <Label size="small" as="p">
-      <FormattedMessage id={messageId} />
-    </Label>
-  );
-};
-
-interface VilkarresultatMedOverstyringHeaderProps {
-  aksjonspunktCodes: string[];
-  aksjonspunkter: Aksjonspunkt[];
-  erOverstyrt?: boolean;
-  kanOverstyreAccess?: {
-    isEnabled: boolean;
-  };
-  lovReferanse?: string;
-  originalErVilkarOk?: boolean;
-  overrideReadOnly: boolean;
-  overstyringApKode: string;
-  panelTittelKode: string;
-  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
-}
-
-const VilkarresultatMedOverstyringHeader = ({
-  panelTittelKode,
-  erOverstyrt,
-  overstyringApKode,
-  lovReferanse,
-  originalErVilkarOk,
-  overrideReadOnly,
-  kanOverstyreAccess,
-  aksjonspunktCodes,
-  toggleOverstyring,
-}: Partial<VilkarresultatMedOverstyringHeaderProps>) => {
-  const togglePa = () => {
-    toggleOverstyring(oldArray => [...oldArray, overstyringApKode]);
-  };
-  return (
-    <>
-      <FlexContainer>
-        <FlexRow>
-          {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
-          )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
-          {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
-          )}
-        </FlexRow>
-        <FlexRow>
-          <FlexColumn>
-            <VerticalSpacer eightPx />
-            {getVilkarOkMessage(originalErVilkarOk)}
-          </FlexColumn>
-          {originalErVilkarOk !== undefined &&
-            !isHidden(kanOverstyreAccess.isEnabled, aksjonspunktCodes, overstyringApKode) && (
-              <>
-                {!erOverstyrt && !overrideReadOnly && (
-                  <FlexColumn>
-                    <VerticalSpacer eightPx />
-                    <Image className={styles.key} src={keyImage} onClick={togglePa} />
-                  </FlexColumn>
-                )}
-                {(erOverstyrt || overrideReadOnly) && (
-                  <FlexColumn>
-                    <VerticalSpacer eightPx />
-                    <Image className={styles.keyWithoutCursor} src={keyUtgraetImage} />
-                  </FlexColumn>
-                )}
-              </>
-            )}
-        </FlexRow>
-      </FlexContainer>
-      <VerticalSpacer eightPx />
-    </>
-  );
-};
-
-const mapStateToPropsFactory = (_initialState, initialOwnProps: VilkarresultatMedOverstyringHeaderProps) => {
-  const aksjonspunktCodes = initialOwnProps.aksjonspunkter.map(a => a.definisjon.kode);
-
-  return (state, ownProps) => {
-    const erOppfylt = vilkarUtfallType.OPPFYLT === ownProps.status;
-    const erVilkarOk = vilkarUtfallType.IKKE_VURDERT !== ownProps.status ? erOppfylt : undefined;
-
-    return {
-      aksjonspunktCodes,
-      originalErVilkarOk: erVilkarOk,
-    };
-  };
-};
-
-export default connect(mapStateToPropsFactory)(VilkarresultatMedOverstyringHeader);

From a4778d2b49a6a60037323fdca3df09446b46007f Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 22 Aug 2024 14:24:01 +0200
Subject: [PATCH 06/10] Fiks noen tester

---
 .../Vilk\303\245rsvurderingAvToOmsorgspersoner.spec.tsx"      | 2 +-
 .../components/VilkarresultatMedOverstyringHeader.spec.tsx    | 4 ++--
 .../src/components/SoknadsfristVilkarHeader.spec.tsx          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git "a/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-to-omsorgspersoner/__tests__/Vilk\303\245rsvurderingAvToOmsorgspersoner.spec.tsx" "b/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-to-omsorgspersoner/__tests__/Vilk\303\245rsvurderingAvToOmsorgspersoner.spec.tsx"
index 4c8f088108..ea3ff8d174 100644
--- "a/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-to-omsorgspersoner/__tests__/Vilk\303\245rsvurderingAvToOmsorgspersoner.spec.tsx"
+++ "b/packages/fakta-medisinsk-vilk\303\245r/src/ui/components/vilk\303\245rsvurdering-av-to-omsorgspersoner/__tests__/Vilk\303\245rsvurderingAvToOmsorgspersoner.spec.tsx"
@@ -1,7 +1,7 @@
 import React from 'react';
 import { httpUtils } from '@fpsak-frontend/utils';
 import { render, fireEvent, waitFor, screen } from '@testing-library/react';
-import VilkårsvurderingAvToOmsorgspersoner from '../VilkårsvurderingAvToOmsorgspersoner';
+import VilkårsvurderingAvToOmsorgspersoner from '../VilkårsvurderingAvToOmsorgspersoner.js';
 import ContainerContext from '../../../context/ContainerContext';
 import VurderingContext from '../../../context/VurderingContext';
 import Vurderingstype from '../../../../types/Vurderingstype';
diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx
index 96228e88cf..8a7ac23bc8 100644
--- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx
+++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.spec.tsx
@@ -12,7 +12,7 @@ describe('<VilkarresultatMedOverstyringHeader>', () => {
       <Provider store={createStore(combineReducers({ form: reducer }))}>
         <VilkarresultatMedOverstyringHeader
           overstyringApKode="5011"
-          lovReferanse="§23"
+          lovReferanse="§ 23"
           overrideReadOnly={false}
           kanOverstyreAccess={{
             isEnabled: true,
@@ -29,6 +29,6 @@ describe('<VilkarresultatMedOverstyringHeader>', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Medlemskap' })).toBeInTheDocument();
-    expect(screen.getByText('§23')).toBeInTheDocument();
+    expect(screen.getByText('23')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
index c814a912ae..d3c3c4d8a9 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.spec.tsx
@@ -31,6 +31,6 @@ describe('<SoknadsfristVilkarHeader>', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Søknadsfrist' })).toBeInTheDocument();
-    expect(screen.getByText('§ 9-2')).toBeInTheDocument();
+    expect(screen.getByText('9-2')).toBeInTheDocument();
   });
 });

From 498764d38ec84b91c4f35fbdf4b34842b52a2f0a Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Mon, 26 Aug 2024 14:13:25 +0200
Subject: [PATCH 07/10] =?UTF-8?q?Gj=C3=B8r=20koden=20litt=20mer=20herda=20?=
 =?UTF-8?q?mtp=20forskjellige=20tekster?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lovreferanse/Lovreferanse.stories.tsx     | 47 +++++++++++++++++--
 .../src/shared/lovreferanse/Lovreferanse.tsx  | 10 ++--
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
index 45de286556..2182f19a03 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
@@ -1,14 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import withMaxWidth from '@k9-sak-web/gui/storybook/decorators/withMaxWidth.js';
 import { expect, within } from '@storybook/test';
 import { Lovreferanse } from './Lovreferanse';
 
-const meta: Meta<typeof Lovreferanse> = {
+const meta = {
   title: 'gui/shared/lovreferanse/Lovreferanse.tsx',
   component: Lovreferanse,
-  decorators: [withMaxWidth(420)],
-};
+} satisfies Meta<typeof Lovreferanse>;
 export default meta;
 
 const elemsfinder = (canvasElement: HTMLElement) => {
@@ -20,7 +18,7 @@ const elemsfinder = (canvasElement: HTMLElement) => {
   };
 };
 
-type Story = StoryObj<typeof Lovreferanse>;
+type Story = StoryObj<typeof meta>;
 export const DefaultStory: Story = {
   args: {
     children: '§ 9-1',
@@ -83,3 +81,42 @@ export const DobbelparagraferBlirLenketRiktig: Story = {
     });
   },
 };
+
+export const ParagrafUtenMellomromEtter: Story = {
+  args: {
+    children: '§9-1',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('§ uten mellomrom etter blir korrekt', async () => {
+      await expect(linkEls()).toHaveLength(1);
+      const [firstLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+      await expect(root()).toHaveTextContent('§ 9-1');
+    });
+  },
+};
+
+export const SaligKaosFungererOgså: Story = {
+  args: {
+    children: '§§9-1, 9-2 og §9-3',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('§ uten mellomrom etter blir korrekt', async () => {
+      await expect(linkEls()).toHaveLength(3);
+      const [firstLink, secondLink, thirdLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+
+      await expect(secondLink).toHaveTextContent('9-2');
+      await expect(secondLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-2');
+
+      await expect(thirdLink).toHaveTextContent('9-3');
+      await expect(thirdLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-3');
+
+      await expect(root()).toHaveTextContent('§§ 9-1, 9-2 og § 9-3');
+    });
+  },
+};
diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
index 3aa5896e9b..f42fc9d867 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
@@ -29,8 +29,8 @@ const berikMedLovdataLenker = (lovreferanse: string) => {
     return lovreferanse;
   }
 
-  return lovreferanse.split(' ').map((part, index) => {
-    const kapittelOgKanskjeParagraf = part.match(seksjonsRegex)?.[0];
+  return lovreferanse.split(' ').map((del, index) => {
+    const kapittelOgKanskjeParagraf = del.match(seksjonsRegex)?.[0];
 
     if (kapittelOgKanskjeParagraf) {
       const link = kapittelOgKanskjeParagraf.includes('-')
@@ -39,13 +39,15 @@ const berikMedLovdataLenker = (lovreferanse: string) => {
 
       return (
         <Fragment key={index}>
+          {del.includes('§§') ? '§§ ' : del.includes('§') ? '§ ' : ''}
           <Link href={link} title="Les mer på Lovdata.no" target="_blank">
             {kapittelOgKanskjeParagraf}
-          </Link>{' '}
+          </Link>
+          {del.endsWith(',') && ','}{' '}
         </Fragment>
       );
     }
 
-    return <span key={index}>{part} </span>;
+    return <span key={index}>{del} </span>;
   });
 };

From 7963ad2e2ce9a735f51c687f40f5c7c740218d10 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Mon, 26 Aug 2024 14:53:25 +0200
Subject: [PATCH 08/10] Rename test

---
 .../v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
index 2182f19a03..515378fc01 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
@@ -104,7 +104,7 @@ export const SaligKaosFungererOgså: Story = {
   },
   play: async ({ canvasElement, step }) => {
     const { linkEls, root } = elemsfinder(canvasElement);
-    await step('§ uten mellomrom etter blir korrekt', async () => {
+    await step('Salig kaos fungerer også', async () => {
       await expect(linkEls()).toHaveLength(3);
       const [firstLink, secondLink, thirdLink] = linkEls();
       await expect(firstLink).toHaveTextContent('9-1');

From d1b26910f75ae6a91a61efe953e4d5db3af957f7 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 29 Aug 2024 09:18:03 +0200
Subject: [PATCH 09/10] Herd koden enda mer, og legg til nok en test

---
 .../lovreferanse/Lovreferanse.stories.tsx     | 25 ++++++++++++++++-
 .../src/shared/lovreferanse/Lovreferanse.tsx  | 27 ++++++++++++-------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
index 515378fc01..a1e5d8ccca 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
@@ -98,10 +98,33 @@ export const ParagrafUtenMellomromEtter: Story = {
   },
 };
 
-export const SaligKaosFungererOgså: Story = {
+export const UventetFormatteringFungererSomForventet: Story = {
   args: {
     children: '§§9-1, 9-2 og §9-3',
   },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('Uventet formattering fungerer som forventet', async () => {
+      await expect(linkEls()).toHaveLength(3);
+      const [firstLink, secondLink, thirdLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+
+      await expect(secondLink).toHaveTextContent('9-2');
+      await expect(secondLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-2');
+
+      await expect(thirdLink).toHaveTextContent('9-3');
+      await expect(thirdLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-3');
+
+      await expect(root()).toHaveTextContent('§§ 9-1, 9-2 og § 9-3');
+    });
+  },
+};
+
+export const KommaUtenMellomromFungerer: Story = {
+  args: {
+    children: '§§9-1,9-2 og §9-3',
+  },
   play: async ({ canvasElement, step }) => {
     const { linkEls, root } = elemsfinder(canvasElement);
     await step('Salig kaos fungerer også', async () => {
diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
index f42fc9d867..a99be05289 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
@@ -23,31 +23,38 @@ export const Lovreferanse = ({ children }: LovreferanseProps) => {
 const berikMedLovdataLenker = (lovreferanse: string) => {
   const grunnUrlen = 'https://lovdata.no/lov/1997-02-28-19/';
 
-  const seksjonsRegex = /(\d+(-\d+)?)/g;
+  const seksjonsRegex = /(\d+(-\d+)?)/;
 
   if (!lovreferanse.includes('§')) {
     return lovreferanse;
   }
 
-  return lovreferanse.split(' ').map((del, index) => {
-    const kapittelOgKanskjeParagraf = del.match(seksjonsRegex)?.[0];
+  return lovreferanse
+    .replace(/,\s*/g, ', ')
+    .replace(/\s+/g, ' ')
+    .split(' ')
+    .map((del, index) => {
+      const kapittelOgKanskjeParagraf = del.match(seksjonsRegex)?.[0];
+
+      if (!kapittelOgKanskjeParagraf) {
+        return <span key={index}>{del} </span>;
+      }
 
-    if (kapittelOgKanskjeParagraf) {
       const link = kapittelOgKanskjeParagraf.includes('-')
         ? `${grunnUrlen}§${kapittelOgKanskjeParagraf}`
         : `${grunnUrlen}§${kapittelOgKanskjeParagraf}-1`;
 
+      const prefix = del.includes('§§') ? '§§ ' : del.includes('§') ? '§ ' : '';
+      const suffix = del.endsWith(',') ? ', ' : ' ';
+
       return (
         <Fragment key={index}>
-          {del.includes('§§') ? '§§ ' : del.includes('§') ? '§ ' : ''}
+          {prefix}
           <Link href={link} title="Les mer på Lovdata.no" target="_blank">
             {kapittelOgKanskjeParagraf}
           </Link>
-          {del.endsWith(',') && ','}{' '}
+          {suffix}
         </Fragment>
       );
-    }
-
-    return <span key={index}>{del} </span>;
-  });
+    });
 };

From aa6c78db2a62e74e5f73b5df7228a26ec98cc2b6 Mon Sep 17 00:00:00 2001
From: Kristofer Giltvedt Selbekk <kristofer.giltvedt.selbekk@nav.no>
Date: Thu, 29 Aug 2024 10:46:38 +0200
Subject: [PATCH 10/10] =?UTF-8?q?Legg=20til=20st=C3=B8tte=20for=20kapittel?=
 =?UTF-8?q?referanser?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lovreferanse/Lovreferanse.stories.tsx     | 37 +++++++++++++++++++
 .../src/shared/lovreferanse/Lovreferanse.tsx  |  4 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
index a1e5d8ccca..765e6690f8 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx
@@ -143,3 +143,40 @@ export const KommaUtenMellomromFungerer: Story = {
     });
   },
 };
+
+export const KapitlerBlirLenketRiktig: Story = {
+  args: {
+    children: 'Kapittel 2',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('Kapitler blir lenket riktig', async () => {
+      await expect(linkEls()).toHaveLength(1);
+      const [firstLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('2');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§2-1');
+
+      await expect(root()).toHaveTextContent('Kapittel 2');
+    });
+  },
+};
+
+export const KapitlerBlirLenketRiktigMedParagrafer: Story = {
+  args: {
+    children: '§ 9-1, jamfør kapittel 2',
+  },
+  play: async ({ canvasElement, step }) => {
+    const { linkEls, root } = elemsfinder(canvasElement);
+    await step('Kapitler blir lenket riktig med paragrafer', async () => {
+      await expect(linkEls()).toHaveLength(2);
+      const [firstLink, secondLink] = linkEls();
+      await expect(firstLink).toHaveTextContent('9-1');
+      await expect(firstLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§9-1');
+
+      await expect(secondLink).toHaveTextContent('2');
+      await expect(secondLink).toHaveAttribute('href', 'https://lovdata.no/lov/1997-02-28-19/§2-1');
+
+      await expect(root()).toHaveTextContent('§ 9-1, jamfør kapittel 2');
+    });
+  },
+};
diff --git a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
index a99be05289..977763c678 100644
--- a/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
+++ b/packages/v2/gui/src/shared/lovreferanse/Lovreferanse.tsx
@@ -25,7 +25,9 @@ const berikMedLovdataLenker = (lovreferanse: string) => {
 
   const seksjonsRegex = /(\d+(-\d+)?)/;
 
-  if (!lovreferanse.includes('§')) {
+  // Hvis lovreferansen ikke inneholder "§" eller "Kapittel" (case insensitive)
+  // så returnerer vi bare teksten
+  if (!/(§|Kapittel)/i.test(lovreferanse)) {
     return lovreferanse;
   }