Merge pull request #1057 from navikt/bytt-ut-ikon-fra-ds-icons

Bytt ut dei siste ikona frå @navikt/ds-icons

package.json

@@ -46,7 +46,6 @@
         "@grafana/faro-web-sdk": "1.7.2",
         "@navikt/aksel-icons": "5.17.0",
         "@navikt/ds-css": "5.17.0",
-        "@navikt/ds-icons": "3.4.3",
         "@navikt/ds-react": "5.17.0",
         "@navikt/fnrvalidator": "^1.1.3",
         "@navikt/navspa": "5.0.1",

src/components/endringslogg/endringslogg-content.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {EndringsloggEntryWithSeenStatus} from './utils/endringslogg-custom';
 import './endringslogg.css';
 import BlockContent from '@sanity/block-content-to-react';
-import {TourModalButton} from './modal/tour-modal/tour-modal-button';
+import {TourModalButton} from './tour-modal/tour-modal-button';
 import {trackLinkClick} from './utils/utils';
 import {Heading, Label} from '@navikt/ds-react';
 import {EndringsloggLink} from './endringslogg-link';

src/components/endringslogg/index.tsx

@@ -9,7 +9,7 @@ import {
     trackSessionDuration
 } from './utils/utils';
 import {useTimer} from './hooks/use-timer';
-import TourModal from './modal/tour-modal/tour-modal';
+import TourModal from './tour-modal/tour-modal';
 import {StilType} from './icons/endringslogg-icon';
 
 const DEFAULT_MAX_ENTRIES = 50;

src/components/endringslogg/modal/tour-modal/tour-modal-button.tsx → src/components/endringslogg/tour-modal/tour-modal-button.tsx

@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 import {default as TourModal} from './tour-modal';
-import '../../endringslogg.css';
-import {trackModalOpen} from '../../utils/utils';
+import '../endringslogg.css';
+import {trackModalOpen} from '../utils/utils';
 import {Button} from '@navikt/ds-react';
-import {ModalType} from '../../utils/endringslogg-custom';
+import {ModalType} from '../utils/endringslogg-custom';
 
 interface ModalStepperProps {
     modal: ModalType;

src/components/endringslogg/modal/tour-modal/tour-modal.tsx → src/components/endringslogg/tour-modal/tour-modal.tsx

@@ -1,10 +1,10 @@
-import {default as React, useState} from 'react';
+import React, {useState} from 'react';
 import BlockContent from '@sanity/block-content-to-react';
 import {Button, Heading, Modal} from '@navikt/ds-react';
 import {ArrowLeftIcon, ArrowRightIcon} from '@navikt/aksel-icons';
+import Stegviser from '../stegviser/stegviser';
+import {ModalType} from '../utils/endringslogg-custom';
 import './tour-modal.css';
-import Stegviser from '../../stegviser/stegviser';
-import {ModalType} from '../../utils/endringslogg-custom';
 
 interface TourModalProps {
     modal: ModalType;
@@ -55,15 +55,6 @@ const TourModal = ({modal, open, onClose}: TourModalProps) => {
                                 alt={step.altText}
                                 src={`data:image/jpeg;base64,${step.slideImage}`}
                                 className={'tour-modal__main--bilde'}
-                                onClick={() => {
-                                    const data = `data:image/png;base64,${step.slideImage}`;
-                                    const newWindow = window.open('about:blank');
-                                    const image = new Image();
-                                    image.src = data;
-                                    setTimeout(() => {
-                                        newWindow?.document?.write(image.outerHTML);
-                                    }, 0);
-                                }}
                             />
                         )}
                     </div>

src/components/toolbar/legg-til-arbeidsliste-knapp.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation, useParams} from 'react-router';
 import {Button} from '@navikt/ds-react';
-import {Bookmark} from '@navikt/ds-icons';
+import {BookmarkIcon} from '@navikt/aksel-icons';
 import {VIS_ARBEIDSLISTE_MODAL, visArbeidslisteModal} from '../../ducks/modal';
 import {AppState} from '../../reducer';
 import {useIdentSelector} from '../../hooks/redux/use-innlogget-ident';
@@ -55,7 +55,7 @@ function ArbeidslisteKnapp() {
                 size="small"
                 variant="tertiary"
                 className="toolbar_btn"
-                icon={<Bookmark className="toolbar-knapp__ikon" id="arbeidsliste-svg" />}
+                icon={<BookmarkIcon aria-hidden={true} fontSize="1.5rem" />}
                 iconPosition="left"
                 onClick={klikk}
                 data-testid={

src/components/toolbar/toolbar.css

@@ -168,10 +168,6 @@
 .veilarbportefoljeflatefs .toolbar .toggle__label {
     min-width: 3rem;
 }
-.veilarbportefoljeflatefs .toolbar-knapp__ikon {
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-}
 .veilarbportefoljeflatefs .toolbar__element {
     display: flex;
     flex-direction: row;

src/components/toolbar/toolbar.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {useSelector} from 'react-redux';
 import classNames from 'classnames';
-import {AddPerson, Search} from '@navikt/ds-icons';
 import {Alert, Heading} from '@navikt/ds-react';
+import {MagnifyingGlassIcon, PersonPlusIcon} from '@navikt/aksel-icons';
 import Paginering from './paginering/paginering';
 import {OversiktType} from '../../ducks/ui/listevisning';
 import ArbeidslisteKnapp from './legg-til-arbeidsliste-knapp';
@@ -65,7 +65,7 @@ function Toolbar({
                             aktiv
                             tildelveileder={false}
                             testid="sok-veileder_knapp"
-                            ikon={<Search className="toolbar-knapp__ikon" id="sok-veileder-ikon" />}
+                            ikon={<MagnifyingGlassIcon aria-hidden={true} fontSize="1.5rem" />}
                             oversiktType={oversiktType}
                         />
                     </div>
@@ -104,7 +104,7 @@ function Toolbar({
                                 aktiv={aktiv}
                                 tildelveileder
                                 testid="tildel-veileder_knapp"
-                                ikon={<AddPerson className="toolbar-knapp__ikon" id="tildel-veileder-ikon" />}
+                                ikon={<PersonPlusIcon aria-hidden={true} fontSize="1.5rem" />}
                                 oversiktType={oversiktType}
                             />
                         </div>

src/components/toolbar/velg-kolonner.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {Button} from '@navikt/ds-react';
-import {Table} from '@navikt/ds-icons';
+import {TableIcon} from '@navikt/aksel-icons';
 import {useFocus} from '../../hooks/use-focus';
 import Listevisning from './listevisning/listevisning';
 import {OversiktType} from '../../ducks/ui/listevisning';
@@ -42,7 +42,7 @@ function VelgKolonner({oversiktType}: VelgKolonnerProps) {
                 variant="tertiary"
                 type="button"
                 className="toolbar_btn"
-                icon={<Table className="toolbar-knapp__ikon" id="velg-kolonner-ikon" />}
+                icon={<TableIcon aria-hidden={true} fontSize="1.5rem" />}
                 onClick={toggleVelgKolonner}
                 title="Velg synlige kolonner i tabellen"
                 data-testid="dropdown-knapp_velg-kolonner"

src/filtrering/filtrering-mine-filter/toggle-switch/toggle-switch.css

@@ -25,8 +25,8 @@
     content: '';
     height: 1.216rem;
     width: 1.216rem;
-    left: 4px;
-    bottom: 3px;
+    left: 0.25rem;
+    bottom: 0.2rem;
     background-color: white;
     -webkit-transition: 0.4s;
     transition: 0.4s;
@@ -63,16 +63,14 @@
 }
 .toggle-switch-las__apen {
     position: absolute;
-    top: 0.25rem;
-    left: 0.4rem;
-    bottom: 0.192rem;
+    top: 0.2rem;
+    left: 0.25rem;
     visibility: hidden;
 }
 .toggle-switch-las__lukked {
     position: absolute;
-    top: 0.25rem;
-    left: 1.537rem;
-    bottom: 0.192rem;
+    top: 0.2rem;
+    right: 0.25rem;
     visibility: hidden;
 }
 .toggle-input:checked ~ .toggle-switch-las__apen {

src/filtrering/filtrering-mine-filter/toggle-switch/toggle-switch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import {PadlockLockedIcon, PadlockUnlockedIcon} from '@navikt/aksel-icons';
 import './toggle-switch.css';
-import {Locked, Unlocked} from '@navikt/ds-icons';
 
 interface ToggleSwitchProps {
     onChange: () => void;
@@ -22,10 +22,10 @@ function ToggleSwitch({onChange, defaultChecked, checked, ariaLabel}: ToggleSwit
             />
             <span className="switch-slider" />
             <div className="toggle-switch-las__lukked">
-                <Locked />
+                <PadlockLockedIcon title="Rekkefølge er låst" fontSize="1.2rem" />
             </div>
             <div className="toggle-switch-las__apen">
-                <Unlocked />
+                <PadlockUnlockedIcon title="Rekkefølge er ulåst" fontSize="1.2rem" />
             </div>
             <div className="toggle-switch-border" />
         </label>