Skip to content

Commit ad2d0a8

Browse files
sirimyklandsirimykland
authored
TFP-6042: rydd i prosess-panel part 1 (#6878)
* TFP-6042: rydd i prosess-panel part 1 * lint * fiks indentering på aksjonspunkt boks * fiks stylelint * legg til label for sakbehandleroverstyring av søkers opplysningsplikt vilkåret
1 parent f37f320 commit ad2d0a8

31 files changed

+342
-357
lines changed

‎apps/fp-frontend/src/fagsakprofile/FagsakProfileIndex.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { LosUrl } from '@navikt/fp-los-saksbehandler';
99
import {
1010
alleKodeverk,
1111
alleKodeverkTilbakekreving,
12-
getIntlDecorator, lagAksjonspunkt,
12+
getIntlDecorator,
13+
lagAksjonspunkt,
1314
withQueryClient,
1415
withRouter,
1516
} from '@navikt/fp-storybook-utils';
@@ -101,8 +102,7 @@ const ALLE_BEHANDLINGER = [
101102
kontrollResultat: {
102103
kontrollresultat: 'HOY',
103104
},
104-
risikoAksjonspunkt: lagAksjonspunkt(
105-
AksjonspunktKode.VURDER_FARESIGNALER,{
105+
risikoAksjonspunkt: lagAksjonspunkt(AksjonspunktKode.VURDER_FARESIGNALER, {
106106
kanLoses: false,
107107
erAktivt: false,
108108
}),

‎packages/fakta/opptjening/src/OpptjeningFaktaIndex.stories.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,7 @@ type Story = StoryObj<typeof meta>;
4444

4545
export const MedAksjonspunkt: Story = {
4646
args: {
47-
aksjonspunkterForPanel: [
48-
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING),
49-
],
47+
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
5048
opptjening: {
5149
fastsattOpptjening: {
5250
opptjeningFom: '2018-12-25',
@@ -180,9 +178,7 @@ export const UtenAksjonspunkt: Story = {
180178

181179
export const MedToLikePerioderForSammeAktivitetstype: Story = {
182180
args: {
183-
aksjonspunkterForPanel: [
184-
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)
185-
],
181+
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
186182
opptjening: {
187183
fastsattOpptjening: {
188184
opptjeningFom: '2018-12-25',
@@ -236,9 +232,7 @@ export const MedToLikePerioderForSammeAktivitetstype: Story = {
236232

237233
export const MedAlleOpptjeningsaktiviteterFiltrertBort: Story = {
238234
args: {
239-
aksjonspunkterForPanel: [
240-
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)
241-
],
235+
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
242236
opptjening: {
243237
fastsattOpptjening: {
244238
opptjeningFom: '2018-12-25',

‎packages/fakta/tilrettelegging/src/TilretteleggingFaktaIndex.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -416,9 +416,9 @@ export const ErReadonly: Story = {
416416
export const ErRevurdering: Story = {
417417
args: {
418418
aksjonspunkterForPanel: [
419-
lagAksjonspunkt(AksjonspunktKode.VURDER_SVP_TILRETTELEGGING,{
419+
lagAksjonspunkt(AksjonspunktKode.VURDER_SVP_TILRETTELEGGING, {
420420
begrunnelse: 'Dette er en begrunnelse',
421-
})
421+
}),
422422
],
423423
svangerskapspengerTilrettelegging: {
424424
...TILRETTELEGGING_PERMISJON,

‎packages/prosess/felles/src/prosessStegBegrunnelseTextField.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.begrunnelseTextField {
2-
max-width: 800px;
2+
max-width: 800px;
33
}

‎packages/prosess/felles/src/vilkar/OverstyringPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const OverstyringPanel = ({
5858

5959
return (
6060
<AksjonspunktBox
61-
className={styles['aksjonspunktMargin']}
61+
className={erOverstyrt ? undefined : styles['aksjonspunktMargin']}
6262
erAksjonspunktApent={erOverstyrt}
6363
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
6464
>

‎packages/prosess/felles/src/vilkar/ProsessPanelTemplate.tsx‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ import messages from '../../i18n/nb_NO.json';
1414
const intl = createIntl(messages);
1515

1616
interface Props {
17-
title: string;
18-
lovReferanse?: string;
17+
title: ReactNode;
18+
lovReferanse: string | undefined;
1919
harÅpentAksjonspunkt: boolean;
2020
isSubmittable: boolean;
21-
originalErVilkårOk?: boolean;
21+
originalErVilkårOk: boolean | undefined;
2222
erIkkeGodkjentAvBeslutter: boolean;
23-
rendreFakta?: () => ReactNode;
23+
rendreFakta?: ReactNode;
2424
isReadOnly: boolean;
25-
isDirty?: boolean;
25+
isDirty: boolean;
2626
isSubmitting: boolean;
2727
children: ReactNode | ReactNode[];
2828
}
@@ -40,43 +40,51 @@ export const ProsessPanelTemplate = ({
4040
isSubmitting,
4141
children,
4242
}: Props) => (
43-
<VStack gap="space-16">
44-
<HStack gap="space-8">
45-
{originalErVilkårOk !== undefined && (
46-
<>
47-
{originalErVilkårOk && <CheckmarkCircleFillIcon className={styles['godkjentImage']} />}
48-
{!originalErVilkårOk && <XMarkOctagonFillIcon className={styles['avslattImage']} />}
49-
</>
50-
)}
51-
<Heading size="small" level="3">
52-
{title}
53-
</Heading>
54-
{lovReferanse && <Detail className={styles['vilkar']}>{lovReferanse}</Detail>}
55-
</HStack>
56-
<HStack gap="space-8">
57-
{originalErVilkårOk && <Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErOppfylt' })}</Label>}
58-
{originalErVilkårOk === false && (
59-
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErIkkeOppfylt' })}</Label>
60-
)}
61-
{!harÅpentAksjonspunkt && originalErVilkårOk === undefined && (
62-
<BodyShort size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.IkkeBehandlet' })}</BodyShort>
43+
<HStack gap="space-8">
44+
{originalErVilkårOk !== undefined && (
45+
<>
46+
{originalErVilkårOk && <CheckmarkCircleFillIcon className={styles['godkjentImage']} />}
47+
{!originalErVilkårOk && <XMarkOctagonFillIcon className={styles['avslattImage']} />}
48+
</>
49+
)}
50+
<VStack gap="space-16">
51+
<HStack gap="space-8" wrap={false} align="center">
52+
<Heading size="small" level="3">
53+
{title}
54+
</Heading>
55+
{lovReferanse && <Detail>{lovReferanse}</Detail>}
56+
</HStack>
57+
58+
{!harÅpentAksjonspunkt && (
59+
<HStack gap="space-8">
60+
{originalErVilkårOk && (
61+
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErOppfylt' })}</Label>
62+
)}
63+
{originalErVilkårOk === false && (
64+
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErIkkeOppfylt' })}</Label>
65+
)}
66+
{originalErVilkårOk === undefined && (
67+
<BodyShort size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.IkkeBehandlet' })}</BodyShort>
68+
)}
69+
</HStack>
6370
)}
64-
</HStack>
65-
<AksjonspunktBox
66-
className={styles['aksjonspunktMargin']}
67-
erAksjonspunktApent={harÅpentAksjonspunkt}
68-
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
69-
>
70-
<VStack gap="space-16">
71-
<div>{children}</div>
72-
<ProsessStegSubmitButton
73-
isReadOnly={isReadOnly}
74-
isSubmittable={isSubmittable}
75-
isDirty={isDirty}
76-
isSubmitting={isSubmitting}
77-
/>
78-
</VStack>
79-
</AksjonspunktBox>
80-
{rendreFakta?.()}
81-
</VStack>
71+
72+
<AksjonspunktBox
73+
className={harÅpentAksjonspunkt ? undefined : styles['aksjonspunktMargin']}
74+
erAksjonspunktApent={harÅpentAksjonspunkt}
75+
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
76+
>
77+
<VStack gap="space-16">
78+
<div>{children}</div>
79+
<ProsessStegSubmitButton
80+
isReadOnly={isReadOnly}
81+
isSubmittable={isSubmittable}
82+
isDirty={isDirty}
83+
isSubmitting={isSubmitting}
84+
/>
85+
</VStack>
86+
</AksjonspunktBox>
87+
{rendreFakta}
88+
</VStack>
89+
</HStack>
8290
);

‎packages/prosess/felles/src/vilkar/VilkarResultPicker.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { type ReactElement } from 'react';
1+
import { type ReactElement, type ReactNode } from 'react';
22
import { useFormContext } from 'react-hook-form';
33

44
import { CheckmarkIcon, XMarkOctagonIcon } from '@navikt/aksel-icons';
5-
import { BodyShort, HStack, Radio, VStack } from '@navikt/ds-react';
6-
import { RhfRadioGroup, RhfSelect } from '@navikt/ft-form-hooks';
5+
import { BodyShort, Radio, VStack } from '@navikt/ds-react';
6+
import { ReadOnlyField, RhfRadioGroup, RhfSelect } from '@navikt/ft-form-hooks';
77
import { required, requiredIfCustomFunctionIsTrueNew } from '@navikt/ft-form-validators';
88
import { createIntl } from '@navikt/ft-utils';
99

@@ -23,6 +23,7 @@ export type VilkarResultPickerFormValues = {
2323

2424
interface Props {
2525
vilkår: Vilkar | undefined;
26+
legend: ReactNode;
2627
customVilkårIkkeOppfyltText: string | ReactElement;
2728
customVilkårOppfyltText: string | ReactElement;
2829
isReadOnly: boolean;
@@ -32,6 +33,7 @@ interface Props {
3233

3334
export const VilkarResultPicker = ({
3435
vilkår,
36+
legend,
3537
customVilkårIkkeOppfyltText,
3638
customVilkårOppfyltText,
3739
isReadOnly,
@@ -50,27 +52,33 @@ export const VilkarResultPicker = ({
5052
return (
5153
<VStack gap="space-16">
5254
{isReadOnly && erVilkårOk !== undefined && (
53-
<HStack gap="space-8">
54-
{erVilkårOk && (
55-
<>
56-
<CheckmarkIcon className={styles['godkjentImage']} />
57-
<BodyShort size="small">{customVilkårOppfyltText}</BodyShort>
58-
</>
59-
)}
60-
{!erVilkårOk && (
61-
<>
62-
<XMarkOctagonIcon className={styles['avslattImage']} />
63-
<BodyShort size="small">{customVilkårIkkeOppfyltText}</BodyShort>
64-
</>
65-
)}
66-
</HStack>
55+
<ReadOnlyField
56+
label={legend}
57+
size="small"
58+
value={
59+
erVilkårOk ? (
60+
<>
61+
<CheckmarkIcon className={styles['godkjentImage']} />
62+
<BodyShort as="span" size="small">
63+
{customVilkårOppfyltText}
64+
</BodyShort>
65+
</>
66+
) : (
67+
<>
68+
<XMarkOctagonIcon className={styles['avslattImage']} />
69+
<BodyShort as="span" size="small">
70+
{customVilkårIkkeOppfyltText}
71+
</BodyShort>
72+
</>
73+
)
74+
}
75+
/>
6776
)}
6877
{(!isReadOnly || erVilkårOk === undefined) && (
6978
<RhfRadioGroup
7079
name="erVilkarOk"
7180
control={control}
72-
legend=""
73-
hideLegend
81+
legend={legend}
7482
validate={radioValidators}
7583
readOnly={isReadOnly}
7684
>

‎packages/prosess/felles/src/vilkar/overstyringPanel.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.aksjonspunktMargin {
22
margin-left: -20px;
3-
min-width: 400px;
43
}
54

65
.exclamationmarkIcon {

‎packages/prosess/felles/src/vilkar/prosessPanelTemplate.module.css‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
.vilkar {
2-
margin-top: 3px;
3-
}
4-
51
.aksjonspunktMargin {
6-
margin-left: -20px;
7-
min-width: 400px;
2+
margin-left: -20px;
83
}
94

105
.godkjentImage {
11-
color: var(--ax-bg-success-strong);
12-
height: 25px;
13-
width: 25px;
6+
color: var(--ax-bg-success-strong);
7+
height: 25px;
8+
width: 25px;
149
}
1510

1611
.avslattImage {
17-
color: var(--ax-danger-400);
18-
height: 25px;
19-
width: 25px;
12+
color: var(--ax-danger-500);
13+
height: 25px;
14+
width: 25px;
2015
}

‎packages/prosess/felles/src/vilkar/vilkarResultPicker.module.css‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
.godkjentImage {
2-
color: var(--ax-bg-success-strong);
3-
height: 20px;
4-
width: 20px;
2+
color: var(--ax-bg-success-strong);
3+
height: 20px;
4+
margin-right: 8px;
5+
vertical-align: text-top;
6+
width: 20px;
57
}
68

79
.avslattImage {
8-
color: var(--ax-danger-500);
9-
height: 20px;
10-
width: 20px;
10+
color: var(--ax-danger-500);
11+
height: 20px;
12+
margin-right: 8px;
13+
vertical-align: text-top;
14+
width: 20px;
1115
}
1216

1317
.selectBredde {
14-
width: 400px;
18+
width: 400px;
1519
}

0 commit comments

Comments
 (0)