Lag lovdata lenker

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];
 

packages/fakta-medisinsk-vilkår/src/ui/components/vilkårsvurdering-av-to-omsorgspersoner/__tests__/VilkårsvurderingAvToOmsorgspersoner.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';

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>

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

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();
   });
 });

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>

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();
   });
 });

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>

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>

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/*"

packages/v2/gui/src/shared/lovreferanse/Lovreferanse.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { expect, within } from '@storybook/test';
+import { Lovreferanse } from './Lovreferanse';
+
+const meta = {
+  title: 'gui/shared/lovreferanse/Lovreferanse.tsx',
+  component: Lovreferanse,
+} satisfies Meta<typeof Lovreferanse>;
+export default meta;
+
+const elemsfinder = (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+  return {
+    canvas,
+    root: () => canvasElement,
+    linkEls: () => canvas.queryAllByRole('link'),
+  };
+};
+
+type Story = StoryObj<typeof meta>;
+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');
+    });
+  },
+};
+
+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 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 () => {
+      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 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');
+    });
+  },
+};