Lerna versionbump [ci skip]

- @navikt/ds-css@0.16.16
 - @navikt/ds-tailwind@0.1.9
 - @navikt/ds-tokens@0.8.7
 - @navikt/ds-react-internal@0.12.21

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.16.15",
+  "version": "0.16.16",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.6",
+    "@navikt/ds-tokens": "^0.8.7",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
@@ -23,7 +23,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.6",
+    "@navikt/ds-tokens": "^0.8.7",
     "@types/jest": "^27.0.1",
     "jest": "^27.2.0",
     "lodash": "^4.17.21",

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",

@navikt/core/tokens/stories/border-radius.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Border-radius",
+} as Meta;
+
+export const BorderRadius = () => {
+  const allRadius: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsBorderRadius") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allRadius).sort(
+      (a, b) => Number(a[1].replace("px", "")) - Number(b[1].replace("px", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            width: 600,
+            height: 40,
+            backgroundColor: "thistle",
+            borderRadius: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/colors.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Colors",
+} as Meta;
+
+export const Global = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("GlobalColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Semantic = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("SemanticColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/shadows.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Shadows",
+} as Meta;
+
+export const Shadows = () => {
+  const allShadows: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsShadow") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap" style={{ gap: "4rem" }}>
+      {Object.entries(allShadows).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            height: 40,
+            width: 600,
+            boxShadow: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/spacing.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Spacing",
+} as Meta;
+
+export const Spacing = () => {
+  const allSpacing: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsSpacing") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allSpacing).sort(
+      (a, b) =>
+        Number(a[0].replace("NavdsSpacing", "")) -
+        Number(b[0].replace("NavdsSpacing", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div>
+          {key}
+          <div
+            key={key}
+            style={{
+              width: val,
+              height: 40,
+              backgroundColor: "thistle",
+              display: "flex",
+              alignItems: "center",
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "esModuleInterop": true,
     "resolveJsonModule": true
-  }
+  },
+  "include": ["./stories"]
 }

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.12.20",
+  "version": "0.12.21",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",

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

@@ -16,7 +16,7 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
    */
   copyText: string;
   /**
-   * Description of text, examples: "personnummer", "navn", "epost" etc.
+   * Description of text. Example: "Kopierte personnummer til clipboard"
    */
   popoverText: string;
   /**
@@ -24,6 +24,11 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
    * @default "right"
    */
   popoverPlacement?: Placement;
+  /**
+   * Copy button title attribute
+   * @default `Kopier ${copyText}`
+   */
+  title?: string;
 }
 
 const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
@@ -35,6 +40,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
       className,
       size = "medium",
       popoverPlacement = "right",
+      title,
       ...rest
     },
     ref
@@ -53,8 +59,6 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
       };
     }, [openPopover]);
 
-    const title = `Kopier ${copyText}`;
-
     const handleClick = () => {
       copy(copyText);
       setOpenPopover(true);
@@ -65,14 +69,12 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
         <Button
           ref={mergedRef}
           variant="secondary"
-          title={title}
           className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
           {...rest}
         >
-          <Copy title="Fil ikon for kopiering" />
-          {children ? children : <span className="navds-sr-only">{title}</span>}
+          <Copy title={title ?? `Kopier ${copyText}`} />
         </Button>
         <Popover
           role="alert"

README.md

@@ -23,12 +23,12 @@
 Repoet inneholder følgende:
 
 - [Felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/)
-- [Storybook](https://5f801fb2aea7820022de2936-nmhtupciwh.chromatic.com/) for komponenter.
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/) for komponenter.
 - [Gammel dokumentasjon](https://old-design-nav.vercel.app) for komponenter.
 
 ## Dokumentasjon
 
-[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/verktoykassen)
+[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/aksel-website)
 
 ## Endringslogg