@navikt/ds-react 0.17.3 → 0.17.4

package/cjs/help-text/HelpText.js

@@ -43,25 +43,17 @@ const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("..");
 const HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = (0, react_1.useState)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (react_1.default.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
-            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon" }),
-            react_1.default.createElement("span", { className: "navds-sr-only" }, title)),
-        react_1.default.createElement(__1.Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
-            react_1.default.createElement(__1.Popover.Content, null, children))));
+    return (react_1.default.createElement("div", { className: "navds-help-text" },
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", "aria-hidden": true })),
+        react_1.default.createElement(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
 });
 exports.default = HelpText;

package/esm/help-text/HelpText.js

@@ -11,30 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover } from "..";
 const HelpText = forwardRef((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = useRef(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState(null);
-    const wrapperRef = useRef(null);
     const [open, setOpen] = useState(false);
-    useEffect(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (React.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
-            React.createElement(HelpTextIcon, { className: "navds-help-text__icon" }),
-            React.createElement("span", { className: "navds-sr-only" }, title)),
-        React.createElement(Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
-            React.createElement(Popover.Content, null, children))));
+    return (React.createElement("div", { className: "navds-help-text" },
+        React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", "aria-hidden": true })),
+        React.createElement(Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            React.createElement(Popover.Content, { className: "navds-body-short" }, children))));
 });
 export default HelpText;
 //# sourceMappingURL=HelpText.js.map

package/esm/help-text/HelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cANT,2DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,0DAAI,CAAA,CAAC;IAChC,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,EACnB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,wBAAc,CACtD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -66,5 +66,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "4baebb43408f7f77334c3c31a23140e04eef9a52"
+  "gitHead": "ddc0db1905160264958fcff8d59420b74740a5ac"
 }

package/src/form/search/search.stories.tsx

@@ -10,20 +10,23 @@ export default {
 export const All = () => {
   const [value, setValue] = useState("");
   return (
-    <div style={{ maxWidth: 300 }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        maxWidth: 400,
+      }}
+    >
       <h1>Search</h1>
-      <div>
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-        ></Search>
-        <br />
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-          variant="primary"
-        ></Search>
-      </div>
+
+      <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
+      <h2>Primary search</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="primary"
+      ></Search>
 
       <h2>Search small</h2>
       <Search

package/src/help-text/HelpText.tsx

@@ -1,6 +1,6 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover, PopoverProps } from "..";
 
@@ -21,53 +21,42 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       placement = "top",
       strategy = "absolute",
       title = "hjelp",
+      onClick,
       ...rest
     },
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-
     const [open, setOpen] = useState(false);
 
-    useEffect(() => {
-      open && popoverRef?.focus?.();
-    }, [open, popoverRef]);
-
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      setOpen((x) => !x);
-      rest.onClick && rest.onClick(e);
-    };
     return (
-      <div className="navds-help-text" ref={wrapperRef}>
+      <div className="navds-help-text">
         <button
           {...rest}
           ref={mergedRef}
-          onClick={(e) => handleClick(e)}
+          onClick={(e) => {
+            setOpen((x) => !x);
+            onClick?.(e);
+          }}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          aria-haspopup="dialog"
           title={title}
         >
-          <HelpTextIcon className="navds-help-text__icon" />
-          <span className="navds-sr-only">{title}</span>
+          <HelpTextIcon className="navds-help-text__icon" aria-hidden/>
         </button>
         <Popover
-          ref={setPopoverRef}
           onClose={() => setOpen(false)}
           className="navds-help-text__popover"
           open={open}
-          role="tooltip"
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
         >
-          <Popover.Content>{children}</Popover.Content>
+          <Popover.Content className="navds-body-short">
+            {children}
+          </Popover.Content>
         </Popover>
       </div>
     );

package/src/help-text/help-text.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { TextField, HelpText } from "..";
+
+export default {
+  title: "ds-react/help-text",
+  component: HelpText,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>HelpText</h1>
+      <HelpText title="show tooltip">
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+      <TextField
+        label={
+          <div style={{ display: "flex", gap: 8 }}>
+            Text field label
+            <HelpText title="show tooltip">
+              Id ullamco excepteur elit fugiat labore.
+            </HelpText>
+          </div>
+        }
+      ></TextField>
+    </>
+  );
+};

package/src/help-text/stories/help-text.stories.mdx

@@ -1,35 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { HelpText } from "../../index";
-import { Success } from "@navikt/ds-react";
-
-<Meta title="ds-react/help-text/intro" />
-
-# Hvordan ta i bruk HelpText
-
-```jsx
-<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-  </div>
-</Canvas>
-
-# Egen title
-
-Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
-
-```jsx
-<HelpText title="vis hjelpetekst angående søknad">
-  Exercitation esse minim esse mollit ex magna.
-</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText title="vis hjelpetekst angående søknad">
-      Exercitation esse minim esse mollit ex magna.
-    </HelpText>
-  </div>
-</Canvas>

package/src/help-text/stories/help-text.stories.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { BodyLong } from "../../typography";
-import { HelpText } from "../index";
-
-export default {
-  title: "ds-react/help-text",
-  component: HelpText,
-};
-
-export const All = () => {
-  return (
-    <>
-      <h1>HelpText</h1>
-      <BodyLong style={{ display: "flex" }}>
-        Quis tempor incididunt sint sit veniam ad dolore cillum ut.
-        <HelpText title="show tooltip">
-          Id ullamco excepteur elit fugiat labore.
-        </HelpText>
-      </BodyLong>
-
-      <BodyLong>
-        Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
-        cupidatat amet.
-      </BodyLong>
-
-      <h2>HelpText defaultOpen</h2>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    </>
-  );
-};