Merge pull request #1 from navikt/FO-2772

Fo 2772

Author: matiasvinjevoll

package-lock.json

@@ -44,6 +44,8 @@
     "lodash.throttle": "^4.1.1",
     "nav-frontend-alertstriper": "^3.0.11",
     "nav-frontend-alertstriper-style": "^2.0.9",
+    "nav-frontend-chevron": "^1.0.10",
+    "nav-frontend-chevron-style": "^0.3.5",
     "nav-frontend-core": "^4.0.11",
     "nav-frontend-etiketter": "^1.0.30",
     "nav-frontend-etiketter-style": "^0.3.19",
@@ -59,7 +61,7 @@
     "nav-frontend-typografi": "^2.0.17",
     "nav-frontend-typografi-style": "^1.0.18",
     "prop-types": "^15.7.2",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
     "react-dom": "^16.11.0",
     "react-scripts": "3.0.1",
     "react-select": "^3.0.8",

package.json

@@ -4,4 +4,16 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
+
+  &__icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 0.25rem;
+    margin-bottom: -1px;
+  }
+
+  .etikett {
+    border-radius: 4px;
+    background-color: #cce1f3;
+  }
 }

src/components/filter-etiketter/etikett/filter-etikett.less

@@ -1,7 +1,8 @@
 import React from 'react';
 import { EtikettInfo } from 'nav-frontend-etiketter';
-import './filter-etikett.less';
 import { OnRemoveClicked } from '../filter-etiketter';
+import xIcon from './x.svg';
+import './filter-etikett.less';
 
 interface FilterEtikettProps {
     id: string;
@@ -14,7 +15,9 @@ export const FilterEtikett = (props: FilterEtikettProps) => {
 
     return (
         <button className="filter-etikett" onClick={() => onRemoveClicked(id)}>
-            <EtikettInfo>{tekst}</EtikettInfo>
+            <EtikettInfo>
+                {tekst} <img className="filter-etikett__icon" src={xIcon} alt="Fjern etikett" />
+            </EtikettInfo>
         </button>
     );
 };