@navikt/ds-react 0.18.4 → 0.18.5

package/_docs.json

@@ -707,44 +707,61 @@
           "name": "ReactNode"
         }
       },
-      "className": {
+      "error": {
         "defaultValue": null,
-        "description": "",
-        "name": "className",
+        "description": "Error message for element",
+        "name": "error",
         "parent": {
-          "fileName": "nav-frontend-moduler/node_modules/@types/react/index.d.ts",
-          "name": "HTMLAttributes"
+          "fileName": "src/form/ConfirmationPanel.tsx",
+          "name": "ConfirmationPanelProps"
         },
         "declarations": [
           {
-            "fileName": "nav-frontend-moduler/node_modules/@types/react/index.d.ts",
-            "name": "HTMLAttributes"
+            "fileName": "src/form/ConfirmationPanel.tsx",
+            "name": "ConfirmationPanelProps"
           }
         ],
         "required": false,
         "type": {
-          "name": "string"
+          "name": "ReactNode"
         }
       },
-      "error": {
-        "defaultValue": {
-          "value": "false"
+      "errorId": {
+        "defaultValue": null,
+        "description": "Override internal errorId",
+        "name": "errorId",
+        "parent": {
+          "fileName": "src/form/ConfirmationPanel.tsx",
+          "name": "ConfirmationPanelProps"
         },
-        "description": "Adds error indication on checkbox",
-        "name": "error",
+        "declarations": [
+          {
+            "fileName": "src/form/ConfirmationPanel.tsx",
+            "name": "ConfirmationPanelProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
         "parent": {
-          "fileName": "react/src/form/checkbox/Checkbox.tsx",
-          "name": "CheckboxProps"
+          "fileName": "nav-frontend-moduler/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
         },
         "declarations": [
           {
-            "fileName": "react/src/form/checkbox/Checkbox.tsx",
-            "name": "CheckboxProps"
+            "fileName": "nav-frontend-moduler/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
           }
         ],
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string"
         }
       },
       "size": {

package/cjs/form/ConfirmationPanel.js

@@ -41,14 +41,19 @@ exports.ConfirmationPanel = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("..");
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const useFormField_1 = require("./useFormField");
 exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
-    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)("navds-confirmation-panel", className, {
-            "navds-confirmation-panel--small": props.size === "small",
-            "navds-confirmation-panel--error": !!props.error,
+    const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmationPanel");
+    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)("navds-confirmation-panel", "navds-form-field", className, {
+            "navds-confirmation-panel--small": size === "small",
+            "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
         }) },
-        children && (react_1.default.createElement(__1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content" }, children)),
-        react_1.default.createElement(__1.Checkbox, Object.assign({}, props), label)));
+        react_1.default.createElement("div", { className: "navds-confirmation-panel__inner" },
+            children && (react_1.default.createElement(__1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content" }, children)),
+            react_1.default.createElement(__1.Checkbox, Object.assign({}, props, inputProps, { error: hasError, size: size }), label)),
+        react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
 });
 exports.default = exports.ConfirmationPanel;

package/esm/form/ConfirmationPanel.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { CheckboxProps } from "..";
-export interface ConfirmationPanelProps extends Omit<CheckboxProps, "children" | "indeterminate" | "hideLabel"> {
+export interface ConfirmationPanelProps extends Omit<CheckboxProps, "children" | "indeterminate" | "hideLabel" | "error"> {
     /**
      * Additional information on panel
      */
@@ -9,6 +9,14 @@ export interface ConfirmationPanelProps extends Omit<CheckboxProps, "children" |
      * Checkbox label
      */
     label: React.ReactNode;
+    /**
+     * Error message for element
+     */
+    error?: React.ReactNode;
+    /**
+     * Override internal errorId
+     */
+    errorId?: string;
 }
 export declare const ConfirmationPanel: React.ForwardRefExoticComponent<ConfirmationPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default ConfirmationPanel;

package/esm/form/ConfirmationPanel.js

@@ -12,15 +12,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { useFormField } from "./useFormField";
 export const ConfirmationPanel = forwardRef((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
-    return (React.createElement("div", { ref: ref, className: cl("navds-confirmation-panel", className, {
-            "navds-confirmation-panel--small": props.size === "small",
-            "navds-confirmation-panel--error": !!props.error,
+    const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(props, "confirmationPanel");
+    return (React.createElement("div", { ref: ref, className: cl("navds-confirmation-panel", "navds-form-field", className, {
+            "navds-confirmation-panel--small": size === "small",
+            "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
         }) },
-        children && (React.createElement(BodyLong, { size: props.size, className: "navds-confirmation-panel__content" }, children)),
-        React.createElement(Checkbox, Object.assign({}, props), label)));
+        React.createElement("div", { className: "navds-confirmation-panel__inner" },
+            children && (React.createElement(BodyLong, { size: props.size, className: "navds-confirmation-panel__content" }, children)),
+            React.createElement(Checkbox, Object.assign({}, props, inputProps, { error: hasError, size: size }), label)),
+        React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, props.error))));
 });
 export default ConfirmationPanel;
 //# sourceMappingURL=ConfirmationPanel.js.map

package/esm/form/ConfirmationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../src/form/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB,MAAM,IAAI,CAAC;AAcvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,EAAE;YACnD,iCAAiC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;YACzD,iCAAiC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK;YAChD,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC;QAED,QAAQ,IAAI,CACX,oBAAC,QAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,IAE5C,QAAQ,CACA,CACZ;QACD,oBAAC,QAAQ,oBAAK,KAAK,GAAG,KAAK,CAAY,CACnC,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../src/form/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB,MAAM,IAAI,CAAC;AACvD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAyB9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CACxE,KAAK,EACL,mBAAmB,CACpB,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,SAAS,EAAE;YACvE,iCAAiC,EAAE,IAAI,KAAK,OAAO;YACnD,iCAAiC,EAAE,QAAQ;YAC3C,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC;QAEF,6BAAK,SAAS,EAAC,iCAAiC;YAC7C,QAAQ,IAAI,CACX,oBAAC,QAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,IAE5C,QAAQ,CACA,CACZ;YACD,oBAAC,QAAQ,oBAAK,KAAK,EAAM,UAAU,IAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAC7D,KAAK,CACG,CACP;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACnE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.18.4",
+  "version": "0.18.5",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -74,5 +74,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "ce0e15166d8523300a5a2a99eabb04c748078893"
+  "gitHead": "7fb0ac1e3de0ea6e17bc436ea75c389ae236ac65"
 }

package/src/form/ConfirmationPanel.tsx

@@ -1,9 +1,14 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox, CheckboxProps } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { useFormField } from "./useFormField";
 
 export interface ConfirmationPanelProps
-  extends Omit<CheckboxProps, "children" | "indeterminate" | "hideLabel"> {
+  extends Omit<
+    CheckboxProps,
+    "children" | "indeterminate" | "hideLabel" | "error"
+  > {
   /**
    * Additional information on panel
    */
@@ -12,30 +17,50 @@ export interface ConfirmationPanelProps
    * Checkbox label
    */
   label: React.ReactNode;
+  /**
+   * Error message for element
+   */
+  error?: React.ReactNode;
+  /**
+   * Override internal errorId
+   */
+  errorId?: string;
 }
 
 export const ConfirmationPanel = forwardRef<
   HTMLDivElement,
   ConfirmationPanelProps
 >(({ className, children, label, ...props }, ref) => {
+  const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
+    props,
+    "confirmationPanel"
+  );
+
   return (
     <div
       ref={ref}
-      className={cl("navds-confirmation-panel", className, {
-        "navds-confirmation-panel--small": props.size === "small",
-        "navds-confirmation-panel--error": !!props.error,
+      className={cl("navds-confirmation-panel", "navds-form-field", className, {
+        "navds-confirmation-panel--small": size === "small",
+        "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
     >
-      {children && (
-        <BodyLong
-          size={props.size}
-          className="navds-confirmation-panel__content"
-        >
-          {children}
-        </BodyLong>
-      )}
-      <Checkbox {...props}>{label}</Checkbox>
+      <div className="navds-confirmation-panel__inner">
+        {children && (
+          <BodyLong
+            size={props.size}
+            className="navds-confirmation-panel__content"
+          >
+            {children}
+          </BodyLong>
+        )}
+        <Checkbox {...props} {...inputProps} error={hasError} size={size}>
+          {label}
+        </Checkbox>
+      </div>
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
     </div>
   );
 });