Kontakt info tweaks

src/GeneriskeElementer/LenkeMedLogging.tsx

@@ -3,10 +3,9 @@ import {BodyShort, Link as DsLink, LinkProps } from '@navikt/ds-react';
 import {loggNavigasjon} from '../utils/funksjonerForAmplitudeLogging';
 import { useLocation, Link as ReactLink } from 'react-router-dom';
 
-interface Props {
+interface Props extends LinkProps {
     href: string;
     loggLenketekst: string;
-    onClick?: LinkProps["onClick"];
     children: ReactNode;
 }
 

src/Pages/OmVirksomheten/Kontaktinfo.css

@@ -1,4 +1,14 @@
+.kontaktinfo{
+    background: var(--a-gray-100);
+    padding: 16px;
+    border-radius: 8px;
+    gap: 8px;
+    display: grid;
+    flex-grow: 1;
+}
+
 .kontaktinfo li {
+    padding: 8px 8px 0 0;
     margin: 0;
     list-style: none;
 }

src/Pages/OmVirksomheten/Kontaktinfo.tsx

@@ -7,7 +7,6 @@ import './Kontaktinfo.css';
 import { OrganisasjonsDetaljerContext } from '../OrganisasjonDetaljerProvider';
 import NyFaneIkon from './NyFaneIkon';
 import { erDriftsforstyrrelse } from '../../utils/util';
-import Tekstboks from './Tekstboks';
 import { Hovedenhet } from '../../api/enhetsregisteretApi';
 
 const KontaktinfoDetaljer = z.object({
@@ -118,11 +117,11 @@ export const KontaktinfoUnderenhet = () => {
     if (kontaktinfo === null) return null;
     if (kontaktinfo.eposter.length === 0 && kontaktinfo.telefonnumre.length === 0) return null;
     return (
-        <Tekstboks className="kontaktinfo">
+        <div className="kontaktinfo">
             <TittelMedHjelpetekst>Varslingsadresser for underenhet</TittelMedHjelpetekst>
             <KontaktinfoListe kontaktinfo={kontaktinfo} />
             <AltinnLenke />
-        </Tekstboks>
+        </div>
     );
 };
 
@@ -136,7 +135,7 @@ export const KontaktinfoOverordnetEnhet = ({
     const orgType =
         overordnetEnhet.organisasjonsform?.kode === 'ORGL' ? 'organisasjonsledd' : 'hovedenhet';
     return (
-        <Tekstboks className="kontaktinfo">
+        <div className="kontaktinfo">
             <TittelMedHjelpetekst>Varslingsadresser for {orgType}</TittelMedHjelpetekst>
             {kontaktinfo.eposter.length === 0 && kontaktinfo.telefonnumre.length === 0 ? (
                 <Alert variant="warning">
@@ -148,6 +147,6 @@ export const KontaktinfoOverordnetEnhet = ({
                 <KontaktinfoListe kontaktinfo={kontaktinfo} />
             )}
             <AltinnLenke />
-        </Tekstboks>
+        </div>
     );
 };

src/Pages/OmVirksomheten/OverordnetEnhet.tsx

@@ -5,9 +5,10 @@ import { enhetsregisteretOverordnetenhetLink } from '../../lenker';
 import { Office2 as JuridiskEnhetIkon } from '@navikt/ds-icons';
 import './OverordnetEnhet.css';
 import { LenkeMedLogging } from '../../GeneriskeElementer/LenkeMedLogging';
-import { BodyShort, Heading, Label } from '@navikt/ds-react';
+import { BodyShort, Heading, HStack, Label } from '@navikt/ds-react';
 import { KontaktinfoOverordnetEnhet } from './Kontaktinfo';
 import { Hovedenhet } from '../../api/enhetsregisteretApi';
+import { formatOrgNr } from '../../utils/util';
 
 interface Props {
     overordnetenhet: Hovedenhet;
@@ -30,7 +31,7 @@ const OverordnetEnhet = ({ overordnetenhet }: Props) => {
             <div className="overordnet-enhet-info__container">
                 <Tekstboks className="overordnetenhet-orgnr">
                     <Label>Organisasjonsnummer</Label>
-                    <BodyShort> {overordnetenhet.organisasjonsnummer}</BodyShort>
+                    <BodyShort> {formatOrgNr(overordnetenhet.organisasjonsnummer)}</BodyShort>
                 </Tekstboks>
 
                 <Tekstboks className="overordnetenhet-orgform">
@@ -87,7 +88,9 @@ const OverordnetEnhet = ({ overordnetenhet }: Props) => {
                     <NyFaneIkon />
                 </LenkeMedLogging>
             </Tekstboks>
-            <KontaktinfoOverordnetEnhet overordnetEnhet={overordnetenhet} />
+            <HStack gap="6">
+                <KontaktinfoOverordnetEnhet overordnetEnhet={overordnetenhet} />
+            </HStack>
         </div>
     );
 };

src/Pages/OmVirksomheten/Underenhet.tsx

@@ -6,8 +6,9 @@ import { enhetsregisteretUnderenhetLink } from '../../lenker';
 import './Underenhet.css';
 import { LenkeMedLogging } from '../../GeneriskeElementer/LenkeMedLogging';
 import { Underenhet as UnderenhetType } from '../../api/enhetsregisteretApi';
-import { BodyShort, Heading, Label } from '@navikt/ds-react';
+import { BodyShort, Heading, HStack, Label } from '@navikt/ds-react';
 import { KontaktinfoUnderenhet } from './Kontaktinfo';
+import { formatOrgNr } from '../../utils/util';
 
 interface Props {
     underenhet: UnderenhetType;
@@ -27,7 +28,7 @@ const Underenhet = ({ underenhet }: Props) => {
 
             <Tekstboks>
                 <Label>Organisasjonsnummer</Label>
-                <BodyShort>{underenhet.organisasjonsnummer}</BodyShort>
+                <BodyShort>{formatOrgNr(underenhet.organisasjonsnummer)}</BodyShort>
             </Tekstboks>
 
             <Tekstboks className="underenhet-adresse">
@@ -65,7 +66,9 @@ const Underenhet = ({ underenhet }: Props) => {
                     <NyFaneIkon />
                 </LenkeMedLogging>
             </Tekstboks>
-            <KontaktinfoUnderenhet />
+            <HStack gap="6">
+                <KontaktinfoUnderenhet />
+            </HStack>
         </>
     );
 };

src/utils/util.ts

@@ -28,3 +28,6 @@ export const capitalize = (s: string): string => {
     const [forbokstav, ...resten] = s;
     return [forbokstav.toUpperCase(), ...resten].join('');
 };
+
+export const formatOrgNr = (orgNr: string): string =>
+    orgNr.replace(/(\d{3})(\d{3})(\d{3})/, '$1 $2 $3');