Endrer ikon og justererer alignment i inngangsvilkår (#6653)

* Endrer ikon og justererer alignment i inngangsvilkår * Fiks test * Endrer ikon og justererer alignment flere steder
navikt · Oct 2, 2024 · 39c0de7 · 39c0de7
1 parent cdffeb6
commit 39c0de7
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 85 deletions.
diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
@@ -1,18 +1,16 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import {
+  hent847Text,
+  opptjeningMidlertidigInaktivKoder,
+} from '@fpsak-frontend/prosess-vilkar-opptjening-oms/src/components/VilkarField';
+import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components';
 import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { Aksjonspunkt, Vilkarperiode } from '@k9-sak-web/types';
-import { KeyHorizontalIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './vilkarresultatMedOverstyringForm.module.css';
-import {
-  hent847Text,
-  opptjeningMidlertidigInaktivKoder,
-} from '@fpsak-frontend/prosess-vilkar-opptjening-oms/src/components/VilkarField';
 
 const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
   aksjonspunktCodes.some(code => code === aksjonspunktCode);
@@ -78,25 +76,25 @@ const VilkarresultatMedOverstyringHeader = ({
   return (
     <>
       <FlexContainer>
-        <FlexRow>
+        <HStack gap="4">
           {!erOverstyrt && erVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={erVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
+            <>
+              {erVilkarOk ? (
+                <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+              ) : (
+                <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+              )}
+            </>
           )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
+          <Heading size="small" level="2">
+            <FormattedMessage id={panelTittelKode} />
+          </Heading>
           {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </FlexRow>
+        </HStack>
         <FlexRow>
           <FlexColumn>
             <VerticalSpacer eightPx />

diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
@@ -4,7 +4,7 @@ import { decodeHtmlEntity, initializeDate } from '@fpsak-frontend/utils';
 import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
 import { Periode, SubmitCallback } from '@k9-sak-web/types';
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
-import { Button, Label } from '@navikt/ds-react';
+import { Button, HStack, Label } from '@navikt/ds-react';
 import { Form } from '@navikt/ft-form-hooks';
 import { AksjonspunktDto, KravDokumentStatus } from '@navikt/k9-sak-typescript-client';
 import { Dayjs } from 'dayjs';
@@ -260,7 +260,7 @@ export const SoknadsfristVilkarForm = ({
                 </Label>
               </div>
               <div className="mt-4" />
-              <div className="flex gap-4">
+              <HStack gap="4">
                 <OverstyrBekreftKnappPanel
                   disabled={!formMethods.formState.isValid}
                   submitting={formMethods.formState.isSubmitting}
@@ -277,11 +277,11 @@ export const SoknadsfristVilkarForm = ({
                 >
                   Avbryt
                 </Button>
-              </div>
+              </HStack>
             </>
           )}
           {(harÅpentAksjonspunkt || editForm) && !erOverstyrt && (
-            <div className="flex gap-4">
+            <HStack gap="4">
               <Button
                 variant="primary"
                 size="small"
@@ -304,7 +304,7 @@ export const SoknadsfristVilkarForm = ({
                   Avbryt
                 </Button>
               )}
-            </div>
+            </HStack>
           )}
         </AksjonspunktBox>
       )}

diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx
@@ -20,6 +20,7 @@ describe('<SoknadsfristVilkarHeader>', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Søknadsfrist' })).toBeInTheDocument();
-    expect(screen.getByText('§23')).toBeInTheDocument();
+    expect(screen.getByText('§')).toBeInTheDocument();
+    expect(screen.getByText('23')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx
@@ -1,6 +1,7 @@
 import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { AksjonspunktDto } from '@navikt/k9-sak-typescript-client';
 import { SetStateAction } from 'react';
 import styles from './SoknadsfristVilkarForm.module.css';
@@ -60,27 +61,25 @@ const SoknadsfristVilkarHeader = ({
   return (
     <>
       <>
-        <div className="flex">
+        <HStack gap="4">
           {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <div className="px-2">
+            <>
               {originalErVilkarOk ? (
                 <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
               ) : (
                 <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
               )}
-            </div>
+            </>
           )}
-          <div className="px-2">
-            <Heading size="small" level="2">
-              {panelTittelKode}
-            </Heading>
-          </div>
+          <Heading size="small" level="2">
+            {panelTittelKode}
+          </Heading>
           {lovReferanse && (
-            <div className="px-2">
-              <Detail className={styles.vilkar}>{lovReferanse}</Detail>
-            </div>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </div>
+        </HStack>
         <div className="flex">
           <div className="px-2">
             <div className="mt-2" />

diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx
@@ -23,7 +23,7 @@ import { DokumentStatus } from '@k9-sak-web/types';
 import { BodyShort } from '@navikt/ds-react';
 import { AssessedBy } from '@navikt/ft-plattform-komponenter';
 import moment from 'moment';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { formatDate } from '../utils';

diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
@@ -1,11 +1,9 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components';
 import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { Aksjonspunkt } from '@k9-sak-web/types';
-import { KeyHorizontalIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
@@ -63,25 +61,25 @@ const SoknadsfristVilkarHeader = ({
   return (
     <>
       <FlexContainer>
-        <FlexRow>
+        <HStack gap="4">
           {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
+            <>
+              {originalErVilkarOk ? (
+                <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+              ) : (
+                <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+              )}
+            </>
           )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
+          <Heading size="small" level="2">
+            <FormattedMessage id={panelTittelKode} />
+          </Heading>
           {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </FlexRow>
+        </HStack>
         <FlexRow>
           <FlexColumn>
             <VerticalSpacer eightPx />

diff --git a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
@@ -1,21 +1,19 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { FlexColumn, FlexContainer } from '@fpsak-frontend/shared-components/index';
-import Image from '@fpsak-frontend/shared-components/src/Image';
 import VerticalSpacer from '@fpsak-frontend/shared-components/src/VerticalSpacer';
 import FlexRow from '@fpsak-frontend/shared-components/src/flexGrid/FlexRow';
 import { dateFormat } from '@fpsak-frontend/utils';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode';
-import { Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SideMenu } from '@navikt/ft-plattform-komponenter';
 import classNames from 'classnames/bind';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
-import { FormattedMessage, RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
+import { createIntl, createIntlCache, FormattedMessage, RawIntlProvider } from 'react-intl';
 import messages from '../i18n/nb_NO.json';
 import styles from './sykdomProsessIndex.module.css';
-import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 const cx = classNames.bind(styles);
 
@@ -94,23 +92,23 @@ const SykdomProsessIndex = ({ perioder, panelTittelKode, lovReferanse }: SykdomP
         )}
         <div className={styles.contentContainer}>
           <FlexContainer>
-            <FlexRow>
+            <HStack gap="4">
               {erVilkarOk !== undefined && (
-                <FlexColumn>
-                  <Image className={styles.status} src={erVilkarOk ? innvilgetImage : avslattImage} />
-                </FlexColumn>
+                <>
+                  {erVilkarOk ? (
+                    <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+                  ) : (
+                    <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+                  )}
+                </>
               )}
-              <FlexColumn>
-                <Heading size="small" level="2">
-                  <FormattedMessage id={panelTittelKode} />
-                </Heading>
-              </FlexColumn>
-              <FlexColumn>
-                <Detail className={styles.vilkar}>
-                  <Lovreferanse>{lovReferanseTekst}</Lovreferanse>
-                </Detail>
-              </FlexColumn>
-            </FlexRow>
+              <Heading size="small" level="2">
+                <FormattedMessage id={panelTittelKode} />
+              </Heading>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanseTekst}</Lovreferanse>
+              </Detail>
+            </HStack>
             <FlexRow>
               <FlexColumn>
                 <VerticalSpacer eightPx />