Rydde litt i shared components (#6909)

* feat: rydder i shared-components Fjerner hjemmesnekret Tooltip Bruker fra ds-react * Bruker EditedIcon fra v2 * Fikser ting og tang * Fikser tester
navikt · Dec 16, 2024 · 3dd0d58 · 3dd0d58
1 parent 93d600c
commit 3dd0d58
Show file tree

Hide file tree

Showing 37 changed files with 83 additions and 273 deletions.
diff --git a/...kta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.spec.tsx b/...kta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.spec.tsx
@@ -2,7 +2,6 @@ import arbeidsforholdHandlingType from '@fpsak-frontend/kodeverk/src/arbeidsforh
 import { intlMock } from '@fpsak-frontend/utils-test/intl-test-helper';
 import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import messages from '../../../i18n/nb_NO.json';
 import PersonArbeidsforholdTable from './PersonArbeidsforholdTable';
 
@@ -174,7 +173,7 @@ describe('<PersonArbeidsforholdTable>', () => {
       { messages },
     );
 
-    expect(screen.getByAltText('PersonArbeidsforholdTable.ErIBruk')).toBeInTheDocument();
+    expect(screen.getByAltText('Arbeidsforhold ok')).toBeInTheDocument();
   });
 
   it('skal vise IngenArbeidsforholdRegistrert komponent når ingen arbeidsforhold', () => {

diff --git a/...es/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.tsx b/...es/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.tsx
@@ -8,7 +8,7 @@ import { arbeidsforholdHarAksjonspunktÅrsak } from '@fpsak-frontend/utils/src/a
 import { KodeverkMedNavn } from '@k9-sak-web/types';
 import ArbeidsforholdV2 from '@k9-sak-web/types/src/arbeidsforholdV2TsType';
 import { BodyShort, Table } from '@navikt/ds-react';
-import React, { Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { FormattedMessage, IntlShape } from 'react-intl';
 import PermisjonerInfo from '../arbeidsforholdDetaljer/PermisjonerInfo';
 import PersonArbeidsforholdDetailForm from '../arbeidsforholdDetaljer/PersonArbeidsforholdDetailForm';
@@ -157,8 +157,8 @@ const PersonArbeidsforholdTable = ({
                     {a.handlingType && a.handlingType.kode === arbeidsforholdHandlingType.BRUK && !harAksjonspunkt && (
                       <Image
                         src={erIBrukImageUrl}
-                        alt={intl.formatMessage({ id: 'PersonArbeidsforholdTable.ErIBruk' })}
-                        tooltip={<FormattedMessage id="PersonArbeidsforholdTable.ErIBruk" />}
+                        alt="Arbeidsforhold ok"
+                        tooltip="Arbeidsforhold ok"
                         tabIndex={0}
                         alignTooltipLeft
                       />

diff --git a/packages/form/src/OptionGrid.tsx b/packages/form/src/OptionGrid.tsx
@@ -1,5 +1,6 @@
-import { EditedIcon, FlexColumn, FlexContainer, FlexRow } from '@fpsak-frontend/shared-components';
+import { FlexColumn, FlexContainer, FlexRow } from '@fpsak-frontend/shared-components';
 import { range } from '@fpsak-frontend/utils';
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import React from 'react';
 import styles from './optionGrid.module.css';
 
@@ -28,7 +29,7 @@ export const OptionGrid = ({
           {range(numRows).map(rowIndex => (
             <FlexRow key={`row${rowIndex}`} spaceBetween={spaceBetween}>
               {options.filter((option, optionIndex) => optionIndex % numRows === rowIndex)}
-              {isEdited && <EditedIcon className="radioEdited" />}
+              {isEdited && <EditedIcon />}
             </FlexRow>
           ))}
         </FlexColumn>
@@ -44,7 +45,7 @@ export const OptionGrid = ({
             {options.filter((option, optionIndex) => optionIndex % numColumns === columnIndex)}
           </FlexColumn>
         ))}
-        {isEdited && <EditedIcon className="radioEdited" />}
+        {isEdited && <EditedIcon />}
       </FlexRow>
     </FlexContainer>
   );

diff --git a/packages/form/src/ReadOnlyField.spec.tsx b/packages/form/src/ReadOnlyField.spec.tsx
@@ -1,7 +1,6 @@
 import { messages } from '@fpsak-frontend/utils-test/intl-test-helper';
 import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import ReadOnlyField from './ReadOnlyField';
 
 describe('ReadOnlyField', () => {
@@ -15,7 +14,7 @@ describe('ReadOnlyField', () => {
   it('skal vise feltverdi som editert', () => {
     renderWithIntl(<ReadOnlyField label="Dette er en test" input={{ value: '123' }} isEdited />, { messages });
 
-    expect(screen.getByAltText('Saksbehandler har endret feltets verdi')).toBeInTheDocument();
+    expect(screen.getByText('Saksbehandler har endret feltets verdi')).toBeInTheDocument();
   });
 
   it('skal ikke vise label når verdi er tom', () => {

diff --git a/packages/form/src/ReadOnlyField.tsx b/packages/form/src/ReadOnlyField.tsx
@@ -1,6 +1,5 @@
-import { EditedIcon } from '@fpsak-frontend/shared-components';
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import { BodyShort } from '@navikt/ds-react';
-import React from 'react';
 import Label from './Label';
 import LabelType from './LabelType';
 import styles from './readOnlyField.module.css';

diff --git a/packages/prosess-aarskvantum-oms/src/components/AktivitetTabell.tsx b/packages/prosess-aarskvantum-oms/src/components/AktivitetTabell.tsx
@@ -297,7 +297,7 @@ const AktivitetTabell = ({
                         <Image
                           className={classNames(styles.starImage)}
                           src={stjerneImg}
-                          tooltip={<FormattedMessage id="Uttaksplan.GjeldendeBehandling" />}
+                          tooltip="Gjeldende behandling"
                         />
                       )}
                       {formatereLukketPeriode(periode)}

diff --git a/packages/prosess-foreldelse/src/components/ForeldelseForm.spec.jsx b/packages/prosess-foreldelse/src/components/ForeldelseForm.spec.jsx
@@ -2,7 +2,6 @@ import foreldelseVurderingType from '@fpsak-frontend/kodeverk/src/foreldelseVurd
 import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
 
-import React from 'react';
 import messages from '../../i18n/nb_NO.json';
 import { ForeldelseForm } from './ForeldelseForm';
 
@@ -87,7 +86,7 @@ describe('<ForeldelseForm>', () => {
       { messages },
     );
 
-    expect(screen.getAllByText('Forrige periode').length).toBeGreaterThan(0);
+    expect(screen.getAllByLabelText('Forrige periode').length).toBeGreaterThan(0);
     expect(screen.queryByText('Foreldelsesloven §§ 2 og 3')).not.toBeInTheDocument();
   });
 

diff --git a/packages/prosess-foreldelse/src/components/splittePerioder/PeriodeController.jsx b/packages/prosess-foreldelse/src/components/splittePerioder/PeriodeController.jsx
@@ -1,15 +1,16 @@
 import { HGrid, Label } from '@navikt/ds-react';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
 import splitPeriodImageUrl from '@fpsak-frontend/assets/images/splitt.svg';
 import splitPeriodImageHoverUrl from '@fpsak-frontend/assets/images/splitt_hover.svg';
-import { EditedIcon, FloatRight, Image } from '@fpsak-frontend/shared-components';
+import { FloatRight, Image } from '@fpsak-frontend/shared-components';
 import { TimeLineButton } from '@fpsak-frontend/tidslinje';
 
 import DelOppPeriodeModal from './DelOppPeriodeModal';
 
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import styles from './periodeController.module.css';
 
 const isEdited = false;

diff --git a/packages/prosess-foreldelse/src/components/splittePerioder/PeriodeController.spec.tsx b/packages/prosess-foreldelse/src/components/splittePerioder/PeriodeController.spec.tsx
@@ -2,7 +2,6 @@ import { intlMock } from '@fpsak-frontend/utils-test/intl-test-helper';
 import { renderWithIntl, renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils';
 import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import messages from '../../../i18n/nb_NO.json';
 import { PeriodeController } from './PeriodeController';
 
@@ -24,8 +23,8 @@ describe('<PeriodeController>', () => {
     );
 
     expect(screen.getByText('Del opp perioden')).toBeInTheDocument();
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 
   it('skal ikke vise knapp for å dele opp perioder når readonly', () => {

diff --git a/packages/prosess-foreldelse/src/components/timeline/TilbakekrevingTimeline.spec.jsx b/packages/prosess-foreldelse/src/components/timeline/TilbakekrevingTimeline.spec.jsx
@@ -1,6 +1,5 @@
 import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import { intlMock } from '../../../i18n';
 import messages from '../../../i18n/nb_NO.json';
 import TilbakekrevingTimeline from './TilbakekrevingTimeline';
@@ -44,7 +43,7 @@ describe('<TilbakekrevingTimeline>', () => {
       { messages },
     );
 
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-foreldelse/src/components/timeline/TilbakekrevingTimelinePanel.spec.jsx b/packages/prosess-foreldelse/src/components/timeline/TilbakekrevingTimelinePanel.spec.jsx
@@ -1,6 +1,5 @@
 import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import messages from '../../../i18n/nb_NO.json';
 import TilbakekrevingTimelinePanel from './TilbakekrevingTimelinePanel';
 
@@ -43,7 +42,7 @@ describe('<TilbakekrevingTimelinePanel>', () => {
       { messages },
     );
 
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-tilbakekreving/src/components/TilbakekrevingForm.spec.tsx b/packages/prosess-tilbakekreving/src/components/TilbakekrevingForm.spec.tsx
@@ -2,7 +2,6 @@ import navBrukerKjonn from '@fpsak-frontend/kodeverk/src/navBrukerKjonn';
 import { reduxFormPropsMock } from '@fpsak-frontend/utils-test/redux-form-test-helper';
 import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import messages from '../../i18n/nb_NO.json';
 import Aktsomhet from '../kodeverk/aktsomhet';
 import VilkarResultat from '../kodeverk/vilkarResultat';
@@ -95,7 +94,7 @@ describe('<TilbakekrevingForm>', () => {
       { messages },
     );
 
-    expect(screen.getByText('Åpne info om første periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Åpne info om første periode')).toBeInTheDocument();
     expect(screen.getByText('Detaljer for valgt periode')).toBeInTheDocument();
     expect(screen.getByText('Vilkårene for tilbakekreving')).toBeInTheDocument();
   });

diff --git a/packages/prosess-tilbakekreving/src/components/splittePerioder/PeriodeController.spec.tsx b/packages/prosess-tilbakekreving/src/components/splittePerioder/PeriodeController.spec.tsx
@@ -2,7 +2,6 @@ import { intlMock } from '@fpsak-frontend/utils-test/intl-test-helper';
 import { renderWithIntl, renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/test-utils';
 import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import messages from '../../../i18n/nb_NO.json';
 import DataForPeriode from '../../types/dataForPeriodeTsType';
 import { PeriodeController } from './PeriodeController';
@@ -25,8 +24,8 @@ describe('<PeriodeController>', () => {
     );
 
     expect(screen.getByText('Del opp perioden')).toBeInTheDocument();
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 
   it('skal ikke vise knapp for å dele opp perioder når readonly', () => {
@@ -46,8 +45,8 @@ describe('<PeriodeController>', () => {
     );
 
     expect(screen.queryByText('Del opp perioden')).not.toBeInTheDocument();
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 
   it('skal splitte periode via modal', async () => {

diff --git a/packages/prosess-tilbakekreving/src/components/splittePerioder/PeriodeController.tsx b/packages/prosess-tilbakekreving/src/components/splittePerioder/PeriodeController.tsx
@@ -1,14 +1,15 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl';
 
 import splitPeriodImageUrl from '@fpsak-frontend/assets/images/splitt.svg';
 import splitPeriodImageHoverUrl from '@fpsak-frontend/assets/images/splitt_hover.svg';
-import { EditedIcon, FloatRight, Image } from '@fpsak-frontend/shared-components';
+import { FloatRight, Image } from '@fpsak-frontend/shared-components';
 import { TimeLineButton } from '@fpsak-frontend/tidslinje';
 import { Button, HGrid, Label } from '@navikt/ds-react';
 import DataForPeriode from '../../types/dataForPeriodeTsType';
 import DelOppPeriodeModal from './DelOppPeriodeModal';
 
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import styles from './periodeController.module.css';
 
 const isEdited = false;

diff --git a/packages/prosess-tilbakekreving/src/components/timeline/TilbakekrevingTimelinePanel.spec.tsx b/packages/prosess-tilbakekreving/src/components/timeline/TilbakekrevingTimelinePanel.spec.tsx
@@ -1,6 +1,5 @@
 import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
 import { screen } from '@testing-library/react';
-import React from 'react';
 import messages from '../../../i18n/nb_NO.json';
 import TilbakekrevingTimelinePanel from './TilbakekrevingTimelinePanel';
 
@@ -43,8 +42,8 @@ describe('<TilbakekrevingTimelinePanel>', () => {
       { messages },
     );
 
-    expect(screen.getByText('Åpne info om første periode')).toBeInTheDocument();
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Åpne info om første periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-tilkjent-ytelse/src/components/TilkjentYtelse.spec.tsx b/packages/prosess-tilkjent-ytelse/src/components/TilkjentYtelse.spec.tsx
@@ -55,7 +55,7 @@ describe('<TilkjentYtelse>', () => {
       />,
     );
 
-    expect(screen.getByText('Forrige periode')).toBeInTheDocument();
-    expect(screen.getByText('Neste periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Forrige periode')).toBeInTheDocument();
+    expect(screen.getByLabelText('Neste periode')).toBeInTheDocument();
   });
 });
diff --git a/...ar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx b/...ar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
@@ -3,13 +3,13 @@ import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'
 import BehandlingType from '@fpsak-frontend/kodeverk/src/behandlingType';
 import {
   AksjonspunktBox,
-  EditedIcon,
   FlexColumn,
   FlexContainer,
   FlexRow,
   Image,
   VerticalSpacer,
 } from '@fpsak-frontend/shared-components';
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
 import { VilkarResultPickerPeriodisertRHF } from '@k9-sak-web/prosess-felles';

diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx
@@ -3,13 +3,13 @@ import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus'
 import BehandlingType from '@fpsak-frontend/kodeverk/src/behandlingType';
 import {
   AksjonspunktBox,
-  EditedIcon,
   FlexColumn,
   FlexContainer,
   FlexRow,
   Image,
   VerticalSpacer,
 } from '@fpsak-frontend/shared-components';
+import { EditedIcon } from '@k9-sak-web/gui/shared/EditedIcon.js';
 import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
 import { VilkarResultPickerRHF } from '@k9-sak-web/prosess-felles';

diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx
@@ -66,12 +66,7 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
           {erUnntaksløype ? getUnntaksløypeText() : ''}
         </Heading>
         <div className={styles.dateContainer}>
-          <Image
-            className={styles.kalenderIcon}
-            src={calendarImg}
-            tooltip={<FormattedMessage id="BehandlingPickerItemContent.Kalender" />}
-            alignTooltipLeft
-          />
+          <Image className={styles.kalenderIcon} src={calendarImg} tooltip="Kalender" alignTooltipLeft />
           {søknadsperioder?.length > 0 && (
             <BodyShort size="small">{getFormattedSøknadserioder(søknadsperioder)}</BodyShort>
           )}
@@ -104,12 +99,7 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
         <BodyShort size="small">
           <FormattedMessage id="BehandlingPickerItemContent.Behandling.Aapne" />
         </BodyShort>
-        <Image
-          className={styles.åpneChevron}
-          src={chevronBlueRightImg}
-          tooltip={<FormattedMessage id="BehandlingPickerItemContent.Behandling.Aapne" />}
-          alignTooltipLeft
-        />
+        <Image className={styles.åpneChevron} src={chevronBlueRightImg} tooltip="Åpne" alignTooltipLeft />
       </div>
     </div>
   </Box>

diff --git a/packages/sak-behandling-velger/src/components/BehandlingSelected.tsx b/packages/sak-behandling-velger/src/components/BehandlingSelected.tsx
@@ -93,12 +93,7 @@ const BehandlingSelected: React.FC<BehandlingSelectedProps> = props => {
         <div>
           {søknadsperioder?.length > 0 && (
             <div className={styles.dateContainer}>
-              <Image
-                className={styles.kalenderIcon}
-                src={calendarImg}
-                tooltip={<FormattedMessage id="BehandlingPickerItemContent.Kalender" />}
-                alignTooltipLeft
-              />
+              <Image className={styles.kalenderIcon} src={calendarImg} tooltip="Kalender" alignTooltipLeft />
               <BodyShort size="small">{getFormattedSøknadserioder(søknadsperioder)}</BodyShort>
             </div>
           )}

diff --git a/packages/sak-behandling-velger/src/components/behandlingVelgerUtils.tsx b/packages/sak-behandling-velger/src/components/behandlingVelgerUtils.tsx
@@ -41,25 +41,11 @@ export const getStatusIcon = (behandlingsresultatTypeKode: string, className: st
   }
 
   if (behandlingsresultatTypeKode === behandlingResultatType.INNVILGET) {
-    return (
-      <Image
-        className={className}
-        src={innvilgetImg}
-        tooltip={<FormattedMessage id="BehandlingPickerItemContent.Behandling.Innvilget" />}
-        alignTooltipLeft
-      />
-    );
+    return <Image className={className} src={innvilgetImg} tooltip="Innvilget" alignTooltipLeft />;
   }
 
   if (behandlingsresultatTypeKode === behandlingResultatType.AVSLATT) {
-    return (
-      <Image
-        className={className}
-        src={avslaattImg}
-        tooltip={<FormattedMessage id="BehandlingPickerItemContent.Behandling.Avslaatt" />}
-        alignTooltipLeft
-      />
-    );
+    return <Image className={className} src={avslaattImg} tooltip="Avslått" alignTooltipLeft />;
   }
 
   return null;

diff --git a/packages/sak-fagsak-profil/i18n/index.js → packages/sak-fagsak-profil/i18n/index.ts b/packages/sak-fagsak-profil/i18n/index.js → packages/sak-fagsak-profil/i18n/index.ts
@@ -1,8 +1,5 @@
-import {
-  intlWithMessages,
-} from '@fpsak-frontend/utils-test/intl-test-helper';
+import { intlWithMessages } from '@fpsak-frontend/utils-test/intl-test-helper';
 
 import messages from './nb_NO.json';
 
-
 export const intlMock = intlWithMessages(messages);