La tooltip til gradering etiketter under partner og barn info

src/app.less

@@ -54,6 +54,12 @@
 		hyphens: auto;
 	}
 
+	.break-all-sm-column {
+		width: 200px;
+		word-break: normal;
+		hyphens: auto;
+	}
+
 	@media (max-width: 1232px) {
 		padding: 0 1rem;
 	}
@@ -72,9 +78,25 @@
 		grid-auto-flow: column;
 	}
 
-	.ekspanderbartPanel {
-		&__innhold {
-			padding: 0 1rem;
-		}
+	.tooltip:hover {
+		border-color: @redErrorDarken40;
+		background-color: @redErrorLighten40;
+	}
+
+	.tooltip .tooltiptext {
+		visibility: hidden;
+		width: 230px;
+		margin-top: 5px;
+		background-color: @navGra60;
+		color: white;
+		text-align: center;
+		padding: 3px 0;
+		border-radius: 6px;
+		position: absolute;
+		z-index: 1;
+	}
+
+	.tooltip:hover .tooltiptext {
+		visibility: visible;
 	}
 }

src/components/paneler/innhold/personaliaV2/FamilieRelasjoner.tsx

@@ -13,7 +13,7 @@ function FamilieInfo (props: { sivilstand: PersonaliaSivilstand, partner: OrNoth
     const filtrertBarneListe = barn && barn.filter(enkeltBarn => kalkulerAlder(new Date(enkeltBarn.fodselsdato)) < MAX_ALDER_BARN);
 
     return (
-        <div {...rest}>
+        <div {...rest} className="break-all-sm-column">
             <Sivilstand sivilstand={sivilstand} />
             <Partner partner={partner} />
             <Barn barn={filtrertBarneListe} />

src/components/paneler/innhold/personaliaV2/GeneralInfo.tsx

@@ -12,7 +12,7 @@ function GeneralInfo(props: { kontonummer: string, statsborgerskap:string }) {
     const tilrettelagtKommunikasjon = useFetchSpraakTolk(fnr);
 
     return (
-        <div {...rest}>
+        <div {...rest} className="break-all-sm-column">
             <InformasjonsbolkEnkel header="Kontonummer" value={kontonummer} />
             <InformasjonsbolkEnkel header="Statsborgerskap" value={formateStringInUpperAndLowerCase(statsborgerskap)} />
             {hasData(tilrettelagtKommunikasjon) && (

src/components/paneler/innhold/personaliaV2/barn.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { finnAldersTekst } from '../../../../utils/date-utils';
+import { finnAlder } from '../../../../utils/date-utils';
 import Informasjonsbolk from '../../../felles/informasjonsbolk';
 
 import {Normaltekst, UndertekstBold} from 'nav-frontend-typografi';
 import {Gradering, PersonaliaV2Info, PersonsBarn} from '../../../../rest/datatyper/personaliav2';
 import EMDASH from "../../../../utils/emdash";
 import { formateLocalDate, formateStringInUpperAndLowerCase, isNotEmptyArray } from "../../../../utils";
-import { graderingBeskrivelse, graderingKode } from "../../../../utils/konstanter";
 import { EtikettAdvarsel } from "nav-frontend-etiketter";
+import { etikettGradering } from './etikett-gradering';
 
 function BorSammen(props: { barn: PersonsBarn }) {
 	const { dodsdato, harSammeBosted } = props.barn;
@@ -22,7 +22,7 @@ function BorSammen(props: { barn: PersonsBarn }) {
 
 function EnkeltBarn(props: { barn: PersonsBarn }) {
 	const { fornavn, fodselsdato, gradering, erEgenAnsatt, harVeilederTilgang } = props.barn;
-	const alder = finnAldersTekst(props.barn);
+	const alder = finnAlder(props.barn);
 
 	return (
 		<div className="overinformasjon underinformasjon">
@@ -35,17 +35,15 @@ function EnkeltBarn(props: { barn: PersonsBarn }) {
 				: gradering !== Gradering.UGRADERT && !harVeilederTilgang ?
 					<div>
 						<UndertekstBold>Barn</UndertekstBold>
-						<Normaltekst>{graderingBeskrivelse(gradering)}</Normaltekst>
-						<EtikettAdvarsel mini>{graderingKode(gradering)}</EtikettAdvarsel>
+						{etikettGradering(gradering)}
 					</div>
 					:
 					<div>
 						<UndertekstBold>{`Barn (${alder})`}</UndertekstBold>
 						<Normaltekst>{formateStringInUpperAndLowerCase(fornavn)}</Normaltekst>
 						<Normaltekst>{formateLocalDate(fodselsdato)}</Normaltekst>
 						<BorSammen barn={props.barn} />
-						<Normaltekst>{graderingBeskrivelse(gradering)}</Normaltekst>
-						<EtikettAdvarsel mini>{graderingKode(gradering)}</EtikettAdvarsel>
+						{gradering !== Gradering.UGRADERT && etikettGradering(gradering)}
 					</div>
 			}
 		</div>

src/components/paneler/innhold/personaliaV2/etikett-gradering.tsx

@@ -0,0 +1,15 @@
+import { graderingBeskrivelse, graderingKode } from '../../../../utils/konstanter';
+import { EtikettAdvarsel } from "nav-frontend-etiketter";
+import { Normaltekst } from "nav-frontend-typografi";
+import { Gradering } from "../../../../rest/datatyper/personaliav2";
+
+export function etikettGradering(gradering: Gradering) {
+	return (
+		<EtikettAdvarsel mini className="tooltip">
+			{graderingKode(gradering)}
+			<Normaltekst className="tooltiptext">{graderingBeskrivelse(gradering)}</Normaltekst>
+		</EtikettAdvarsel>
+	)
+}
+
+export default etikettGradering;

src/components/paneler/innhold/personaliaV2/partner.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { Normaltekst } from 'nav-frontend-typografi';
 import { Gradering, PersonaliaPartner } from '../../../../rest/datatyper/personaliav2';
-import {finnAldersTekst} from '../../../../utils/date-utils';
+import { finnAlder } from '../../../../utils/date-utils';
 import EMDASH from '../../../../utils/emdash';
-import { formateFirstCharOfEachWordInUppercase, isNullOrUndefined } from '../../../../utils';
+import {
+	formateFirstCharOfEachWordToUppercase,
+	isNullOrUndefined
+} from '../../../../utils';
 import Informasjonsbolk from '../../../felles/informasjonsbolk';
 import { OrNothing } from '../../../../utils/felles-typer';
-import {graderingBeskrivelse, graderingKode} from "../../../../utils/konstanter";
 import {EtikettAdvarsel} from "nav-frontend-etiketter";
+import { etikettGradering } from "./etikett-gradering";
 
 function Partner(props: { partner: OrNothing<PersonaliaPartner> }) {
 	const { partner, ...rest } = props;
@@ -20,7 +23,7 @@ function Partner(props: { partner: OrNothing<PersonaliaPartner> }) {
 	}
 	const { harSammeBosted, forkortetNavn, gradering, erEgenAnsatt, harVeilederTilgang } = partner!;
 	const borSammen = harSammeBosted ? 'Bor med bruker' : 'Bor ikke med bruker';
-	const alder = finnAldersTekst(partner!);
+	const alder = finnAlder(partner!);
 
 	return (
 		<Informasjonsbolk header="Partner" className="overinformasjon" {...rest}>
@@ -30,16 +33,12 @@ function Partner(props: { partner: OrNothing<PersonaliaPartner> }) {
 					<EtikettAdvarsel mini>Egen ansatt</EtikettAdvarsel>
 				</div>
 				: gradering !== Gradering.UGRADERT && !harVeilederTilgang ?
-					<div>
-						<Normaltekst>{graderingBeskrivelse(gradering)}</Normaltekst>
-						<EtikettAdvarsel mini>{graderingKode(gradering)}</EtikettAdvarsel>
-					</div>
+					<div>{etikettGradering(gradering)}</div>
 					:
 					<div>
-						<Normaltekst>{`${formateFirstCharOfEachWordInUppercase(forkortetNavn)} (${alder})`}</Normaltekst>
+						<Normaltekst>{`${formateFirstCharOfEachWordToUppercase(forkortetNavn)} (${alder})`}</Normaltekst>
 						<Normaltekst>{borSammen}</Normaltekst>
-						<Normaltekst>{graderingBeskrivelse(gradering)}</Normaltekst>
-						<EtikettAdvarsel mini>{graderingKode(gradering)}</EtikettAdvarsel>
+						{gradering !== Gradering.UGRADERT && etikettGradering(gradering)}
 					</div>
 			}
 		</Informasjonsbolk>

src/components/paneler/innhold/personaliaV2/vergemaal.tsx

@@ -9,7 +9,7 @@ import {
     VergemaalEllerFremtidsfullmakt,
     VergemaalEllerFullmaktOmfangType
 } from '../../../../rest/datatyper/vergeOgFullmakt';
-import { formaterDato, isNotEmptyArray } from "../../../../utils";
+import {formateLocalDate, isNotEmptyArray} from "../../../../utils";
 import EMDASH from "../../../../utils/emdash";
 
 function vergetypeBeskrivelse(vergeType: Vergetype) {
@@ -80,15 +80,17 @@ function VergeEllerFullmakt(props: {vergeEllerFullmektig: VergeEllerFullmektig})
 
 function Verge(props: {vergemaal: VergemaalEllerFremtidsfullmakt}) {
     const {type, embete, vergeEllerFullmektig, folkeregistermetadata} = props.vergemaal;
-    const {gyldighetstidspunkt} = folkeregistermetadata;
+    const {ajourholdstidspunkt, gyldighetstidspunkt} = folkeregistermetadata;
 
     return (
         <div className="underinformasjon">
             <Normaltekst className="overinformasjon">{vergetypeBeskrivelse(type)}</Normaltekst>
             <VergeEllerFullmakt vergeEllerFullmektig={vergeEllerFullmektig}/>
             <UndertekstBold className="overinformasjon">Fylkesmannsembete</UndertekstBold>
             <Normaltekst>{embete}</Normaltekst>
-            <Normaltekst>{formaterDato(gyldighetstidspunkt)}</Normaltekst>
+            <Normaltekst>
+                {`${ajourholdstidspunkt && formateLocalDate(ajourholdstidspunkt)} - ${gyldighetstidspunkt? formateLocalDate(gyldighetstidspunkt):''}`}
+            </Normaltekst>
         </div>
     );
 }

src/mock/api/veilarbperson.ts

@@ -396,7 +396,7 @@ const personaliav2: PersonaliaV2Info = {
 			harSammeBosted: true,
 			gradering: Gradering.FORTROLIG,
 			erEgenAnsatt: false,
-			harVeilederTilgang: false,
+			harVeilederTilgang: true,
 			kjonn: 'M'
 		},
 		{
@@ -472,7 +472,7 @@ const personaliav2: PersonaliaV2Info = {
 		dodsdato: null,
 		harSammeBosted: true,
 		erEgenAnsatt: false,
-		harVeilederTilgang: false,
+		harVeilederTilgang: true,
 		gradering: Gradering.STRENGT_FORTROLIG,
 		kjonn: 'M'
 	},

src/utils/date-utils.ts

@@ -1,4 +1,4 @@
-import {StringOrNothing} from "./felles-typer";
+import { StringOrNothing } from "./felles-typer";
 
 export function kalkulerAlder(fodselsdato: Date): number {
 	const diff = Date.now() - fodselsdato.getTime();
@@ -10,5 +10,16 @@ export function finnAldersTekst(personalia: { dodsdato: StringOrNothing, fodsels
 		return '(DØD)';
 	}
 	const alder = kalkulerAlder(new Date(personalia.fodselsdato));
+
+	return `${alder} år`;
+}
+
+export function finnAlder(personalia: { dodsdato: StringOrNothing, fodselsdato: string }): string {
+
+	if (personalia.dodsdato) {
+		return '(DØD)';
+	}
+	const alder = kalkulerAlder(new Date(personalia.fodselsdato));
+
 	return `${alder}`;
 }

src/utils/index.ts

@@ -150,6 +150,6 @@ export function formateStringInUpperAndLowerCase(str: OrNothing<string>) {
 	return str ? str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() : EMDASH;
 }
 
-export function formateFirstCharOfEachWordInUppercase(str: OrNothing<string>) {
+export function formateFirstCharOfEachWordToUppercase(str: OrNothing<string>) {
 	return str ?  str.replace(/^(.)|\s+(.)/g, c => c.toUpperCase()) : EMDASH;
 }