@navikt/ds-react 0.17.21 → 0.17.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/tooltip/Tooltip.js +5 -2
- package/cjs/util/index.js +2 -2
- package/esm/tooltip/Tooltip.js +5 -2
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/util/index.js +2 -2
- package/esm/util/index.js.map +1 -1
- package/package.json +3 -3
- package/src/form/error-summary/error-summary.stories.tsx +42 -0
- package/src/form/search/search.stories.tsx +124 -83
- package/src/tooltip/Tooltip.tsx +5 -3
- package/src/util/index.ts +2 -2
- package/src/form/error-summary/stories/error-summary.stories.mdx +0 -54
- package/src/form/error-summary/stories/error-summary.stories.tsx +0 -28
- package/src/form/search/search-themes.stories.tsx +0 -52
package/cjs/tooltip/Tooltip.js
CHANGED
|
@@ -95,7 +95,7 @@ const Tooltip = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
95
95
|
(0, react_1.useEffect)(() => {
|
|
96
96
|
return () => document.removeEventListener("mouseup", handleMouseUp);
|
|
97
97
|
}, [handleMouseUp]);
|
|
98
|
-
(0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && handleClose(), [handleClose])
|
|
98
|
+
(0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && handleClose(), [handleClose]));
|
|
99
99
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
100
100
|
const stableRef = (0, react_1.useMemo)(() => (0, react_merge_refs_1.default)([ref, refs.floating]), [
|
|
101
101
|
ref,
|
|
@@ -116,7 +116,10 @@ const Tooltip = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
116
116
|
? (0, classnames_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
|
|
117
117
|
: children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: (0, react_merge_refs_1.default)([children.ref, refs.reference]), onMouseEnter: (0, __1.composeEventHandlers)(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: (0, __1.composeEventHandlers)(children.props.onMouseLeave, handleClose), onMouseDown: (0, __1.composeEventHandlers)(children.props.onMouseDown, () => {
|
|
118
118
|
isMouseDownRef.current = true;
|
|
119
|
-
document
|
|
119
|
+
document &&
|
|
120
|
+
document.addEventListener("mouseup", handleMouseUp, {
|
|
121
|
+
once: true,
|
|
122
|
+
});
|
|
120
123
|
}), onFocus: (0, __1.composeEventHandlers)(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: (0, __1.composeEventHandlers)(children.props.onBlur, handleClose) })),
|
|
121
124
|
(open !== null && open !== void 0 ? open : isOpen) && (react_1.default.createElement(portal_1.default, null,
|
|
122
125
|
react_1.default.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
|
package/cjs/util/index.js
CHANGED
|
@@ -23,14 +23,14 @@ const omit = (obj, props) => Object.entries(obj)
|
|
|
23
23
|
.reduce((obj, [key, value]) => (Object.assign(Object.assign({}, obj), { [key]: value })), {});
|
|
24
24
|
exports.omit = omit;
|
|
25
25
|
/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
|
|
26
|
-
const useEventListener = (name, handler, target = window) => {
|
|
26
|
+
const useEventListener = (name, handler, target = typeof window !== "undefined" ? window : null) => {
|
|
27
27
|
(0, react_1.useEffect)(() => {
|
|
28
28
|
if (!target) {
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
31
|
target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
|
|
32
32
|
return () => {
|
|
33
|
-
target === null || target === void 0 ? void 0 : target.
|
|
33
|
+
target === null || target === void 0 ? void 0 : target.removeEventListener(name, handler);
|
|
34
34
|
};
|
|
35
35
|
}, [name, handler, target]);
|
|
36
36
|
};
|
package/esm/tooltip/Tooltip.js
CHANGED
|
@@ -67,7 +67,7 @@ const Tooltip = forwardRef((_a, ref) => {
|
|
|
67
67
|
useEffect(() => {
|
|
68
68
|
return () => document.removeEventListener("mouseup", handleMouseUp);
|
|
69
69
|
}, [handleMouseUp]);
|
|
70
|
-
useEventListener("keydown", useCallback((e) => e.key === "Escape" && handleClose(), [handleClose])
|
|
70
|
+
useEventListener("keydown", useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]));
|
|
71
71
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
72
72
|
const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
|
|
73
73
|
ref,
|
|
@@ -88,7 +88,10 @@ const Tooltip = forwardRef((_a, ref) => {
|
|
|
88
88
|
? cl(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
|
|
89
89
|
: children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: mergeRefs([children.ref, refs.reference]), onMouseEnter: composeEventHandlers(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: composeEventHandlers(children.props.onMouseLeave, handleClose), onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
|
|
90
90
|
isMouseDownRef.current = true;
|
|
91
|
-
document
|
|
91
|
+
document &&
|
|
92
|
+
document.addEventListener("mouseup", handleMouseUp, {
|
|
93
|
+
once: true,
|
|
94
|
+
});
|
|
92
95
|
}), onFocus: composeEventHandlers(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: composeEventHandlers(children.props.onBlur, handleClose) })),
|
|
93
96
|
(open !== null && open !== void 0 ? open : isOpen) && (React.createElement(Portal, null,
|
|
94
97
|
React.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/esm/util/index.js
CHANGED
|
@@ -5,14 +5,14 @@ export const omit = (obj, props) => Object.entries(obj)
|
|
|
5
5
|
.filter(([key]) => !props.includes(key))
|
|
6
6
|
.reduce((obj, [key, value]) => (Object.assign(Object.assign({}, obj), { [key]: value })), {});
|
|
7
7
|
/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
|
|
8
|
-
export const useEventListener = (name, handler, target = window) => {
|
|
8
|
+
export const useEventListener = (name, handler, target = typeof window !== "undefined" ? window : null) => {
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
if (!target) {
|
|
11
11
|
return;
|
|
12
12
|
}
|
|
13
13
|
target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
|
|
14
14
|
return () => {
|
|
15
|
-
target === null || target === void 0 ? void 0 : target.
|
|
15
|
+
target === null || target === void 0 ? void 0 : target.removeEventListener(name, handler);
|
|
16
16
|
};
|
|
17
17
|
}, [name, handler, target]);
|
|
18
18
|
};
|
package/esm/util/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACnE,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,gGAAgG;AAChG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,oBAAyC,EACzC,eAAoC,EACpC,EAAE;IACF,OAAO,SAAS,WAAW,CAAC,KAAQ;QAClC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAG,KAA2B,CAAC,gBAAgB,EAAE;YACnD,OAAO,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.24",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@floating-ui/react-dom": "0.6.0",
|
|
38
38
|
"@material-ui/core": "^4.12.3",
|
|
39
|
-
"@navikt/ds-icons": "^0.8.
|
|
39
|
+
"@navikt/ds-icons": "^0.8.10",
|
|
40
40
|
"@popperjs/core": "^2.10.1",
|
|
41
41
|
"@radix-ui/react-tabs": "0.1.5",
|
|
42
42
|
"@radix-ui/react-toggle-group": "0.1.5",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@types/react": "^17.0.30",
|
|
70
70
|
"react": "^17.0.0 || ^18.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "8029c9553a3ccfbf5f90e892c52d1dfe6cd7b12d"
|
|
73
73
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Meta } from "@storybook/react/types-6-0";
|
|
3
|
+
import { ErrorSummary } from "..";
|
|
4
|
+
export default {
|
|
5
|
+
title: "ds-react/Form/Errorsummary",
|
|
6
|
+
component: ErrorSummary,
|
|
7
|
+
argTypes: {
|
|
8
|
+
headingTag: {
|
|
9
|
+
control: {
|
|
10
|
+
type: "text",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
control: {
|
|
15
|
+
type: "radio",
|
|
16
|
+
options: ["medium", "small"],
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
} as Meta;
|
|
21
|
+
|
|
22
|
+
export const Default = (props) => (
|
|
23
|
+
<ErrorSummary
|
|
24
|
+
heading="Feiloppsummering komponent"
|
|
25
|
+
headingTag={props.headingTag || "h2"}
|
|
26
|
+
size={props.size ?? undefined}
|
|
27
|
+
>
|
|
28
|
+
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
29
|
+
<ErrorSummary.Item href="#2">
|
|
30
|
+
Tekstfeltet må ha en godkjent e-mail
|
|
31
|
+
</ErrorSummary.Item>
|
|
32
|
+
</ErrorSummary>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
export const Small = () => (
|
|
36
|
+
<ErrorSummary heading="Feiloppsummering komponent" size="small">
|
|
37
|
+
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
38
|
+
<ErrorSummary.Item href="#2">
|
|
39
|
+
Tekstfeltet må ha en godkjent e-mail
|
|
40
|
+
</ErrorSummary.Item>
|
|
41
|
+
</ErrorSummary>
|
|
42
|
+
);
|
|
@@ -3,99 +3,140 @@ import React, { useState } from "react";
|
|
|
3
3
|
|
|
4
4
|
import { Search } from "../index";
|
|
5
5
|
export default {
|
|
6
|
-
title: "ds-react/
|
|
6
|
+
title: "ds-react/Form/Search",
|
|
7
7
|
component: Search,
|
|
8
|
+
argTypes: {
|
|
9
|
+
clearButton: {
|
|
10
|
+
control: {
|
|
11
|
+
type: "boolean",
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
size: {
|
|
15
|
+
control: {
|
|
16
|
+
type: "radio",
|
|
17
|
+
options: ["medium", "small"],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
variant: {
|
|
21
|
+
control: {
|
|
22
|
+
type: "radio",
|
|
23
|
+
options: ["primary", "secondary", "simple"],
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
8
27
|
} as Meta;
|
|
9
28
|
|
|
10
|
-
export const
|
|
11
|
-
const [
|
|
29
|
+
export const Default = (props) => {
|
|
30
|
+
const [state, setState] = useState("");
|
|
12
31
|
return (
|
|
13
|
-
<div
|
|
14
|
-
style={{
|
|
15
|
-
display: "flex",
|
|
16
|
-
alignItems: "center",
|
|
17
|
-
flexDirection: "column",
|
|
18
|
-
maxWidth: 400,
|
|
19
|
-
}}
|
|
20
|
-
>
|
|
21
|
-
<h1>Search</h1>
|
|
22
|
-
|
|
23
|
-
<Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
|
|
24
|
-
<h2>Secondary</h2>
|
|
32
|
+
<div data-theme={props.darkmode ? "dark" : "light"}>
|
|
25
33
|
<Search
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
value={props.controlled ? state : undefined}
|
|
35
|
+
onChange={props.controlled ? setState : null}
|
|
36
|
+
onSearch={(v) => console.log({ onSearch: v })}
|
|
37
|
+
label="Søk"
|
|
38
|
+
size={props.size}
|
|
39
|
+
clearButton={props.clearButton}
|
|
40
|
+
variant={props.variant}
|
|
41
|
+
hideLabel={props.hideLabel}
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
30
46
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
></Search>
|
|
47
|
+
Default.args = {
|
|
48
|
+
controlled: false,
|
|
49
|
+
darkmode: false,
|
|
50
|
+
hideLabel: true,
|
|
51
|
+
};
|
|
37
52
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<
|
|
47
|
-
<Search
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
export const Small = () => (
|
|
54
|
+
<div className="rowgap">
|
|
55
|
+
<div className="colgap">
|
|
56
|
+
<Search label="Søk" size="small" />
|
|
57
|
+
<Search label="Søk" variant="secondary" size="small" />
|
|
58
|
+
<Search label="Søk" variant="simple" size="small" />
|
|
59
|
+
</div>
|
|
60
|
+
<div className="colgap" data-theme="dark">
|
|
61
|
+
<Search label="Søk" size="small" />
|
|
62
|
+
<Search label="Søk" variant="secondary" size="small" />
|
|
63
|
+
<Search label="Søk" variant="simple" size="small" />
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
export const Variants = () => (
|
|
69
|
+
<div className="rowgap">
|
|
70
|
+
<div className="colgap">
|
|
71
|
+
<Search label="Søk" />
|
|
72
|
+
<Search label="Søk" variant="secondary" />
|
|
73
|
+
<Search label="Søk" variant="simple" />
|
|
74
|
+
</div>
|
|
75
|
+
<div className="colgap" data-theme="dark">
|
|
76
|
+
<Search label="Søk" />
|
|
77
|
+
<Search label="Søk" variant="secondary" />
|
|
78
|
+
<Search label="Søk" variant="simple" />
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
export const Placeholder = () => (
|
|
84
|
+
<div className="rowgap">
|
|
85
|
+
<div className="colgap">
|
|
86
|
+
<Search label="Søk" placeholder="Søk" />
|
|
87
|
+
</div>
|
|
88
|
+
<div className="colgap" data-theme="dark">
|
|
89
|
+
<Search label="Søk" placeholder="Søk" />
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
export const Text = () => (
|
|
95
|
+
<div className="rowgap">
|
|
96
|
+
<div className="colgap">
|
|
97
|
+
<Search label="Søk" value="Søketekst" />
|
|
98
|
+
<Search label="Søk" variant="secondary" value="Søketekst" />
|
|
99
|
+
<Search label="Søk" variant="simple" value="Søketekst" />
|
|
100
|
+
</div>
|
|
101
|
+
<div className="colgap" data-theme="dark">
|
|
102
|
+
<Search label="Søk" value="Søketekst" />
|
|
103
|
+
<Search label="Søk" variant="secondary" value="Søketekst" />
|
|
104
|
+
<Search label="Søk" variant="simple" value="Søketekst" />
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
);
|
|
56
108
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
109
|
+
export const WLabel = () => (
|
|
110
|
+
<div className="rowgap">
|
|
111
|
+
<div className="colgap">
|
|
112
|
+
<Search label="Label søk" variant="simple" hideLabel={false} />
|
|
61
113
|
<Search
|
|
62
|
-
label="
|
|
114
|
+
label="Label søk"
|
|
115
|
+
description="Description søk"
|
|
116
|
+
variant="simple"
|
|
63
117
|
hideLabel={false}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<h2>Hidelabel false</h2>
|
|
69
|
-
<Search label="Søk alle sider om X og Y" hideLabel={false}>
|
|
70
|
-
<Search.Button />
|
|
71
|
-
</Search>
|
|
72
|
-
<h2>Controlled state </h2>
|
|
73
|
-
<Search
|
|
74
|
-
value={value}
|
|
75
|
-
label="Søk alle sider om X og Y"
|
|
76
|
-
description="Beskrivelse av søket"
|
|
77
|
-
onChange={(e) => setValue(e)}
|
|
78
|
-
onClear={() => setValue("")}
|
|
79
|
-
>
|
|
80
|
-
<Search.Button />
|
|
81
|
-
</Search>
|
|
82
|
-
<h2>No clear button</h2>
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
<div className="colgap" data-theme="dark">
|
|
121
|
+
<Search label="Label søk" variant="simple" hideLabel={false} />
|
|
83
122
|
<Search
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<Search.Button />
|
|
90
|
-
</Search>
|
|
123
|
+
label="Label søk"
|
|
124
|
+
description="Description søk"
|
|
125
|
+
variant="simple"
|
|
126
|
+
hideLabel={false}
|
|
127
|
+
/>
|
|
91
128
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
129
|
+
</div>
|
|
130
|
+
);
|
|
94
131
|
|
|
95
|
-
export const
|
|
96
|
-
|
|
97
|
-
<Search label="
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
132
|
+
export const NoClearButton = () => (
|
|
133
|
+
<div className="colgap">
|
|
134
|
+
<Search label="Label søk" clearButton={false} value="søketekst" />
|
|
135
|
+
<Search
|
|
136
|
+
label="Label søk"
|
|
137
|
+
variant="simple"
|
|
138
|
+
clearButton={false}
|
|
139
|
+
value="søketekst"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
);
|
package/src/tooltip/Tooltip.tsx
CHANGED
|
@@ -165,8 +165,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
|
|
|
165
165
|
|
|
166
166
|
useEventListener(
|
|
167
167
|
"keydown",
|
|
168
|
-
useCallback((e) => e.key === "Escape" && handleClose(), [handleClose])
|
|
169
|
-
document
|
|
168
|
+
useCallback((e) => e.key === "Escape" && handleClose(), [handleClose])
|
|
170
169
|
);
|
|
171
170
|
|
|
172
171
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
@@ -212,7 +211,10 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
|
|
|
212
211
|
),
|
|
213
212
|
onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
|
|
214
213
|
isMouseDownRef.current = true;
|
|
215
|
-
document
|
|
214
|
+
document &&
|
|
215
|
+
document.addEventListener("mouseup", handleMouseUp, {
|
|
216
|
+
once: true,
|
|
217
|
+
});
|
|
216
218
|
}),
|
|
217
219
|
onFocus: composeEventHandlers(
|
|
218
220
|
children.props.onFocus,
|
package/src/util/index.ts
CHANGED
|
@@ -32,7 +32,7 @@ export interface ListenerT {
|
|
|
32
32
|
export const useEventListener = <T extends ListenerT>(
|
|
33
33
|
name: Parameters<ListenerT["addEventListener"]>[0],
|
|
34
34
|
handler: Parameters<ListenerT["addEventListener"]>[1],
|
|
35
|
-
target: null | T | Window = window
|
|
35
|
+
target: null | T | Window = typeof window !== "undefined" ? window : null
|
|
36
36
|
): void => {
|
|
37
37
|
useEffect(() => {
|
|
38
38
|
if (!target) {
|
|
@@ -40,7 +40,7 @@ export const useEventListener = <T extends ListenerT>(
|
|
|
40
40
|
}
|
|
41
41
|
target?.addEventListener(name, handler);
|
|
42
42
|
return () => {
|
|
43
|
-
target?.
|
|
43
|
+
target?.removeEventListener(name, handler);
|
|
44
44
|
};
|
|
45
45
|
}, [name, handler, target]);
|
|
46
46
|
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { ErrorSummary } from "../index";
|
|
3
|
-
|
|
4
|
-
<Meta title="ds-react/form/errorsummary/intro" />
|
|
5
|
-
|
|
6
|
-
# Hvordan ta i bruk ErrorSummary
|
|
7
|
-
|
|
8
|
-
`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.
|
|
9
|
-
|
|
10
|
-
```jsx
|
|
11
|
-
<ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
|
|
12
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
13
|
-
<ErrorSummary.Item href="#2">
|
|
14
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
15
|
-
</ErrorSummary.Item>
|
|
16
|
-
</ErrorSummary>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
<Canvas>
|
|
20
|
-
<ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
|
|
21
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
22
|
-
<ErrorSummary.Item href="#2">
|
|
23
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
24
|
-
</ErrorSummary.Item>
|
|
25
|
-
</ErrorSummary>
|
|
26
|
-
</Canvas>
|
|
27
|
-
|
|
28
|
-
## Custom headingTag
|
|
29
|
-
|
|
30
|
-
`headingTag` lar deg sette heading til en annen html-tag en default "h2"
|
|
31
|
-
|
|
32
|
-
```jsx
|
|
33
|
-
<ErrorSummary
|
|
34
|
-
heading="Eiusmod est cillum mollit pariatur deserunt"
|
|
35
|
-
headingTag="h3"
|
|
36
|
-
>
|
|
37
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
38
|
-
<ErrorSummary.Item href="#2">
|
|
39
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
40
|
-
</ErrorSummary.Item>
|
|
41
|
-
</ErrorSummary>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
<Canvas>
|
|
45
|
-
<ErrorSummary
|
|
46
|
-
heading="Eiusmod est cillum mollit pariatur deserunt"
|
|
47
|
-
headingTag="h3"
|
|
48
|
-
>
|
|
49
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
50
|
-
<ErrorSummary.Item href="#2">
|
|
51
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
52
|
-
</ErrorSummary.Item>
|
|
53
|
-
</ErrorSummary>
|
|
54
|
-
</Canvas>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
3
|
-
import { ErrorSummary } from "..";
|
|
4
|
-
export default {
|
|
5
|
-
title: "ds-react/form/errorsummary",
|
|
6
|
-
component: ErrorSummary,
|
|
7
|
-
} as Meta;
|
|
8
|
-
|
|
9
|
-
export const All = () => {
|
|
10
|
-
return (
|
|
11
|
-
<>
|
|
12
|
-
<h1>Error summary</h1>
|
|
13
|
-
<ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
|
|
14
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
15
|
-
<ErrorSummary.Item href="#2">
|
|
16
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
17
|
-
</ErrorSummary.Item>
|
|
18
|
-
</ErrorSummary>
|
|
19
|
-
<h2>size small</h2>
|
|
20
|
-
<ErrorSummary size="small" heading="Feiloppsummering komponent">
|
|
21
|
-
<ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
|
|
22
|
-
<ErrorSummary.Item href="#2">
|
|
23
|
-
Tekstfeltet må ha en godkjent e-mail
|
|
24
|
-
</ErrorSummary.Item>
|
|
25
|
-
</ErrorSummary>
|
|
26
|
-
</>
|
|
27
|
-
);
|
|
28
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Heading } from "../..";
|
|
4
|
-
import { Search } from "..";
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "ds-react/form/search",
|
|
8
|
-
component: Search,
|
|
9
|
-
} as Meta;
|
|
10
|
-
|
|
11
|
-
export const LightTheme = () => (
|
|
12
|
-
<div
|
|
13
|
-
style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
|
|
14
|
-
>
|
|
15
|
-
<Heading size="xlarge">Search</Heading>
|
|
16
|
-
<Heading level="2" size="large">
|
|
17
|
-
size medium
|
|
18
|
-
</Heading>
|
|
19
|
-
<Search label="hidden label" placeholder="Søk" />
|
|
20
|
-
<Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
|
|
21
|
-
<Search label="hidden label" variant="simple" placeholder="Søk" />
|
|
22
|
-
<Search label="with label" hideLabel={false} />
|
|
23
|
-
|
|
24
|
-
<Heading level="2" size="large">
|
|
25
|
-
size small
|
|
26
|
-
</Heading>
|
|
27
|
-
<Search label="hidden label" size="small" placeholder="Søk" />
|
|
28
|
-
<Search
|
|
29
|
-
label="hidden label"
|
|
30
|
-
variant="secondary"
|
|
31
|
-
size="small"
|
|
32
|
-
defaultValue="dagpenger"
|
|
33
|
-
/>
|
|
34
|
-
<Search
|
|
35
|
-
label="hidden label"
|
|
36
|
-
variant="simple"
|
|
37
|
-
size="small"
|
|
38
|
-
placeholder="Søk"
|
|
39
|
-
/>
|
|
40
|
-
<Search label="with label" hideLabel={false} size="small" />
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
export const DarkTheme = () => (
|
|
45
|
-
<div data-theme="dark">
|
|
46
|
-
<LightTheme />
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
DarkTheme.parameters = {
|
|
51
|
-
backgrounds: { default: "dark" },
|
|
52
|
-
};
|