Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.18
 - @navikt/ds-react@0.6.14
 - @navikt/ds-tokens@0.4.4

@navikt/ds-css/form/checkbox.css

@@ -83,7 +83,7 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-image: var(--navds-checkmark-image-white);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 75%;
@@ -93,7 +93,7 @@
 
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
   background-color: white;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-image: var(--navds-checkmark-image-blue);
 }
 
 .navds-checkbox--error

@navikt/ds-css/form/confirmation-panel.css

@@ -0,0 +1,68 @@
+.navds-confirmation-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4);
+  border-radius: 4px;
+  background-color: #ffeccc;
+  transition: background-color linear 100ms;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--s {
+  padding: var(--navds-spacing-3);
+  gap: var(--navds-spacing-2);
+}
+
+.navds-confirmation-panel--checked {
+  background-color: #ccf1d6;
+  border-color: #ccf1d6;
+}
+
+.navds-confirmation-panel--error {
+  background-color: #f3e3e3;
+  border: 1px solid transparent;
+}
+
+.navds-confirmation-panel--checked
+  > .navds-confirmation-panel__content
+  .navds-link:not(:focus) {
+  color: var(--navds-color-darkgray);
+}
+
+.navds-confirmation-panel
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  text-decoration: underline;
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label {
+  color: var(--navds-color-darkgray);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input
+  + .navds-checkbox__label::before {
+  transition: none;
+  background-color: var(--navds-color-green-50);
+  border-color: var(--navds-color-green-50);
+  background-image: var(--navds-checkmark-image-white);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:hover
+  + .navds-checkbox__label::before {
+  background-color: var(--navds-color-green-70);
+  border-color: var(--navds-color-green-70);
+}
+
+.navds-confirmation-panel--checked
+  .navds-checkbox__input:focus:hover
+  + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+}

@navikt/ds-css/form/index.css

@@ -6,6 +6,7 @@
 @import "error-summary.css";
 @import "checkbox.css";
 @import "checkbox-group.css";
+@import "confirmation-panel.css";
 @import "error-message.css";
 @import "radio.css";
 @import "radio-group.css";

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.4.3",
+    "@navikt/ds-tokens": "^0.4.4",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.7",
     "postcss-cli": "^8.3.1",

@navikt/ds-react/package.json

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

@navikt/ds-react/src/form/ConfirmationPanel.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { BodyLong, Checkbox, CheckboxProps } from "../index";
+
+export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
+  /**
+   * children
+   */
+  children?: React.ReactNode;
+  /**
+   * Checkbox label
+   */
+  label: string;
+  /**
+   * Checked state for checkbox
+   */
+  checked: boolean;
+}
+
+const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
+  ({ className, children, label, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-confirmation-panel", className, {
+          "navds-confirmation-panel--s": props.size === "s",
+          "navds-confirmation-panel--error": !!props.error,
+          "navds-confirmation-panel--checked": !!props.checked,
+        })}
+      >
+        {children && (
+          <BodyLong
+            size={props.size}
+            className="navds-confirmation-panel__content"
+          >
+            {children}
+          </BodyLong>
+        )}
+        <Checkbox {...props}>{label}</Checkbox>
+      </div>
+    );
+  }
+);
+
+export default ConfirmationPanel;

@navikt/ds-react/src/form/checkbox/Checkbox.tsx

@@ -3,8 +3,7 @@ import cl from "classnames";
 import useCheckbox from "./useCheckbox";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
-import { BodyShort } from "../../index";
-import { omit } from "../../index";
+import { BodyShort, omit } from "../../index";
 
 export interface CheckboxProps
   extends FormFieldProps,

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

@@ -19,3 +19,7 @@ export {
 } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
+export {
+  default as ConfirmationPanel,
+  ConfirmationPanelProps,
+} from "./ConfirmationPanel";

@navikt/ds-react/src/form/stories/confirmation-panel.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { ConfirmationPanelExample } from "./live-examples";
+
+<Meta title="ds-react/form/confirmation-panel/intro" />
+
+# Hvordan ta i bruk ConfirmationPanel
+
+```jsx
+<ConfirmationPanel
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+  label="Checkbox label text"
+>
+  Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
+  ut mollit voluptate exercitation nulla mollit.
+</ConfirmationPanel>
+```
+
+<Canvas>
+  <ConfirmationPanelExample />
+</Canvas>
+
+## Størrelser
+
+Kommer i størrelsene "m" og "s".
+
+```jsx
+<ConfirmationPanel
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+  label="Checkbox label text"
+  size="s"
+>
+  Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
+  ut mollit voluptate exercitation nulla mollit.
+</ConfirmationPanel>
+```
+
+<Canvas>
+  <ConfirmationPanelExample size="s" />
+</Canvas>
+
+## Errors
+
+```jsx
+<ConfirmationPanel
+  checked={checked}
+  onChange={() => setChecked(!checked)}
+  label="Checkbox label text"
+  error="Laborum enim esse quis"
+>
+  Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia minim
+  ut mollit voluptate exercitation nulla mollit.
+</ConfirmationPanel>
+```
+
+<Canvas>
+  <ConfirmationPanelExample error="Laborum enim esse quis" />
+</Canvas>

@navikt/ds-react/src/form/stories/confirmation-panel.stories.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { ConfirmationPanel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Link } from "../..";
+export default {
+  title: "ds-react/form/confirmation-panel",
+  component: ConfirmationPanel,
+} as Meta;
+
+export const All = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <h1>ConfirmationPanel</h1>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+      >
+        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
+        minim ut mollit voluptate exercitation nulla mollit.
+      </ConfirmationPanel>
+      <h2>size s</h2>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+        size="s"
+      >
+        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
+        minim ut mollit voluptate exercitation nulla mollit.
+      </ConfirmationPanel>
+      <h3>error</h3>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+        error="Ex cupidatat do do do"
+      >
+        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
+        minim ut mollit voluptate exercitation nulla mollit.
+      </ConfirmationPanel>
+      <h3>error small</h3>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+        error="Ex cupidatat do do do"
+        size="s"
+      >
+        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
+        minim ut mollit voluptate exercitation nulla mollit.
+      </ConfirmationPanel>
+      <h2>Empty</h2>
+      <ConfirmationPanel
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+        label="Checkbox label text"
+      ></ConfirmationPanel>
+    </div>
+  );
+};

@navikt/ds-react/src/form/stories/live-examples.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { ConfirmationPanel } from "..";
+import { Link } from "../..";
+
+export const ConfirmationPanelExample = ({
+  size = "m",
+  error,
+}: {
+  size: "m" | "s";
+  error?: string;
+}) => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <ConfirmationPanel
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label="Checkbox label text"
+      size={size}
+      error={error}
+    >
+      Ipsum voluptate pariatur <Link href="#123">demolink</Link> anim officia
+      minim ut mollit voluptate exercitation nulla mollit.
+    </ConfirmationPanel>
+  );
+};

@navikt/ds-tokens/package.json

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

@navikt/ds-tokens/src/index.js

@@ -217,5 +217,17 @@ module.exports = {
         }),
         {}
       ),
+    checkmark: {
+      image: {
+        white: {
+          value:
+            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
+        },
+        blue: {
+          value:
+            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
+        },
+      },
+    },
   },
 };