Skip to content

Commit

Permalink
Fjern bruk av tabell-komponent frå ui-pakka (#3534)
Browse files Browse the repository at this point in the history 
* Fjern bruk av tabell-komponent frå ui-pakka

* Rydding i FlexRow/col og VerticalSpacer
  • Loading branch information
@tor-nav
tor-nav authored Feb 17, 2025
1 parent 71da08d commit 14aedc0
Show file tree
Hide file tree
Showing 66 changed files with 1,657 additions and 1,904 deletions.
233 changes: 113 additions & 120 deletions packages/fakta-beregning/src/BeregningFaktaIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react';
import { FormattedMessage, RawIntlProvider } from 'react-intl';

import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
import { Alert, Heading, List, ReadMore, Tabs } from '@navikt/ds-react';
import { Alert, Heading, List, ReadMore, Tabs, VStack } from '@navikt/ds-react';
import dayjs from 'dayjs';

import { FaktaOmBeregningTilfelle } from '@navikt/ft-kodeverk';
Expand All @@ -14,7 +14,6 @@ import {
RefusjonskravSomKommerForSentListe,
StandardFaktaPanelProps,
} from '@navikt/ft-types';
import { VerticalSpacer } from '@navikt/ft-ui-komponenter';
import { createIntl, DDMMYYYY_DATE_FORMAT } from '@navikt/ft-utils';

import { createVisningsnavnFakta } from './components/ArbeidsforholdHelper';
Expand Down Expand Up @@ -253,64 +252,64 @@ export const lagHelpTextsForFakta = (
keys.push(FaktaOmBeregningTilfelle.FASTSETT_BG_KUN_YTELSE);
alerts.push(
<Alert size="small" variant="warning">
<FormattedMessage
id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelseHelpText"
values={{
h3: (...chunks) => (
<Heading size="xsmall" level="3">
{chunks}
</Heading>
),
}}
/>
<VerticalSpacer fourPx />
<ReadMore
size="small"
header={
<FormattedMessage id="BeregningInfoPanel.InntektInputFields.HvordanGarJegFremForFastsetteManedsinntekt" />
}
>
<List size="small">
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt1" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt2" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt3" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt4" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt5" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt6" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt7" />
</List.Item>
</List>
</ReadMore>
<VerticalSpacer fourPx />
<ReadMore
size="small"
header={<FormattedMessage id="BeregningInfoPanel.InntektInputFields.HvaBetyrInntektskategori" />}
>
<List size="small">
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori1" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori2" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori3" />
</List.Item>
</List>
</ReadMore>
<VStack gap="1">
<FormattedMessage
id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelseHelpText"
values={{
h3: (...chunks) => (
<Heading size="xsmall" level="3">
{chunks}
</Heading>
),
}}
/>
<ReadMore
size="small"
header={
<FormattedMessage id="BeregningInfoPanel.InntektInputFields.HvordanGarJegFremForFastsetteManedsinntekt" />
}
>
<List size="small">
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt1" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt2" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt3" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt4" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt5" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt6" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvordanGarJegFremForFastsetteManedsinntekt7" />
</List.Item>
</List>
</ReadMore>
<ReadMore
size="small"
header={<FormattedMessage id="BeregningInfoPanel.InntektInputFields.HvaBetyrInntektskategori" />}
>
<List size="small">
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori1" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori2" />
</List.Item>
<List.Item>
<FormattedMessage id="BeregningInfoPanel.VurderFaktaBeregningField.FastsettBGKunYtelse.HvaBetyrInntektskategori3" />
</List.Item>
</List>
</ReadMore>
</VStack>
</Alert>,
);
}
Expand Down Expand Up @@ -382,16 +381,14 @@ export const lagHelpTextsForFakta = (
</Alert>,
);
}

if (alerts.length > 0) {
return (
<>
<VStack gap="4">
{alerts.map((alert, index) => (
<React.Fragment key={keys[index]}>
{index > 0 && <VerticalSpacer sixteenPx />}
{alert}
</React.Fragment>
<React.Fragment key={keys[index]}>{alert}</React.Fragment>
))}
</>
</VStack>
);
}

Expand Down Expand Up @@ -442,60 +439,56 @@ export const BeregningFaktaIndex = ({
return (
<RawIntlProvider value={intl}>
<div className={styles.main}>
<Heading size="small" level="2">
<FormattedMessage id="BeregningInfoPanel.AksjonspunktHelpText.SaksopplysningerBeregning" />
</Heading>
{(hasAksjonspunkt(VURDER_FAKTA_FOR_ATFL_SN, aktiveAvklaringsBehov) ||
hasAksjonspunkt(OVERSTYRING_AV_BEREGNINGSGRUNNLAG, aktiveAvklaringsBehov)) &&
!isAksjonspunktClosed(aktiveAvklaringsBehov) ? (
<>
<VerticalSpacer sixteenPx />
{lagHelpTextsForFakta(aktivtBeregningsgrunnlag, arbeidsgiverOpplysningerPerId)}
<VerticalSpacer twentyPx />
</>
) : (
<VerticalSpacer eightPx />
)}
{skalBrukeTabs && (
<div className={styles.tabsContainer}>
<Tabs
value={aktivtBeregningsgrunnlagIndeks.toString()}
onChange={(clickedIndex: string) => setAktivtBeregningsgrunnlagIndeks(Number(clickedIndex))}
>
<Tabs.List>
{beregningsgrunnlag.map((currentBeregningsgrunnlag, currentBeregningsgrunnlagIndex) => (
<Tabs.Tab
key={currentBeregningsgrunnlag.skjaeringstidspunktBeregning}
value={currentBeregningsgrunnlagIndex.toString()}
label={lagLabel(currentBeregningsgrunnlag, vilkårsperioder)}
className={skalVurderes(currentBeregningsgrunnlag, vilkårsperioder) ? 'harAksjonspunkt' : ''}
icon={
skalVurderes(currentBeregningsgrunnlag, vilkårsperioder) && (
<ExclamationmarkTriangleFillIcon width={20} height={20} color="Orange" />
)
}
/>
))}
</Tabs.List>
</Tabs>
</div>
)}
<BeregningInfoPanel
aktivtBeregningsgrunnlagIndeks={aktivtBeregningsgrunnlagIndeks}
beregningsgrunnlag={beregningsgrunnlag}
kodeverkSamling={kodeverkSamling}
avklaringsbehov={aktiveAvklaringsBehov}
submitCallback={submitCallback}
readOnly={readOnly || erForlengelse(beregningsgrunnlag[aktivtBeregningsgrunnlagIndeks], vilkårsperioder)}
submittable={submittable}
erOverstyrer={erOverstyrer}
skalKunneOverstyreAktiviteter={skalKunneOverstyreAktiviteter}
arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
setFormData={setFormData}
formData={formData}
vilkar={vilkar}
skalKunneAvbryteOverstyring={skalKunneAvbryteOverstyring}
/>
<VStack gap="4">
<Heading size="small" level="2">
<FormattedMessage id="BeregningInfoPanel.AksjonspunktHelpText.SaksopplysningerBeregning" />
</Heading>
{(hasAksjonspunkt(VURDER_FAKTA_FOR_ATFL_SN, aktiveAvklaringsBehov) ||
hasAksjonspunkt(OVERSTYRING_AV_BEREGNINGSGRUNNLAG, aktiveAvklaringsBehov)) &&
!isAksjonspunktClosed(aktiveAvklaringsBehov) && (
<>{lagHelpTextsForFakta(aktivtBeregningsgrunnlag, arbeidsgiverOpplysningerPerId)}</>
)}
{skalBrukeTabs && (
<div className={styles.tabsContainer}>
<Tabs
value={aktivtBeregningsgrunnlagIndeks.toString()}
onChange={(clickedIndex: string) => setAktivtBeregningsgrunnlagIndeks(Number(clickedIndex))}
>
<Tabs.List>
{beregningsgrunnlag.map((currentBeregningsgrunnlag, currentBeregningsgrunnlagIndex) => (
<Tabs.Tab
key={currentBeregningsgrunnlag.skjaeringstidspunktBeregning}
value={currentBeregningsgrunnlagIndex.toString()}
label={lagLabel(currentBeregningsgrunnlag, vilkårsperioder)}
className={skalVurderes(currentBeregningsgrunnlag, vilkårsperioder) ? 'harAksjonspunkt' : ''}
icon={
skalVurderes(currentBeregningsgrunnlag, vilkårsperioder) && (
<ExclamationmarkTriangleFillIcon width={20} height={20} color="Orange" />
)
}
/>
))}
</Tabs.List>
</Tabs>
</div>
)}
<BeregningInfoPanel
aktivtBeregningsgrunnlagIndeks={aktivtBeregningsgrunnlagIndeks}
beregningsgrunnlag={beregningsgrunnlag}
kodeverkSamling={kodeverkSamling}
avklaringsbehov={aktiveAvklaringsBehov}
submitCallback={submitCallback}
readOnly={readOnly || erForlengelse(beregningsgrunnlag[aktivtBeregningsgrunnlagIndeks], vilkårsperioder)}
submittable={submittable}
erOverstyrer={erOverstyrer}
skalKunneOverstyreAktiviteter={skalKunneOverstyreAktiviteter}
arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
setFormData={setFormData}
formData={formData}
vilkar={vilkar}
skalKunneAvbryteOverstyring={skalKunneAvbryteOverstyring}
/>
</VStack>
</div>
</RawIntlProvider>
);
Expand Down
39 changes: 20 additions & 19 deletions packages/fakta-beregning/src/components/BeregningInfoPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from 'react';

import { VStack } from '@navikt/ds-react';

import { ArbeidsgiverOpplysningerPerId, BeregningAvklaringsbehov, Beregningsgrunnlag } from '@navikt/ft-types';
import { VerticalSpacer } from '@navikt/ft-ui-komponenter';

import { AvklarAktiviteterFormValues } from '../typer/AvklarAktiviteterFormValues';
import { FaktaBeregningAvklaringsbehovCode } from '../typer/interface/FaktaBeregningAvklaringsbehovCode';
Expand Down Expand Up @@ -68,23 +69,23 @@ export const BeregningInfoPanel = ({
const [avklarAktiviteterErEndret, setAvklarAktiviteterErEndret] = useState<boolean>(false);

return (
<div>
<AvklareAktiviteterPanel
readOnly={avklarAktiviteterReadOnly}
harAndreAvklaringsbehovIPanel={hasAvklaringsbehov(VURDER_FAKTA_FOR_ATFL_SN, avklaringsbehov)}
submitCallback={submitCallback}
submittable={submittable}
erOverstyrer={erOverstyrer && skalKunneOverstyreAktiviteter}
kodeverkSamling={kodeverkSamling}
aktivtBeregningsgrunnlagIndeks={aktivtBeregningsgrunnlagIndeks}
beregningsgrunnlag={beregningsgrunnlag}
arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
setFormData={setFormData}
formData={formData && formNameAvklarAktiviteter in formData ? formData : undefined}
vilkår={vilkar}
setAvklarAktiviteterErEndret={setAvklarAktiviteterErEndret}
/>
<VerticalSpacer thirtyTwoPx />
<VStack gap={hasAvklaringsbehov(VURDER_FAKTA_FOR_ATFL_SN, avklaringsbehov) ? '0' : '2'}>
<div>
<AvklareAktiviteterPanel
readOnly={avklarAktiviteterReadOnly}
submitCallback={submitCallback}
submittable={submittable}
erOverstyrer={erOverstyrer && skalKunneOverstyreAktiviteter}
kodeverkSamling={kodeverkSamling}
aktivtBeregningsgrunnlagIndeks={aktivtBeregningsgrunnlagIndeks}
beregningsgrunnlag={beregningsgrunnlag}
arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
setFormData={setFormData}
formData={formData && formNameAvklarAktiviteter in formData ? formData : undefined}
vilkår={vilkar}
setAvklarAktiviteterErEndret={setAvklarAktiviteterErEndret}
/>
</div>
<VurderFaktaBeregningPanel
submitCallback={submitCallback}
submittable={submittable}
Expand All @@ -100,6 +101,6 @@ export const BeregningInfoPanel = ({
avklarAktiviteterErEndret={avklarAktiviteterErEndret}
skalKunneAvbryteOverstyring={skalKunneAvbryteOverstyring}
/>
</div>
</VStack>
);
};
Loading

0 comments on commit 14aedc0

Please sign in to comment.