@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.
Files changed (38) hide show
  1. package/LICENCE +31 -0
  2. package/cjs/form/Select.js +1 -1
  3. package/cjs/form/Switch.js +15 -4
  4. package/cjs/index.js +1 -0
  5. package/cjs/step-indicator/Step.js +62 -0
  6. package/cjs/step-indicator/StepIndicator.js +76 -0
  7. package/cjs/step-indicator/index.js +19 -0
  8. package/cjs/step-indicator/package.json +6 -0
  9. package/esm/form/Select.js +1 -1
  10. package/esm/form/Select.js.map +1 -1
  11. package/esm/form/Switch.d.ts +4 -0
  12. package/esm/form/Switch.js +16 -5
  13. package/esm/form/Switch.js.map +1 -1
  14. package/esm/index.d.ts +1 -0
  15. package/esm/index.js +1 -0
  16. package/esm/index.js.map +1 -1
  17. package/esm/step-indicator/Step.d.ts +20 -0
  18. package/esm/step-indicator/Step.js +39 -0
  19. package/esm/step-indicator/Step.js.map +1 -0
  20. package/esm/step-indicator/StepIndicator.d.ts +41 -0
  21. package/esm/step-indicator/StepIndicator.js +52 -0
  22. package/esm/step-indicator/StepIndicator.js.map +1 -0
  23. package/esm/step-indicator/index.d.ts +2 -0
  24. package/esm/step-indicator/index.js +3 -0
  25. package/esm/step-indicator/index.js.map +1 -0
  26. package/package.json +6 -8
  27. package/src/form/Select.tsx +1 -1
  28. package/src/form/Switch.tsx +65 -6
  29. package/src/form/stories/switch.stories.mdx +73 -3
  30. package/src/form/stories/switch.stories.tsx +27 -1
  31. package/src/index.ts +1 -0
  32. package/src/step-indicator/Step.tsx +79 -0
  33. package/src/step-indicator/StepIndicator.tsx +145 -0
  34. package/src/step-indicator/index.ts +2 -0
  35. package/src/step-indicator/stories/Example.tsx +23 -0
  36. package/src/step-indicator/stories/step-indicator.stories.mdx +122 -0
  37. package/src/step-indicator/stories/step-indicator.stories.tsx +104 -0
  38. 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.
@@ -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;
@@ -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
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, {
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 && react_1.default.createElement(__1.Loader, { size: "xsmall" }))),
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);
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../esm/step-indicator/index.js",
5
+ "types": "../../esm/step-indicator/index.d.ts"
6
+ }
@@ -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;
@@ -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,GAAG,CACxC;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"}
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"}
@@ -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;
@@ -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
- return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, {
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 && React.createElement(Loader, { size: "xsmall" }))),
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,
@@ -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,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AACrD,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9D,MAAM,MAAM,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE3D,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,gEAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,iBAAiB,IAAI,EAAE,EAAE;YACtE,wBAAwB,EAAE,UAAU,CAAC,QAAQ;SAC9C,CAAC;QAEF,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,IAC1D,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,IAC/C;QACF,8BAAM,SAAS,EAAC,qBAAqB;YACnC,8BAAM,SAAS,EAAC,qBAAqB,IAClC,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B,CACF;QAEP,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,6BAA6B;YACpE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;oBACrC,SAAS,EAAE,SAAS;oBACpB,gCAAgC,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,SAAS;iBAC9D,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,qBAAqB,IAC5D,QAAQ,CACC;gBACX,WAAW,IAAI,CACd,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2BAA2B,IAEpC,WAAW,CACA,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":"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"}
package/esm/index.d.ts CHANGED
@@ -13,6 +13,7 @@ export * from "./modal";
13
13
  export * from "./panel";
14
14
  export * from "./popover";
15
15
  export * from "./speech-bubble";
16
+ export * from "./step-indicator";
16
17
  export * from "./tag";
17
18
  export * from "./table";
18
19
  export * from "./typography";
package/esm/index.js CHANGED
@@ -13,6 +13,7 @@ export * from "./modal";
13
13
  export * from "./panel";
14
14
  export * from "./popover";
15
15
  export * from "./speech-bubble";
16
+ export * from "./step-indicator";
16
17
  export * from "./tag";
17
18
  export * from "./table";
18
19
  export * from "./typography";
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":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EACV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,IAAuD,MAAM,QAAQ,CAAC;AA6C7E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAExE,MAAM,aAAa,GAA2B,UAAU,CAItD,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,EACV,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,UAAU,OAEX,EADI,IAAI,cAPT,mFAQC,CADQ;IAIT,MAAM,UAAU,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IAE/C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAClE,OAAO,KAAK,CAAC,cAAc,CAAyB,IAAI,CAAC,CAAC,CAAC,CAAC,CAC1D,4BACE,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE;gBAClD,+CAA+C,EAAE,YAAY;aAC9D,CAAC,EACF,GAAG,EAAE,KAAK,kBACI,KAAK,KAAK,UAAU,IAAI,MAAM,IAE3C,KAAK,CAAC,YAAY,CAAC,IAAI,kCACnB,IAAI,CAAC,KAAK,KACb,KAAK,IACL,CACC,CACN,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,MAAM,OAAO,GAAG,UAAU,CACxB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC5D,CAAC;QACF,MAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CACvE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,CAAC,MAAM,CAAC;QAET,UAAU,CAAC,OAAO;YAChB,aAAa,CACX,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,qBAAqB,GAAG,KAAK;gBAC/C,OAAO,GAAG,EAAE,GAAG,cAAc,CAChC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QACjD,aAAa,EAAE,CAAC;QAChB,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,0CACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAC5C,IAAI;QAER,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,UAAU,EAAE,YAAY;aACzB,IAEA,cAAc,CACM,CACpB,CACN,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC;AAE1B,eAAe,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as StepIndicator } from "./StepIndicator";
2
+ export * from "./StepIndicator";
@@ -0,0 +1,3 @@
1
+ export { default as StepIndicator } from "./StepIndicator";
2
+ export * from "./StepIndicator";
3
+ //# sourceMappingURL=index.js.map
@@ -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-beta.1",
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.1",
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
  }
@@ -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>}