@navikt/ds-react 0.14.3-beta.1 → 0.14.6
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/LICENCE +31 -0
- package/cjs/form/Select.js +1 -1
- package/cjs/form/Switch.js +15 -4
- package/cjs/index.js +1 -0
- package/cjs/step-indicator/Step.js +62 -0
- package/cjs/step-indicator/StepIndicator.js +76 -0
- package/cjs/step-indicator/index.js +19 -0
- package/cjs/step-indicator/package.json +6 -0
- package/esm/form/Select.js +1 -1
- package/esm/form/Select.js.map +1 -1
- package/esm/form/Switch.d.ts +4 -0
- package/esm/form/Switch.js +16 -5
- package/esm/form/Switch.js.map +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/step-indicator/Step.d.ts +20 -0
- package/esm/step-indicator/Step.js +39 -0
- package/esm/step-indicator/Step.js.map +1 -0
- package/esm/step-indicator/StepIndicator.d.ts +41 -0
- package/esm/step-indicator/StepIndicator.js +52 -0
- package/esm/step-indicator/StepIndicator.js.map +1 -0
- package/esm/step-indicator/index.d.ts +2 -0
- package/esm/step-indicator/index.js +3 -0
- package/esm/step-indicator/index.js.map +1 -0
- package/package.json +6 -8
- package/src/form/Select.tsx +1 -1
- package/src/form/Switch.tsx +65 -6
- package/src/form/stories/switch.stories.mdx +73 -3
- package/src/form/stories/switch.stories.tsx +27 -1
- package/src/index.ts +1 -0
- package/src/step-indicator/Step.tsx +79 -0
- package/src/step-indicator/StepIndicator.tsx +145 -0
- package/src/step-indicator/index.ts +2 -0
- package/src/step-indicator/stories/Example.tsx +23 -0
- package/src/step-indicator/stories/step-indicator.stories.mdx +122 -0
- package/src/step-indicator/stories/step-indicator.stories.tsx +104 -0
- package/dist/complete.js +0 -16223
package/LICENCE
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
Font License
|
|
2
|
+
|
|
3
|
+
The Source Sans Pro font files in packages/node_modules/nav-frontend-typografi-style/assets are a subset of Source Sans Pro, licensed under the SIL Open Font License, and copyright Adobe Systems Incorporated, with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
|
|
4
|
+
|
|
5
|
+
Icon License
|
|
6
|
+
|
|
7
|
+
This project uses Streamline Icons. If you use nav-frontend-moduler in your project please adhere to the Streamline Icons license agreement found here: https://streamlineicons.com/ux/extended-license.html
|
|
8
|
+
|
|
9
|
+
The rest of the codebase (excluding 3rd party dependencies):
|
|
10
|
+
|
|
11
|
+
# The MIT License
|
|
12
|
+
|
|
13
|
+
Copyright 2019 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
|
|
14
|
+
|
|
15
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
16
|
+
a copy of this software and associated documentation files (the "Software"),
|
|
17
|
+
to deal in the Software without restriction, including without limitation
|
|
18
|
+
the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
19
|
+
and/or sell copies of the Software, and to permit persons to whom the
|
|
20
|
+
Software is furnished to do so, subject to the following conditions:
|
|
21
|
+
|
|
22
|
+
The above copyright notice and this permission notice shall be included
|
|
23
|
+
in all copies or substantial portions of the Software.
|
|
24
|
+
|
|
25
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
26
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
27
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
28
|
+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
|
|
29
|
+
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
|
30
|
+
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
|
|
31
|
+
USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/cjs/form/Select.js
CHANGED
|
@@ -54,7 +54,7 @@ const Select = (0, react_1.forwardRef)((props, ref) => {
|
|
|
54
54
|
}), id: inputDescriptionId, size: size }, description)),
|
|
55
55
|
react_1.default.createElement("div", { className: "navds-select__container" },
|
|
56
56
|
react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
|
|
57
|
-
react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron" })),
|
|
57
|
+
react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron", "aria-hidden": true })),
|
|
58
58
|
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))));
|
|
59
59
|
});
|
|
60
60
|
exports.default = Select;
|
package/cjs/form/Switch.js
CHANGED
|
@@ -37,16 +37,27 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
37
37
|
const react_1 = __importStar(require("react"));
|
|
38
38
|
const __1 = require("..");
|
|
39
39
|
const useFormField_1 = require("./useFormField");
|
|
40
|
+
const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
|
|
41
|
+
react_1.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
|
|
40
42
|
const Switch = (0, react_1.forwardRef)((props, ref) => {
|
|
43
|
+
var _a;
|
|
41
44
|
const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
|
|
42
|
-
const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
|
|
45
|
+
const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
|
|
43
46
|
const Description = size === "medium" ? __1.BodyShort : __1.Detail;
|
|
44
|
-
|
|
47
|
+
const [checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
|
|
48
|
+
(0, react_1.useEffect)(() => {
|
|
49
|
+
checkedProp !== undefined && setChecked(checkedProp);
|
|
50
|
+
}, [checkedProp]);
|
|
51
|
+
const handleChange = (e) => {
|
|
52
|
+
setChecked(e.target.checked);
|
|
53
|
+
props.onChange && props.onChange(e);
|
|
54
|
+
};
|
|
55
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
|
|
45
56
|
"navds-switch--disabled": inputProps.disabled,
|
|
46
57
|
}) },
|
|
47
|
-
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: (0, classnames_1.default)(className, "navds-switch__input") })),
|
|
58
|
+
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
|
|
48
59
|
react_1.default.createElement("span", { className: "navds-switch__track" },
|
|
49
|
-
react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading
|
|
60
|
+
react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
|
|
50
61
|
react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
|
|
51
62
|
react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
|
|
52
63
|
"sr-only": hideLabel,
|
package/cjs/index.js
CHANGED
|
@@ -25,6 +25,7 @@ __exportStar(require("./modal"), exports);
|
|
|
25
25
|
__exportStar(require("./panel"), exports);
|
|
26
26
|
__exportStar(require("./popover"), exports);
|
|
27
27
|
__exportStar(require("./speech-bubble"), exports);
|
|
28
|
+
__exportStar(require("./step-indicator"), exports);
|
|
28
29
|
__exportStar(require("./tag"), exports);
|
|
29
30
|
__exportStar(require("./table"), exports);
|
|
30
31
|
__exportStar(require("./typography"), exports);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
+
var t = {};
|
|
23
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
+
t[p] = s[p];
|
|
25
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
+
t[p[i]] = s[p[i]];
|
|
29
|
+
}
|
|
30
|
+
return t;
|
|
31
|
+
};
|
|
32
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
const react_1 = __importStar(require("react"));
|
|
37
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
38
|
+
const _1 = require(".");
|
|
39
|
+
const __1 = require("..");
|
|
40
|
+
const StepComponent = (0, react_1.forwardRef)((_a, ref) => {
|
|
41
|
+
var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
|
|
42
|
+
const context = (0, react_1.useContext)(_1.StepContext);
|
|
43
|
+
if (context === null) {
|
|
44
|
+
console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
const safeIndex = index !== null && index !== void 0 ? index : 0;
|
|
48
|
+
const Number = context.activeStep === safeIndex ? __1.Label : __1.BodyShort;
|
|
49
|
+
return (react_1.default.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: (0, classnames_1.default)("navds-step-indicator__step", className, {
|
|
50
|
+
"navds-step-indicator__step--disabled": disabled,
|
|
51
|
+
"navds-step-indicator__step--active": context.activeStep === safeIndex,
|
|
52
|
+
"navds-step-indicator__step--finished": context.activeStep > safeIndex,
|
|
53
|
+
}), onClick: (e) => {
|
|
54
|
+
context.onStepChange(safeIndex);
|
|
55
|
+
rest.onClick && rest.onClick(e);
|
|
56
|
+
} }),
|
|
57
|
+
react_1.default.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
|
|
58
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-step-indicator__step-label") }, !context.hideLabels && children),
|
|
59
|
+
safeIndex !== 0 && (react_1.default.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
|
|
60
|
+
});
|
|
61
|
+
const Step = StepComponent;
|
|
62
|
+
exports.default = Step;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
+
var t = {};
|
|
23
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
+
t[p] = s[p];
|
|
25
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
+
t[p[i]] = s[p[i]];
|
|
29
|
+
}
|
|
30
|
+
return t;
|
|
31
|
+
};
|
|
32
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.StepContext = void 0;
|
|
37
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
|
|
40
|
+
const Step_1 = __importDefault(require("./Step"));
|
|
41
|
+
exports.StepContext = (0, react_1.createContext)(null);
|
|
42
|
+
const StepIndicator = (0, react_1.forwardRef)((_a, ref) => {
|
|
43
|
+
var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
|
|
44
|
+
const wrapperRef = (0, react_1.useRef)(null);
|
|
45
|
+
const mergedRef = (0, react_merge_refs_1.default)([wrapperRef, ref]);
|
|
46
|
+
const [showLabels, setShowLabels] = (0, react_1.useState)(true);
|
|
47
|
+
const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
|
|
48
|
+
const stepsWithIndex = react_1.default.Children.map(children, (step, index) => {
|
|
49
|
+
return react_1.default.isValidElement(step) ? (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-step-indicator__step-wrapper", {
|
|
50
|
+
"navds-step-indicator__step-wrapper--hidelabel": removeLabels,
|
|
51
|
+
}), key: index, "aria-current": index === activeStep && "step" }, react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
|
|
52
|
+
});
|
|
53
|
+
const canShowLabels = (0, react_1.useCallback)(() => {
|
|
54
|
+
var _a;
|
|
55
|
+
const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
|
|
56
|
+
const childrenLength = react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)).length;
|
|
57
|
+
wrapperRef.current &&
|
|
58
|
+
setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
|
|
59
|
+
remSize * 10 * childrenLength);
|
|
60
|
+
}, [children]);
|
|
61
|
+
(0, react_1.useEffect)(() => {
|
|
62
|
+
window.addEventListener("resize", canShowLabels);
|
|
63
|
+
canShowLabels();
|
|
64
|
+
return () => {
|
|
65
|
+
window.removeEventListener("resize", canShowLabels);
|
|
66
|
+
};
|
|
67
|
+
}, [canShowLabels]);
|
|
68
|
+
return (react_1.default.createElement("ol", Object.assign({ ref: mergedRef, className: (0, classnames_1.default)(`navds-step-indicator`, className) }, rest),
|
|
69
|
+
react_1.default.createElement(exports.StepContext.Provider, { value: {
|
|
70
|
+
activeStep,
|
|
71
|
+
onStepChange,
|
|
72
|
+
hideLabels: removeLabels,
|
|
73
|
+
} }, stepsWithIndex)));
|
|
74
|
+
});
|
|
75
|
+
StepIndicator.Step = Step_1.default;
|
|
76
|
+
exports.default = StepIndicator;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
13
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
14
|
+
};
|
|
15
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
+
exports.StepIndicator = void 0;
|
|
17
|
+
var StepIndicator_1 = require("./StepIndicator");
|
|
18
|
+
Object.defineProperty(exports, "StepIndicator", { enumerable: true, get: function () { return __importDefault(StepIndicator_1).default; } });
|
|
19
|
+
__exportStar(require("./StepIndicator"), exports);
|
package/esm/form/Select.js
CHANGED
|
@@ -30,7 +30,7 @@ const Select = forwardRef((props, ref) => {
|
|
|
30
30
|
}), id: inputDescriptionId, size: size }, description)),
|
|
31
31
|
React.createElement("div", { className: "navds-select__container" },
|
|
32
32
|
React.createElement("select", Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: cl("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
|
|
33
|
-
React.createElement(Expand, { className: "navds-select__chevron" })),
|
|
33
|
+
React.createElement(Expand, { className: "navds-select__chevron", "aria-hidden": true })),
|
|
34
34
|
React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, props.error))));
|
|
35
35
|
});
|
|
36
36
|
export default Select;
|
package/esm/form/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,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;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,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,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,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;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,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,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,wBAAe,CACpD;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,MAAM,CAAC"}
|
package/esm/form/Switch.d.ts
CHANGED
|
@@ -13,6 +13,10 @@ export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">,
|
|
|
13
13
|
* Toggles loading state with loader-component on switch
|
|
14
14
|
*/
|
|
15
15
|
loading?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Positions switch on left/right side of label
|
|
18
|
+
*/
|
|
19
|
+
position?: "left" | "right";
|
|
16
20
|
}
|
|
17
21
|
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
18
22
|
export default Switch;
|
package/esm/form/Switch.js
CHANGED
|
@@ -10,19 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import cl from "classnames";
|
|
13
|
-
import React, { forwardRef } from "react";
|
|
13
|
+
import React, { forwardRef, useEffect, useState, } from "react";
|
|
14
14
|
import { BodyShort, Detail, Loader, omit } from "..";
|
|
15
15
|
import { useFormField } from "./useFormField";
|
|
16
|
+
const SelectedIcon = () => (React.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
|
|
17
|
+
React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
|
|
16
18
|
const Switch = forwardRef((props, ref) => {
|
|
19
|
+
var _a;
|
|
17
20
|
const { inputProps, size } = useFormField(props, "switch");
|
|
18
|
-
const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
|
|
21
|
+
const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
|
|
19
22
|
const Description = size === "medium" ? BodyShort : Detail;
|
|
20
|
-
|
|
23
|
+
const [checked, setChecked] = useState((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
checkedProp !== undefined && setChecked(checkedProp);
|
|
26
|
+
}, [checkedProp]);
|
|
27
|
+
const handleChange = (e) => {
|
|
28
|
+
setChecked(e.target.checked);
|
|
29
|
+
props.onChange && props.onChange(e);
|
|
30
|
+
};
|
|
31
|
+
return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
|
|
21
32
|
"navds-switch--disabled": inputProps.disabled,
|
|
22
33
|
}) },
|
|
23
|
-
React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: cl(className, "navds-switch__input") })),
|
|
34
|
+
React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: cl(className, "navds-switch__input") })),
|
|
24
35
|
React.createElement("span", { className: "navds-switch__track" },
|
|
25
|
-
React.createElement("span", { className: "navds-switch__thumb" }, loading
|
|
36
|
+
React.createElement("span", { className: "navds-switch__thumb" }, loading ? (React.createElement(Loader, { size: "xsmall" })) : checked ? (React.createElement(SelectedIcon, null)) : null)),
|
|
26
37
|
React.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
|
|
27
38
|
React.createElement("div", { className: cl("navds-switch__content", {
|
|
28
39
|
"sr-only": hideLabel,
|
package/esm/form/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":"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"}
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { OverridableComponent } from "..";
|
|
3
|
+
export interface StepIndicatorStepProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Text content under indicator
|
|
6
|
+
*/
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Disables interaction with element
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Handled by StepIndicator
|
|
14
|
+
*/
|
|
15
|
+
index?: number;
|
|
16
|
+
}
|
|
17
|
+
export interface StepIndicatorStepType extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {
|
|
18
|
+
}
|
|
19
|
+
declare const Step: StepIndicatorStepType;
|
|
20
|
+
export default Step;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { forwardRef, useContext } from "react";
|
|
13
|
+
import cl from "classnames";
|
|
14
|
+
import { StepContext } from ".";
|
|
15
|
+
import { BodyShort, Label } from "..";
|
|
16
|
+
const StepComponent = forwardRef((_a, ref) => {
|
|
17
|
+
var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
|
|
18
|
+
const context = useContext(StepContext);
|
|
19
|
+
if (context === null) {
|
|
20
|
+
console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
const safeIndex = index !== null && index !== void 0 ? index : 0;
|
|
24
|
+
const Number = context.activeStep === safeIndex ? Label : BodyShort;
|
|
25
|
+
return (React.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: cl("navds-step-indicator__step", className, {
|
|
26
|
+
"navds-step-indicator__step--disabled": disabled,
|
|
27
|
+
"navds-step-indicator__step--active": context.activeStep === safeIndex,
|
|
28
|
+
"navds-step-indicator__step--finished": context.activeStep > safeIndex,
|
|
29
|
+
}), onClick: (e) => {
|
|
30
|
+
context.onStepChange(safeIndex);
|
|
31
|
+
rest.onClick && rest.onClick(e);
|
|
32
|
+
} }),
|
|
33
|
+
React.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
|
|
34
|
+
React.createElement("div", { className: cl("navds-step-indicator__step-label") }, !context.hideLabels && children),
|
|
35
|
+
safeIndex !== 0 && (React.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
|
|
36
|
+
});
|
|
37
|
+
const Step = StepComponent;
|
|
38
|
+
export default Step;
|
|
39
|
+
//# sourceMappingURL=Step.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/step-indicator/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAqB5D,MAAM,aAAa,GAGf,UAAU,CACZ,CACE,EAA2E,EAC3E,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzE,oDAA2E,CAAF;IAGzE,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC;IAE7B,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,EAAE;YACrD,sCAAsC,EAAE,QAAQ;YAChD,oCAAoC,EAClC,OAAO,CAAC,UAAU,KAAK,SAAS;YAClC,sCAAsC,EACpC,OAAO,CAAC,UAAU,GAAG,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAChC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;QAED,oBAAC,MAAM,IAAC,SAAS,EAAC,mCAAmC,IAClD,SAAS,GAAG,CAAC,CACP;QACT,6BAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,IACnD,CAAC,OAAO,CAAC,UAAU,IAAI,QAAQ,CAC5B;QACL,SAAS,KAAK,CAAC,IAAI,CAClB,mDAAkB,SAAS,EAAC,iCAAiC,GAAG,CACjE,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAsC,CAAC;AAEpD,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StepIndicatorStepType } from "./Step";
|
|
3
|
+
export interface StepIndicatorProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
4
|
+
/**
|
|
5
|
+
* <StepIndicator.Step /> elements
|
|
6
|
+
*/
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Adds classname to wrapper
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Current active step index
|
|
14
|
+
*/
|
|
15
|
+
activeStep: number;
|
|
16
|
+
/**
|
|
17
|
+
* Callback for clicked step index
|
|
18
|
+
*/
|
|
19
|
+
onStepChange?: (step: number) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Hides labels for each step if true
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
hideLabels?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* enables `hideLabels` internally when steps start to overflow.
|
|
27
|
+
* @note declaring `hideLabels` overwrites this functionality
|
|
28
|
+
*/
|
|
29
|
+
responsive?: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface StepIndicatorComponent extends React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLOListElement>> {
|
|
32
|
+
Step: StepIndicatorStepType;
|
|
33
|
+
}
|
|
34
|
+
interface StepContextProps {
|
|
35
|
+
activeStep: number;
|
|
36
|
+
onStepChange: (step: number) => void;
|
|
37
|
+
hideLabels: boolean;
|
|
38
|
+
}
|
|
39
|
+
export declare const StepContext: React.Context<StepContextProps | null>;
|
|
40
|
+
declare const StepIndicator: StepIndicatorComponent;
|
|
41
|
+
export default StepIndicator;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import cl from "classnames";
|
|
13
|
+
import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState, } from "react";
|
|
14
|
+
import mergeRefs from "react-merge-refs";
|
|
15
|
+
import Step from "./Step";
|
|
16
|
+
export const StepContext = createContext(null);
|
|
17
|
+
const StepIndicator = forwardRef((_a, ref) => {
|
|
18
|
+
var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
|
|
19
|
+
const wrapperRef = useRef(null);
|
|
20
|
+
const mergedRef = mergeRefs([wrapperRef, ref]);
|
|
21
|
+
const [showLabels, setShowLabels] = useState(true);
|
|
22
|
+
const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
|
|
23
|
+
const stepsWithIndex = React.Children.map(children, (step, index) => {
|
|
24
|
+
return React.isValidElement(step) ? (React.createElement("li", { className: cl("navds-step-indicator__step-wrapper", {
|
|
25
|
+
"navds-step-indicator__step-wrapper--hidelabel": removeLabels,
|
|
26
|
+
}), key: index, "aria-current": index === activeStep && "step" }, React.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
|
|
27
|
+
});
|
|
28
|
+
const canShowLabels = useCallback(() => {
|
|
29
|
+
var _a;
|
|
30
|
+
const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
|
|
31
|
+
const childrenLength = React.Children.toArray(children).filter((child) => React.isValidElement(child)).length;
|
|
32
|
+
wrapperRef.current &&
|
|
33
|
+
setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
|
|
34
|
+
remSize * 10 * childrenLength);
|
|
35
|
+
}, [children]);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
window.addEventListener("resize", canShowLabels);
|
|
38
|
+
canShowLabels();
|
|
39
|
+
return () => {
|
|
40
|
+
window.removeEventListener("resize", canShowLabels);
|
|
41
|
+
};
|
|
42
|
+
}, [canShowLabels]);
|
|
43
|
+
return (React.createElement("ol", Object.assign({ ref: mergedRef, className: cl(`navds-step-indicator`, className) }, rest),
|
|
44
|
+
React.createElement(StepContext.Provider, { value: {
|
|
45
|
+
activeStep,
|
|
46
|
+
onStepChange,
|
|
47
|
+
hideLabels: removeLabels,
|
|
48
|
+
} }, stepsWithIndex)));
|
|
49
|
+
});
|
|
50
|
+
StepIndicator.Step = Step;
|
|
51
|
+
export default StepIndicator;
|
|
52
|
+
//# sourceMappingURL=StepIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepIndicator.js","sourceRoot":"","sources":["../../src/step-indicator/StepIndicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/step-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -24,8 +24,7 @@
|
|
|
24
24
|
"files": [
|
|
25
25
|
"/cjs",
|
|
26
26
|
"/esm",
|
|
27
|
-
"/src"
|
|
28
|
-
"/dist"
|
|
27
|
+
"/src"
|
|
29
28
|
],
|
|
30
29
|
"scripts": {
|
|
31
30
|
"create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
|
|
@@ -36,7 +35,7 @@
|
|
|
36
35
|
},
|
|
37
36
|
"dependencies": {
|
|
38
37
|
"@material-ui/core": "^4.12.3",
|
|
39
|
-
"@navikt/ds-icons": "^0.7.
|
|
38
|
+
"@navikt/ds-icons": "^0.7.2",
|
|
40
39
|
"@popperjs/core": "^2.10.1",
|
|
41
40
|
"classnames": "^2.2.6",
|
|
42
41
|
"react-collapse": "^5.1.0",
|
|
@@ -46,15 +45,13 @@
|
|
|
46
45
|
"uuid": "^8.3.2"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"webpack-node-externals": "^3.0.0",
|
|
50
|
-
"webpack": "^5.65.0",
|
|
51
48
|
"@testing-library/jest-dom": "^5.14.1",
|
|
52
49
|
"@testing-library/react": "^12.1.0",
|
|
53
50
|
"@testing-library/user-event": "^13.2.1",
|
|
54
51
|
"@types/faker": "^5.5.8",
|
|
55
52
|
"@types/jest": "^27.0.1",
|
|
56
|
-
"@types/styled-components": "^5.1.14",
|
|
57
53
|
"@types/react-modal": "^3.13.1",
|
|
54
|
+
"@types/styled-components": "^5.1.14",
|
|
58
55
|
"copyfiles": "^2.4.1",
|
|
59
56
|
"faker": "^5.5.3",
|
|
60
57
|
"jest": "^27.2.0",
|
|
@@ -66,5 +63,6 @@
|
|
|
66
63
|
"peerDependencies": {
|
|
67
64
|
"@types/react": "^17.0.30",
|
|
68
65
|
"react": "^17.0.0"
|
|
69
|
-
}
|
|
66
|
+
},
|
|
67
|
+
"gitHead": "d9359d1a862061125816b15efa464a8da14639cb"
|
|
70
68
|
}
|
package/src/form/Select.tsx
CHANGED
|
@@ -94,7 +94,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
|
|
|
94
94
|
>
|
|
95
95
|
{children}
|
|
96
96
|
</select>
|
|
97
|
-
<Expand className="navds-select__chevron" />
|
|
97
|
+
<Expand className="navds-select__chevron" aria-hidden />
|
|
98
98
|
</div>
|
|
99
99
|
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
|
100
100
|
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|