Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.12

@navikt/ds-css/baseline/baseline.css

@@ -6,7 +6,7 @@
 @import "print.css";
 @import "utility.css";
 
-html {
+html:focus-within {
   scroll-behavior: smooth;
 }
 

@navikt/ds-css/copy-to-clipboard.css

@@ -0,0 +1,10 @@
+.navds-copy-to-clipboard {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5em;
+  padding: 0.25em;
+}
+
+.navds-copy-to-clipboard__popover {
+  padding: 0.25rem;
+}

@navikt/ds-css/index.css

@@ -5,6 +5,7 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
+@import "copy-to-clipboard.css";
 @import "grid.css";
 @import "internal-header.css";
 @import "layouts.css";

@navikt/ds-css/modal.css

@@ -22,7 +22,7 @@
 }
 
 .navds-modal__overlay {
-  position: absolute;
+  position: fixed;
   z-index: var(--navds-z-index-modal-overlay);
   top: 0;
   bottom: 0;

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -37,6 +37,7 @@
     "@navikt/ds-icons": "^0.2.1",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.12.1",

@navikt/ds-react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -0,0 +1,81 @@
+import { Files } from "@navikt/ds-icons";
+import copy from "copy-to-clipboard";
+import cl from "classnames";
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import { Popover, Button } from "../index";
+
+export interface CopyToClipboardProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Text to be copied to clipboard
+   */
+  text: string;
+  /**
+   * Description of text, examples: "personnummer", "navn", "epost" etc.
+   */
+  label: string;
+  /**
+   * Use a differnet icon to display
+   * @default "Files" from @navikt/ds-icons
+   */
+  icon?: React.ReactElement;
+}
+
+const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
+  ({ children, text, label, icon, className, ...rest }, ref) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const mergedRef = mergeRefs([buttonRef, ref]);
+    const timeoutRef = useRef<NodeJS.Timeout>();
+    const [openPopover, setOpenPopover] = useState(false);
+
+    useEffect(() => {
+      if (openPopover) {
+        timeoutRef.current = setTimeout(() => setOpenPopover(false), 2000);
+        return () => timeoutRef.current && clearTimeout(timeoutRef.current);
+      }
+    }, [openPopover]);
+
+    const title = `Kopier ${label} (${text})`;
+
+    const handleClick = () => {
+      copy(text);
+      setOpenPopover(true);
+    };
+
+    return (
+      <>
+        <Button
+          ref={mergedRef}
+          variant="secondary"
+          title={title}
+          className={cl("navds-copy-to-clipboard", className)}
+          onClick={handleClick}
+          {...rest}
+        >
+          {icon ? <>{icon}</> : <Files aria-label="Fil ikon for kopiering" />}
+          {children ? children : <span className="sr-only">{title}</span>}
+        </Button>
+        <Popover
+          role="alert"
+          anchorEl={buttonRef.current}
+          open={openPopover}
+          onClose={() => setOpenPopover(false)}
+          placement="auto"
+          arrow={false}
+          className="navds-copy-to-clipboard__popover"
+        >
+          {label} er kopiert
+        </Popover>
+      </>
+    );
+  }
+);
+
+export default CopyToClipboard;

@navikt/ds-react/src/copy-to-clipboard/index.ts

@@ -0,0 +1,2 @@
+export { default as CopyToClipboard } from "./CopyToClipboard";
+export * from "./CopyToClipboard";

@navikt/ds-react/src/copy-to-clipboard/src/CopyToClipboard.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react";
+import { Files } from "@navikt/ds-icons";
+import "@navikt/ds-css/baseline/utility.css";
+import "./style.css";
+
+export interface CopyToClipboardProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  /** Verdi som skal kopieres */
+  value: string;
+  /** Beskrivelse av verdien, feks "personnummer", "navn", "epost" etc. */
+  label: string;
+}
+
+const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
+  (props, ref) => {
+    const { value, label, className, ...rest } = props;
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    const [showSuccess, setShowSuccess] = useState(false);
+
+    useEffect(() => {
+      const timeout = setTimeout(() => setShowSuccess(false), 3000);
+      return () => clearTimeout(timeout);
+    }, [showSuccess]);
+
+    const copyToClipboard = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      textAreaRef.current?.select();
+      document.execCommand("copy");
+      setShowSuccess(true);
+    };
+
+    const title = `Kopier ${label} (${value})`;
+
+    return (
+      <span className={`${className} navds-copyToClipboard-wrapper`}>
+        <button
+          ref={ref}
+          title={title}
+          {...rest}
+          className="navds-copyToClipboard-button"
+          onClick={copyToClipboard}
+        >
+          <Files />
+          <span className="sr-only">{title}</span>
+        </button>
+        {showSuccess && (
+          <span role="alert" className="navds-copyToClipboard-success">
+            {label} er kopiert
+          </span>
+        )}
+        <textarea
+          className="sr-only"
+          tabIndex={-1}
+          aria-hidden={true}
+          ref={textAreaRef}
+          value={value}
+          readOnly
+        />
+      </span>
+    );
+  }
+);
+
+export default CopyToClipboard;

@navikt/ds-react/src/copy-to-clipboard/src/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as CopyToClipboard,
+  CopyToClipboardProps,
+} from "./CopyToClipboard";

@navikt/ds-react/src/copy-to-clipboard/src/style.css

@@ -0,0 +1,48 @@
+.navds-copyToClipboard-button {
+  display: inline-flex;
+  margin-bottom: -0.35em;
+  padding: 0.35em;
+  border-radius: 0.2em;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.navds-copyToClipboard-button:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-copyToClipboard-button:hover {
+  background-color: var(--navds-color-gray-10);
+}
+
+.navds-copyToClipboard-button:active {
+  opacity: 0.5;
+}
+
+.navds-copyToClipboard-button svg {
+  width: 1em;
+  color: var(--navds-color-text-primary);
+  stroke-width: 1.4;
+}
+
+.navds-copyToClipboard-success {
+  position: absolute;
+  left: 0;
+  top: 1.3em;
+  padding: 0.25em 0.75em;
+  background-color: white;
+  box-shadow: 0 0.1em 0.2em var(--navds-color-gray-60);
+  border: 0.1em solid var(--navds-color-gray-60);
+  border-radius: 0.25em;
+  white-space: nowrap;
+}
+
+.navds-copyToClipboard-success::first-letter {
+  text-transform: uppercase;
+}
+
+.navds-copyToClipboard-wrapper {
+  position: relative;
+}

@navikt/ds-react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { CopyToClipboard } from "../index";
+import { Link } from "@navikt/ds-icons";
+
+export default {
+  title: "@ds-react/copy-to-clipboard",
+  component: CopyToClipboard,
+};
+
+export const All = () => {
+  const label = "pi";
+
+  const text = "3.14159265359";
+  return (
+    <div>
+      <h2>Fritstående knapp</h2>
+      <CopyToClipboard label={label} text={text} />
+
+      <h2>Sammen med tekst</h2>
+      <CopyToClipboard label={label} text={text}>
+        Kopier tekst
+      </CopyToClipboard>
+
+      <h2>Tilpasser seg fontstørrelse</h2>
+      <CopyToClipboard label={label} text={text} style={{ fontSize: "0.8rem" }}>
+        Kopier tekst
+      </CopyToClipboard>
+
+      <h2>Custom icon</h2>
+      <CopyToClipboard
+        icon={<Link />}
+        label={label}
+        text={text}
+        style={{ fontSize: "0.8rem" }}
+      >
+        Kopier tekst
+      </CopyToClipboard>
+    </div>
+  );
+};

@navikt/ds-react/src/index.ts

@@ -16,6 +16,7 @@ export {
   ContentContainerProps,
 } from "./content-container/index";
 export { Cell, CellProps, Grid, GridProps } from "./grid/index";
+export { CopyToClipboard } from "./copy-to-clipboard/index";
 export {
   InternalHeader,
   InternalHeaderProps,

CONTRIBUTING.md

@@ -7,6 +7,8 @@ slik at mest mulig av fremtidige moduler er å finne her og fungerer etter de be
 
 ## TL;DR
 
+Vi bruker yarn pga yarn workspaces. Har du ikke yarn? `npm i -g yarn`
+
 ```sh
 git clone git@github.com:navikt/nav-frontend-moduler.git
 cd nav-frontend-moduler

docs/styles/globals.css

@@ -3,7 +3,6 @@ body {
   padding: 0;
   margin: 0;
   background-color: var(--bg-primary);
-  scroll-behavior: smooth;
 }
 
 * {

packages/nav-frontend-ekspanderbartpanel-style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-ekspanderbartpanel-style",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "src/index.less",
   "license": "MIT",
   "files": [

packages/nav-frontend-ekspanderbartpanel-style/src/index.less

@@ -88,14 +88,4 @@
       .chevron-orientasjon-mixin(opp);
     }
   }
-
-  &:hover {
-    &.ekspanderbartPanel--apen {
-      box-shadow: none;
-
-      .ekspanderbartPanel__hode {
-        box-shadow: none;
-      }
-    }
-  }
 }

packages/nav-frontend-ekspanderbartpanel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-ekspanderbartpanel",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "main": "lib/index.js",
   "license": "MIT",
   "types": "lib/index.d.ts",
@@ -29,7 +29,7 @@
     "@types/react": "15.0.23 || ^16.0.0",
     "@types/react-collapse": "^5.0.0",
     "classnames": "^2.2.5",
-    "nav-frontend-ekspanderbartpanel-style": "^1.1.1",
+    "nav-frontend-ekspanderbartpanel-style": "^1.1.2",
     "nav-frontend-js-utils": "^1.0.17",
     "react": "^16.8.0 || ^17.0.0",
     "react-collapse": "^5.0.0"

yarn.lock

@@ -7971,6 +7971,11 @@ copy-props@^2.0.1:
     each-props "^1.3.2"
     is-plain-object "^5.0.0"
 
+copy-text-to-clipboard@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
+  integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
+
 copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"