From 3dd0d58f149824f219282088c50a7ba62533ec80 Mon Sep 17 00:00:00 2001 From: Hallvard Andreas Stark <57254397+hallvardastark@users.noreply.github.com> Date: Mon, 16 Dec 2024 11:52:16 +0100 Subject: [PATCH] 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 --- .../PersonArbeidsforholdTable.spec.tsx | 3 +- .../PersonArbeidsforholdTable.tsx | 6 +- packages/form/src/OptionGrid.tsx | 7 ++- packages/form/src/ReadOnlyField.spec.tsx | 3 +- packages/form/src/ReadOnlyField.tsx | 3 +- .../src/components/AktivitetTabell.tsx | 2 +- .../src/components/ForeldelseForm.spec.jsx | 3 +- .../splittePerioder/PeriodeController.jsx | 5 +- .../PeriodeController.spec.tsx | 5 +- .../timeline/TilbakekrevingTimeline.spec.jsx | 5 +- .../TilbakekrevingTimelinePanel.spec.jsx | 5 +- .../components/TilbakekrevingForm.spec.tsx | 3 +- .../PeriodeController.spec.tsx | 9 ++- .../splittePerioder/PeriodeController.tsx | 5 +- .../TilbakekrevingTimelinePanel.spec.tsx | 7 +-- .../src/components/TilkjentYtelse.spec.tsx | 4 +- ...rresultatMedOverstyringFormPeriodisert.tsx | 2 +- .../VilkarresultatMedOverstyringForm.tsx | 2 +- .../BehandlingPickerItemContent.tsx | 14 +---- .../src/components/BehandlingSelected.tsx | 7 +-- .../src/components/behandlingVelgerUtils.tsx | 18 +----- .../i18n/{index.js => index.ts} | 5 +- .../src/components/FagsakProfile.spec.tsx | 7 +-- .../src/components/FagsakProfile.tsx | 8 +-- .../VisittkortDetaljerPopup.spec.tsx | 9 ++- .../components/VisittkortDetaljerPopup.tsx | 19 +++--- .../src/components/VisittkortLabels.spec.tsx | 13 ++-- .../src/components/VisittkortLabels.tsx | 13 ++-- .../src/components/VisittkortPanel.spec.tsx | 2 +- packages/shared-components/index.ts | 2 - packages/shared-components/src/EditedIcon.tsx | 29 --------- packages/shared-components/src/Image.tsx | 11 ++-- .../shared-components/src/OkAvbrytModal.tsx | 2 - packages/shared-components/src/Tooltip.tsx | 43 ------------- .../src/editedIcon.module.css | 13 ---- .../shared-components/src/tooltip.module.css | 60 ------------------- packages/v2/gui/src/shared/EditedIcon.tsx | 2 +- 37 files changed, 83 insertions(+), 273 deletions(-) rename packages/sak-fagsak-profil/i18n/{index.js => index.ts} (52%) delete mode 100644 packages/shared-components/src/EditedIcon.tsx delete mode 100644 packages/shared-components/src/Tooltip.tsx delete mode 100644 packages/shared-components/src/editedIcon.module.css delete mode 100644 packages/shared-components/src/tooltip.module.css diff --git a/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.spec.tsx b/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.spec.tsx index cfe9053693..fce5d3a24e 100644 --- a/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.spec.tsx +++ b/packages/fakta-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('', () => { { 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/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.tsx b/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.tsx index a8e0d2273e..e74902e72c 100644 --- a/packages/fakta-arbeidsforhold/src/components/arbeidsforholdTabell/PersonArbeidsforholdTable.tsx +++ b/packages/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 && ( {intl.formatMessage({} + alt="Arbeidsforhold ok" + tooltip="Arbeidsforhold ok" tabIndex={0} alignTooltipLeft /> diff --git a/packages/form/src/OptionGrid.tsx b/packages/form/src/OptionGrid.tsx index 082930364e..3af889865c 100644 --- 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 => ( {options.filter((option, optionIndex) => optionIndex % numRows === rowIndex)} - {isEdited && } + {isEdited && } ))} @@ -44,7 +45,7 @@ export const OptionGrid = ({ {options.filter((option, optionIndex) => optionIndex % numColumns === columnIndex)} ))} - {isEdited && } + {isEdited && } ); diff --git a/packages/form/src/ReadOnlyField.spec.tsx b/packages/form/src/ReadOnlyField.spec.tsx index 4917332909..d4c58c66a7 100644 --- 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(, { 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 index 3ff5c41497..780c8d80ab 100644 --- 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 index 3383488c4f..c61fea1ff0 100644 --- a/packages/prosess-aarskvantum-oms/src/components/AktivitetTabell.tsx +++ b/packages/prosess-aarskvantum-oms/src/components/AktivitetTabell.tsx @@ -297,7 +297,7 @@ const AktivitetTabell = ({ } + 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 index 500f004094..ade2c10fc5 100644 --- 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('', () => { { 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 index a5c4d6218f..b989f9d605 100644 --- 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 index 80f16751c6..5b10489179 100644 --- 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('', () => { ); 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 index dd90431810..bcc09f960e 100644 --- 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('', () => { { 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 index b0095b32fb..52320a5bb5 100644 --- 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('', () => { { 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 index 15fdc0cff7..13113f7283 100644 --- 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('', () => { { 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 index 22e6d8141b..3620608667 100644 --- 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('', () => { ); 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('', () => { ); 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 index 8db5e9ad4c..7a8c1a6fbf 100644 --- 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 index 73421ab29c..f6e92242f7 100644 --- 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('', () => { { 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 index 5d8bf9bf27..ea795a2b0b 100644 --- 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('', () => { />, ); - 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-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx index 9954104f7a..a8fee3d400 100644 --- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx +++ b/packages/prosess-vilkar-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 index 09b6b16db2..9d82b4e22f 100644 --- 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 index 5c370b3b0b..7651e0bdb7 100644 --- 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 = ({ {erUnntaksløype ? getUnntaksløypeText() : ''}
- } - alignTooltipLeft - /> + {søknadsperioder?.length > 0 && ( {getFormattedSøknadserioder(søknadsperioder)} )} @@ -104,12 +99,7 @@ const BehandlingPickerItemContent: React.FC = ({ - } - alignTooltipLeft - /> +
diff --git a/packages/sak-behandling-velger/src/components/BehandlingSelected.tsx b/packages/sak-behandling-velger/src/components/BehandlingSelected.tsx index 2d854a16de..4e61fef79a 100644 --- 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 = props => {
{søknadsperioder?.length > 0 && (
- } - alignTooltipLeft - /> + {getFormattedSøknadserioder(søknadsperioder)}
)} diff --git a/packages/sak-behandling-velger/src/components/behandlingVelgerUtils.tsx b/packages/sak-behandling-velger/src/components/behandlingVelgerUtils.tsx index 0ab6180573..dc3cf1f5d2 100644 --- 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 ( - } - alignTooltipLeft - /> - ); + return ; } if (behandlingsresultatTypeKode === behandlingResultatType.AVSLATT) { - return ( - } - alignTooltipLeft - /> - ); + return ; } return null; diff --git a/packages/sak-fagsak-profil/i18n/index.js b/packages/sak-fagsak-profil/i18n/index.ts similarity index 52% rename from packages/sak-fagsak-profil/i18n/index.js rename to packages/sak-fagsak-profil/i18n/index.ts index 753e8348db..f64c758e34 100644 --- a/packages/sak-fagsak-profil/i18n/index.js +++ b/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); diff --git a/packages/sak-fagsak-profil/src/components/FagsakProfile.spec.tsx b/packages/sak-fagsak-profil/src/components/FagsakProfile.spec.tsx index 5239b42651..0a40ef5693 100644 --- a/packages/sak-fagsak-profil/src/components/FagsakProfile.spec.tsx +++ b/packages/sak-fagsak-profil/src/components/FagsakProfile.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 { intlMock } from '../../i18n/index'; import messages from '../../i18n/nb_NO.json'; import { FagsakProfile } from './FagsakProfile'; @@ -60,7 +59,7 @@ describe('', () => { expect(screen.getByRole('heading', { name: 'Foreldrepenger' })).toBeInTheDocument(); expect(screen.getByText('12345 - Opprettet')).toBeInTheDocument(); - expect(screen.getByText('Dekningsgraden er 100%')).toBeInTheDocument(); + expect(screen.getByLabelText('Dekningsgraden er 100%')).toBeInTheDocument(); }); it('skal ikke vise dekningsgrad for foreldrepenger om den ikke eksisterer', () => { @@ -88,7 +87,7 @@ describe('', () => { expect(screen.getByRole('heading', { name: 'Foreldrepenger' })).toBeInTheDocument(); expect(screen.getByText('12345 - Opprettet')).toBeInTheDocument(); - expect(screen.queryByText(/dekningsgraden/i)).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/dekningsgraden/i)).not.toBeInTheDocument(); }); it('skal ikke vise ugyldig dekningsgrad for foreldrepenger', () => { @@ -117,6 +116,6 @@ describe('', () => { expect(screen.getByRole('heading', { name: 'Foreldrepenger' })).toBeInTheDocument(); expect(screen.getByText('12345 - Opprettet')).toBeInTheDocument(); - expect(screen.queryByText(/dekningsgraden/i)).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/dekningsgraden/i)).not.toBeInTheDocument(); }); }); diff --git a/packages/sak-fagsak-profil/src/components/FagsakProfile.tsx b/packages/sak-fagsak-profil/src/components/FagsakProfile.tsx index a75790a070..7932440213 100644 --- a/packages/sak-fagsak-profil/src/components/FagsakProfile.tsx +++ b/packages/sak-fagsak-profil/src/components/FagsakProfile.tsx @@ -1,8 +1,8 @@ import FagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType'; -import { FlexColumn, FlexContainer, FlexRow, Tooltip, VerticalSpacer } from '@fpsak-frontend/shared-components'; +import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components'; import { KodeverkMedNavn } from '@k9-sak-web/types'; -import { BodyShort, Heading, Tag } from '@navikt/ds-react'; -import React, { ReactNode } from 'react'; +import { BodyShort, Heading, Tag, Tooltip } from '@navikt/ds-react'; +import { ReactNode } from 'react'; import { WrappedComponentProps, injectIntl } from 'react-intl'; const visSakDekningsgrad = (saksKode: string, dekningsgrad?: number): boolean => { @@ -49,7 +49,7 @@ export const FagsakProfile = ({ {`${dekningsgrad}%`} diff --git a/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.spec.tsx b/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.spec.tsx index a4067e08ae..a7e4c10118 100644 --- a/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.spec.tsx +++ b/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.spec.tsx @@ -6,7 +6,6 @@ import region from '@fpsak-frontend/kodeverk/src/region'; import sivilstandType from '@fpsak-frontend/kodeverk/src/sivilstandType'; import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; import { screen } from '@testing-library/dom'; -import React from 'react'; import messages from '../../i18n/nb_NO.json'; import VisittkortDetaljerPopup from './VisittkortDetaljerPopup'; @@ -71,10 +70,10 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Statsborgerskap')).toBeInTheDocument(); - expect(screen.getByText('Personstatus')).toBeInTheDocument(); - expect(screen.getByText('Sivilstand')).toBeInTheDocument(); - expect(screen.getByText('Foretrukket språk')).toBeInTheDocument(); + expect(screen.getByLabelText('Statsborgerskap')).toBeInTheDocument(); + expect(screen.getByLabelText('Personstatus')).toBeInTheDocument(); + expect(screen.getByLabelText('Sivilstand')).toBeInTheDocument(); + expect(screen.getByLabelText('Foretrukket språk')).toBeInTheDocument(); }); it('skal vise adresser', () => { diff --git a/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.tsx b/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.tsx index aa83b37e99..097bfe9279 100644 --- a/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.tsx +++ b/packages/sak-visittkort/src/components/VisittkortDetaljerPopup.tsx @@ -1,10 +1,10 @@ import kodeverkTyper from '@fpsak-frontend/kodeverk/src/kodeverkTyper'; import opplysningAdresseType from '@fpsak-frontend/kodeverk/src/opplysningAdresseType'; -import { FlexColumn, FlexContainer, FlexRow, Tooltip, VerticalSpacer } from '@fpsak-frontend/shared-components'; +import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components'; import { Adresser, getAddresses, getKodeverknavnFn, getLanguageFromSprakkode } from '@fpsak-frontend/utils'; import { Kodeverk, KodeverkMedNavn, Personopplysninger } from '@k9-sak-web/types'; -import { BodyShort, Label, Tag } from '@navikt/ds-react'; -import React, { useMemo } from 'react'; +import { BodyShort, Label, Tag, Tooltip } from '@navikt/ds-react'; +import { useMemo } from 'react'; import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl'; import styles from './visittkortDetaljerPopup.module.css'; @@ -50,7 +50,7 @@ const VisittkortDetaljerPopup = ({ {getKodeverknavn(personopplysninger.region)} @@ -61,7 +61,7 @@ const VisittkortDetaljerPopup = ({ {getKodeverknavn(findPersonStatus(personopplysninger))} @@ -72,7 +72,7 @@ const VisittkortDetaljerPopup = ({ {getKodeverknavn(personopplysninger.sivilstand)} @@ -82,7 +82,7 @@ const VisittkortDetaljerPopup = ({ )} {borMedBarnet && ( - + @@ -90,7 +90,10 @@ const VisittkortDetaljerPopup = ({ )} - + {getLanguageFromSprakkode(sprakkode)} diff --git a/packages/sak-visittkort/src/components/VisittkortLabels.spec.tsx b/packages/sak-visittkort/src/components/VisittkortLabels.spec.tsx index 73d2149045..afad90d82a 100644 --- a/packages/sak-visittkort/src/components/VisittkortLabels.spec.tsx +++ b/packages/sak-visittkort/src/components/VisittkortLabels.spec.tsx @@ -5,7 +5,6 @@ import personstatusType from '@fpsak-frontend/kodeverk/src/personstatusType'; import region from '@fpsak-frontend/kodeverk/src/region'; import sivilstandType from '@fpsak-frontend/kodeverk/src/sivilstandType'; import { renderWithIntl, screen } from '@fpsak-frontend/utils-test/test-utils'; -import React from 'react'; import messages from '../../i18n/nb_NO.json'; import VisittkortLabels from './VisittkortLabels'; @@ -66,7 +65,7 @@ describe('', () => { const { container } = renderWithIntl(, { messages, }); - expect(container.getElementsByClassName('tooltip').length).toBe(0); + expect(container.getElementsByClassName('navds-tag').length).toBe(0); }); it('skal vise etikett for dødsdato', () => { @@ -79,7 +78,7 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Personen er død')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen er død')).toBeInTheDocument(); }); it('skal vise etikett for kode 6', () => { @@ -96,7 +95,7 @@ describe('', () => { { messages }, ); - expect(screen.getByText('Personen har diskresjonsmerking kode 6')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen har diskresjonsmerking kode 6')).toBeInTheDocument(); }); it('skal vise etikett for kode 7', () => { @@ -112,7 +111,7 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Personen har diskresjonsmerking kode 7')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen har diskresjonsmerking kode 7')).toBeInTheDocument(); }); it('skal vise etikett for verge', () => { @@ -125,7 +124,7 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Personen har verge')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen har verge')).toBeInTheDocument(); }); it('skal vise etikett for søker under 18', () => { @@ -138,6 +137,6 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Personen er under 18 år')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen er under 18 år')).toBeInTheDocument(); }); }); diff --git a/packages/sak-visittkort/src/components/VisittkortLabels.tsx b/packages/sak-visittkort/src/components/VisittkortLabels.tsx index b96b8ccce2..dbefba4369 100644 --- a/packages/sak-visittkort/src/components/VisittkortLabels.tsx +++ b/packages/sak-visittkort/src/components/VisittkortLabels.tsx @@ -1,8 +1,7 @@ import diskresjonskodeType from '@fpsak-frontend/kodeverk/src/diskresjonskodeType'; -import { Tooltip } from '@fpsak-frontend/shared-components'; import { formatDate } from '@k9-sak-web/lib/dateUtils/dateUtils.js'; import { Personopplysninger } from '@k9-sak-web/types'; -import { Tag } from '@navikt/ds-react'; +import { Tag, Tooltip } from '@navikt/ds-react'; import moment from 'moment'; import { useMemo } from 'react'; import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl'; @@ -28,7 +27,7 @@ const VisittkortLabels = ({ return ( <> {personopplysninger && personopplysninger.dodsdato && ( - + @@ -37,7 +36,7 @@ const VisittkortLabels = ({ {personopplysninger && personopplysninger.diskresjonskode?.kode === diskresjonskodeType.KODE6 && !personopplysninger.dodsdato && ( - + @@ -46,21 +45,21 @@ const VisittkortLabels = ({ {personopplysninger && personopplysninger.diskresjonskode?.kode === diskresjonskodeType.KODE7 && !personopplysninger.dodsdato && ( - + )} {harVerge && ( - + )} {personopplysninger && erSokerUnder18 && ( - + diff --git a/packages/sak-visittkort/src/components/VisittkortPanel.spec.tsx b/packages/sak-visittkort/src/components/VisittkortPanel.spec.tsx index 2b80b48969..3cfde13cca 100644 --- a/packages/sak-visittkort/src/components/VisittkortPanel.spec.tsx +++ b/packages/sak-visittkort/src/components/VisittkortPanel.spec.tsx @@ -99,7 +99,7 @@ describe('', () => { />, { messages }, ); - expect(screen.getByText('Personen har verge')).toBeInTheDocument(); + expect(screen.getByLabelText('Personen har verge')).toBeInTheDocument(); expect(screen.getByText('Verge')).toBeInTheDocument(); }); diff --git a/packages/shared-components/index.ts b/packages/shared-components/index.ts index f764b02e68..2ee83676e6 100644 --- a/packages/shared-components/index.ts +++ b/packages/shared-components/index.ts @@ -8,7 +8,6 @@ export { default as BorderBox } from './src/BorderBox'; export { default as DataFetchPendingModal } from './src/DataFetchPendingModal'; export { default as DateLabel } from './src/DateLabel'; export { default as Datepicker } from './src/datepicker/Datepicker'; -export { default as EditedIcon } from './src/EditedIcon'; export { default as FadingPanel } from './src/FadingPanel'; export { default as FaktaGruppe } from './src/FaktaGruppe'; export { default as FlexColumn } from './src/flexGrid/FlexColumn'; @@ -29,5 +28,4 @@ export { default as requireProps } from './src/requireProps'; export { default as Tidslinje } from './src/tidslinje/Tidslinje'; export { default as TidslinjeZoom } from './src/tidslinje/TidslinjeZoom'; export { default as TimeLabel } from './src/TimeLabel'; -export { default as Tooltip } from './src/Tooltip'; export { default as VerticalSpacer } from './src/VerticalSpacer'; diff --git a/packages/shared-components/src/EditedIcon.tsx b/packages/shared-components/src/EditedIcon.tsx deleted file mode 100644 index c395785632..0000000000 --- a/packages/shared-components/src/EditedIcon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import endretFelt from '@fpsak-frontend/assets/images/endret_felt.svg'; -import classnames from 'classnames/bind'; -import Image from './Image'; - -import styles from './editedIcon.module.css'; - -const classNames = classnames.bind(styles); - -interface OwnProps { - className?: string; -} - -/* - * EditedIcon - * - * Komponent/Ikon som viser om noe i GUI er endret. - */ - -const EditedIcon = ({ className = '' }: OwnProps) => ( - - Saksbehandler har endret feltets verdi - -); - -export default EditedIcon; diff --git a/packages/shared-components/src/Image.tsx b/packages/shared-components/src/Image.tsx index a37c5d7e58..e498bd9f05 100644 --- a/packages/shared-components/src/Image.tsx +++ b/packages/shared-components/src/Image.tsx @@ -1,6 +1,5 @@ -import React, { useState, useCallback, ReactNode, KeyboardEvent, MouseEvent } from 'react'; - -import Tooltip from './Tooltip'; +import { Tooltip } from '@navikt/ds-react'; +import { KeyboardEvent, MouseEvent, useCallback, useState } from 'react'; interface OwnProps { className?: string; @@ -11,7 +10,7 @@ interface OwnProps { onClick?: (event: MouseEvent) => void; alt?: string; tabIndex?: number; - tooltip?: string | ReactNode; + tooltip?: string; alignTooltipLeft?: boolean; } @@ -67,12 +66,12 @@ const Image = ({ /> ); - if (!tooltip) { + if (tooltip === undefined) { return image; } return ( - + {image} ); diff --git a/packages/shared-components/src/OkAvbrytModal.tsx b/packages/shared-components/src/OkAvbrytModal.tsx index 2850788ece..72e742a91e 100644 --- a/packages/shared-components/src/OkAvbrytModal.tsx +++ b/packages/shared-components/src/OkAvbrytModal.tsx @@ -1,5 +1,4 @@ import { BodyShort, Button, Modal } from '@navikt/ds-react'; -import React from 'react'; import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl'; import FlexColumn from './flexGrid/FlexColumn'; import FlexContainer from './flexGrid/FlexContainer'; @@ -38,7 +37,6 @@ const OkAvbrytModal = ({ {text || } - {/* */} diff --git a/packages/shared-components/src/Tooltip.tsx b/packages/shared-components/src/Tooltip.tsx deleted file mode 100644 index c2072d91c0..0000000000 --- a/packages/shared-components/src/Tooltip.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import classnames from 'classnames/bind'; -import React, { ReactNode } from 'react'; - -import styles from './tooltip.module.css'; - -const classNames = classnames.bind(styles); - -interface OwnProps { - children: ReactNode | string; - content: ReactNode | string; - alignLeft?: boolean; - alignRight?: boolean; - alignTop?: boolean; - alignBottom?: boolean; -} - -/** - * Tooltip - */ -const Tooltip = ({ - children, - content, - alignRight = false, - alignLeft = false, - alignTop = false, - alignBottom = false, -}: OwnProps) => ( -
- - {content} - - {children} -
-); - -export default Tooltip; diff --git a/packages/shared-components/src/editedIcon.module.css b/packages/shared-components/src/editedIcon.module.css deleted file mode 100644 index 94d252754d..0000000000 --- a/packages/shared-components/src/editedIcon.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.editedIcon { - display: inline-block; - vertical-align: text-bottom; -} - -.editedIcon img { - height: 24px; - width: 25px; -} - -.radioEdited { - margin-left: 4px; -} diff --git a/packages/shared-components/src/tooltip.module.css b/packages/shared-components/src/tooltip.module.css deleted file mode 100644 index 11d07bdc9e..0000000000 --- a/packages/shared-components/src/tooltip.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.tooltip { - display: inline-block; - position: relative; -} - -/* Tooltip text */ -.tooltip .tooltiptext { - background-color: #fff2e0; - border-radius: 4px; - box-shadow: 0 1px 2px 0 #a0a0a0; - color: #262626; - font-family: 'Source Sans Pro', Arial, sans-serif; - font-size: 0.875rem; - font-weight: 400; - max-width: 200px; - opacity: 0; - padding: 2px 8px 0; - pointer-events: none; - position: absolute; - text-align: center; - width: max-content; - z-index: 1; -} - -.left { - bottom: auto; - right: 110%; - top: -5px; -} - -.top { - bottom: 125%; -} - -.right { - left: 110%; - top: -5px; -} - -.bottom { - top: 135%; -} - -/* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext { - animation-delay: 0.4s; - animation-duration: 0.1s; - animation-fill-mode: forwards; - animation-name: showTooltip; -} - -@keyframes showTooltip { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} diff --git a/packages/v2/gui/src/shared/EditedIcon.tsx b/packages/v2/gui/src/shared/EditedIcon.tsx index 29b619562b..bfe5f2371e 100644 --- a/packages/v2/gui/src/shared/EditedIcon.tsx +++ b/packages/v2/gui/src/shared/EditedIcon.tsx @@ -1,5 +1,5 @@ import { PersonPencilFillIcon } from '@navikt/aksel-icons'; export const EditedIcon = () => ( - + );