Skip to content

Commit d8f3403

Browse files
OddsorOddsor
committed
Introduser InfoModal
For å unngå flere problemer med at infomodalene ser ulike ut så forsøker vi å lage en felleskomponent for disse modalene.
1 parent 34a4f65 commit d8f3403

24 files changed

+391
-400
lines changed

‎.storybook/main.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
33
const config: StorybookConfig = {
44
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
55
addons: ['@storybook/addon-essentials'],
6-
framework: {
7-
name: '@storybook/react-vite',
8-
options: {},
9-
},
6+
framework: '@storybook/react-vite',
107
docs: {
118
autodocs: 'tag',
129
},

‎src/AvtaleOversikt/Taushetserklæring/Taushetserklæring.less

+2-58
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,11 @@
1-
.taushetserklæring {
2-
&__modal {
3-
height: calc(100% - 5rem);
4-
position: relative;
5-
}
6-
7-
&__topIconContainer {
8-
position: absolute;
9-
justify-content: center;
10-
11-
width: 80px;
12-
right: 43%;
13-
top: 0.2rem;
14-
@media (max-height: 710px) {
15-
display: none;
16-
}
17-
}
1+
@import (reference) '../../tiltak_variabler.less';
182

3+
.taushetserklæring {
194
&__header {
205
margin-bottom: 1rem;
216
}
227

23-
&__lenker {
24-
display: flex;
25-
flex-direction: column;
26-
line-height: 1.5rem;
27-
}
28-
29-
&__lenke {
30-
display: flex;
31-
margin: 0.5rem;
32-
}
33-
34-
&__lagreKnapp {
35-
margin-top: 0.75rem;
36-
}
37-
38-
&__knapper-container {
39-
display: flex;
40-
justify-content: flex-end;
41-
flex-direction: column;
42-
43-
& > :last-child {
44-
align-self: end;
45-
}
46-
}
47-
488
@media (min-width: 768px) {
49-
&__panel_modal {
50-
width: 100%;
51-
}
52-
539
&__modal .varsel__innhold {
5410
width: 100%;
5511
}
@@ -58,17 +14,5 @@
5814
&__modal .varsel__innhold {
5915
width: 100%;
6016
}
61-
&__topIconContainer {
62-
top: 1rem;
63-
right: 43%;
64-
}
65-
&__modal {
66-
width: 100%;
67-
padding: 2.5rem;
68-
}
69-
&__panel_modal {
70-
width: 100%;
71-
padding: 0;
72-
}
7317
}
7418
}

‎src/AvtaleOversikt/Taushetserklæring/Taushetserklæring.tsx

+24-40
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp';
21
import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
3-
import VarselTegnForModal from '@/komponenter/modal/VarselTegnForModal';
42
import { mentorGodkjennTaushetserklæring } from '@/services/rest-service';
53
import { UfullstendigError } from '@/types/errors';
64
import BEMHelper from '@/utils/bem';
7-
import { Modal, Heading } from '@navikt/ds-react';
5+
import { Heading, BodyShort } from '@navikt/ds-react';
86
import BekreftCheckboksPanel from '@/komponenter/BekreftCheckboksPanel/BekreftCheckboksPanel';
97
import React, { FunctionComponent, useState } from 'react';
108
import { useNavigate } from 'react-router';
119
import './Taushetserklæring.less';
12-
import TausetserklæringTekst from './TaushetserklæringTekst';
10+
import TaushetserklæringTekst from './TaushetserklæringTekst';
11+
import InfoModal from '@/komponenter/modal/InfoModal';
1312

1413
interface TaushetserklæringProps {
1514
open: boolean;
@@ -38,44 +37,29 @@ const TaushetserklæringModal: FunctionComponent<TaushetserklæringProps> = ({
3837
};
3938

4039
return (
41-
<Modal
42-
open={open}
43-
onClose={() => togglesetTaushetserklæringForMentorAvtale(avtaleId)}
40+
<InfoModal
4441
width="medium"
45-
aria-label="Min modalrute"
46-
className={cls.element('modal')}
42+
open={open}
43+
confirmText="Signér taushetserklæring"
44+
onConfirm={godkjennTaushetserklæring}
45+
onClose={() => togglesetTaushetserklæringForMentorAvtale('')}
4746
>
48-
<Modal.Header>
49-
<div className={cls.element('topIconContainer')}>
50-
<VarselTegnForModal width={'80%'} height={'80px'} />
51-
</div>
52-
</Modal.Header>
53-
<Modal.Body>
54-
<div className={cls.element('modal')}>
55-
<Heading level="2" size="medium" className={cls.element('header')}>
56-
Signer taushetserklæring
57-
</Heading>
58-
<p>Som mentor må du signere en taushetserklæring.</p>
59-
<VerticalSpacer rem={2} />
60-
<TausetserklæringTekst />
61-
<BekreftCheckboksPanel
62-
legend=""
63-
key={'Taushetserklæring-BekreftCheckboksPanel' + avtaleId}
64-
className={cls.element('bekreftelse')}
65-
checked={bekrefterGodkjennerTaushetserklæring}
66-
onChange={() => setBekrefterGodkjennerTaushetserklæring(!bekrefterGodkjennerTaushetserklæring)}
67-
>
68-
Jeg bekrefter å ha lest og forstått min taushetsplikt og har gjort meg kjent med de
69-
lovbestemmelsene som er listet opp over
70-
</BekreftCheckboksPanel>
71-
<div className={cls.element('knapper-container')}>
72-
<LagreKnapp className={'taushetserklæring__lagreKnapp'} lagre={godkjennTaushetserklæring}>
73-
Signer Taushetserklæring
74-
</LagreKnapp>
75-
</div>
76-
</div>
77-
</Modal.Body>
78-
</Modal>
47+
<Heading level="1" size="medium" className={cls.element('header')}>
48+
Signér taushetserklæring
49+
</Heading>
50+
<BodyShort size="small">Som mentor må du signere en taushetserklæring.</BodyShort>
51+
<VerticalSpacer rem={2} />
52+
<TaushetserklæringTekst />
53+
<BekreftCheckboksPanel
54+
legend=""
55+
size="small"
56+
key={'Taushetserklæring-BekreftCheckboksPanel' + avtaleId}
57+
checked={bekrefterGodkjennerTaushetserklæring}
58+
onChange={() => setBekrefterGodkjennerTaushetserklæring(!bekrefterGodkjennerTaushetserklæring)}
59+
>
60+
Jeg bekrefter at jeg har lest og forstått taushetsplikten min, og de aktuelle lovbestemmelsene
61+
</BekreftCheckboksPanel>
62+
</InfoModal>
7963
);
8064
};
8165
export default TaushetserklæringModal;

‎src/AvtaleOversikt/Taushetserklæring/TaushetserklæringTekst.tsx

+37-68
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,49 @@
1-
import React from 'react';
21
import EksternLenke from '@/komponenter/navigation/EksternLenke';
3-
import BEMHelper from '@/utils/bem';
4-
import { Heading } from '@navikt/ds-react';
2+
import { BodyLong, Heading, List } from '@navikt/ds-react';
53

64
const TausetserklæringTekst = () => {
7-
const cls = BEMHelper('taushetserklæring');
85
return (
9-
<div style={{ padding: '0.5rem' }}>
10-
<Heading level="2" size="medium">
6+
<>
7+
<Heading level="2" size="xsmall" spacing>
118
Taushetsplikt for avtale
129
</Heading>
13-
<p>
14-
Forvaltningsloven, arbeids- og velferdsforvaltningsloven og lov om sosiale tjenester i arbeids- og
15-
velferdsforvaltningen inneholder strenge regler om taushetsplikt. Det skal bevares taushet om alle
16-
opplysninger en i medfør av arbeid for NAV får om noens personlige forhold. Taushetsplikten gjelder også
17-
opplysninger som fødested, fødselsdato, personnummer, statsborgerforhold, sivilstand, yrke, bosted og
18-
arbeidssted. I tillegg vil taushetsplikten kunne omfatte opplysninger om drifts- eller
19-
forretningsforhold som det vil være av konkurransemessig betydning å hemmeligholde av hensyn til den
20-
opplysningen gjelder.
21-
</p>
22-
<p>
23-
Taushetsplikten innebærer både at man skal unnlate å avsløre opplysninger for andre og aktivt hindre at
24-
uvedkommende får tilgang eller kjennskap til taushetsbelagte opplysninger. Taushetsplikten gjelder også
25-
overfor andre som utfører arbeid for NAV med mindre det foreligger tjenstlige behov.
26-
</p>
27-
<p>
28-
Taushetsplikten gjelder både i arbeidet og i fritiden. Taushetsplikten består også etter at tjeneste
29-
eller arbeid er utført. Opplysninger som er underlagt taushetsplikt, kan heller ikke utnyttes i egen
30-
virksomhet eller i tjeneste eller arbeid for andre.
31-
</p>
32-
<p>
33-
Reglene om taushetsplikt gjelder alle som utfører arbeid for NAV. Alle plikter derfor å sette seg inn i
34-
reglene om taushetsplikt.
35-
</p>
36-
<p>
37-
Alle som utfører arbeid for NAV, skal videre hindre at opplysninger om sikkerhetsrutiner og
38-
sikkerhetsinstrukser som regulerer NAVs sikkerhet gjøres kjent for uvedkommende.
39-
</p>
40-
<p>
41-
Brudd på taushetsplikten kan medføre konsekvenser for det relevante kontraktuelle forhold og
42-
straffeansvar etter straffeloven §§ 209 og 210.
43-
</p>
44-
<div style={{ padding: '1rem', lineHeight: '0.5rem', fontSize: '0.9rem' }}>
45-
<Heading level="2" size="medium">
46-
Hva sier regelverket?
47-
</Heading>
48-
<div className={cls.element('lenker')}>
49-
<EksternLenke
50-
className={cls.element('lenke')}
51-
href={'https://lovdata.no/dokument/NL/lov/2006-06-16-20/KAPITTEL_2#%C2%A77'}
52-
>
53-
ARBEIDS- OG VELFERDSFORVALTNINGSLOVEN § 7
54-
</EksternLenke>
10+
<BodyLong size="small" spacing>
11+
Alle som utfører arbeid for NAV er bundet av NAV sin taushetsplikt, og må sette seg inn i disse reglene.
12+
</BodyLong>
5513

56-
<EksternLenke
57-
className={cls.element('lenke')}
58-
href={'https://lovdata.no/dokument/NL/lov/1967-02-10/KAPITTEL_3#%C2%A713e'}
59-
>
60-
Lenke til FORVALTNINGSLOVEN § 13-13E OG 13G
61-
</EksternLenke>
14+
<BodyLong size="small" spacing>
15+
Taushetsplikten gjelder alle opplysninger du får om noens personlige forhold gjennom jobben du gjør for
16+
NAV. Den omfatter også opplysninger om fødested, fødselsdato, personnummer, statsborgerforhold,
17+
sivilstand, yrke, bosted og arbeidssted. I tillegg vil taushetsplikten kunne omfatte opplysninger om
18+
drifts- eller forretningsforhold som det vil være av konkurransemessig betydning å hemmeligholde av
19+
hensyn til den opplysningen gjelder.
20+
</BodyLong>
6221

63-
<EksternLenke
64-
className={cls.element('lenke')}
65-
href={'https://lovdata.no/dokument/NL/lov/2005-05-20-28/KAPITTEL_2-6#%C2%A7209'}
66-
>
67-
STRAFFELOVEN §§ 209 OG 210
68-
</EksternLenke>
69-
<EksternLenke
70-
className={cls.element('lenke')}
71-
href={'https://lovdata.no/dokument/NL/lov/2009-12-18-131/KAPITTEL_5#%C2%A744'}
72-
>
73-
LOV OM SOSIALE TJENESTER I ARBEIDS OG VELFERDSFORVALTNINGEN § 44
22+
<BodyLong size="small" spacing>
23+
Taushetsplikten betyr at du ikke skal dele opplysningene med andre, og at du må passe på at ingen
24+
uvedkommende får tilgang til opplysningene. Dette gjelder også overfor andre som utfører arbeid for NAV,
25+
som ikke trenger informasjonen for å utføre arbeidet sitt.
26+
</BodyLong>
27+
28+
<BodyLong size="small" spacing>
29+
Taushetsplikten gjelder både i arbeidet og i fritiden, og etter at oppdraget ditt opphører.
30+
</BodyLong>
31+
32+
<BodyLong size="small" spacing>
33+
Brudd på taushetsplikten kan medføre straffeansvar og/eller reaksjoner fra din arbeidsgiver.
34+
</BodyLong>
35+
36+
<List as="ul" title="Følgende lovbestemmelser regulerer taushetsplikten for NAV:" size="small">
37+
<List.Item>
38+
<EksternLenke href="https://lovdata.no/lov/1967-02-10/§13">
39+
Forvaltningsloven §§ 13– 13e og 13g
7440
</EksternLenke>
75-
</div>
76-
</div>
77-
</div>
41+
</List.Item>
42+
<List.Item>
43+
<EksternLenke href="https://lovdata.no/lov/2006-06-16-20/§7">NAV-loven § 7</EksternLenke>
44+
</List.Item>
45+
</List>
46+
</>
7847
);
7948
};
8049
export default TausetserklæringTekst;

‎src/komponenter/alleredeOpprettetTiltak/GodkjennAvtaleMedAlleredeOpprettetTiltak.tsx

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import React from 'react';
2-
3-
import AlleredeOpprettetAvtaleModal from '@/komponenter/alleredeOpprettetTiltak/modal/AlleredeOpprettetAvtaleModal';
4-
import GodkjenningsInnhold from '@/komponenter/alleredeOpprettetTiltak/innholdsvisning/GodkjenningsInnhold';
5-
import BEMHelper from '@/utils/bem';
6-
import LagreOgAvbrytKnapp from '@/komponenter/lagreOgAvbrytKnapp/LagreOgAvbrytKnapp';
71
import { AlleredeRegistrertAvtale } from '@/types/avtale';
2+
import InfoModal from '@/komponenter/modal/InfoModal';
3+
import { Alert, Heading } from '@navikt/ds-react';
4+
import AlleredeOpprettetAvtale from './innholdsvisning/AlleredeOpprettetAvtale';
85

96
interface Props {
107
alleredeRegistrertAvtale: AlleredeRegistrertAvtale[] | [];
@@ -16,16 +13,17 @@ interface Props {
1613
const GodkjennMedAlleredeOpprettetTiltak = (props: Props) => {
1714
const { alleredeRegistrertAvtale, isApen, onLagre, onLukk } = props;
1815

19-
const cls = BEMHelper('godkjenn-alleredeOpprettet');
20-
2116
return (
22-
<AlleredeOpprettetAvtaleModal isApen={isApen} onLukk={onLukk}>
23-
<GodkjenningsInnhold alleredeRegistrertAvtale={alleredeRegistrertAvtale}>
24-
<div className={cls.element('knapp-container')}>
25-
<LagreOgAvbrytKnapp lagreFunksjon={onLagre} avbryt={onLukk} lagretekst="Godkjenn avtale" />
26-
</div>
27-
</GodkjenningsInnhold>
28-
</AlleredeOpprettetAvtaleModal>
17+
<InfoModal width="medium" open={isApen} confirmText="Godkjenn avtale" onConfirm={onLagre} onClose={onLukk}>
18+
<Heading size="medium" spacing id="Allerede registrerte tiltak for deltaker">
19+
Godkjenning av avtale
20+
</Heading>
21+
<Alert variant="info" size="small">
22+
Du er i ferd med å godkjenne en avtale som har overlappende tidsrom, og/eller har påbegynte avtale(r) på
23+
deltaker sitt fødselsnummer.
24+
</Alert>
25+
<AlleredeOpprettetAvtale alleredeRegistrertAvtale={alleredeRegistrertAvtale} />
26+
</InfoModal>
2927
);
3028
};
3129
export default GodkjennMedAlleredeOpprettetTiltak;

‎src/komponenter/alleredeOpprettetTiltak/OpprettAvtaleMedAlleredeOpprettetTiltak.tsx

+7-14
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import React from 'react';
22
import { Heading } from '@navikt/ds-react';
33

44
import AlleredeOpprettetAvtale from '@/komponenter/alleredeOpprettetTiltak/innholdsvisning/AlleredeOpprettetAvtale';
5-
import AlleredeOpprettetAvtaleModal from '@/komponenter/alleredeOpprettetTiltak/modal/AlleredeOpprettetAvtaleModal';
6-
import BEMHelper from '@/utils/bem';
75
import { AlleredeRegistrertAvtale } from '@/types/avtale';
6+
import InfoModal from '@/komponenter/modal/InfoModal';
87

98
interface Props {
109
alleredeRegistrertAvtale: AlleredeRegistrertAvtale[] | [];
@@ -15,19 +14,13 @@ interface Props {
1514
const OpprettAvtaleMedAlleredeOpprettetTiltak: React.FC<Props> = (props: Props) => {
1615
const { alleredeRegistrertAvtale, isApen, onLukk } = props;
1716

18-
const cls = BEMHelper('alleredeOpprettetAvtaleModal');
19-
2017
return (
21-
<AlleredeOpprettetAvtaleModal isApen={isApen} onLukk={onLukk}>
22-
<div className={cls.element('body')}>
23-
<div className={cls.element('tittel')}>
24-
<Heading size="medium" id="Allerede registrerte tiltak for deltaker">
25-
Allerede registrerte tiltak for deltaker
26-
</Heading>
27-
</div>
28-
<AlleredeOpprettetAvtale alleredeRegistrertAvtale={alleredeRegistrertAvtale} />
29-
</div>
30-
</AlleredeOpprettetAvtaleModal>
18+
<InfoModal width="medium" onClose={onLukk} open={isApen}>
19+
<Heading size="medium" id="Allerede registrerte tiltak for deltaker">
20+
Allerede registrerte tiltak for deltaker
21+
</Heading>
22+
<AlleredeOpprettetAvtale alleredeRegistrertAvtale={alleredeRegistrertAvtale} />
23+
</InfoModal>
3124
);
3225
};
3326
export default OpprettAvtaleMedAlleredeOpprettetTiltak;

0 commit comments

Comments
 (0)