@navikt/ds-react 1.0.0-rc.8 → 1.0.0
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/form/Textarea.js +4 -3
- package/cjs/form/checkbox/Checkbox.js +3 -3
- package/cjs/form/radio/Radio.js +3 -3
- package/cjs/modal/Modal.js +2 -2
- package/esm/form/Textarea.js +4 -3
- package/esm/form/Textarea.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +3 -3
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/radio/Radio.js +3 -3
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/modal/Modal.d.ts +4 -0
- package/esm/modal/Modal.js +2 -2
- package/esm/modal/Modal.js.map +1 -1
- package/package.json +6 -6
- package/src/form/Textarea.tsx +5 -3
- package/src/form/checkbox/Checkbox.tsx +4 -4
- package/src/form/checkbox/checkbox.stories.tsx +1 -1
- package/src/form/radio/Radio.tsx +4 -4
- package/src/form/radio/radio.stories.tsx +1 -1
- package/src/loader/loader.stories.tsx +2 -2
- package/src/modal/Modal.tsx +6 -0
- package/src/modal/modal.stories.tsx +11 -62
package/cjs/form/Textarea.js
CHANGED
|
@@ -58,6 +58,9 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
|
|
|
58
58
|
}
|
|
59
59
|
return rows;
|
|
60
60
|
};
|
|
61
|
+
const describedBy = (0, clsx_1.default)(inputProps["aria-describedby"], {
|
|
62
|
+
[maxLengthId !== null && maxLengthId !== void 0 ? maxLengthId : ""]: hasMaxLength,
|
|
63
|
+
});
|
|
61
64
|
return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
|
|
62
65
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
63
66
|
"navds-textarea--error": hasError,
|
|
@@ -76,9 +79,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
|
|
|
76
79
|
? props.onChange(e)
|
|
77
80
|
: setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: (0, clsx_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
|
|
78
81
|
"navds-textarea--counter": hasMaxLength,
|
|
79
|
-
}), "aria-describedby":
|
|
80
|
-
[maxLengthId !== null && maxLengthId !== void 0 ? maxLengthId : ""]: hasMaxLength,
|
|
81
|
-
}) })),
|
|
82
|
+
}) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
|
|
82
83
|
hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
83
84
|
react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
|
|
84
85
|
"Tekstomr\u00E5de med plass til ",
|
|
@@ -59,10 +59,10 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
|
|
|
59
59
|
}
|
|
60
60
|
} })),
|
|
61
61
|
react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
|
|
62
|
-
react_1.default.createElement("
|
|
62
|
+
react_1.default.createElement("span", { className: (0, clsx_1.default)("navds-checkbox__content", {
|
|
63
63
|
"navds-sr-only": props.hideLabel,
|
|
64
64
|
}) },
|
|
65
|
-
react_1.default.createElement(__1.BodyShort, { as: "
|
|
66
|
-
props.description && (react_1.default.createElement(Description, { as: "
|
|
65
|
+
react_1.default.createElement(__1.BodyShort, { as: "span", size: size }, props.children),
|
|
66
|
+
props.description && (react_1.default.createElement(Description, { as: "span", size: "small", className: "navds-checkbox__description" }, props.description))))));
|
|
67
67
|
});
|
|
68
68
|
exports.default = exports.Checkbox;
|
package/cjs/form/radio/Radio.js
CHANGED
|
@@ -40,8 +40,8 @@ exports.Radio = (0, react_1.forwardRef)((props, ref) => {
|
|
|
40
40
|
}) },
|
|
41
41
|
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, ["children", "size", "description"]), inputProps, { className: "navds-radio__input", ref: ref })),
|
|
42
42
|
react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-radio__label" },
|
|
43
|
-
react_1.default.createElement("
|
|
44
|
-
react_1.default.createElement(__1.BodyShort, { as: "
|
|
45
|
-
props.description && (react_1.default.createElement(Description, { as: "
|
|
43
|
+
react_1.default.createElement("span", { className: "navds-radio__content" },
|
|
44
|
+
react_1.default.createElement(__1.BodyShort, { as: "span", size: size }, props.children),
|
|
45
|
+
props.description && (react_1.default.createElement(Description, { as: "span", size: "small", className: "navds-radio__description" }, props.description))))));
|
|
46
46
|
});
|
|
47
47
|
exports.default = exports.Radio;
|
package/cjs/modal/Modal.js
CHANGED
|
@@ -45,7 +45,7 @@ const ds_icons_1 = require("@navikt/ds-icons");
|
|
|
45
45
|
const __1 = require("..");
|
|
46
46
|
const ModalContent_1 = __importDefault(require("./ModalContent"));
|
|
47
47
|
exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
|
|
48
|
-
var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
|
|
48
|
+
var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel, style } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label", "style"]);
|
|
49
49
|
const modalRef = (0, react_1.useRef)(null);
|
|
50
50
|
const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([modalRef, ref]), [ref]);
|
|
51
51
|
const buttonRef = (0, react_1.useRef)(null);
|
|
@@ -57,7 +57,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
57
57
|
buttonRef.current.focus();
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
|
-
return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
60
|
+
return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { style: style, isOpen: open, ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
61
61
|
describedby: ariaDescribedBy,
|
|
62
62
|
labelledby: ariaLabelledBy,
|
|
63
63
|
modal: ariaModal,
|
package/esm/form/Textarea.js
CHANGED
|
@@ -29,6 +29,9 @@ export const Textarea = forwardRef((props, ref) => {
|
|
|
29
29
|
}
|
|
30
30
|
return rows;
|
|
31
31
|
};
|
|
32
|
+
const describedBy = cl(inputProps["aria-describedby"], {
|
|
33
|
+
[maxLengthId !== null && maxLengthId !== void 0 ? maxLengthId : ""]: hasMaxLength,
|
|
34
|
+
});
|
|
32
35
|
return (React.createElement("div", { className: cl(className, "navds-form-field", `navds-form-field--${size}`, {
|
|
33
36
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
34
37
|
"navds-textarea--error": hasError,
|
|
@@ -47,9 +50,7 @@ export const Textarea = forwardRef((props, ref) => {
|
|
|
47
50
|
? props.onChange(e)
|
|
48
51
|
: setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
|
|
49
52
|
"navds-textarea--counter": hasMaxLength,
|
|
50
|
-
}), "aria-describedby":
|
|
51
|
-
[maxLengthId !== null && maxLengthId !== void 0 ? maxLengthId : ""]: hasMaxLength,
|
|
52
|
-
}) })),
|
|
53
|
+
}) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
|
|
53
54
|
hasMaxLength && (React.createElement(React.Fragment, null,
|
|
54
55
|
React.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
|
|
55
56
|
"Tekstomr\u00E5de med plass til ",
|
package/esm/form/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,11 +30,11 @@ export const Checkbox = forwardRef((props, ref) => {
|
|
|
30
30
|
}
|
|
31
31
|
} })),
|
|
32
32
|
React.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
|
|
33
|
-
React.createElement("
|
|
33
|
+
React.createElement("span", { className: cl("navds-checkbox__content", {
|
|
34
34
|
"navds-sr-only": props.hideLabel,
|
|
35
35
|
}) },
|
|
36
|
-
React.createElement(BodyShort, { as: "
|
|
37
|
-
props.description && (React.createElement(Description, { as: "
|
|
36
|
+
React.createElement(BodyShort, { as: "span", size: size }, props.children),
|
|
37
|
+
props.description && (React.createElement(Description, { as: "span", size: "small", className: "navds-checkbox__description" }, props.description))))));
|
|
38
38
|
});
|
|
39
39
|
export default Checkbox;
|
|
40
40
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAqChD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;SACV,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;iBACjD;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,EAAE,CAAC,CAAC;iBACT;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;oBACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;iBAClB;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAqChD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;SACV,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;iBACjD;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,EAAE,CAAC,CAAC;iBACT;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;oBACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;iBAClB;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,8BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,IAC5B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/esm/form/radio/Radio.js
CHANGED
|
@@ -11,9 +11,9 @@ export const Radio = forwardRef((props, ref) => {
|
|
|
11
11
|
}) },
|
|
12
12
|
React.createElement("input", Object.assign({}, omit(props, ["children", "size", "description"]), inputProps, { className: "navds-radio__input", ref: ref })),
|
|
13
13
|
React.createElement("label", { htmlFor: inputProps.id, className: "navds-radio__label" },
|
|
14
|
-
React.createElement("
|
|
15
|
-
React.createElement(BodyShort, { as: "
|
|
16
|
-
props.description && (React.createElement(Description, { as: "
|
|
14
|
+
React.createElement("span", { className: "navds-radio__content" },
|
|
15
|
+
React.createElement(BodyShort, { as: "span", size: size }, props.children),
|
|
16
|
+
props.description && (React.createElement(Description, { as: "span", size: "small", className: "navds-radio__description" }, props.description))))));
|
|
17
17
|
});
|
|
18
18
|
export default Radio;
|
|
19
19
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmBtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YACpE,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;SAC7C,CAAC;QAEF,+CACM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,EAChD,UAAU,IACd,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,oBAAoB;YAC3D,
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmBtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YACpE,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;SAC7C,CAAC;QAEF,+CACM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,EAChD,UAAU,IACd,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,oBAAoB;YAC3D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,oBAAC,SAAS,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,IAC5B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,0BAA0B,IAEnC,KAAK,CAAC,WAAW,CACN,CACf,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
package/esm/modal/Modal.d.ts
CHANGED
|
@@ -28,6 +28,10 @@ export interface ModalProps {
|
|
|
28
28
|
* @default true
|
|
29
29
|
*/
|
|
30
30
|
closeButton?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Allows custom styling of ReactModal, in accordance with their typing
|
|
33
|
+
*/
|
|
34
|
+
style?: ReactModal.Styles;
|
|
31
35
|
/**
|
|
32
36
|
* Callback for setting parent element modal will attach to
|
|
33
37
|
*/
|
package/esm/modal/Modal.js
CHANGED
|
@@ -16,7 +16,7 @@ import { Close } from "@navikt/ds-icons";
|
|
|
16
16
|
import { Button, mergeRefs } from "..";
|
|
17
17
|
import ModalContent from "./ModalContent";
|
|
18
18
|
export const Modal = forwardRef((_a, ref) => {
|
|
19
|
-
var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
|
|
19
|
+
var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel, style } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label", "style"]);
|
|
20
20
|
const modalRef = useRef(null);
|
|
21
21
|
const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
|
|
22
22
|
const buttonRef = useRef(null);
|
|
@@ -28,7 +28,7 @@ export const Modal = forwardRef((_a, ref) => {
|
|
|
28
28
|
buttonRef.current.focus();
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
-
return (React.createElement(ReactModal, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
31
|
+
return (React.createElement(ReactModal, Object.assign({}, rest, { style: style, isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
32
32
|
describedby: ariaDescribedBy,
|
|
33
33
|
labelledby: ariaLabelledBy,
|
|
34
34
|
modal: ariaModal,
|
package/esm/modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AACvC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AACvC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA2DhE,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,YAAY,EAC1B,KAAK,OAEN,EADI,IAAI,cAZT,oKAaC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB,EACD,YAAY,EAAE,YAAY;QAEzB,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,GACvC,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "NAV designsystem react components",
|
|
5
5
|
"author": "NAV Designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"test": "jest"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@floating-ui/react-dom-interactions": "0.
|
|
39
|
-
"@navikt/ds-icons": "^1.0.0
|
|
40
|
-
"@radix-ui/react-tabs": "0.
|
|
41
|
-
"@radix-ui/react-toggle-group": "0.
|
|
38
|
+
"@floating-ui/react-dom-interactions": "0.9.2",
|
|
39
|
+
"@navikt/ds-icons": "^1.0.0",
|
|
40
|
+
"@radix-ui/react-tabs": "1.0.0",
|
|
41
|
+
"@radix-ui/react-toggle-group": "1.0.0",
|
|
42
42
|
"clsx": "^1.1.1",
|
|
43
43
|
"react-modal": "3.15.1"
|
|
44
44
|
},
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"optional": true
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "155c556feab360fd9d3cdc4062408bd29ff17e71"
|
|
78
78
|
}
|
package/src/form/Textarea.tsx
CHANGED
|
@@ -83,6 +83,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
83
83
|
return rows;
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
+
const describedBy = cl(inputProps["aria-describedby"], {
|
|
87
|
+
[maxLengthId ?? ""]: hasMaxLength,
|
|
88
|
+
});
|
|
89
|
+
|
|
86
90
|
return (
|
|
87
91
|
<div
|
|
88
92
|
className={cl(
|
|
@@ -151,9 +155,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
151
155
|
"navds-textarea--counter": hasMaxLength,
|
|
152
156
|
}
|
|
153
157
|
)}
|
|
154
|
-
|
|
155
|
-
[maxLengthId ?? ""]: hasMaxLength,
|
|
156
|
-
})}
|
|
158
|
+
{...(describedBy ? { "aria-describedby": describedBy } : {})}
|
|
157
159
|
/>
|
|
158
160
|
{hasMaxLength && (
|
|
159
161
|
<>
|
|
@@ -84,24 +84,24 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
|
84
84
|
}}
|
|
85
85
|
/>
|
|
86
86
|
<label htmlFor={inputProps.id} className="navds-checkbox__label">
|
|
87
|
-
<
|
|
87
|
+
<span
|
|
88
88
|
className={cl("navds-checkbox__content", {
|
|
89
89
|
"navds-sr-only": props.hideLabel,
|
|
90
90
|
})}
|
|
91
91
|
>
|
|
92
|
-
<BodyShort as="
|
|
92
|
+
<BodyShort as="span" size={size}>
|
|
93
93
|
{props.children}
|
|
94
94
|
</BodyShort>
|
|
95
95
|
{props.description && (
|
|
96
96
|
<Description
|
|
97
|
-
as="
|
|
97
|
+
as="span"
|
|
98
98
|
size="small"
|
|
99
99
|
className="navds-checkbox__description"
|
|
100
100
|
>
|
|
101
101
|
{props.description}
|
|
102
102
|
</Description>
|
|
103
103
|
)}
|
|
104
|
-
</
|
|
104
|
+
</span>
|
|
105
105
|
</label>
|
|
106
106
|
</div>
|
|
107
107
|
);
|
|
@@ -25,7 +25,7 @@ export const Default = (props) => {
|
|
|
25
25
|
onChange={props.controlled ? setState : undefined}
|
|
26
26
|
hideLegend={props.hideLegend}
|
|
27
27
|
error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
|
|
28
|
-
{
|
|
28
|
+
size={props?.size}
|
|
29
29
|
>
|
|
30
30
|
<Checkbox
|
|
31
31
|
value="checkbox1"
|
package/src/form/radio/Radio.tsx
CHANGED
|
@@ -40,20 +40,20 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
|
|
40
40
|
ref={ref}
|
|
41
41
|
/>
|
|
42
42
|
<label htmlFor={inputProps.id} className="navds-radio__label">
|
|
43
|
-
<
|
|
44
|
-
<BodyShort as="
|
|
43
|
+
<span className="navds-radio__content">
|
|
44
|
+
<BodyShort as="span" size={size}>
|
|
45
45
|
{props.children}
|
|
46
46
|
</BodyShort>
|
|
47
47
|
{props.description && (
|
|
48
48
|
<Description
|
|
49
|
-
as="
|
|
49
|
+
as="span"
|
|
50
50
|
size="small"
|
|
51
51
|
className="navds-radio__description"
|
|
52
52
|
>
|
|
53
53
|
{props.description}
|
|
54
54
|
</Description>
|
|
55
55
|
)}
|
|
56
|
-
</
|
|
56
|
+
</span>
|
|
57
57
|
</label>
|
|
58
58
|
</div>
|
|
59
59
|
);
|
|
@@ -24,7 +24,7 @@ export const Default = (props) => {
|
|
|
24
24
|
onChange={props.controlled ? setState : undefined}
|
|
25
25
|
hideLegend={props.hideLegend}
|
|
26
26
|
error={props.errorGroup ? "Errormelding" : undefined}
|
|
27
|
-
{
|
|
27
|
+
size={props?.size}
|
|
28
28
|
>
|
|
29
29
|
<Radio value="radio1">{props.children || "Apple"}</Radio>
|
|
30
30
|
<Radio
|
|
@@ -55,7 +55,7 @@ export const Variant = () => (
|
|
|
55
55
|
<Loader size="3xlarge" variant="inverted" />
|
|
56
56
|
<Loader size="3xlarge" variant="interaction" />
|
|
57
57
|
</div>
|
|
58
|
-
<div style={{ backgroundColor: "#
|
|
58
|
+
<div style={{ backgroundColor: "#262626" }}>
|
|
59
59
|
<Loader size="3xlarge" variant="neutral" />
|
|
60
60
|
<Loader size="3xlarge" variant="inverted" />
|
|
61
61
|
<Loader size="3xlarge" variant="interaction" />
|
|
@@ -70,7 +70,7 @@ export const Transparent = () => (
|
|
|
70
70
|
<Loader size="3xlarge" transparent variant="inverted" />
|
|
71
71
|
<Loader size="3xlarge" transparent variant="interaction" />
|
|
72
72
|
</div>
|
|
73
|
-
<div style={{ backgroundColor: "#
|
|
73
|
+
<div style={{ backgroundColor: "#262626" }}>
|
|
74
74
|
<Loader size="3xlarge" transparent variant="neutral" />
|
|
75
75
|
<Loader size="3xlarge" transparent variant="inverted" />
|
|
76
76
|
<Loader size="3xlarge" transparent variant="interaction" />
|
package/src/modal/Modal.tsx
CHANGED
|
@@ -32,6 +32,10 @@ export interface ModalProps {
|
|
|
32
32
|
* @default true
|
|
33
33
|
*/
|
|
34
34
|
closeButton?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Allows custom styling of ReactModal, in accordance with their typing
|
|
37
|
+
*/
|
|
38
|
+
style?: ReactModal.Styles;
|
|
35
39
|
/**
|
|
36
40
|
* Callback for setting parent element modal will attach to
|
|
37
41
|
*/
|
|
@@ -71,6 +75,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
|
|
|
71
75
|
"aria-labelledby": ariaLabelledBy,
|
|
72
76
|
"aria-modal": ariaModal,
|
|
73
77
|
"aria-label": contentLabel,
|
|
78
|
+
style,
|
|
74
79
|
...rest
|
|
75
80
|
},
|
|
76
81
|
ref
|
|
@@ -90,6 +95,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
|
|
|
90
95
|
return (
|
|
91
96
|
<ReactModal
|
|
92
97
|
{...rest}
|
|
98
|
+
style={style}
|
|
93
99
|
isOpen={open}
|
|
94
100
|
ref={mergedRef}
|
|
95
101
|
className={cl("navds-modal", className)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { BodyLong, Button, Heading
|
|
2
|
+
import { BodyLong, Button, Heading } from "../..";
|
|
3
|
+
import Modal from "./Modal";
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: "ds-react/Modal",
|
|
@@ -13,16 +14,23 @@ export const Default = (props) => {
|
|
|
13
14
|
const [open, setOpen] = useState(false);
|
|
14
15
|
|
|
15
16
|
useEffect(() => {
|
|
16
|
-
Modal.setAppElement("#root");
|
|
17
|
+
Modal.setAppElement?.("#root");
|
|
17
18
|
}, []);
|
|
18
19
|
|
|
19
20
|
return (
|
|
20
21
|
<>
|
|
21
|
-
<Button onClick={() => setOpen(true)}>Open</Button>
|
|
22
|
+
<Button onClick={() => setOpen(true)}>Open Modal</Button>
|
|
23
|
+
<p>
|
|
24
|
+
We can also custom style the modal by passing in a react-modal style
|
|
25
|
+
object. Here the backdrop is red.
|
|
26
|
+
</p>
|
|
22
27
|
<Modal
|
|
23
28
|
open={open}
|
|
24
29
|
onClose={() => setOpen(false)}
|
|
25
30
|
aria-labelledby="header123"
|
|
31
|
+
style={{
|
|
32
|
+
overlay: { backgroundColor: "#ff0000aa" },
|
|
33
|
+
}}
|
|
26
34
|
{...props}
|
|
27
35
|
>
|
|
28
36
|
<Modal.Content>
|
|
@@ -43,62 +51,3 @@ Default.args = {
|
|
|
43
51
|
shouldCloseOnOverlayClick: true,
|
|
44
52
|
closeButton: true,
|
|
45
53
|
};
|
|
46
|
-
|
|
47
|
-
export const Open = () => {
|
|
48
|
-
const [open, setOpen] = useState(null);
|
|
49
|
-
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
Modal.setAppElement("#root");
|
|
52
|
-
}, []);
|
|
53
|
-
|
|
54
|
-
return (
|
|
55
|
-
<>
|
|
56
|
-
<Button onClick={() => setOpen(true)}>Open</Button>
|
|
57
|
-
<Modal
|
|
58
|
-
open={open ?? true}
|
|
59
|
-
onClose={() => setOpen(false)}
|
|
60
|
-
aria-labelledby="header123"
|
|
61
|
-
>
|
|
62
|
-
<Modal.Content>
|
|
63
|
-
<Heading spacing id="header123" level="1" size="large">
|
|
64
|
-
Header
|
|
65
|
-
</Heading>
|
|
66
|
-
<Heading spacing level="2" size="medium">
|
|
67
|
-
Header
|
|
68
|
-
</Heading>
|
|
69
|
-
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
|
70
|
-
</Modal.Content>
|
|
71
|
-
</Modal>
|
|
72
|
-
</>
|
|
73
|
-
);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const CloseButton = () => {
|
|
77
|
-
const [open, setOpen] = useState(true);
|
|
78
|
-
|
|
79
|
-
useEffect(() => {
|
|
80
|
-
Modal.setAppElement("#root");
|
|
81
|
-
}, []);
|
|
82
|
-
|
|
83
|
-
return (
|
|
84
|
-
<>
|
|
85
|
-
<Button onClick={() => setOpen(true)}>Open</Button>
|
|
86
|
-
<Modal
|
|
87
|
-
open={open}
|
|
88
|
-
onClose={() => setOpen(false)}
|
|
89
|
-
aria-labelledby="header123"
|
|
90
|
-
closeButton={false}
|
|
91
|
-
>
|
|
92
|
-
<Modal.Content>
|
|
93
|
-
<Heading spacing id="header123" level="1" size="large">
|
|
94
|
-
Header
|
|
95
|
-
</Heading>
|
|
96
|
-
<Heading spacing level="2" size="medium">
|
|
97
|
-
Header
|
|
98
|
-
</Heading>
|
|
99
|
-
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
|
100
|
-
</Modal.Content>
|
|
101
|
-
</Modal>
|
|
102
|
-
</>
|
|
103
|
-
);
|
|
104
|
-
};
|