@navikt/ds-react 0.8.2 → 0.9.2

package/esm/form/TextField.js

@@ -16,13 +16,13 @@ import ErrorMessage from "./ErrorMessage";
 import { useFormField } from "./useFormField";
 const TextField = forwardRef((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "textField");
-    const { label, className, description, htmlSize, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel"]);
+    const { label, className, description, htmlSize, hideLabel = false, type = "text" } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type"]);
     return (React.createElement("div", { className: cl(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-text-field--error": hasError }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-text-field__label", { "sr-only": hideLabel }) }, label),
         !!description && (React.createElement(BodyShort, { className: cl("navds-text-field__description", {
                 "sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
-        React.createElement("input", Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: "text", className: cl(className, "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "m"}`), size: htmlSize })),
+        React.createElement("input", Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, className: cl(className, "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "m"}`), size: htmlSize })),
         React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, props.error))));
 });
 export default TextField;

package/esm/form/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/form/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9D,MAAM,SAAS,GAAG,UAAU,CAAmC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5E,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,8DAOL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B,EAAE,yBAAyB,EAAE,QAAQ,EAAE,CACxC;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,IAEjE,KAAK,CACA;QAEP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,SAAS,EACT,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,GAAG,EAAE,CAC5B,EACD,IAAI,EAAE,QAAQ,IACd;QACF,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,SAAS,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/form/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAwB9D,MAAM,SAAS,GAAG,UAAU,CAAmC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5E,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,MAAM,KAEX,KAAK,EADJ,IAAI,UACL,KAAK,EARH,sEAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B,EAAE,yBAAyB,EAAE,QAAQ,EAAE,CACxC;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,IAEjE,KAAK,CACA;QAEP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,SAAS,EACT,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,GAAG,EAAE,CAC5B,EACD,IAAI,EAAE,QAAQ,IACd;QACF,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,SAAS,CAAC"}

package/esm/speech-bubble/SpeechBubble.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { BubbleType } from ".";
+import { BubbleType } from "./Bubble";
 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Children of type <Bubble />

package/esm/speech-bubble/SpeechBubble.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { Bubble } from ".";
+import Bubble from "./Bubble";
 const SpeechBubble = forwardRef((_a, ref) => {
     var { children, className, topText, illustration, position = "left", illustrationBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "topText", "illustration", "position", "illustrationBgColor", "backgroundColor"]);
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-speechbubble", className, `navds-speechbubble--${position}`, "navds-body-long") }, rest),

package/esm/speech-bubble/SpeechBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechBubble.js","sourceRoot":"","sources":["../../src/speech-bubble/SpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAc,MAAM,GAAG,CAAC;AAqCvC,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,MAAM,EACjB,mBAAmB,EACnB,eAAe,OAEhB,EADI,IAAI,cART,0GASC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,QAAQ,EAAE,EACjC,iBAAiB,CAClB,IACG,IAAI;QAER,6BACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,mBAAmB,EAAE,IAE9C,YAAY,CACT;QACN,4BAAI,SAAS,EAAC,iCAAiC,IAC5C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,gCACG,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACC,CACN,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;AAE7B,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SpeechBubble.js","sourceRoot":"","sources":["../../src/speech-bubble/SpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAqC9C,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,MAAM,EACjB,mBAAmB,EACnB,eAAe,OAEhB,EADI,IAAI,cART,0GASC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,QAAQ,EAAE,EACjC,iBAAiB,CAClB,IACG,IAAI;QAER,6BACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,mBAAmB,EAAE,IAE9C,YAAY,CACT;QACN,4BAAI,SAAS,EAAC,iCAAiC,IAC5C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,gCACG,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACC,CACN,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;AAE7B,eAAe,YAAY,CAAC"}

package/esm/speech-bubble/index.d.ts

@@ -1,4 +1,2 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";

package/esm/speech-bubble/index.js

@@ -1,5 +1,3 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";
 //# sourceMappingURL=index.js.map

package/esm/speech-bubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/speech-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/speech-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.8.2",
+  "version": "0.9.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -30,30 +30,39 @@
     "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
     "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json"
+    "watch": "tsc --watch -p tsconfig-esm.json",
+    "test": "jest"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.2",
-    "@navikt/ds-icons": "^0.5.2",
-    "@popperjs/core": "^2.5.4",
+    "@material-ui/core": "^4.12.3",
+    "@navikt/ds-icons": "^0.5.3",
+    "@popperjs/core": "^2.10.1",
     "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",
-    "react-popper": "^2.2.4",
+    "react-modal": "3.14.3",
+    "react-popper": "^2.2.5",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.8",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/faker": "^5.5.8",
+    "@types/jest": "^27.0.1",
+    "@types/react-router-dom": "^5.1.9",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "react-router-dom": "^5.2.0",
+    "faker": "^5.5.3",
+    "jest": "^27.2.0",
+    "react-router-dom": "^5.3.0",
     "rimraf": "3.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1",
+    "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9a1a48d3197fdb55c8a4f1138d7fb3e4a8da1438"
+  "gitHead": "40d8d369a4c6c111cee4d89b7975bc343f066b3c"
 }

package/src/form/TextField.tsx

@@ -19,6 +19,11 @@ export interface TextFieldProps
    * TextField label
    */
   label: React.ReactNode;
+  /**
+   * Type of form control
+   * @default "text"
+   */
+  type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
@@ -37,6 +42,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
     description,
     htmlSize,
     hideLabel = false,
+    type = "text",
     ...rest
   } = props;
 
@@ -73,7 +79,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         {...omit(rest, ["error", "errorId", "size"])}
         {...inputProps}
         ref={ref}
-        type="text"
+        type={type}
         className={cl(
           className,
           "navds-text-field__input",

package/src/form/checkbox/Checkbox.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import faker from "faker";
+import { Checkbox, CheckboxGroup } from ".";
+
+test("checkbox group chains onChange calls", () => {
+  const onGroupChange = jest.fn();
+  const onChange = jest.fn();
+  const value = faker.datatype.string();
+  const label = faker.datatype.string();
+
+  render(
+    <CheckboxGroup legend="legend" onChange={onGroupChange}>
+      <Checkbox onChange={onChange} value={value}>
+        {label}
+      </Checkbox>
+    </CheckboxGroup>
+  );
+
+  userEvent.click(screen.getByLabelText(label));
+
+  expect(onGroupChange).toBeCalledTimes(1);
+  expect(onGroupChange).toBeCalledWith([value]);
+  expect(onChange).toBeCalledTimes(1);
+  expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true);
+});
+
+const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];

package/src/form/stories/text-field.stories.tsx

@@ -17,6 +17,9 @@ export const All = () => {
 
       <TextField label="Laborum excepteur" description="Cillum mollit" />
 
+      <h2>Passord-type</h2>
+      <TextField label="Passord" type="password" />
+
       <h2>Errors</h2>
 
       <TextField

package/src/speech-bubble/SpeechBubble.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import { Bubble, BubbleType } from ".";
+import Bubble, { BubbleType } from "./Bubble";
 
 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/speech-bubble/index.ts

@@ -1,4 +1,2 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";