Bytt panel til box (#2805)

* Bytt panel til box soknadsperioder * Box Listepaneler * Fix box i pdfVisning * Fix panel OLP * Bytt Panel i EksisterendePerioder OMPUT * Bytt Panel Arbeidstakerperioder * Bytt Panel i UtenlandsoppholdContainer * Fix Arbeidstakerperioder * ArbeidstakerContainer OMPUT * Bytt Panel i Periodepaneler * Bytt Panel i Arbeidstakerperioder
navikt · Dec 17, 2024 · 9df07e7 · 9df07e7
1 parent ad33f9e
commit 9df07e7
Show file tree

Hide file tree

Showing 34 changed files with 1,020 additions and 841 deletions.
diff --git a/src/app/components/ArbeidstidInfo.tsx b/src/app/components/ArbeidstidInfo.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
+
 import { FormattedMessage } from 'react-intl';
-import { Alert } from '@navikt/ds-react';
+import { Alert, Heading } from '@navikt/ds-react';
 
 export const arbeidstidInformasjon = () => {
     return (
         <div className="arbeidstidInfo">
             <hr />
-            <h3>
+
+            <Heading size="small" level="3">
                 <FormattedMessage id={'skjema.arbeidstid.info.overskrift'} />
-            </h3>
+            </Heading>
+
             <Alert size="small" variant="info">
                 <FormattedMessage id={'skjema.arbeidstid.info'} />
             </Alert>

diff --git a/src/app/components/Listepaneler.tsx b/src/app/components/Listepaneler.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import { Fieldset, Panel } from '@navikt/ds-react';
+import { Box, Button, Fieldset, Heading } from '@navikt/ds-react';
 import { FormattedMessage, IntlShape } from 'react-intl';
 import { GetErrorMessage, GetUhaandterteFeil } from 'app/models/types';
-import intlHelper from 'app/utils/intlUtils';
+
 import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger';
 import BinSvg from '../assets/SVG/BinSVG';
 import AddCircleSvg from '../assets/SVG/AddCircleSVG';
@@ -45,13 +45,13 @@ export interface IListepanelerProps<T> {
 
 type ItemInfo = any;
 
-export const Listepaneler: React.FunctionComponent<IListepanelerProps<ItemInfo>> = (
-    props: IListepanelerProps<ItemInfo>,
-) => {
-    const { items, initialItem, className, textLeggTil } = props;
-    const itemsWithInitialItem = items.length > 0 ? items : [initialItem];
+export const Listepaneler: React.FC<IListepanelerProps<ItemInfo>> = (props: IListepanelerProps<ItemInfo>) => {
     const {
         intl,
+        items,
+        initialItem,
+        className,
+        textLeggTil,
         component,
         editSoknad,
         editSoknadState,
@@ -61,6 +61,7 @@ export const Listepaneler: React.FunctionComponent<IListepanelerProps<ItemInfo>>
         getUhaandterteFeil,
         getErrorMessage,
     } = props;
+    const itemsWithInitialItem = items.length > 0 ? items : [initialItem];
 
     const editItem: (index: number, iteminfo: Partial<ItemInfo>) => ItemInfo[] = (
         index: number,
@@ -109,25 +110,25 @@ export const Listepaneler: React.FunctionComponent<IListepanelerProps<ItemInfo>>
                 items!.map((itemInfo, itemIndex) => {
                     const panelid = props.panelid(itemIndex);
                     return (
-                        <Panel
+                        <Box
                             className={classNames('listepanel', props.panelClassName, !component ? 'kunperiode' : '')}
-                            border={false}
                             id={panelid}
                             key={panelid}
-                            data-testid={`listepaneler`}
+                            data-testid="listepaneler"
                         >
                             <Fieldset hideLegend legend="">
                                 {feilkodeprefiks === 'arbeidstid.arbeidstaker' && itemsWithInitialItem.length > 1 && (
-                                    <h2>
+                                    <Heading size="medium" level="2">
                                         <FormattedMessage
                                             id="skjema.arbeidsforhold.teller"
                                             values={{ indeks: itemIndex + 1 }}
                                         />
-                                    </h2>
+                                    </Heading>
                                 )}
+
                                 {!!medSlettKnapp && itemsWithInitialItem.length > 1 && (
                                     <div className="listepanelbunn">
-                                        <button
+                                        <Button
                                             id="slett"
                                             className="fjernlisteelementknapp"
                                             data-testid="fjernlisteelementknapp"
@@ -138,10 +139,12 @@ export const Listepaneler: React.FunctionComponent<IListepanelerProps<ItemInfo>>
                                             <div className="slettIcon">
                                                 <BinSvg title="fjern" />
                                             </div>
-                                            {intlHelper(intl, props.textFjern || 'skjema.liste.fjern')}
-                                        </button>
+
+                                            <FormattedMessage id={props.textFjern || 'skjema.liste.fjern'} />
+                                        </Button>
                                     </div>
                                 )}
+
                                 {!!component &&
                                     component(
                                         itemInfo,
@@ -153,28 +156,27 @@ export const Listepaneler: React.FunctionComponent<IListepanelerProps<ItemInfo>>
                                         intl,
                                     )}
                             </Fieldset>
-                        </Panel>
+                        </Box>
                     );
                 })}
+
             {feilkodeprefiks && (
                 <UhaanderteFeilmeldinger
                     getFeilmeldinger={() => (getUhaandterteFeil && getUhaandterteFeil(feilkodeprefiks)) || []}
                 />
             )}
 
             {kanHaFlere && (
-                <button
+                <Button
                     id="leggtillisteelementknapp"
                     data-testid="leggtillisteelementknapp"
                     className="leggtillisteelementknapp"
                     type="button"
                     onClick={addItemHandler}
+                    icon={<AddCircleSvg title="leggtil" />}
                 >
-                    <div className="leggtilperiodeIcon">
-                        <AddCircleSvg title="leggtil" />
-                    </div>
-                    {intlHelper(intl, textLeggTil || 'skjema.liste.legg_til')}
-                </button>
+                    <FormattedMessage id={textLeggTil || 'skjema.liste.legg_til'} />
+                </Button>
             )}
         </Fieldset>
     );

diff --git a/src/app/components/Periodepaneler.tsx b/src/app/components/Periodepaneler.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
-import { IntlShape } from 'react-intl';
 
+import { useIntl } from 'react-intl';
 import { Box } from '@navikt/ds-react';
 
 import { PeriodInput } from 'app/components/period-input/PeriodInput';
 import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger';
 import { GetErrorMessage, GetUhaandterteFeil } from 'app/models/types';
-
 import AddCircleSvg from '../assets/SVG/AddCircleSVG';
 import BinSvg from '../assets/SVG/BinSVG';
 import { IPeriode } from '../models/types/Periode';
 import intlHelper from '../utils/intlUtils';
 
 interface Props {
-    intl: IntlShape;
     periods: IPeriode[]; // Liste over periodisert informasjon
     initialPeriode: IPeriode;
     kanHaFlere: boolean; // Objektet som legges til når man legger til en ny periode i lista
@@ -31,7 +29,6 @@ interface Props {
 }
 
 export const Periodepaneler: React.FC<Props> = ({
-    intl,
     periods,
     initialPeriode,
     kanHaFlere,
@@ -47,6 +44,8 @@ export const Periodepaneler: React.FC<Props> = ({
     onAdd,
     onRemove,
 }: Props) => {
+    const intl = useIntl();
+
     const editInfo: (index: number, periodeinfo: Partial<IPeriode>) => IPeriode[] = (
         index: number,
         periodeinfo: Partial<IPeriode>,

diff --git a/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx b/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx
@@ -117,7 +117,9 @@ const ArbeidsforholdPanel = ({
                         handleFrilanserChange((event.target as HTMLInputElement).value as JaNei);
                     }}
                 />
+
                 <VerticalSpacer eightPx />
+
                 {!opptjening.frilanser?.jobberFortsattSomFrilans && (
                     <NewDateInput
                         id="frilanser-sluttdato"
@@ -152,7 +154,9 @@ const ArbeidsforholdPanel = ({
                 {soknad.opptjeningAktivitet.frilanser?.jobberFortsattSomFrilans && (
                     <>
                         {arbeidstidInformasjon()}
+
                         <VerticalSpacer eightPx />
+
                         <ArbeidstidKalender
                             nyeSoknadsperioder={soeknadsperiode}
                             eksisterendeSoknadsperioder={eksisterendePerioder}
@@ -796,7 +800,9 @@ const ArbeidsforholdPanel = ({
                     onChange={(e) => handleArbeidsforholdChange(Arbeidsforhold.ARBEIDSTAKER, e.target.checked)}
                     checked={getCheckedValueArbeid(Arbeidsforhold.ARBEIDSTAKER)}
                 />
+
                 <VerticalSpacer eightPx />
+
                 {!!soknad.arbeidstid?.arbeidstakerList?.length && (
                     <Arbeidstakerperioder
                         soknad={soknad}
@@ -808,34 +814,40 @@ const ArbeidsforholdPanel = ({
                         getUhaandterteFeil={getUhaandterteFeil}
                     />
                 )}
+
                 <CheckboksPanel
                     label={intlHelper(intl, Arbeidsforhold.FRILANSER)}
                     value={Arbeidsforhold.FRILANSER}
                     onChange={(e) => handleArbeidsforholdChange(Arbeidsforhold.FRILANSER, e.target.checked)}
                     checked={getCheckedValueArbeid(Arbeidsforhold.FRILANSER)}
                 />
                 <VerticalSpacer eightPx />
+
                 {!!soknad.opptjeningAktivitet.frilanser && (
-                    <Box padding="4" borderWidth="1" borderRadius="small" className="frilanserpanel">
+                    <Box padding="4" borderRadius="small" className="frilanserpanel">
                         {frilanserperioder()}
                     </Box>
                 )}
+
                 <CheckboksPanel
                     label={intlHelper(intl, Arbeidsforhold.SELVSTENDIG)}
                     value={Arbeidsforhold.SELVSTENDIG}
                     onChange={(e) => handleArbeidsforholdChange(Arbeidsforhold.SELVSTENDIG, e.target.checked)}
                     checked={getCheckedValueArbeid(Arbeidsforhold.SELVSTENDIG)}
                 />
+
                 {!!soknad.opptjeningAktivitet.selvstendigNaeringsdrivende && (
                     <>
                         <Alert size="small" variant="info" className="sn-alertstripe">
-                            {intlHelper(intl, 'skjema.sn.info')}
+                            <FormattedMessage id="skjema.sn.info" />
                         </Alert>
-                        <Box padding="4" borderWidth="1" borderRadius="small" className="selvstendigpanel">
+
+                        <Box padding="4" borderRadius="small" className="selvstendigpanel">
                             {selvstendigperioder()}
                         </Box>
                     </>
                 )}
+
                 <UhaanderteFeilmeldinger
                     getFeilmeldinger={() => (getUhaandterteFeil && getUhaandterteFeil('ytelse.arbeidstid')) || []}
                 />

diff --git a/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx b/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx
@@ -1,15 +1,14 @@
-import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
 
-import { Fieldset, Panel } from '@navikt/ds-react';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Fieldset, Box, Button, Heading } from '@navikt/ds-react';
 
 import AddCircleSvg from 'app/assets/SVG/AddCircleSVG';
 import BinSvg from 'app/assets/SVG/BinSVG';
 import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger';
 import { ArbeidsgivereResponse } from 'app/models/types/ArbeidsgivereResponse';
 import Organisasjon from 'app/models/types/Organisasjon';
-import intlHelper from 'app/utils/intlUtils';
 
 import { finnArbeidsgivere } from '../../../api/api';
 import { Arbeidstaker, IPeriode } from '../../../models/types';
@@ -18,7 +17,7 @@ import ArbeidstakerComponent from './ArbeidstakerComponent';
 
 type ItemInfo = any;
 
-interface ArbeidstakerperioderProps {
+interface Props {
     soknad: IPLSSoknad;
     eksisterendeSoknadsperioder: IPeriode[];
     initialArbeidstaker: Arbeidstaker;
@@ -36,9 +35,11 @@ const Arbeidstakerperioder = ({
     updateSoknadState,
     getErrorMessage,
     getUhaandterteFeil,
-}: ArbeidstakerperioderProps): JSX.Element => {
+}: Props): JSX.Element => {
     const intl = useIntl();
+
     const [arbeidsgivere, setArbeidsgivere] = useState<Organisasjon[]>([]);
+
     const { arbeidstid, soekerId } = soknad;
 
     useEffect(() => {
@@ -106,33 +107,36 @@ const Arbeidstakerperioder = ({
     };
 
     return (
-        <Fieldset className="listepaneler">
+        <Fieldset className="listepaneler" legend="" hideLegend>
             {items?.map((currentItem, currentItemIndex) => {
                 const panelid = `arbeidstakerpanel_${currentItemIndex}`;
+
                 const getHarDuplikatOrgnr = () =>
                     items.filter(
                         (item) =>
                             item.organisasjonsnummer && item.organisasjonsnummer === currentItem.organisasjonsnummer,
                     ).length > 1;
+
                 return (
-                    <Panel
+                    <Box
+                        padding="4"
                         className={classNames('listepanel', 'arbeidstakerpanel')}
-                        border={false}
                         id={panelid}
                         key={panelid}
                     >
-                        <Fieldset>
+                        <Fieldset legend="" hideLegend>
                             {itemsWithInitialItem.length > 1 && (
-                                <h2>
+                                <Heading size="small" level="2">
                                     <FormattedMessage
                                         id="skjema.arbeidsforhold.teller"
                                         values={{ indeks: currentItemIndex + 1 }}
                                     />
-                                </h2>
+                                </Heading>
                             )}
+
                             {itemsWithInitialItem.length > 1 && (
                                 <div className="listepanelbunn">
-                                    <button
+                                    <Button
                                         id="slett"
                                         className="fjernlisteelementknapp"
                                         type="button"
@@ -142,10 +146,12 @@ const Arbeidstakerperioder = ({
                                         <div className="slettIcon">
                                             <BinSvg title="fjern" />
                                         </div>
-                                        {intlHelper(intl, 'skjema.arbeid.arbeidstaker.fjernarbeidsgiver')}
-                                    </button>
+
+                                        <FormattedMessage id="skjema.arbeid.arbeidstaker.fjernarbeidsgiver" />
+                                    </Button>
                                 </div>
                             )}
+
                             <ArbeidstakerComponent
                                 søkerId={soknad.soekerId}
                                 arbeidstaker={currentItem as Arbeidstaker}
@@ -164,6 +170,7 @@ const Arbeidstakerperioder = ({
                                 arbeidsgivere={arbeidsgivere}
                                 harDuplikatOrgnr={getHarDuplikatOrgnr()}
                             />
+
                             <UhaanderteFeilmeldinger
                                 getFeilmeldinger={() =>
                                     (getUhaandterteFeil &&
@@ -174,20 +181,19 @@ const Arbeidstakerperioder = ({
                                 }
                             />
                         </Fieldset>
-                    </Panel>
+                    </Box>
                 );
             })}
-            <button
+
+            <Button
                 id="leggtillisteelementknapp"
                 className="leggtillisteelementknapp"
                 type="button"
                 onClick={addItemHandler}
+                icon={<AddCircleSvg title="leggtil" />}
             >
-                <div className="leggtilperiodeIcon">
-                    <AddCircleSvg title="leggtil" />
-                </div>
-                {intlHelper(intl, 'skjema.arbeid.arbeidstaker.leggtilperiode')}
-            </button>
+                <FormattedMessage id="skjema.arbeid.arbeidstaker.leggtilperiode" />
+            </Button>
         </Fieldset>
     );
 };