Merge pull request #997 from navikt/oppdater_fargekategori-_og_huskel…

…appikoner

Nye fargekategori- og huskelappikoner + filtreringslabels

.git-blame-ignore-revs

@@ -1,2 +1,4 @@
 # Kjøre Prettier på alle filer
+8ed50b379b762c95cef16dd93359f4205de6f07c
+c76c0a83b81d958400a9cd3cf865e5e459f53f1d
 0591ee0c2bd1e3e3e12011f18daae3cb4f452733

.gitignore

@@ -5,6 +5,7 @@ tekster-built/
 *.iml
 *.ipr
 *.iws
+.hintrc
 
 **/node_modules/
 

src/components/barinput/bar.css

@@ -2,108 +2,22 @@
 .barinput-radio {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 5px;
-}
-.barinput-checkbox__input,
-.barinput-radio__input {
-    margin-right: 1rem;
-    align-self: center;
-    transform: scale(1.5);
-}
-.barinput-checkbox .arbeidslisteikon__svg,
-.barinput-radio .arbeidslisteikon__svg {
-    margin-right: 0.5rem;
-}
-.barlabel {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 2px;
-}
-.barlabel__labeltext {
-    width: 100%;
-    padding-right: 0.5rem;
-    cursor: pointer;
-    display: inline-flex;
     align-items: center;
+    margin-bottom: var(--a-spacing-1);
 }
-.barlabel__labeltext:hover {
-    color: #0067c5;
-}
-.barlabel__barwrapper {
+.barinput-checkbox .navds-checkbox__label,
+.barinput-checkbox .navds-checkbox__label-text {
     display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-basis: 45%;
-    flex-shrink: 0;
-    flex-grow: 0;
+    gap: 0.5rem;
 }
-.barlabel__barwrapper .arbeidsliste {
-    flex-basis: 3rem;
-    display: inline-flex;
-    height: 2rem;
+.barinput-checkbox .navds-checkbox__label svg {
+    vertical-align: middle;
 }
 .barlabel__antall {
-    flex-basis: 3rem;
-    text-align: right;
-    align-self: center;
     padding-right: 0.5rem;
-    font-weight: 800;
-    margin-top: -0.3rem;
-}
-.barlabel__bar {
-    position: relative;
-    height: 1rem;
-    flex-grow: 1;
-}
-.barlabel__bartrack {
-    display: block;
-    background-color: #f1f1f1;
-    height: 12px;
-    border-radius: 1rem;
-    width: 100%;
-}
-.barlabel__barface {
-    position: absolute;
-    display: block;
-    background-color: #7cdaf8;
-    height: 12px;
-    border-radius: 1rem;
-    transition: width cubic-bezier(0.4, 0, 0.2, 1) 1337ms;
-    left: 0;
-    top: 0;
-}
-.barlabel.ufordeltebrukere .barlabel__barface {
-    background-color: #8269a2;
-}
-.barlabel.venterPaSvarFraNAV .barlabel__barface {
-    background-color: #8269a2;
-}
-.barlabel.venterPaSvarFraBruker .barlabel__barface {
-    background-color: #c1cb33;
-}
-.barlabel.avtaltMoteMedNav .barlabel__barface {
-    background-color: #00243a;
-}
-.barlabel.utlopteAktiviteter .barlabel__barface {
-    background-color: #6a6a6a;
-}
-.barlabel.ikkeIAvtaltAktivitet .barlabel__barface {
-    background-color: #6a6a6a;
-}
-.barlabel.iAvtaltAktivitet .barlabel__barface {
-    background-color: #3380a5;
-}
-.barlabel.inaktiveBrukere .barlabel__barface {
-    background-color: #6a6a6a;
-}
-.barlabel.minArbeidsliste .barlabel__barface {
-    background-color: #6a6a6a;
 }
 .forsteBarlabelIGruppe {
     padding-top: 1rem;
     border-top: 1px solid #6a6a6a;
     margin-top: 1rem;
 }
-.barlabel__barwrapper {
-    flex: none;
-}

src/components/barinput/barinput-checkbox.tsx

@@ -1,6 +1,6 @@
 import React, {ChangeEventHandler} from 'react';
-import './bar.css';
 import {Checkbox, Label} from '@navikt/ds-react';
+import './bar.css';
 
 interface BarInputCheckboxProps {
     antall?: number;
@@ -24,14 +24,14 @@ function BarInputCheckbox({
     return (
         <div className="barinput-checkbox">
             <Checkbox
-                data-testid={`filter_checkboks-container_${filterNavn}`}
-                name="ferdigfilter"
+                size="small"
                 id={filterNavn}
                 value={filterVerdi}
+                name="ferdigfilter"
                 onChange={handleChange}
                 checked={checked}
-                size="small"
                 indeterminate={indeterminate}
+                data-testid={`filter_checkboks-container_${filterNavn}`}
             >
                 {labelTekst}
             </Checkbox>

src/components/fargekategori/fargekategori-ikon-mapper.tsx

@@ -1,17 +1,17 @@
 import {FargekategoriModell} from '../../model-interfaces';
-import {ReactComponent as FargekategoriIkonBlattBokmerke} from '../ikoner/fargekategorier/Fargekategoriikon_blatt_bokmerke.svg';
+import {ReactComponent as FargekategoriIkonBlaHalvsirkel} from '../ikoner/fargekategorier/Fargekategoriikon_bla_halvsirkel.svg';
 import {ReactComponent as FargekategoriIkonGronnTrekant} from '../ikoner/fargekategorier/Fargekategoriikon_gronn_trekant.svg';
 import {ReactComponent as FargekategoriIkonGulSirkel} from '../ikoner/fargekategorier/Fargekategoriikon_gul_sirkel.svg';
 import {ReactComponent as FargekategoriIkonLillaFirkant} from '../ikoner/fargekategorier/Fargekategoriikon_lilla_firkant.svg';
 import {ReactComponent as FargekategoriIkonLyseblaFemkant} from '../ikoner/fargekategorier/Fargekategoriikon_lysebla_femkant.svg';
-import {ReactComponent as FargekategoriIkonOransjeDiamant} from '../ikoner/fargekategorier/Fargekategoriikon_oransje_diamant_v2.svg';
-import {ReactComponent as FargekategoriIkonTomtBokmerke} from '../ikoner/fargekategorier/Fargekategoriikon_ingen_kategori.svg';
+import {ReactComponent as FargekategoriIkonOransjeDiamant} from '../ikoner/fargekategorier/Fargekategoriikon_oransje_diamant.svg';
+import {ReactComponent as FargekategoriIkonTomtBokmerke} from '../ikoner/fargekategorier/Fargekategoriikon_bokmerke_stiplet.svg';
 import React from 'react';
 
 const fargekategoriIkonMapper = (fargekategori: FargekategoriModell | null, ikonClassName: string = '') => {
     switch (fargekategori) {
         case FargekategoriModell.FARGEKATEGORI_A:
-            return <FargekategoriIkonBlattBokmerke className={ikonClassName} />;
+            return <FargekategoriIkonBlaHalvsirkel className={ikonClassName} />;
         case FargekategoriModell.FARGEKATEGORI_B:
             return <FargekategoriIkonGronnTrekant className={ikonClassName} />;
         case FargekategoriModell.FARGEKATEGORI_C: