feat(familie-visittkort): bytter ut familie-clipboard med CopyButton …

…fra aksel affects: @navikt/familie-visittkort BREAKING CHANGE: Fungerer kun med aksel v4
navikt · Sep 11, 2023 · 34da840 · 34da840
1 parent 9c48cfb
commit 34da840
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/familie-visittkort/package.json b/packages/familie-visittkort/package.json
@@ -24,22 +24,21 @@
         "tsc": "tsc -p tsconfig.json"
     },
     "dependencies": {
-        "@navikt/familie-clipboard": "^11.0.0",
         "@navikt/familie-ikoner": "^7.0.0",
         "@navikt/familie-typer": "^8.0.0",
         "classnames": "^2.3.2",
         "prop-types": "^15.8.1"
     },
     "devDependencies": {
-        "@navikt/ds-css": "2.x",
-        "@navikt/ds-react": "2.x",
-        "@navikt/ds-tokens": "2.x",
+        "@navikt/ds-css": "4.x",
+        "@navikt/ds-react": "4.x",
+        "@navikt/ds-tokens": "4.x",
         "styled-components": "^5.3.5"
     },
     "peerDependencies": {
-        "@navikt/ds-css": "2.x || 3.x || 4.x",
-        "@navikt/ds-react": "2.x || 3.x || 4.x",
-        "@navikt/ds-tokens": "2.x || 3.x || 4.x",
+        "@navikt/ds-css": "4.x",
+        "@navikt/ds-react": "4.x",
+        "@navikt/ds-tokens": "4.x",
         "react": "^17.x || 18.x",
         "styled-components": "^5.x"
     }

diff --git a/packages/familie-visittkort/src/index.tsx b/packages/familie-visittkort/src/index.tsx
@@ -1,9 +1,8 @@
-import Clipboard from '@navikt/familie-clipboard';
 import { FamilieIkonVelger } from '@navikt/familie-ikoner';
 import { kjønnType } from '@navikt/familie-typer';
 import * as React from 'react';
 import styled from 'styled-components';
-import { BodyShort, Label } from '@navikt/ds-react';
+import { CopyButton, Label } from '@navikt/ds-react';
 import { AGray700, ASpacing2, ASpacing4 } from '@navikt/ds-tokens/dist/tokens';
 
 export interface IkonProps {
@@ -34,6 +33,12 @@ const StyledVisittkort = styled.div`
     }
 `;
 
+const IdentOgKopierKnapp = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+`;
+
 export const Visittkort: React.FunctionComponent<IProps> = ({
     alder,
     children,
@@ -59,9 +64,10 @@ export const Visittkort: React.FunctionComponent<IProps> = ({
 
             <div className={'visittkort__pipe'}>|</div>
 
-            <Clipboard>
-                <BodyShort size={'small'}>{ident}</BodyShort>
-            </Clipboard>
+            <IdentOgKopierKnapp>
+                {ident}
+                <CopyButton copyText={ident} size={'small'} />
+            </IdentOgKopierKnapp>
 
             {children}
         </StyledVisittkort>