Skip to content

TFP-6042: rydd i prosess-panel part 1 #6878

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sirimykland merged 5 commits into from
Nov 13, 2025
Merged

TFP-6042: rydd i prosess-panel part 1 #6878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
15d2898
TFP-6042: rydd i prosess-panel part 1
sirimykland Nov 11, 2025
b965e61
lint
sirimykland Nov 11, 2025
79bd812
fiks indentering på aksjonspunkt boks
sirimykland Nov 12, 2025
2bcec8c
fiks stylelint
sirimykland Nov 12, 2025
479c9ea
legg til label for sakbehandleroverstyring av søkers opplysningsplikt…
sirimykland Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/fp-frontend/src/fagsakprofile/FagsakProfileIndex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { LosUrl } from '@navikt/fp-los-saksbehandler';
import {
alleKodeverk,
alleKodeverkTilbakekreving,
getIntlDecorator, lagAksjonspunkt,
getIntlDecorator,
lagAksjonspunkt,
withQueryClient,
withRouter,
} from '@navikt/fp-storybook-utils';
Expand Down Expand Up @@ -101,8 +102,7 @@ const ALLE_BEHANDLINGER = [
kontrollResultat: {
kontrollresultat: 'HOY',
},
risikoAksjonspunkt: lagAksjonspunkt(
AksjonspunktKode.VURDER_FARESIGNALER,{
risikoAksjonspunkt: lagAksjonspunkt(AksjonspunktKode.VURDER_FARESIGNALER, {
kanLoses: false,
erAktivt: false,
}),
Expand Down
12 changes: 3 additions & 9 deletions packages/fakta/opptjening/src/OpptjeningFaktaIndex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ type Story = StoryObj<typeof meta>;

export const MedAksjonspunkt: Story = {
args: {
aksjonspunkterForPanel: [
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING),
],
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
opptjening: {
fastsattOpptjening: {
opptjeningFom: '2018-12-25',
Expand Down Expand Up @@ -180,9 +178,7 @@ export const UtenAksjonspunkt: Story = {

export const MedToLikePerioderForSammeAktivitetstype: Story = {
args: {
aksjonspunkterForPanel: [
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)
],
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
opptjening: {
fastsattOpptjening: {
opptjeningFom: '2018-12-25',
Expand Down Expand Up @@ -236,9 +232,7 @@ export const MedToLikePerioderForSammeAktivitetstype: Story = {

export const MedAlleOpptjeningsaktiviteterFiltrertBort: Story = {
args: {
aksjonspunkterForPanel: [
lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)
],
aksjonspunkterForPanel: [lagAksjonspunkt(AksjonspunktKode.VURDER_PERIODER_MED_OPPTJENING)],
opptjening: {
fastsattOpptjening: {
opptjeningFom: '2018-12-25',
Expand Down
4 changes: 2 additions & 2 deletions packages/fakta/tilrettelegging/src/TilretteleggingFaktaIndex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,9 +416,9 @@ export const ErReadonly: Story = {
export const ErRevurdering: Story = {
args: {
aksjonspunkterForPanel: [
lagAksjonspunkt(AksjonspunktKode.VURDER_SVP_TILRETTELEGGING,{
lagAksjonspunkt(AksjonspunktKode.VURDER_SVP_TILRETTELEGGING, {
begrunnelse: 'Dette er en begrunnelse',
})
}),
],
svangerskapspengerTilrettelegging: {
...TILRETTELEGGING_PERMISJON,
Expand Down
2 changes: 1 addition & 1 deletion packages/prosess/felles/src/prosessStegBegrunnelseTextField.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.begrunnelseTextField {
max-width: 800px;
max-width: 800px;
}
2 changes: 1 addition & 1 deletion packages/prosess/felles/src/vilkar/OverstyringPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const OverstyringPanel = ({

return (
<AksjonspunktBox
className={styles['aksjonspunktMargin']}
className={erOverstyrt ? undefined : styles['aksjonspunktMargin']}
erAksjonspunktApent={erOverstyrt}
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
>
Expand Down
94 changes: 51 additions & 43 deletions packages/prosess/felles/src/vilkar/ProsessPanelTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ import messages from '../../i18n/nb_NO.json';
const intl = createIntl(messages);

interface Props {
title: string;
lovReferanse?: string;
title: ReactNode;
lovReferanse: string | undefined;
harÅpentAksjonspunkt: boolean;
isSubmittable: boolean;
originalErVilkårOk?: boolean;
originalErVilkårOk: boolean | undefined;
erIkkeGodkjentAvBeslutter: boolean;
rendreFakta?: () => ReactNode;
rendreFakta?: ReactNode;
isReadOnly: boolean;
isDirty?: boolean;
isDirty: boolean;
isSubmitting: boolean;
children: ReactNode | ReactNode[];
}
Expand All @@ -40,43 +40,51 @@ export const ProsessPanelTemplate = ({
isSubmitting,
children,
}: Props) => (
<VStack gap="space-16">
<HStack gap="space-8">
{originalErVilkårOk !== undefined && (
<>
{originalErVilkårOk && <CheckmarkCircleFillIcon className={styles['godkjentImage']} />}
{!originalErVilkårOk && <XMarkOctagonFillIcon className={styles['avslattImage']} />}
</>
)}
<Heading size="small" level="3">
{title}
</Heading>
{lovReferanse && <Detail className={styles['vilkar']}>{lovReferanse}</Detail>}
</HStack>
<HStack gap="space-8">
{originalErVilkårOk && <Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErOppfylt' })}</Label>}
{originalErVilkårOk === false && (
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErIkkeOppfylt' })}</Label>
)}
{!harÅpentAksjonspunkt && originalErVilkårOk === undefined && (
<BodyShort size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.IkkeBehandlet' })}</BodyShort>
<HStack gap="space-8">
{originalErVilkårOk !== undefined && (
<>
{originalErVilkårOk && <CheckmarkCircleFillIcon className={styles['godkjentImage']} />}
{!originalErVilkårOk && <XMarkOctagonFillIcon className={styles['avslattImage']} />}
</>
)}
<VStack gap="space-16">
<HStack gap="space-8" wrap={false} align="center">
<Heading size="small" level="3">
{title}
</Heading>
{lovReferanse && <Detail>{lovReferanse}</Detail>}
</HStack>

{!harÅpentAksjonspunkt && (
<HStack gap="space-8">
{originalErVilkårOk && (
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErOppfylt' })}</Label>
)}
{originalErVilkårOk === false && (
<Label size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.ErIkkeOppfylt' })}</Label>
)}
{originalErVilkårOk === undefined && (
<BodyShort size="small">{intl.formatMessage({ id: 'ProsessPanelTemplate.IkkeBehandlet' })}</BodyShort>
)}
</HStack>
)}
</HStack>
<AksjonspunktBox
className={styles['aksjonspunktMargin']}
erAksjonspunktApent={harÅpentAksjonspunkt}
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
>
<VStack gap="space-16">
<div>{children}</div>
<ProsessStegSubmitButton
isReadOnly={isReadOnly}
isSubmittable={isSubmittable}
isDirty={isDirty}
isSubmitting={isSubmitting}
/>
</VStack>
</AksjonspunktBox>
{rendreFakta?.()}
</VStack>

<AksjonspunktBox
className={harÅpentAksjonspunkt ? undefined : styles['aksjonspunktMargin']}
erAksjonspunktApent={harÅpentAksjonspunkt}
erIkkeGodkjentAvBeslutter={erIkkeGodkjentAvBeslutter}
>
<VStack gap="space-16">
<div>{children}</div>
<ProsessStegSubmitButton
isReadOnly={isReadOnly}
isSubmittable={isSubmittable}
isDirty={isDirty}
isSubmitting={isSubmitting}
/>
</VStack>
</AksjonspunktBox>
{rendreFakta}
</VStack>
</HStack>
);
46 changes: 27 additions & 19 deletions packages/prosess/felles/src/vilkar/VilkarResultPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { type ReactElement } from 'react';
import { type ReactElement, type ReactNode } from 'react';
import { useFormContext } from 'react-hook-form';

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

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

interface Props {
vilkår: Vilkar | undefined;
legend: ReactNode;
customVilkårIkkeOppfyltText: string | ReactElement;
customVilkårOppfyltText: string | ReactElement;
isReadOnly: boolean;
Expand All @@ -32,6 +33,7 @@ interface Props {

export const VilkarResultPicker = ({
vilkår,
legend,
customVilkårIkkeOppfyltText,
customVilkårOppfyltText,
isReadOnly,
Expand All @@ -50,27 +52,33 @@ export const VilkarResultPicker = ({
return (
<VStack gap="space-16">
{isReadOnly && erVilkårOk !== undefined && (
<HStack gap="space-8">
{erVilkårOk && (
<>
<CheckmarkIcon className={styles['godkjentImage']} />
<BodyShort size="small">{customVilkårOppfyltText}</BodyShort>
</>
)}
{!erVilkårOk && (
<>
<XMarkOctagonIcon className={styles['avslattImage']} />
<BodyShort size="small">{customVilkårIkkeOppfyltText}</BodyShort>
</>
)}
</HStack>
<ReadOnlyField
label={legend}
size="small"
value={
erVilkårOk ? (
<>
<CheckmarkIcon className={styles['godkjentImage']} />
<BodyShort as="span" size="small">
{customVilkårOppfyltText}
</BodyShort>
</>
) : (
<>
<XMarkOctagonIcon className={styles['avslattImage']} />
<BodyShort as="span" size="small">
{customVilkårIkkeOppfyltText}
</BodyShort>
</>
)
}
/>
)}
{(!isReadOnly || erVilkårOk === undefined) && (
<RhfRadioGroup
name="erVilkarOk"
control={control}
legend=""
hideLegend
legend={legend}
validate={radioValidators}
readOnly={isReadOnly}
>
Expand Down
1 change: 0 additions & 1 deletion packages/prosess/felles/src/vilkar/overstyringPanel.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.aksjonspunktMargin {
margin-left: -20px;
min-width: 400px;
}

.exclamationmarkIcon {
Expand Down
19 changes: 7 additions & 12 deletions packages/prosess/felles/src/vilkar/prosessPanelTemplate.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
.vilkar {
margin-top: 3px;
}

.aksjonspunktMargin {
margin-left: -20px;
min-width: 400px;
margin-left: -20px;
}

.godkjentImage {
color: var(--ax-bg-success-strong);
height: 25px;
width: 25px;
color: var(--ax-bg-success-strong);
height: 25px;
width: 25px;
}

.avslattImage {
color: var(--ax-danger-400);
height: 25px;
width: 25px;
color: var(--ax-danger-500);
height: 25px;
width: 25px;
}
18 changes: 11 additions & 7 deletions packages/prosess/felles/src/vilkar/vilkarResultPicker.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
.godkjentImage {
color: var(--ax-bg-success-strong);
height: 20px;
width: 20px;
color: var(--ax-bg-success-strong);
height: 20px;
margin-right: 8px;
vertical-align: text-top;
width: 20px;
}

.avslattImage {
color: var(--ax-danger-500);
height: 20px;
width: 20px;
color: var(--ax-danger-500);
height: 20px;
margin-right: 8px;
vertical-align: text-top;
width: 20px;
}

.selectBredde {
width: 400px;
width: 400px;
}
2 changes: 1 addition & 1 deletion packages/prosess/soknadsfrist/src/VurderSoknadsfristForeldrepengerIndex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const soknad = {
søknadsperiodeSlutt: '2019-01-10',
utledetSøknadsfrist: '2019-10-01',
},
manglendeVedlegg: []
manglendeVedlegg: [],
} as Soknad;

const meta = {
Expand Down
3 changes: 1 addition & 2 deletions packages/prosess/vedtak/src/components/forstegang/VedtakAvslagPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ const getAvslagÅrsak = (

const vilkarType = alleKodeverk['VilkårType'].find(({ kode }) => kode === avslatteVilkar[0]?.vilkarType)?.navn ?? '';

const årsak =
alleKodeverk['Avslagsårsak'].find(({ kode }) => kode === behandlingsresultat.avslagsarsak)?.navn ?? '';
const årsak = alleKodeverk['Avslagsårsak'].find(({ kode }) => kode === behandlingsresultat.avslagsarsak)?.navn ?? '';

return `${vilkarType}: ${årsak}`;
};
3 changes: 1 addition & 2 deletions packages/prosess/vedtak/src/components/revurdering/VedtakAvslagArsakOgBegrunnelsePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ const getAvslagArsak = (

const vilkarType = alleKodeverk['VilkårType'].find(({ kode }) => kode === avslatteVilkar[0]?.vilkarType)?.navn ?? '';

const årsak =
alleKodeverk['Avslagsårsak'].find(({ kode }) => kode === behandlingsresultat.avslagsarsak)?.navn ?? '';
const årsak = alleKodeverk['Avslagsårsak'].find(({ kode }) => kode === behandlingsresultat.avslagsarsak)?.navn ?? '';

return `${vilkarType}: ${årsak}`;
};
Expand Down
Loading
Loading