@navikt/ds-react 0.18.4 → 0.18.7

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.7",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.11",
+    "@navikt/ds-icons": "^0.8.13",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -74,5 +74,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "ce0e15166d8523300a5a2a99eabb04c748078893"
+  "gitHead": "46b1186bb8614fd065e87c09b139a095b8993778"
 }

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>
   );
 });

package/src/table/stories/table-async.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { rest } from "msw";
 import useSWR from "swr";
 import people from "./people.json";
 import { Table } from "../index";
@@ -21,6 +20,42 @@ const queryString = (obj) =>
     .map((key) => key + "=" + obj[key])
     .join("&");
 
+const updateData = async (url: string) => {
+  const newUrl = new URL(`https://www.example.com/${url}`);
+  const comparator = (a, b, orderBy) => {
+    if (b[orderBy] < a[orderBy]) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  };
+
+  const page = Number(newUrl.searchParams.get("page"));
+  const sort = newUrl.searchParams.get("sort");
+
+  await new Promise((resolve) =>
+    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200))
+  );
+
+  return {
+    count: people.length,
+    results: people
+      .slice()
+      .sort((a, b) => {
+        if (sort) {
+          const [orderBy, direction] = sort.split(":");
+          return direction === "ascending"
+            ? comparator(b, a, orderBy)
+            : comparator(a, b, orderBy);
+        }
+        return 1;
+      })
+      .slice((page - 1) * rowsPerPage, page * rowsPerPage),
+  };
+};
+
 export const Async = () => {
   const [page, setPage] = useState(1);
   const [sort, setSort] = useState<SortState>();
@@ -30,7 +65,7 @@ export const Async = () => {
       page,
       sort: sort ? `${sort.orderBy}:${sort.direction}` : undefined,
     })}`,
-    (url) => fetch(url).then((res) => res.json())
+    (url) => updateData(url)
   );
 
   if (!data) {
@@ -128,42 +163,3 @@ export const Async = () => {
     </div>
   );
 };
-
-Async.parameters = {
-  msw: {
-    handlers: [
-      rest.get("/people", (req, res, ctx) => {
-        const comparator = (a, b, orderBy) => {
-          if (b[orderBy] < a[orderBy]) {
-            return -1;
-          }
-          if (b[orderBy] > a[orderBy]) {
-            return 1;
-          }
-          return 0;
-        };
-
-        const page = Number(req.url.searchParams.get("page"));
-        const sort = req.url.searchParams.get("sort");
-        return res(
-          //ctx.delay(),
-          ctx.json({
-            count: people.length,
-            results: people
-              .slice()
-              .sort((a, b) => {
-                if (sort) {
-                  const [orderBy, direction] = sort.split(":");
-                  return direction === "ascending"
-                    ? comparator(b, a, orderBy)
-                    : comparator(a, b, orderBy);
-                }
-                return 1;
-              })
-              .slice((page - 1) * rowsPerPage, page * rowsPerPage),
-          })
-        );
-      }),
-    ],
-  },
-};