@navikt/ds-react 2.8.1 → 2.8.3
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/_docs.json +28 -19
- package/cjs/expansion-card/ExpansionCard.js +2 -1
- package/cjs/expansion-card/ExpansionCardContent.js +1 -1
- package/cjs/expansion-card/ExpansionCardDescription.js +7 -1
- package/cjs/form/Textarea.js +6 -5
- package/esm/expansion-card/ExpansionCard.d.ts +1 -0
- package/esm/expansion-card/ExpansionCard.js +2 -1
- package/esm/expansion-card/ExpansionCard.js.map +1 -1
- package/esm/expansion-card/ExpansionCardContent.js +1 -1
- package/esm/expansion-card/ExpansionCardContent.js.map +1 -1
- package/esm/expansion-card/ExpansionCardDescription.js +8 -2
- package/esm/expansion-card/ExpansionCardDescription.js.map +1 -1
- package/esm/form/Textarea.d.ts +11 -1
- package/esm/form/Textarea.js +6 -5
- package/esm/form/Textarea.js.map +1 -1
- package/esm/popover/PopoverContent.d.ts +0 -3
- package/esm/popover/PopoverContent.js.map +1 -1
- package/package.json +3 -3
- package/src/expansion-card/ExpansionCard.tsx +3 -1
- package/src/expansion-card/ExpansionCardContent.tsx +1 -0
- package/src/expansion-card/ExpansionCardDescription.tsx +22 -9
- package/src/form/Textarea.tsx +14 -3
- package/src/popover/PopoverContent.tsx +0 -3
package/_docs.json
CHANGED
|
@@ -3067,6 +3067,25 @@
|
|
|
3067
3067
|
"name": "boolean"
|
|
3068
3068
|
}
|
|
3069
3069
|
},
|
|
3070
|
+
"i18n": {
|
|
3071
|
+
"defaultValue": null,
|
|
3072
|
+
"description": "i18n-translations for counter-text",
|
|
3073
|
+
"name": "i18n",
|
|
3074
|
+
"parent": {
|
|
3075
|
+
"fileName": "src/form/Textarea.tsx",
|
|
3076
|
+
"name": "TextareaProps"
|
|
3077
|
+
},
|
|
3078
|
+
"declarations": [
|
|
3079
|
+
{
|
|
3080
|
+
"fileName": "src/form/Textarea.tsx",
|
|
3081
|
+
"name": "TextareaProps"
|
|
3082
|
+
}
|
|
3083
|
+
],
|
|
3084
|
+
"required": false,
|
|
3085
|
+
"type": {
|
|
3086
|
+
"name": "{ counterLeft?: string; counterTooMuch?: string; } | undefined"
|
|
3087
|
+
}
|
|
3088
|
+
},
|
|
3070
3089
|
"error": {
|
|
3071
3090
|
"defaultValue": null,
|
|
3072
3091
|
"description": "Error message for element",
|
|
@@ -3251,6 +3270,15 @@
|
|
|
3251
3270
|
"type": {
|
|
3252
3271
|
"name": "any"
|
|
3253
3272
|
}
|
|
3273
|
+
},
|
|
3274
|
+
"i18n": {
|
|
3275
|
+
"defaultValue": null,
|
|
3276
|
+
"description": "",
|
|
3277
|
+
"name": "i18n",
|
|
3278
|
+
"required": true,
|
|
3279
|
+
"type": {
|
|
3280
|
+
"name": "any"
|
|
3281
|
+
}
|
|
3254
3282
|
}
|
|
3255
3283
|
}
|
|
3256
3284
|
},
|
|
@@ -5513,25 +5541,6 @@
|
|
|
5513
5541
|
"filePath": "src/popover/PopoverContent.tsx",
|
|
5514
5542
|
"displayName": "PopoverContent",
|
|
5515
5543
|
"props": {
|
|
5516
|
-
"children": {
|
|
5517
|
-
"defaultValue": null,
|
|
5518
|
-
"description": "Modal.Content content",
|
|
5519
|
-
"name": "children",
|
|
5520
|
-
"parent": {
|
|
5521
|
-
"fileName": "src/popover/PopoverContent.tsx",
|
|
5522
|
-
"name": "PopoverContentProps"
|
|
5523
|
-
},
|
|
5524
|
-
"declarations": [
|
|
5525
|
-
{
|
|
5526
|
-
"fileName": "src/popover/PopoverContent.tsx",
|
|
5527
|
-
"name": "PopoverContentProps"
|
|
5528
|
-
}
|
|
5529
|
-
],
|
|
5530
|
-
"required": true,
|
|
5531
|
-
"type": {
|
|
5532
|
-
"name": "ReactNode"
|
|
5533
|
-
}
|
|
5534
|
-
},
|
|
5535
5544
|
"className": {
|
|
5536
5545
|
"defaultValue": null,
|
|
5537
5546
|
"description": "",
|
|
@@ -47,6 +47,7 @@ const ExpansionCardTitle_1 = require("./ExpansionCardTitle");
|
|
|
47
47
|
exports.ExpansionCardContext = (0, react_1.createContext)({
|
|
48
48
|
open: false,
|
|
49
49
|
toggleOpen: () => { },
|
|
50
|
+
size: "medium",
|
|
50
51
|
});
|
|
51
52
|
exports.ExpansionCard = (0, react_1.forwardRef)((_a, ref) => {
|
|
52
53
|
var { className, onToggle, open, defaultOpen = false, size = "medium" } = _a, rest = __rest(_a, ["className", "onToggle", "open", "defaultOpen", "size"]);
|
|
@@ -63,7 +64,7 @@ exports.ExpansionCard = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
63
64
|
}
|
|
64
65
|
shouldFade.current = true;
|
|
65
66
|
};
|
|
66
|
-
return (react_1.default.createElement(exports.ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen } },
|
|
67
|
+
return (react_1.default.createElement(exports.ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen, size } },
|
|
67
68
|
react_1.default.createElement("section", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-expansioncard", className, `navds-expansioncard--${size}`, {
|
|
68
69
|
"navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
|
|
69
70
|
"navds-expansioncard--no-fade": !shouldFade.current,
|
|
@@ -50,7 +50,7 @@ const ExpansionCardContent = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
50
50
|
}
|
|
51
51
|
return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: (0, clsx_1.default)("navds-expansioncard__content", {
|
|
52
52
|
"navds-expansioncard__content--closed": !panelContext.open,
|
|
53
|
-
}), "aria-hidden": !panelContext.open }),
|
|
53
|
+
}), "aria-hidden": !panelContext.open, size: panelContext.size }),
|
|
54
54
|
react_1.default.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));
|
|
55
55
|
});
|
|
56
56
|
exports.default = ExpansionCardContent;
|
|
@@ -41,7 +41,13 @@ exports.ExpansionCardDescription = void 0;
|
|
|
41
41
|
const react_1 = __importStar(require("react"));
|
|
42
42
|
const clsx_1 = __importDefault(require("clsx"));
|
|
43
43
|
const BodyLong_1 = require("../typography/BodyLong");
|
|
44
|
+
const ExpansionCard_1 = require("./ExpansionCard");
|
|
44
45
|
exports.ExpansionCardDescription = (0, react_1.forwardRef)((_a, ref) => {
|
|
45
46
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
46
|
-
|
|
47
|
+
const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
|
|
48
|
+
if (panelContext === null) {
|
|
49
|
+
console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className), size: panelContext.size })));
|
|
47
53
|
});
|
package/cjs/form/Textarea.js
CHANGED
|
@@ -47,7 +47,7 @@ const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
|
|
|
47
47
|
exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
|
|
48
48
|
var _a, _b, _c;
|
|
49
49
|
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
|
|
50
|
-
const { label, className, description, maxLength, hideLabel = false, resize } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize"]);
|
|
50
|
+
const { label, className, description, maxLength, hideLabel = false, resize, i18n } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "i18n"]);
|
|
51
51
|
const maxLengthId = (0, __2.useId)();
|
|
52
52
|
const hasMaxLength = maxLength !== undefined && maxLength > 0;
|
|
53
53
|
const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
|
|
@@ -85,16 +85,17 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
|
|
|
85
85
|
"Tekstomr\u00E5de med plass til ",
|
|
86
86
|
maxLength,
|
|
87
87
|
" tegn."),
|
|
88
|
-
react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size })))),
|
|
88
|
+
react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
|
|
89
89
|
react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
|
|
90
90
|
});
|
|
91
|
-
const Counter = ({ maxLength, currentLength, size }) => {
|
|
91
|
+
const Counter = ({ maxLength, currentLength, size, i18n }) => {
|
|
92
|
+
var _a, _b;
|
|
92
93
|
const difference = maxLength - currentLength;
|
|
93
94
|
return (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
|
|
94
95
|
"navds-textarea__counter--error": difference < 0,
|
|
95
96
|
}), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
|
|
96
|
-
?
|
|
97
|
-
:
|
|
97
|
+
? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _a !== void 0 ? _a : "tegn for mye"}`
|
|
98
|
+
: `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
|
|
98
99
|
};
|
|
99
100
|
exports.Counter = Counter;
|
|
100
101
|
exports.default = exports.Textarea;
|
|
@@ -37,6 +37,7 @@ export interface ExpansionCardProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
37
37
|
export type ExpansionCardContextProps = {
|
|
38
38
|
open: boolean;
|
|
39
39
|
toggleOpen: () => void;
|
|
40
|
+
size: "medium" | "small";
|
|
40
41
|
};
|
|
41
42
|
export declare const ExpansionCardContext: React.Context<ExpansionCardContextProps>;
|
|
42
43
|
export declare const ExpansionCard: ExpansionCardComponent;
|
|
@@ -18,6 +18,7 @@ import { ExpansionCardTitle, } from "./ExpansionCardTitle";
|
|
|
18
18
|
export const ExpansionCardContext = createContext({
|
|
19
19
|
open: false,
|
|
20
20
|
toggleOpen: () => { },
|
|
21
|
+
size: "medium",
|
|
21
22
|
});
|
|
22
23
|
export const ExpansionCard = forwardRef((_a, ref) => {
|
|
23
24
|
var { className, onToggle, open, defaultOpen = false, size = "medium" } = _a, rest = __rest(_a, ["className", "onToggle", "open", "defaultOpen", "size"]);
|
|
@@ -34,7 +35,7 @@ export const ExpansionCard = forwardRef((_a, ref) => {
|
|
|
34
35
|
}
|
|
35
36
|
shouldFade.current = true;
|
|
36
37
|
};
|
|
37
|
-
return (React.createElement(ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen } },
|
|
38
|
+
return (React.createElement(ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen, size } },
|
|
38
39
|
React.createElement("section", Object.assign({}, rest, { className: cl("navds-expansioncard", className, `navds-expansioncard--${size}`, {
|
|
39
40
|
"navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
|
|
40
41
|
"navds-expansioncard--no-fade": !shouldFade.current,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionCard.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,mBAEN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpansionCard.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,mBAEN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AA6C9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cANT,wDAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC;YACvB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAC;SACrB;aAAM;YACL,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE;QAE5D,iDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,SAAS,EACT,wBAAwB,IAAI,EAAE,EAC9B;gBACE,2BAA2B,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK;gBAC1C,8BAA8B,EAAE,CAAC,UAAU,CAAC,OAAO;aACpD,CACF,EACD,GAAG,EAAE,GAAG,IACR,CAC4B,CACjC,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,MAAM,GAAG,mBAAmB,CAAC;AAC3C,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAC7C,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAErD,eAAe,aAAa,CAAC"}
|
|
@@ -22,7 +22,7 @@ const ExpansionCardContent = forwardRef((_a, ref) => {
|
|
|
22
22
|
}
|
|
23
23
|
return (React.createElement(BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: cl("navds-expansioncard__content", {
|
|
24
24
|
"navds-expansioncard__content--closed": !panelContext.open,
|
|
25
|
-
}), "aria-hidden": !panelContext.open }),
|
|
25
|
+
}), "aria-hidden": !panelContext.open, size: panelContext.size }),
|
|
26
26
|
React.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));
|
|
27
27
|
});
|
|
28
28
|
export default ExpansionCardContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionCardContent.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,oBAAoB,GAA6B,UAAU,CAC/D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,kEAAkE,CACnE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;YAC5C,sCAAsC,EAAE,CAAC,YAAY,CAAC,IAAI;SAC3D,CAAC,iBACW,CAAC,YAAY,CAAC,IAAI
|
|
1
|
+
{"version":3,"file":"ExpansionCardContent.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,oBAAoB,GAA6B,UAAU,CAC/D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,kEAAkE,CACnE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;YAC5C,sCAAsC,EAAE,CAAC,YAAY,CAAC,IAAI;SAC3D,CAAC,iBACW,CAAC,YAAY,CAAC,IAAI,EAC/B,IAAI,EAAE,YAAY,CAAC,IAAI;QAEvB,6BAAK,SAAS,EAAC,oCAAoC,IAAE,QAAQ,CAAO,CAC3D,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -9,11 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React, { forwardRef } from "react";
|
|
12
|
+
import React, { forwardRef, useContext } from "react";
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import { BodyLong } from "../typography/BodyLong";
|
|
15
|
+
import { ExpansionCardContext } from "./ExpansionCard";
|
|
15
16
|
export const ExpansionCardDescription = forwardRef((_a, ref) => {
|
|
16
17
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
17
|
-
|
|
18
|
+
const panelContext = useContext(ExpansionCardContext);
|
|
19
|
+
if (panelContext === null) {
|
|
20
|
+
console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
return (React.createElement(BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: cl("navds-link-panel__description", className), size: panelContext.size })));
|
|
18
24
|
});
|
|
19
25
|
//# sourceMappingURL=ExpansionCardDescription.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionCardDescription.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardDescription.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpansionCardDescription.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardDescription.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,CAAC,MAAM,wBAAwB,GACnC,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAC9B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,iEAAiE,CAClE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,IAAI,EAAE,YAAY,CAAC,IAAI,IACvB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/esm/form/Textarea.d.ts
CHANGED
|
@@ -38,11 +38,21 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
|
|
|
38
38
|
* Enables resizing of field
|
|
39
39
|
*/
|
|
40
40
|
resize?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* i18n-translations for counter-text
|
|
43
|
+
*/
|
|
44
|
+
i18n?: {
|
|
45
|
+
/** @default Antall tegn igjen */
|
|
46
|
+
counterLeft?: string;
|
|
47
|
+
/** @default tegn for mye */
|
|
48
|
+
counterTooMuch?: string;
|
|
49
|
+
};
|
|
41
50
|
}
|
|
42
51
|
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
43
|
-
export declare const Counter: ({ maxLength, currentLength, size }: {
|
|
52
|
+
export declare const Counter: ({ maxLength, currentLength, size, i18n }: {
|
|
44
53
|
maxLength: any;
|
|
45
54
|
currentLength: any;
|
|
46
55
|
size: any;
|
|
56
|
+
i18n: any;
|
|
47
57
|
}) => JSX.Element;
|
|
48
58
|
export default Textarea;
|
package/esm/form/Textarea.js
CHANGED
|
@@ -18,7 +18,7 @@ import TextareaAutosize from "../util/TextareaAutoSize";
|
|
|
18
18
|
export const Textarea = forwardRef((props, ref) => {
|
|
19
19
|
var _a, _b, _c;
|
|
20
20
|
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "textarea");
|
|
21
|
-
const { label, className, description, maxLength, hideLabel = false, resize } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize"]);
|
|
21
|
+
const { label, className, description, maxLength, hideLabel = false, resize, i18n } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "i18n"]);
|
|
22
22
|
const maxLengthId = useId();
|
|
23
23
|
const hasMaxLength = maxLength !== undefined && maxLength > 0;
|
|
24
24
|
const [controlledValue, setControlledValue] = useState((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
|
|
@@ -56,16 +56,17 @@ export const Textarea = forwardRef((props, ref) => {
|
|
|
56
56
|
"Tekstomr\u00E5de med plass til ",
|
|
57
57
|
maxLength,
|
|
58
58
|
" tegn."),
|
|
59
|
-
React.createElement(Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size })))),
|
|
59
|
+
React.createElement(Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
|
|
60
60
|
React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
|
|
61
61
|
});
|
|
62
|
-
export const Counter = ({ maxLength, currentLength, size }) => {
|
|
62
|
+
export const Counter = ({ maxLength, currentLength, size, i18n }) => {
|
|
63
|
+
var _a, _b;
|
|
63
64
|
const difference = maxLength - currentLength;
|
|
64
65
|
return (React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
|
|
65
66
|
"navds-textarea__counter--error": difference < 0,
|
|
66
67
|
}), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
|
|
67
|
-
?
|
|
68
|
-
:
|
|
68
|
+
? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) !== null && _a !== void 0 ? _a : "tegn for mye"}`
|
|
69
|
+
: `${difference} ${(_b = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _b !== void 0 ? _b : "tegn igjen"}`));
|
|
69
70
|
};
|
|
70
71
|
export default Textarea;
|
|
71
72
|
//# sourceMappingURL=Textarea.js.map
|
package/esm/form/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5E,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAC3B,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
/**
|
|
4
|
-
* Modal.Content content
|
|
5
|
-
*/
|
|
6
3
|
children: React.ReactNode;
|
|
7
4
|
}
|
|
8
5
|
export type PopoverContentType = React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.js","sourceRoot":"","sources":["../../src/popover/PopoverContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"PopoverContent.js","sourceRoot":"","sources":["../../src/popover/PopoverContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAWtB,MAAM,cAAc,GAAuB,UAAU,CACnD,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,IAClD,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.3",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@floating-ui/react": "0.17.0",
|
|
40
|
-
"@navikt/aksel-icons": "^2.8.
|
|
41
|
-
"@navikt/ds-icons": "^2.8.
|
|
40
|
+
"@navikt/aksel-icons": "^2.8.3",
|
|
41
|
+
"@navikt/ds-icons": "^2.8.3",
|
|
42
42
|
"@radix-ui/react-tabs": "1.0.0",
|
|
43
43
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
44
44
|
"clsx": "^1.2.1",
|
|
@@ -55,11 +55,13 @@ export interface ExpansionCardProps
|
|
|
55
55
|
export type ExpansionCardContextProps = {
|
|
56
56
|
open: boolean;
|
|
57
57
|
toggleOpen: () => void;
|
|
58
|
+
size: "medium" | "small";
|
|
58
59
|
};
|
|
59
60
|
|
|
60
61
|
export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
|
|
61
62
|
open: false,
|
|
62
63
|
toggleOpen: () => {},
|
|
64
|
+
size: "medium",
|
|
63
65
|
});
|
|
64
66
|
|
|
65
67
|
export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
|
|
@@ -91,7 +93,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
|
|
|
91
93
|
|
|
92
94
|
return (
|
|
93
95
|
<ExpansionCardContext.Provider
|
|
94
|
-
value={{ open: open ?? _open, toggleOpen: handleOpen }}
|
|
96
|
+
value={{ open: open ?? _open, toggleOpen: handleOpen, size }}
|
|
95
97
|
>
|
|
96
98
|
<section
|
|
97
99
|
{...rest}
|
|
@@ -32,6 +32,7 @@ const ExpansionCardContent: ExpansionCardContentType = forwardRef(
|
|
|
32
32
|
"navds-expansioncard__content--closed": !panelContext.open,
|
|
33
33
|
})}
|
|
34
34
|
aria-hidden={!panelContext.open}
|
|
35
|
+
size={panelContext.size}
|
|
35
36
|
>
|
|
36
37
|
<div className="navds-expansioncard__content-inner">{children}</div>
|
|
37
38
|
</BodyLong>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { forwardRef } from "react";
|
|
1
|
+
import React, { forwardRef, useContext } from "react";
|
|
2
2
|
import cl from "clsx";
|
|
3
3
|
import { BodyLong } from "../typography/BodyLong";
|
|
4
|
+
import { ExpansionCardContext } from "./ExpansionCard";
|
|
4
5
|
|
|
5
6
|
interface ExpansionCardDescriptionProps
|
|
6
7
|
extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
@@ -12,11 +13,23 @@ export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
|
|
|
12
13
|
>;
|
|
13
14
|
|
|
14
15
|
export const ExpansionCardDescription: ExpansionCardDescriptionType =
|
|
15
|
-
forwardRef(({ className, ...rest }, ref) =>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
forwardRef(({ className, ...rest }, ref) => {
|
|
17
|
+
const panelContext = useContext(ExpansionCardContext);
|
|
18
|
+
|
|
19
|
+
if (panelContext === null) {
|
|
20
|
+
console.error(
|
|
21
|
+
"<ExpansionCard.Header> has to be used within an <ExpansionCard>"
|
|
22
|
+
);
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<BodyLong
|
|
28
|
+
{...rest}
|
|
29
|
+
as="p"
|
|
30
|
+
ref={ref}
|
|
31
|
+
className={cl("navds-link-panel__description", className)}
|
|
32
|
+
size={panelContext.size}
|
|
33
|
+
/>
|
|
34
|
+
);
|
|
35
|
+
});
|
package/src/form/Textarea.tsx
CHANGED
|
@@ -45,6 +45,15 @@ export interface TextareaProps
|
|
|
45
45
|
* Enables resizing of field
|
|
46
46
|
*/
|
|
47
47
|
resize?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* i18n-translations for counter-text
|
|
50
|
+
*/
|
|
51
|
+
i18n?: {
|
|
52
|
+
/** @default Antall tegn igjen */
|
|
53
|
+
counterLeft?: string;
|
|
54
|
+
/** @default tegn for mye */
|
|
55
|
+
counterTooMuch?: string;
|
|
56
|
+
};
|
|
48
57
|
}
|
|
49
58
|
|
|
50
59
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
@@ -65,6 +74,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
65
74
|
maxLength,
|
|
66
75
|
hideLabel = false,
|
|
67
76
|
resize,
|
|
77
|
+
i18n,
|
|
68
78
|
...rest
|
|
69
79
|
} = props;
|
|
70
80
|
|
|
@@ -166,6 +176,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
166
176
|
maxLength={maxLength}
|
|
167
177
|
currentLength={props.value?.length ?? controlledValue?.length}
|
|
168
178
|
size={size}
|
|
179
|
+
i18n={i18n}
|
|
169
180
|
/>
|
|
170
181
|
</>
|
|
171
182
|
)}
|
|
@@ -185,7 +196,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
185
196
|
}
|
|
186
197
|
);
|
|
187
198
|
|
|
188
|
-
export const Counter = ({ maxLength, currentLength, size }) => {
|
|
199
|
+
export const Counter = ({ maxLength, currentLength, size, i18n }) => {
|
|
189
200
|
const difference = maxLength - currentLength;
|
|
190
201
|
|
|
191
202
|
return (
|
|
@@ -197,8 +208,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
|
|
|
197
208
|
size={size}
|
|
198
209
|
>
|
|
199
210
|
{difference < 0
|
|
200
|
-
?
|
|
201
|
-
:
|
|
211
|
+
? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
|
|
212
|
+
: `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
|
|
202
213
|
</BodyShort>
|
|
203
214
|
);
|
|
204
215
|
};
|