Skip to content

Commit 7d4827d

Browse files
hallvardastarkhallvardastark
authored
Bytter fra Table fra ft-repoet til Aksel (#7121)
1 parent 27452b0 commit 7d4827d

File tree

3 files changed

+44
-35
lines changed

3 files changed

+44
-35
lines changed

Diff for: ‎packages/fakta-ny-inntekt/src/components/tilkommetAktivitet/TidligereVurderteAktiviteterPanel.tsx

+21-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { type JSX } from 'react';
22

3-
import { BodyShort, Label, Tag } from '@navikt/ds-react';
4-
import { EditedIcon, Table, TableColumn, TableRow } from '@navikt/ft-ui-komponenter';
3+
import { BodyShort, Table, Tag } from '@navikt/ds-react';
4+
import { EditedIcon } from '@navikt/ft-ui-komponenter';
55
import { formatCurrencyWithKr } from '@navikt/ft-utils';
66

77
import { getAktivitetNavnFraInnteksforhold } from './TilkommetAktivitetUtils';
@@ -28,17 +28,17 @@ export const TidligereVurderteAktiviteterPanel = ({
2828
const harBruttoInntekt = erDefinert(inntektsforhold.bruttoInntektPrÅr);
2929
const harInntektsmelding = erDefinert(inntektsforhold.inntektFraInntektsmeldingPrÅr);
3030
tableRows.push(
31-
<TableRow key={getInntektsforholdIdentifikator(inntektsforhold)}>
32-
<TableColumn>
31+
<Table.Row key={getInntektsforholdIdentifikator(inntektsforhold)}>
32+
<Table.DataCell>
3333
<BodyShort size="small">
3434
{getAktivitetNavnFraInnteksforhold(inntektsforhold, arbeidsgiverOpplysningerPerId)}
3535
</BodyShort>
36-
</TableColumn>
37-
<TableColumn>
36+
</Table.DataCell>
37+
<Table.DataCell>
3838
<BodyShort size="small">{inntektsforhold.skalRedusereUtbetaling ? 'Ja' : 'Nei'}</BodyShort>
39-
</TableColumn>
39+
</Table.DataCell>
4040
{(harBruttoInntekt || harInntektsmelding) && (
41-
<TableColumn>
41+
<Table.DataCell>
4242
<BodyShort size="small">
4343
{harBruttoInntekt && (
4444
<>
@@ -55,9 +55,9 @@ export const TidligereVurderteAktiviteterPanel = ({
5555
</>
5656
)}
5757
</BodyShort>
58-
</TableColumn>
58+
</Table.DataCell>
5959
)}
60-
</TableRow>,
60+
</Table.Row>,
6161
);
6262
});
6363
return tableRows;
@@ -68,16 +68,20 @@ export const TidligereVurderteAktiviteterPanel = ({
6868
);
6969

7070
const headerTexts = ['Aktivitet', 'Reduserer inntektstap', harInntektsforholdMedÅrsinntekt ? 'Årsinntekt' : ' '];
71-
const headerComponents = headerTexts.map(text => (
72-
<Label size="small" key={text}>
73-
{`${text} `}
74-
</Label>
75-
));
7671

7772
return (
7873
<div className={styles.aktivitetContainer}>
79-
<Table headerColumnContent={headerComponents} noHover classNameTable={styles.aktivitetTable}>
80-
{getInntektsforholdTableRows(vurderInntektsforholdPeriode)}
74+
<Table size="small" className={styles.aktivitetTable}>
75+
<Table.Header>
76+
<Table.Row>
77+
{headerTexts.map(text => (
78+
<Table.HeaderCell scope="col" key={text}>
79+
{text}
80+
</Table.HeaderCell>
81+
))}
82+
</Table.Row>
83+
</Table.Header>
84+
<Table.Body>{getInntektsforholdTableRows(vurderInntektsforholdPeriode)}</Table.Body>
8185
</Table>
8286
</div>
8387
);

Diff for: ‎packages/fakta-ny-inntekt/src/components/tilkommetAktivitet/TilkommetAktivitetField.tsx

+21-17
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
22
import { useFieldArray, useFormContext } from 'react-hook-form';
33

4-
import { BodyShort, Label, Tag } from '@navikt/ds-react';
4+
import { BodyShort, Table, Tag } from '@navikt/ds-react';
55

66
import { TextAreaField } from '@navikt/ft-form-hooks';
77
import { required } from '@navikt/ft-form-validators';
88
import { AssessedBy } from '@navikt/ft-plattform-komponenter';
99

10-
import { EditedIcon, PeriodLabel, Table, TableColumn, TableRow, VerticalSpacer } from '@navikt/ft-ui-komponenter';
10+
import { EditedIcon, PeriodLabel, VerticalSpacer } from '@navikt/ft-ui-komponenter';
1111
import { formatCurrencyWithKr } from '@navikt/ft-utils';
1212

1313
import { type TilkommetAktivitetFormValues } from '../../types/FordelBeregningsgrunnlagPanelValues';
@@ -70,11 +70,6 @@ export const TilkommetAktivitetField = ({
7070
harInntektsforholdMedÅrsinntekt ? 'Årsinntekt' : ' ',
7171
harInntektsforholdMedPeriode ? 'Inntektsperiode' : ' ',
7272
];
73-
const headerComponents = headerTexts.map(text => (
74-
<Label size="small" key={text}>
75-
{`${text} `}
76-
</Label>
77-
));
7873

7974
const getInntektsforholdTableRows = (inntektsforholdPeriode: VurderInntektsforholdPeriode): React.ReactElement[] => {
8075
const tableRows: React.ReactElement[] = [];
@@ -84,14 +79,14 @@ export const TilkommetAktivitetField = ({
8479
const harInntektsmelding = erDefinert(inntektsforhold.inntektFraInntektsmeldingPrÅr);
8580

8681
tableRows.push(
87-
<TableRow key={inntektsforhold.arbeidsgiverId || inntektsforhold.aktivitetStatus}>
88-
<TableColumn>
82+
<Table.Row key={inntektsforhold.arbeidsgiverId || inntektsforhold.aktivitetStatus}>
83+
<Table.DataCell>
8984
<BodyShort size="small">
9085
{getAktivitetNavnFraInnteksforhold(inntektsforhold, arbeidsgiverOpplysningerPerId)}
9186
</BodyShort>
92-
</TableColumn>
87+
</Table.DataCell>
9388
{(harBruttoInntekt || harInntektsmelding || harInntektsforholdMedPeriode) && (
94-
<TableColumn className={styles.inntektColumn}>
89+
<Table.DataCell className={styles.inntektColumn}>
9590
<BodyShort size="small">
9691
{harBruttoInntekt && !harInntektsmelding && (
9792
<>
@@ -108,25 +103,34 @@ export const TilkommetAktivitetField = ({
108103
</>
109104
)}
110105
</BodyShort>
111-
</TableColumn>
106+
</Table.DataCell>
112107
)}
113108
{inntektsforhold.periode && (
114-
<TableColumn>
109+
<Table.DataCell>
115110
<BodyShort size="small">
116111
<PeriodLabel dateStringFom={inntektsforhold.periode.fom} dateStringTom={inntektsforhold.periode.tom} />
117112
</BodyShort>
118-
</TableColumn>
113+
</Table.DataCell>
119114
)}
120-
</TableRow>,
115+
</Table.Row>,
121116
);
122117
});
123118
return tableRows;
124119
};
125120
return (
126121
<>
127122
<div className={styles.aktivitetContainer}>
128-
<Table noHover headerColumnContent={headerComponents} classNameTable={styles.aktivitetTable}>
129-
{getInntektsforholdTableRows(vurderInntektsforholdPeriode)}
123+
<Table size="small" className={styles.aktivitetTable}>
124+
<Table.Header>
125+
<Table.Row>
126+
{headerTexts.map(text => (
127+
<Table.HeaderCell scope="col" key={text}>
128+
{text}
129+
</Table.HeaderCell>
130+
))}
131+
</Table.Row>
132+
</Table.Header>
133+
<Table.Body>{getInntektsforholdTableRows(vurderInntektsforholdPeriode)}</Table.Body>
130134
</Table>
131135
</div>
132136
<VerticalSpacer sixteenPx />

Diff for: ‎packages/fakta-ny-inntekt/src/components/tilkommetAktivitet/tilkommetAktivitet.module.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
}
88

99
.aktivitetTable tr,
10-
.aktivitetTable td {
10+
.aktivitetTable td,
11+
.aktivitetTable th {
1112
/* stylelint-disable-next-line declaration-no-important */
1213
border: none !important;
1314
}

0 commit comments

Comments
 (0)