Skip to content

Commit fb07a31

Browse files
mrbjoernmrbjoern
committedMar 23, 2023
💄 Justerer en del styling for dokumentoversikt, søknad og NyttigÅVite for bedre brukeropplevelse, legger til filter for å vise meldekort i dokumentoversikt
1 parent 7afef40 commit fb07a31

File tree

7 files changed

+114
-125
lines changed

7 files changed

+114
-125
lines changed
 

‎components/DocumentationHeading/DocumentationHeading.module.css

-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
11
.heading {
2-
background-color: var(--a-bg-subtle);
3-
margin-inline: calc(var(--a-spacing-4) * -1);
4-
padding-inline: var(--a-spacing-4);
52
padding-block: var(--a-spacing-2);
63
}
7-
8-
@media screen and (min-width: 480px) {
9-
.heading {
10-
margin-inline: calc(var(--a-spacing-6) * -1);
11-
padding-inline: var(--a-spacing-6);
12-
}
13-
}
14-
15-
.orange {
16-
background-color: var(--a-surface-warning-subtle-hover);
17-
}

‎components/DocumentationHeading/DocumentationHeading.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import { Label } from '@navikt/ds-react';
22
import * as styles from './DocumentationHeading.module.css';
33

4-
export const DocumentationHeading = ({
5-
heading,
6-
orangeBackground,
7-
}: {
8-
heading: string;
9-
orangeBackground?: boolean;
10-
}) => {
4+
export const DocumentationHeading = ({ heading }: { heading: string }) => {
115
return (
12-
<div className={`${styles.heading} ${orangeBackground && styles.orange}`}>
6+
<div className={`${styles.heading}`}>
137
<Label size="small" as="p">
148
{heading}
159
</Label>

‎components/DokumentoversiktNy/Dokumentoversikt.module.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
}
44

55
.listItem {
6-
margin-block: var(--a-spacing-3);
6+
margin-block: var(--a-spacing-2);
77
background: var(--a-bg-default);
88
padding: var(--a-spacing-4);
9-
border-radius: 12px;
9+
border-radius: 8px;
1010
}
1111

1212
.content {

‎components/DokumentoversiktNy/Dokumentoversikt.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { BodyShort, Detail, Link, Pagination, ReadMore, Select } from '@navikt/ds-react';
1+
import { BodyShort, Checkbox, Detail, Link, Pagination, ReadMore, Select } from '@navikt/ds-react';
22
import { format } from 'date-fns';
33
import { nb } from 'date-fns/locale';
44
import { Dokument } from 'lib/types/types';
55
import styles from './Dokumentoversikt.module.css';
66
import { useEffect, useMemo, useState } from 'react';
7-
import { logAmplitudeEvent, logDokumentoversiktEvent } from 'lib/utils/amplitude';
7+
import { logDokumentoversiktEvent } from 'lib/utils/amplitude';
88
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
99

1010
const getAvsender = (type: string) => {
@@ -29,14 +29,15 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
2929
const [sortType, setSortType] = useState('datoAsc');
3030
const [pageNumber, setPageNumber] = useState(1);
3131
const [searchFilter, setSearchFilter] = useState('');
32+
const [visMeldekort, setVisMeldekort] = useState(true);
3233

3334
const { formatMessage } = useFeatureToggleIntl();
3435

3536
const filtrerteDokumenter = useMemo(() => {
3637
return sorterteDokumenter.filter((dokument) => {
3738
if (searchFilter) {
3839
return (
39-
dokument.tittel.toLowerCase().includes(searchFilter.toLowerCase()) ||
40+
!dokument.tittel.toLowerCase().includes(searchFilter.toLowerCase()) ||
4041
getAvsender(dokument.type).toLowerCase().includes(searchFilter.toLowerCase())
4142
);
4243
}
@@ -62,6 +63,14 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
6263
}
6364
}, [filtrerteDokumenter, pageNumber]);
6465

66+
useEffect(() => {
67+
if (visMeldekort) {
68+
setSearchFilter('Meldekort for uke');
69+
} else {
70+
setSearchFilter('');
71+
}
72+
}, [visMeldekort]);
73+
6574
const onSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
6675
const value = e.target.value;
6776
logDokumentoversiktEvent(antallSider, `sorter etter ${value}`);
@@ -83,10 +92,6 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
8392

8493
return (
8594
<div className={styles.container}>
86-
<ReadMore header={formatMessage('dokumentoversikt.manglendeDokument.header')}>
87-
<BodyShort>{formatMessage('dokumentoversikt.manglendeDokument.tekst')}</BodyShort>
88-
{formatMessage('dokumentoversikt.manglendeDokument.bulletsTekst')}
89-
</ReadMore>
9095
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
9196
<Select label="Sorter etter" onChange={onSortChange}>
9297
<option value="datoAsc">Nyeste først</option>
@@ -98,6 +103,13 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
98103
onClear={() => setSearchFilter('')}
99104
hideLabel={false}
100105
/>*/}
106+
<Checkbox
107+
value={visMeldekort}
108+
checked={!visMeldekort}
109+
onChange={() => setVisMeldekort(!visMeldekort)}
110+
>
111+
Vis meldekort
112+
</Checkbox>
101113
</div>
102114
<ul style={{ listStyle: 'none', margin: '0', padding: '0' }}>
103115
{sortedPaginatedDocuments.map((document) => {

‎components/NyttigÅVite/NyttigÅVite.tsx

+80-87
Original file line numberDiff line numberDiff line change
@@ -18,113 +18,106 @@ export const NyttigÅVite = () => {
1818
<Heading level="3" size="small" spacing>
1919
<FormattedMessage id="hvaSkjerPanel.heading" />
2020
</Heading>
21+
22+
<Heading level="4" size="xsmall">
23+
<FormattedMessage id="hvaSkjerPanel.punkt1.label" />
24+
</Heading>
25+
<BodyLong spacing>
26+
<FormattedMessage id="hvaSkjerPanel.punkt1.tekst" />
27+
</BodyLong>
28+
29+
<Heading level="4" size="xsmall">
30+
<FormattedMessage id="hvaSkjerPanel.punkt2.label" />
31+
</Heading>
32+
<BodyLong spacing>
33+
<FormattedMessage
34+
id="hvaSkjerPanel.punkt2.tekst"
35+
values={{
36+
a: (chunks) => (
37+
<Link target="_blank" href="https://klage.nav.no/nb/arbeid/nav-loven-14a">
38+
{chunks}
39+
</Link>
40+
),
41+
}}
42+
/>
43+
</BodyLong>
44+
45+
<Heading level="4" size="xsmall">
46+
<FormattedMessage id="hvaSkjerPanel.punkt3.label" />
47+
</Heading>
48+
<BodyShort>
49+
<FormattedMessage id="hvaSkjerPanel.punkt3.tekst" />
50+
</BodyShort>
2151
<ul>
2252
<li>
23-
<Label as={'p'}>
24-
<FormattedMessage id="hvaSkjerPanel.punkt1.label" />
25-
</Label>
26-
<BodyLong spacing>
27-
<FormattedMessage id="hvaSkjerPanel.punkt1.tekst" />
28-
</BodyLong>
29-
</li>
30-
<li>
31-
<Label as={'p'}>
32-
<FormattedMessage id="hvaSkjerPanel.punkt2.label" />
33-
</Label>
34-
<BodyLong spacing>
53+
<BodyShort spacing>
3554
<FormattedMessage
36-
id="hvaSkjerPanel.punkt2.tekst"
55+
id="hvaSkjerPanel.punkt3.punkt1"
3756
values={{
3857
a: (chunks) => (
39-
<Link target="_blank" href="https://klage.nav.no/nb/arbeid/nav-loven-14a">
58+
<Link target="_blank" href="https://arbeidsplassen.nav.no/">
4059
{chunks}
4160
</Link>
4261
),
4362
}}
4463
/>
45-
</BodyLong>
64+
</BodyShort>
4665
</li>
4766
<li>
48-
<Label as={'p'}>
49-
<FormattedMessage id="hvaSkjerPanel.punkt3.label" />
50-
</Label>
5167
<BodyShort spacing>
52-
<FormattedMessage id="hvaSkjerPanel.punkt3.tekst" />
68+
<FormattedMessage id="hvaSkjerPanel.punkt3.punkt2" />
5369
</BodyShort>
54-
<ul>
55-
<li>
56-
<BodyShort spacing>
57-
<FormattedMessage
58-
id="hvaSkjerPanel.punkt3.punkt1"
59-
values={{
60-
a: (chunks) => (
61-
<Link target="_blank" href="https://arbeidsplassen.nav.no/">
62-
{chunks}
63-
</Link>
64-
),
65-
}}
66-
/>
67-
</BodyShort>
68-
</li>
69-
<li>
70-
<BodyShort spacing>
71-
<FormattedMessage id="hvaSkjerPanel.punkt3.punkt2" />
72-
</BodyShort>
73-
</li>
74-
75-
<li>
76-
<BodyShort spacing>
77-
<FormattedMessage id="hvaSkjerPanel.punkt3.punkt3" />
78-
</BodyShort>
79-
</li>
80-
</ul>
81-
</li>
82-
<li>
83-
<Label as={'p'}>
84-
<FormattedMessage id="hvaSkjerPanel.punkt4.label" />
85-
</Label>
86-
<BodyLong spacing>
87-
<FormattedMessage id="hvaSkjerPanel.punkt4.tekst" />
88-
</BodyLong>
8970
</li>
71+
9072
<li>
91-
<Label as={'p'}>
92-
<FormattedMessage id="hvaSkjerPanel.punkt5.label" />
93-
</Label>
94-
<BodyLong spacing>
95-
<FormattedMessage
96-
id="hvaSkjerPanel.punkt5.tekst"
97-
values={{
98-
a: (chunks) => (
99-
<Link
100-
target="_blank"
101-
href={
102-
'https://www.nav.no/soknader/nb/person/arbeid/arbeidsavklaringspenger/NAV%2011-13.05/klage-eller-anke/brev'
103-
}
104-
>
105-
{chunks}
106-
</Link>
107-
),
108-
}}
109-
/>
110-
</BodyLong>
111-
<BodyLong spacing>
112-
<FormattedMessage
113-
id="hvaSkjerPanel.punkt5.tekst1"
114-
values={{
115-
a: (chunks) => (
116-
<Link target="_blank" href={'https://www.nav.no/skattetrekk'}>
117-
{chunks}
118-
</Link>
119-
),
120-
}}
121-
/>
122-
</BodyLong>
12373
<BodyShort spacing>
124-
<FormattedMessage id="hvaSkjerPanel.punkt5.tekst2" />
74+
<FormattedMessage id="hvaSkjerPanel.punkt3.punkt3" />
12575
</BodyShort>
12676
</li>
12777
</ul>
78+
79+
<Heading level="4" size="xsmall">
80+
<FormattedMessage id="hvaSkjerPanel.punkt4.label" />
81+
</Heading>
82+
<BodyLong spacing>
83+
<FormattedMessage id="hvaSkjerPanel.punkt4.tekst" />
84+
</BodyLong>
85+
86+
<Heading level="4" size="xsmall">
87+
<FormattedMessage id="hvaSkjerPanel.punkt5.label" />
88+
</Heading>
89+
<BodyLong spacing>
90+
<FormattedMessage
91+
id="hvaSkjerPanel.punkt5.tekst"
92+
values={{
93+
a: (chunks) => (
94+
<Link
95+
target="_blank"
96+
href={
97+
'https://www.nav.no/soknader/nb/person/arbeid/arbeidsavklaringspenger/NAV%2011-13.05/klage-eller-anke/brev'
98+
}
99+
>
100+
{chunks}
101+
</Link>
102+
),
103+
}}
104+
/>
105+
</BodyLong>
106+
<BodyLong spacing>
107+
<FormattedMessage
108+
id="hvaSkjerPanel.punkt5.tekst1"
109+
values={{
110+
a: (chunks) => (
111+
<Link target="_blank" href={'https://www.nav.no/skattetrekk'}>
112+
{chunks}
113+
</Link>
114+
),
115+
}}
116+
/>
117+
</BodyLong>
118+
<BodyShort spacing>
119+
<FormattedMessage id="hvaSkjerPanel.punkt5.tekst2" />
120+
</BodyShort>
128121
</div>
129122
</>
130123
);

‎components/Soknad/Soknad.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,16 @@ export const Soknad = ({ søknad }: { søknad: Søknad }) => {
2929
så raskt du kan.
3030
</Alert>
3131
<DocumentationHeading heading="Dokumentasjon vi mangler" />
32-
<DocumentationList
33-
elements={søknad.manglendeVedlegg.map((vedlegg) => {
34-
return {
35-
tittel: formatMessage({ id: `ettersendelse.vedleggstyper.${vedlegg}.heading` }),
36-
};
32+
33+
<ul>
34+
{søknad.manglendeVedlegg.map((vedlegg) => {
35+
return (
36+
<li key={vedlegg}>
37+
{formatMessage({ id: `ettersendelse.vedleggstyper.${vedlegg}.heading` })}
38+
</li>
39+
);
3740
})}
38-
/>
41+
</ul>
3942
</>
4043
)}
4144

‎pages/ny.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { getDocuments } from './api/dokumenter';
1616
import { getSøknader } from './api/soknader/soknader';
1717

1818
const Index = ({ søknader, dokumenter }: { søknader: Søknad[]; dokumenter: Dokument[] }) => {
19-
const { formatElement } = useFeatureToggleIntl();
19+
const { formatElement, formatMessage } = useFeatureToggleIntl();
2020

2121
const sisteSøknad = useMemo(() => {
2222
return søknader[0];
@@ -73,6 +73,7 @@ const Index = ({ søknader, dokumenter }: { søknader: Søknad[]; dokumenter: Do
7373
Her finner du dine søknader, vedlegg, vedtak, brev, samtalerefater og meldinger om AAP og
7474
oppfølging.
7575
</BodyShort>
76+
<BodyShort spacing>{formatMessage('dokumentoversikt.manglendeDokument.tekst')}</BodyShort>
7677

7778
<Dokumentoversikt dokumenter={dokumenter} />
7879
</PageComponentFlexContainer>

0 commit comments

Comments
 (0)
Please sign in to comment.