From 421a94bc607bde0e2b394ee44294be05d061dafc Mon Sep 17 00:00:00 2001
From: Klara M Helgemo <klara.margrethe.helgemo@nav.no>
Date: Tue, 23 Aug 2022 11:54:03 +0200
Subject: [PATCH] =?UTF-8?q?TC-140=20Legg=20til=20kopiknapp=20p=C3=A5=20fnr?=
 =?UTF-8?q?=20(#710)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* TC-140 Legg til kopiknapp på fnr

* package-lock.json i usynk

* Ta i bruk DS CopyToClipboard

* Ta i bruk DS CopyToClipboard. Blå knapp
---
 src/components/tabell/brukerfnr.tsx     |  3 +++
 src/enhetsportefolje/brukerliste.css    |  8 ++++++++
 src/enhetsportefolje/enhet-kolonner.tsx |  2 +-
 src/style.css                           | 12 ++++++------
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/tabell/brukerfnr.tsx b/src/components/tabell/brukerfnr.tsx
index 22c1ac3b4..b41eef95b 100755
--- a/src/components/tabell/brukerfnr.tsx
+++ b/src/components/tabell/brukerfnr.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {BrukerModell} from '../../model-interfaces';
 import {BodyShort} from '@navikt/ds-react';
+import { CopyToClipboard } from "@navikt/ds-react-internal";
 
 interface BrukerFnrProps {
     className?: string;
@@ -11,6 +12,8 @@ function BrukerFnr({className, bruker}: BrukerFnrProps) {
     return (
         <BodyShort size="small" className={className}>
             {bruker.fnr}
+            {bruker.fnr &&
+              <CopyToClipboard copyText={bruker.fnr} popoverText="Kopiert" size="xsmall" />}
         </BodyShort>
     );
 }
diff --git a/src/enhetsportefolje/brukerliste.css b/src/enhetsportefolje/brukerliste.css
index 60f17b61d..a0a496009 100644
--- a/src/enhetsportefolje/brukerliste.css
+++ b/src/enhetsportefolje/brukerliste.css
@@ -118,6 +118,14 @@
     font-style: italic;
     border: none;
 }
+.veilarbportefoljeflatefs .fnr-kolonne {
+    display: flex;
+    align-items: center;
+}
+.veilarbportefoljeflatefs .fnr-kolonne svg {
+    height: 1rem;
+    width: 1rem;
+}
 .veilarbportefoljeflatefs .valgt-sortering {
     font-weight: bold;
 }
diff --git a/src/enhetsportefolje/enhet-kolonner.tsx b/src/enhetsportefolje/enhet-kolonner.tsx
index 0a6f05ac4..172cab1ae 100755
--- a/src/enhetsportefolje/enhet-kolonner.tsx
+++ b/src/enhetsportefolje/enhet-kolonner.tsx
@@ -84,7 +84,7 @@ function EnhetKolonner({className, bruker, enhetId, filtervalg, valgteKolonner,
     return (
         <div className={className}>
             <BrukerNavn className="col col-xs-2" bruker={bruker} enhetId={enhetId} />
-            <BrukerFnr className="col col-xs-2" bruker={bruker} />
+            <BrukerFnr className="col col-xs-2 fnr-kolonne" bruker={bruker} />
             <TekstKolonne
                 className="col col-xs-2"
                 tekst={bruker.foedeland ? capitalize(bruker.foedeland) : '-'}
diff --git a/src/style.css b/src/style.css
index 46a4f3736..82e31a866 100644
--- a/src/style.css
+++ b/src/style.css
@@ -614,12 +614,12 @@ body .invisible {
     visibility: hidden;
 }
 body .text-hide {
-  font: 0px/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-  position: absolute;
+    font: 0px/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
 }
 body .ustilet {
     margin: 0;