@navikt/ds-react 0.18.7 → 0.19.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/_docs.json +77 -56
- package/cjs/form/useFormField.js +1 -1
- package/cjs/read-more/ReadMore.js +7 -4
- package/esm/form/Switch.d.ts +4 -0
- package/esm/form/Switch.js.map +1 -1
- package/esm/form/checkbox/Checkbox.d.ts +4 -0
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/radio/Radio.d.ts +4 -0
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/useFormField.js +1 -1
- package/esm/form/useFormField.js.map +1 -1
- package/esm/read-more/ReadMore.d.ts +7 -2
- package/esm/read-more/ReadMore.js +7 -4
- package/esm/read-more/ReadMore.js.map +1 -1
- package/esm/read-more/index.d.ts +2 -1
- package/esm/read-more/index.js.map +1 -1
- package/package.json +2 -2
- package/src/form/Switch.tsx +4 -0
- package/src/form/checkbox/Checkbox.tsx +4 -0
- package/src/form/checkbox/checkbox.stories.tsx +46 -41
- package/src/form/radio/Radio.tsx +4 -0
- package/src/form/radio/radio.stories.tsx +1 -1
- package/src/form/useFormField.ts +2 -1
- package/src/read-more/ReadMore.tsx +21 -7
- package/src/read-more/index.ts +2 -1
- package/src/read-more/readmore.stories.tsx +56 -0
- package/src/read-more/read-more.stories.tsx +0 -60
package/_docs.json
CHANGED
|
@@ -804,21 +804,21 @@
|
|
|
804
804
|
},
|
|
805
805
|
"description": {
|
|
806
806
|
"defaultValue": null,
|
|
807
|
-
"description": "Adds a description to extend labling of
|
|
807
|
+
"description": "Adds a description to extend labling of Checkbox",
|
|
808
808
|
"name": "description",
|
|
809
809
|
"parent": {
|
|
810
|
-
"fileName": "react/src/form/
|
|
811
|
-
"name": "
|
|
810
|
+
"fileName": "react/src/form/checkbox/Checkbox.tsx",
|
|
811
|
+
"name": "CheckboxProps"
|
|
812
812
|
},
|
|
813
813
|
"declarations": [
|
|
814
814
|
{
|
|
815
|
-
"fileName": "react/src/form/
|
|
816
|
-
"name": "
|
|
815
|
+
"fileName": "react/src/form/checkbox/Checkbox.tsx",
|
|
816
|
+
"name": "CheckboxProps"
|
|
817
817
|
}
|
|
818
818
|
],
|
|
819
819
|
"required": false,
|
|
820
820
|
"type": {
|
|
821
|
-
"name": "
|
|
821
|
+
"name": "string"
|
|
822
822
|
}
|
|
823
823
|
},
|
|
824
824
|
"id": {
|
|
@@ -1201,29 +1201,29 @@
|
|
|
1201
1201
|
"name": "\"left\" | \"right\""
|
|
1202
1202
|
}
|
|
1203
1203
|
},
|
|
1204
|
-
"
|
|
1204
|
+
"description": {
|
|
1205
1205
|
"defaultValue": null,
|
|
1206
|
-
"description": "
|
|
1207
|
-
"name": "
|
|
1206
|
+
"description": "Adds a description to extend labling of Switch",
|
|
1207
|
+
"name": "description",
|
|
1208
1208
|
"parent": {
|
|
1209
|
-
"fileName": "
|
|
1210
|
-
"name": "
|
|
1209
|
+
"fileName": "src/form/Switch.tsx",
|
|
1210
|
+
"name": "SwitchProps"
|
|
1211
1211
|
},
|
|
1212
1212
|
"declarations": [
|
|
1213
1213
|
{
|
|
1214
|
-
"fileName": "
|
|
1215
|
-
"name": "
|
|
1214
|
+
"fileName": "src/form/Switch.tsx",
|
|
1215
|
+
"name": "SwitchProps"
|
|
1216
1216
|
}
|
|
1217
1217
|
],
|
|
1218
1218
|
"required": false,
|
|
1219
1219
|
"type": {
|
|
1220
|
-
"name": "
|
|
1220
|
+
"name": "string"
|
|
1221
1221
|
}
|
|
1222
1222
|
},
|
|
1223
|
-
"
|
|
1223
|
+
"size": {
|
|
1224
1224
|
"defaultValue": null,
|
|
1225
|
-
"description": "
|
|
1226
|
-
"name": "
|
|
1225
|
+
"description": "Changes font-size, padding and gaps",
|
|
1226
|
+
"name": "size",
|
|
1227
1227
|
"parent": {
|
|
1228
1228
|
"fileName": "react/src/form/useFormField.ts",
|
|
1229
1229
|
"name": "FormFieldProps"
|
|
@@ -1236,13 +1236,13 @@
|
|
|
1236
1236
|
],
|
|
1237
1237
|
"required": false,
|
|
1238
1238
|
"type": {
|
|
1239
|
-
"name": "
|
|
1239
|
+
"name": "\"medium\" | \"small\""
|
|
1240
1240
|
}
|
|
1241
1241
|
},
|
|
1242
|
-
"
|
|
1242
|
+
"disabled": {
|
|
1243
1243
|
"defaultValue": null,
|
|
1244
|
-
"description": "
|
|
1245
|
-
"name": "
|
|
1244
|
+
"description": "Disables element\n@note Avoid using if possible for accessibility purposes",
|
|
1245
|
+
"name": "disabled",
|
|
1246
1246
|
"parent": {
|
|
1247
1247
|
"fileName": "react/src/form/useFormField.ts",
|
|
1248
1248
|
"name": "FormFieldProps"
|
|
@@ -1255,7 +1255,7 @@
|
|
|
1255
1255
|
],
|
|
1256
1256
|
"required": false,
|
|
1257
1257
|
"type": {
|
|
1258
|
-
"name": "
|
|
1258
|
+
"name": "boolean"
|
|
1259
1259
|
}
|
|
1260
1260
|
},
|
|
1261
1261
|
"id": {
|
|
@@ -4186,7 +4186,7 @@
|
|
|
4186
4186
|
"props": {
|
|
4187
4187
|
"children": {
|
|
4188
4188
|
"defaultValue": null,
|
|
4189
|
-
"description": "Content inside
|
|
4189
|
+
"description": "Content inside ReadMore",
|
|
4190
4190
|
"name": "children",
|
|
4191
4191
|
"parent": {
|
|
4192
4192
|
"fileName": "src/read-more/ReadMore.tsx",
|
|
@@ -4205,7 +4205,7 @@
|
|
|
4205
4205
|
},
|
|
4206
4206
|
"header": {
|
|
4207
4207
|
"defaultValue": null,
|
|
4208
|
-
"description": "
|
|
4208
|
+
"description": "ReadMore header content",
|
|
4209
4209
|
"name": "header",
|
|
4210
4210
|
"parent": {
|
|
4211
4211
|
"fileName": "src/read-more/ReadMore.tsx",
|
|
@@ -4283,6 +4283,27 @@
|
|
|
4283
4283
|
"name": "boolean"
|
|
4284
4284
|
}
|
|
4285
4285
|
},
|
|
4286
|
+
"size": {
|
|
4287
|
+
"defaultValue": {
|
|
4288
|
+
"value": "medium"
|
|
4289
|
+
},
|
|
4290
|
+
"description": "Changes fontsize for content",
|
|
4291
|
+
"name": "size",
|
|
4292
|
+
"parent": {
|
|
4293
|
+
"fileName": "src/read-more/ReadMore.tsx",
|
|
4294
|
+
"name": "ReadMoreProps"
|
|
4295
|
+
},
|
|
4296
|
+
"declarations": [
|
|
4297
|
+
{
|
|
4298
|
+
"fileName": "src/read-more/ReadMore.tsx",
|
|
4299
|
+
"name": "ReadMoreProps"
|
|
4300
|
+
}
|
|
4301
|
+
],
|
|
4302
|
+
"required": false,
|
|
4303
|
+
"type": {
|
|
4304
|
+
"name": "\"medium\" | \"small\""
|
|
4305
|
+
}
|
|
4306
|
+
},
|
|
4286
4307
|
"className": {
|
|
4287
4308
|
"defaultValue": null,
|
|
4288
4309
|
"description": "",
|
|
@@ -7728,29 +7749,29 @@
|
|
|
7728
7749
|
"name": "boolean"
|
|
7729
7750
|
}
|
|
7730
7751
|
},
|
|
7731
|
-
"
|
|
7752
|
+
"description": {
|
|
7732
7753
|
"defaultValue": null,
|
|
7733
|
-
"description": "
|
|
7734
|
-
"name": "
|
|
7754
|
+
"description": "Adds a description to extend labling of Checkbox",
|
|
7755
|
+
"name": "description",
|
|
7735
7756
|
"parent": {
|
|
7736
|
-
"fileName": "
|
|
7737
|
-
"name": "
|
|
7757
|
+
"fileName": "src/form/checkbox/Checkbox.tsx",
|
|
7758
|
+
"name": "CheckboxProps"
|
|
7738
7759
|
},
|
|
7739
7760
|
"declarations": [
|
|
7740
7761
|
{
|
|
7741
|
-
"fileName": "
|
|
7742
|
-
"name": "
|
|
7762
|
+
"fileName": "src/form/checkbox/Checkbox.tsx",
|
|
7763
|
+
"name": "CheckboxProps"
|
|
7743
7764
|
}
|
|
7744
7765
|
],
|
|
7745
7766
|
"required": false,
|
|
7746
7767
|
"type": {
|
|
7747
|
-
"name": "
|
|
7768
|
+
"name": "string"
|
|
7748
7769
|
}
|
|
7749
7770
|
},
|
|
7750
|
-
"
|
|
7771
|
+
"size": {
|
|
7751
7772
|
"defaultValue": null,
|
|
7752
|
-
"description": "
|
|
7753
|
-
"name": "
|
|
7773
|
+
"description": "Changes font-size, padding and gaps",
|
|
7774
|
+
"name": "size",
|
|
7754
7775
|
"parent": {
|
|
7755
7776
|
"fileName": "react/src/form/useFormField.ts",
|
|
7756
7777
|
"name": "FormFieldProps"
|
|
@@ -7763,13 +7784,13 @@
|
|
|
7763
7784
|
],
|
|
7764
7785
|
"required": false,
|
|
7765
7786
|
"type": {
|
|
7766
|
-
"name": "
|
|
7787
|
+
"name": "\"medium\" | \"small\""
|
|
7767
7788
|
}
|
|
7768
7789
|
},
|
|
7769
|
-
"
|
|
7790
|
+
"disabled": {
|
|
7770
7791
|
"defaultValue": null,
|
|
7771
|
-
"description": "
|
|
7772
|
-
"name": "
|
|
7792
|
+
"description": "Disables element\n@note Avoid using if possible for accessibility purposes",
|
|
7793
|
+
"name": "disabled",
|
|
7773
7794
|
"parent": {
|
|
7774
7795
|
"fileName": "react/src/form/useFormField.ts",
|
|
7775
7796
|
"name": "FormFieldProps"
|
|
@@ -7782,7 +7803,7 @@
|
|
|
7782
7803
|
],
|
|
7783
7804
|
"required": false,
|
|
7784
7805
|
"type": {
|
|
7785
|
-
"name": "
|
|
7806
|
+
"name": "boolean"
|
|
7786
7807
|
}
|
|
7787
7808
|
},
|
|
7788
7809
|
"id": {
|
|
@@ -8347,29 +8368,29 @@
|
|
|
8347
8368
|
"name": "any"
|
|
8348
8369
|
}
|
|
8349
8370
|
},
|
|
8350
|
-
"
|
|
8371
|
+
"description": {
|
|
8351
8372
|
"defaultValue": null,
|
|
8352
|
-
"description": "
|
|
8353
|
-
"name": "
|
|
8373
|
+
"description": "Adds a description to extend labling of Radio",
|
|
8374
|
+
"name": "description",
|
|
8354
8375
|
"parent": {
|
|
8355
|
-
"fileName": "
|
|
8356
|
-
"name": "
|
|
8376
|
+
"fileName": "src/form/radio/Radio.tsx",
|
|
8377
|
+
"name": "RadioProps"
|
|
8357
8378
|
},
|
|
8358
8379
|
"declarations": [
|
|
8359
8380
|
{
|
|
8360
|
-
"fileName": "
|
|
8361
|
-
"name": "
|
|
8381
|
+
"fileName": "src/form/radio/Radio.tsx",
|
|
8382
|
+
"name": "RadioProps"
|
|
8362
8383
|
}
|
|
8363
8384
|
],
|
|
8364
8385
|
"required": false,
|
|
8365
8386
|
"type": {
|
|
8366
|
-
"name": "
|
|
8387
|
+
"name": "string"
|
|
8367
8388
|
}
|
|
8368
8389
|
},
|
|
8369
|
-
"
|
|
8390
|
+
"size": {
|
|
8370
8391
|
"defaultValue": null,
|
|
8371
|
-
"description": "
|
|
8372
|
-
"name": "
|
|
8392
|
+
"description": "Changes font-size, padding and gaps",
|
|
8393
|
+
"name": "size",
|
|
8373
8394
|
"parent": {
|
|
8374
8395
|
"fileName": "react/src/form/useFormField.ts",
|
|
8375
8396
|
"name": "FormFieldProps"
|
|
@@ -8382,13 +8403,13 @@
|
|
|
8382
8403
|
],
|
|
8383
8404
|
"required": false,
|
|
8384
8405
|
"type": {
|
|
8385
|
-
"name": "
|
|
8406
|
+
"name": "\"medium\" | \"small\""
|
|
8386
8407
|
}
|
|
8387
8408
|
},
|
|
8388
|
-
"
|
|
8409
|
+
"disabled": {
|
|
8389
8410
|
"defaultValue": null,
|
|
8390
|
-
"description": "
|
|
8391
|
-
"name": "
|
|
8411
|
+
"description": "Disables element\n@note Avoid using if possible for accessibility purposes",
|
|
8412
|
+
"name": "disabled",
|
|
8392
8413
|
"parent": {
|
|
8393
8414
|
"fileName": "react/src/form/useFormField.ts",
|
|
8394
8415
|
"name": "FormFieldProps"
|
|
@@ -8401,7 +8422,7 @@
|
|
|
8401
8422
|
],
|
|
8402
8423
|
"required": false,
|
|
8403
8424
|
"type": {
|
|
8404
|
-
"name": "
|
|
8425
|
+
"name": "boolean"
|
|
8405
8426
|
}
|
|
8406
8427
|
},
|
|
8407
8428
|
"id": {
|
package/cjs/form/useFormField.js
CHANGED
|
@@ -32,7 +32,7 @@ const useFormField = (props, prefix) => {
|
|
|
32
32
|
id,
|
|
33
33
|
"aria-invalid": hasError,
|
|
34
34
|
"aria-describedby": (0, classnames_1.default)(props["aria-describedby"], {
|
|
35
|
-
[inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
|
|
35
|
+
[inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description) && typeof (props === null || props === void 0 ? void 0 : props.description) === "string",
|
|
36
36
|
[errorId]: showErrorMsg,
|
|
37
37
|
[(_c = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _c !== void 0 ? _c : ""]: hasError && !!(fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),
|
|
38
38
|
}) || undefined,
|
|
@@ -43,16 +43,18 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
43
43
|
const react_collapse_1 = require("react-collapse");
|
|
44
44
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
45
45
|
const typography_1 = require("../typography");
|
|
46
|
+
const ds_icons_2 = require("@navikt/ds-icons");
|
|
46
47
|
exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
|
|
47
|
-
var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick"]);
|
|
48
|
+
var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick, size = "medium" } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick", "size"]);
|
|
48
49
|
const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
|
|
49
50
|
const CollapseComponent = renderContentWhenClosed
|
|
50
51
|
? react_collapse_1.Collapse
|
|
51
52
|
: react_collapse_1.UnmountClosed;
|
|
52
53
|
const isOpened = open !== null && open !== void 0 ? open : internalOpen;
|
|
53
|
-
return (react_1.default.createElement(
|
|
54
|
-
react_1.default.createElement("button", Object.assign({ type: "button" }, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short",
|
|
54
|
+
return (react_1.default.createElement("div", null,
|
|
55
|
+
react_1.default.createElement("button", Object.assign({ type: "button" }, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short", `navds-read-more--${size}`, className, {
|
|
55
56
|
"navds-read-more--open": isOpened,
|
|
57
|
+
"navds-body-short--small": size === "small",
|
|
56
58
|
}), onClick: (e) => {
|
|
57
59
|
if (open === undefined) {
|
|
58
60
|
setInternalOpen((isOpen) => !isOpen);
|
|
@@ -60,9 +62,10 @@ exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
60
62
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
61
63
|
}, "aria-expanded": isOpened, ref: ref }),
|
|
62
64
|
react_1.default.createElement(ds_icons_1.Expand, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
|
|
65
|
+
react_1.default.createElement(ds_icons_2.ExpandFilled, { className: "navds-read-more__expand-icon navds-read-more__expand-icon--filled", "aria-hidden": true }),
|
|
63
66
|
react_1.default.createElement("span", null, header)),
|
|
64
67
|
react_1.default.createElement(CollapseComponent, { isOpened: isOpened },
|
|
65
68
|
react_1.default.createElement("div", { className: "navds-read-more__content" },
|
|
66
|
-
react_1.default.createElement(typography_1.BodyLong, { size:
|
|
69
|
+
react_1.default.createElement(typography_1.BodyLong, { size: size }, children)))));
|
|
67
70
|
});
|
|
68
71
|
exports.default = exports.ReadMore;
|
package/esm/form/Switch.d.ts
CHANGED
|
@@ -18,6 +18,10 @@ export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">,
|
|
|
18
18
|
* @default "left"
|
|
19
19
|
*/
|
|
20
20
|
position?: "left" | "right";
|
|
21
|
+
/**
|
|
22
|
+
* Adds a description to extend labling of Switch
|
|
23
|
+
*/
|
|
24
|
+
description?: string;
|
|
21
25
|
}
|
|
22
26
|
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
23
27
|
export default Switch;
|
package/esm/form/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,UAAU,EAEV,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AACrD,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,6BACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK,qCAEC,gBAAgB;IAE3B,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,mEAAmE,EACrE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,GACrB,CACE,CACP,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,10 @@ export interface CheckboxProps extends Omit<FormFieldProps, "errorId">, Omit<Inp
|
|
|
23
23
|
* @default false
|
|
24
24
|
*/
|
|
25
25
|
indeterminate?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Adds a description to extend labling of Checkbox
|
|
28
|
+
*/
|
|
29
|
+
description?: string;
|
|
26
30
|
}
|
|
27
31
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
28
32
|
export default Checkbox;
|
|
@@ -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,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;
|
|
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,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAiChD,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;SAChB,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,6BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -9,6 +9,10 @@ export interface RadioProps extends Omit<FormFieldProps, "error" | "errorId">, O
|
|
|
9
9
|
* The value of the HTML element
|
|
10
10
|
*/
|
|
11
11
|
value: any;
|
|
12
|
+
/**
|
|
13
|
+
* Adds a description to extend labling of Radio
|
|
14
|
+
*/
|
|
15
|
+
description?: string;
|
|
12
16
|
}
|
|
13
17
|
export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
14
18
|
export default Radio;
|
|
@@ -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,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
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,YAAY,CAAC;AAC5B,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,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,0BAA0B,IAEnC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
package/esm/form/useFormField.js
CHANGED
|
@@ -26,7 +26,7 @@ export const useFormField = (props, prefix) => {
|
|
|
26
26
|
id,
|
|
27
27
|
"aria-invalid": hasError,
|
|
28
28
|
"aria-describedby": cl(props["aria-describedby"], {
|
|
29
|
-
[inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
|
|
29
|
+
[inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description) && typeof (props === null || props === void 0 ? void 0 : props.description) === "string",
|
|
30
30
|
[errorId]: showErrorMsg,
|
|
31
31
|
[(_c = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _c !== void 0 ? _c : ""]: hasError && !!(fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),
|
|
32
32
|
}) || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AA8BjC;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,MAAc,EAAE,EAAE;;IACpE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IACtD,MAAM,QAAQ,GAAY,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;IAExE,OAAO;QACL,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,UAAU,EAAE;YACV,EAAE;YACF,cAAc,EAAE,QAAQ;YACxB,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AA8BjC;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,MAAc,EAAE,EAAE;;IACpE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IACtD,MAAM,QAAQ,GAAY,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;IAExE,OAAO;QACL,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,UAAU,EAAE;YACV,EAAE;YACF,cAAc,EAAE,QAAQ;YACxB,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAClB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,IAAI,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,KAAK,QAAQ;gBAChE,CAAC,OAAO,CAAC,EAAE,YAAY;gBACvB,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,mCAAI,EAAE,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA;aACzD,CAAC,IAAI,SAAS;YACjB,QAAQ;SACT;KACF,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
/**
|
|
4
|
-
* Content inside
|
|
4
|
+
* Content inside ReadMore
|
|
5
5
|
*/
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* ReadMore header content
|
|
9
9
|
*/
|
|
10
10
|
header: React.ReactNode;
|
|
11
11
|
/**
|
|
@@ -23,6 +23,11 @@ export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
23
23
|
* @default false
|
|
24
24
|
*/
|
|
25
25
|
renderContentWhenClosed?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Changes fontsize for content
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
size?: "medium" | "small";
|
|
26
31
|
}
|
|
27
32
|
export declare const ReadMore: React.ForwardRefExoticComponent<ReadMoreProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
33
|
export default ReadMore;
|
|
@@ -14,16 +14,18 @@ import cl from "classnames";
|
|
|
14
14
|
import { Collapse, UnmountClosed } from "react-collapse";
|
|
15
15
|
import { Expand } from "@navikt/ds-icons";
|
|
16
16
|
import { BodyLong } from "../typography";
|
|
17
|
+
import { ExpandFilled } from "@navikt/ds-icons";
|
|
17
18
|
export const ReadMore = forwardRef((_a, ref) => {
|
|
18
|
-
var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick"]);
|
|
19
|
+
var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick, size = "medium" } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick", "size"]);
|
|
19
20
|
const [internalOpen, setInternalOpen] = useState(defaultOpen);
|
|
20
21
|
const CollapseComponent = renderContentWhenClosed
|
|
21
22
|
? Collapse
|
|
22
23
|
: UnmountClosed;
|
|
23
24
|
const isOpened = open !== null && open !== void 0 ? open : internalOpen;
|
|
24
|
-
return (React.createElement(
|
|
25
|
-
React.createElement("button", Object.assign({ type: "button" }, rest, { className: cl("navds-read-more", "navds-body-short",
|
|
25
|
+
return (React.createElement("div", null,
|
|
26
|
+
React.createElement("button", Object.assign({ type: "button" }, rest, { className: cl("navds-read-more", "navds-body-short", `navds-read-more--${size}`, className, {
|
|
26
27
|
"navds-read-more--open": isOpened,
|
|
28
|
+
"navds-body-short--small": size === "small",
|
|
27
29
|
}), onClick: (e) => {
|
|
28
30
|
if (open === undefined) {
|
|
29
31
|
setInternalOpen((isOpen) => !isOpen);
|
|
@@ -31,10 +33,11 @@ export const ReadMore = forwardRef((_a, ref) => {
|
|
|
31
33
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
32
34
|
}, "aria-expanded": isOpened, ref: ref }),
|
|
33
35
|
React.createElement(Expand, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
|
|
36
|
+
React.createElement(ExpandFilled, { className: "navds-read-more__expand-icon navds-read-more__expand-icon--filled", "aria-hidden": true }),
|
|
34
37
|
React.createElement("span", null, header)),
|
|
35
38
|
React.createElement(CollapseComponent, { isOpened: isOpened },
|
|
36
39
|
React.createElement("div", { className: "navds-read-more__content" },
|
|
37
|
-
React.createElement(BodyLong, { size:
|
|
40
|
+
React.createElement(BodyLong, { size: size }, children)))));
|
|
38
41
|
});
|
|
39
42
|
export default ReadMore;
|
|
40
43
|
//# sourceMappingURL=ReadMore.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReadMore.js","sourceRoot":"","sources":["../../src/read-more/ReadMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ReadMore.js","sourceRoot":"","sources":["../../src/read-more/ReadMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkChD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,MAAM,EACN,uBAAuB,GAAG,KAAK,EAC/B,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,OAAO,EACP,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cATT,wGAUC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,iBAAiB,GAAG,uBAAuB;QAC/C,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEtC,OAAO,CACL;QACE,8CACE,IAAI,EAAC,QAAQ,IACT,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,IAAI,EAAE,EAC1B,SAAS,EACT;gBACE,uBAAuB,EAAE,QAAQ;gBACjC,yBAAyB,EAAE,IAAI,KAAK,OAAO;aAC5C,CACF,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,IAAI,KAAK,SAAS,EAAE;oBACtB,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;iBACtC;gBACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,mBACc,QAAQ,EACvB,GAAG,EAAE,GAAG;YAER,oBAAC,MAAM,IAAC,SAAS,EAAE,8BAA8B,wBAAgB;YACjE,oBAAC,YAAY,IACX,SAAS,EACP,mEAAmE,wBAGrE;YACF,kCAAO,MAAM,CAAQ,CACd;QACT,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ;YACnC,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAY,CACvC,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/esm/read-more/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as ReadMore
|
|
1
|
+
export { default as ReadMore } from "./ReadMore";
|
|
2
|
+
export { ReadMoreProps } from "./ReadMore";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/read-more/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/read-more/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.19.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"@types/react": "^17.0.30 || ^18.0.0",
|
|
75
75
|
"react": "^17.0.0 || ^18.0.0"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "17f35836538a5956def85cefe08ba956c71ba3b2"
|
|
78
78
|
}
|
package/src/form/Switch.tsx
CHANGED
|
@@ -29,6 +29,10 @@ export interface CheckboxProps
|
|
|
29
29
|
* @default false
|
|
30
30
|
*/
|
|
31
31
|
indeterminate?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Adds a description to extend labling of Checkbox
|
|
34
|
+
*/
|
|
35
|
+
description?: string;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
@@ -14,48 +14,52 @@ export const Default = (props) => {
|
|
|
14
14
|
const [state, setState] = useState(["checkbox1"]);
|
|
15
15
|
|
|
16
16
|
return (
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<Checkbox
|
|
27
|
-
value="checkbox1"
|
|
28
|
-
indeterminate={props.indeterminate}
|
|
29
|
-
hideLabel={props.hideLabel}
|
|
30
|
-
>
|
|
31
|
-
{props.children || "Apple"}
|
|
32
|
-
</Checkbox>
|
|
33
|
-
<Checkbox
|
|
34
|
-
value="checkbox2"
|
|
35
|
-
error={props.errorSingle}
|
|
36
|
-
description={
|
|
37
|
-
props.checkboxDescription ? "Orange description" : undefined
|
|
38
|
-
}
|
|
39
|
-
indeterminate={props.indeterminate}
|
|
40
|
-
hideLabel={props.hideLabel}
|
|
41
|
-
>
|
|
42
|
-
{props.children || "Orange"}
|
|
43
|
-
</Checkbox>
|
|
44
|
-
<Checkbox
|
|
45
|
-
value="checkbox3"
|
|
46
|
-
indeterminate={props.indeterminate}
|
|
47
|
-
hideLabel={props.hideLabel}
|
|
48
|
-
>
|
|
49
|
-
{props.children || "Banana"}
|
|
50
|
-
</Checkbox>
|
|
51
|
-
<Checkbox
|
|
52
|
-
value="checkbox4"
|
|
53
|
-
indeterminate={props.indeterminate}
|
|
54
|
-
hideLabel={props.hideLabel}
|
|
17
|
+
<div>
|
|
18
|
+
<CheckboxGroup
|
|
19
|
+
legend={props.legend}
|
|
20
|
+
description={props.description}
|
|
21
|
+
value={props.controlled ? state : undefined}
|
|
22
|
+
onChange={props.controlled ? setState : undefined}
|
|
23
|
+
hideLegend={props.hideLegend}
|
|
24
|
+
error={props.errorGroup ? "Errormelding" : undefined}
|
|
25
|
+
{...props}
|
|
55
26
|
>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
27
|
+
<Checkbox
|
|
28
|
+
value="checkbox1"
|
|
29
|
+
indeterminate={props.indeterminate}
|
|
30
|
+
hideLabel={props.hideLabel}
|
|
31
|
+
>
|
|
32
|
+
{props.children || "Apple"}
|
|
33
|
+
</Checkbox>
|
|
34
|
+
<Checkbox
|
|
35
|
+
value="checkbox2"
|
|
36
|
+
error={props.errorSingle}
|
|
37
|
+
description={
|
|
38
|
+
props.checkboxDescription
|
|
39
|
+
? "Quis laborum culpa enim amet cillum veniam."
|
|
40
|
+
: undefined
|
|
41
|
+
}
|
|
42
|
+
indeterminate={props.indeterminate}
|
|
43
|
+
hideLabel={props.hideLabel}
|
|
44
|
+
>
|
|
45
|
+
{props.children || "Orange"}
|
|
46
|
+
</Checkbox>
|
|
47
|
+
<Checkbox
|
|
48
|
+
value="checkbox3"
|
|
49
|
+
indeterminate={props.indeterminate}
|
|
50
|
+
hideLabel={props.hideLabel}
|
|
51
|
+
>
|
|
52
|
+
{props.children || "Banana"}
|
|
53
|
+
</Checkbox>
|
|
54
|
+
<Checkbox
|
|
55
|
+
value="checkbox4"
|
|
56
|
+
indeterminate={props.indeterminate}
|
|
57
|
+
hideLabel={props.hideLabel}
|
|
58
|
+
>
|
|
59
|
+
{props.children || "Melon"}
|
|
60
|
+
</Checkbox>
|
|
61
|
+
</CheckboxGroup>
|
|
62
|
+
</div>
|
|
59
63
|
);
|
|
60
64
|
};
|
|
61
65
|
|
|
@@ -63,6 +67,7 @@ Default.args = {
|
|
|
63
67
|
controlled: false,
|
|
64
68
|
legend: "Legend-tekst",
|
|
65
69
|
checkboxDescription: false,
|
|
70
|
+
hideLabel: false,
|
|
66
71
|
hideLegend: false,
|
|
67
72
|
errorSingle: false,
|
|
68
73
|
children: "",
|
package/src/form/radio/Radio.tsx
CHANGED
|
@@ -15,6 +15,10 @@ export interface RadioProps
|
|
|
15
15
|
* The value of the HTML element
|
|
16
16
|
*/
|
|
17
17
|
value: any;
|
|
18
|
+
/**
|
|
19
|
+
* Adds a description to extend labling of Radio
|
|
20
|
+
*/
|
|
21
|
+
description?: string;
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
package/src/form/useFormField.ts
CHANGED
|
@@ -60,7 +60,8 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
|
|
|
60
60
|
"aria-invalid": hasError,
|
|
61
61
|
"aria-describedby":
|
|
62
62
|
cl(props["aria-describedby"], {
|
|
63
|
-
[inputDescriptionId]:
|
|
63
|
+
[inputDescriptionId]:
|
|
64
|
+
!!props?.description && typeof props?.description === "string",
|
|
64
65
|
[errorId]: showErrorMsg,
|
|
65
66
|
[fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
|
|
66
67
|
}) || undefined,
|
|
@@ -3,15 +3,16 @@ import cl from "classnames";
|
|
|
3
3
|
import { Collapse, UnmountClosed } from "react-collapse";
|
|
4
4
|
import { Expand } from "@navikt/ds-icons";
|
|
5
5
|
import { BodyLong } from "../typography";
|
|
6
|
+
import { ExpandFilled } from "@navikt/ds-icons";
|
|
6
7
|
|
|
7
8
|
export interface ReadMoreProps
|
|
8
9
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
9
10
|
/**
|
|
10
|
-
* Content inside
|
|
11
|
+
* Content inside ReadMore
|
|
11
12
|
*/
|
|
12
13
|
children: React.ReactNode;
|
|
13
14
|
/**
|
|
14
|
-
*
|
|
15
|
+
* ReadMore header content
|
|
15
16
|
*/
|
|
16
17
|
header: React.ReactNode;
|
|
17
18
|
/**
|
|
@@ -29,6 +30,11 @@ export interface ReadMoreProps
|
|
|
29
30
|
* @default false
|
|
30
31
|
*/
|
|
31
32
|
renderContentWhenClosed?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Changes fontsize for content
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
size?: "medium" | "small";
|
|
32
38
|
}
|
|
33
39
|
|
|
34
40
|
export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
|
|
@@ -41,6 +47,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
|
|
|
41
47
|
open,
|
|
42
48
|
defaultOpen = false,
|
|
43
49
|
onClick,
|
|
50
|
+
size = "medium",
|
|
44
51
|
...rest
|
|
45
52
|
},
|
|
46
53
|
ref
|
|
@@ -53,17 +60,18 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
|
|
|
53
60
|
const isOpened = open ?? internalOpen;
|
|
54
61
|
|
|
55
62
|
return (
|
|
56
|
-
|
|
63
|
+
<div>
|
|
57
64
|
<button
|
|
58
65
|
type="button"
|
|
59
66
|
{...rest}
|
|
60
67
|
className={cl(
|
|
61
68
|
"navds-read-more",
|
|
62
69
|
"navds-body-short",
|
|
63
|
-
|
|
70
|
+
`navds-read-more--${size}`,
|
|
64
71
|
className,
|
|
65
72
|
{
|
|
66
73
|
"navds-read-more--open": isOpened,
|
|
74
|
+
"navds-body-short--small": size === "small",
|
|
67
75
|
}
|
|
68
76
|
)}
|
|
69
77
|
onClick={(e) => {
|
|
@@ -75,15 +83,21 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
|
|
|
75
83
|
aria-expanded={isOpened}
|
|
76
84
|
ref={ref}
|
|
77
85
|
>
|
|
78
|
-
<Expand className="navds-read-more__expand-icon" aria-hidden />
|
|
86
|
+
<Expand className={"navds-read-more__expand-icon"} aria-hidden />
|
|
87
|
+
<ExpandFilled
|
|
88
|
+
className={
|
|
89
|
+
"navds-read-more__expand-icon navds-read-more__expand-icon--filled"
|
|
90
|
+
}
|
|
91
|
+
aria-hidden
|
|
92
|
+
/>
|
|
79
93
|
<span>{header}</span>
|
|
80
94
|
</button>
|
|
81
95
|
<CollapseComponent isOpened={isOpened}>
|
|
82
96
|
<div className="navds-read-more__content">
|
|
83
|
-
<BodyLong size=
|
|
97
|
+
<BodyLong size={size}>{children}</BodyLong>
|
|
84
98
|
</div>
|
|
85
99
|
</CollapseComponent>
|
|
86
|
-
|
|
100
|
+
</div>
|
|
87
101
|
);
|
|
88
102
|
}
|
|
89
103
|
);
|
package/src/read-more/index.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as ReadMore
|
|
1
|
+
export { default as ReadMore } from "./ReadMore";
|
|
2
|
+
export { ReadMoreProps } from "./ReadMore";
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { ReadMore } from ".";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "ds-react/ReadMore",
|
|
6
|
+
component: ReadMore,
|
|
7
|
+
argTypes: {
|
|
8
|
+
size: {
|
|
9
|
+
control: {
|
|
10
|
+
type: "radio",
|
|
11
|
+
options: ["medium", "small"],
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const Default = (props) => {
|
|
18
|
+
const [state, setState] = useState(false);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<ReadMore
|
|
22
|
+
open={props.controlled ? state : undefined}
|
|
23
|
+
onClick={() => setState((x) => !x)}
|
|
24
|
+
header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
|
|
25
|
+
{...props}
|
|
26
|
+
>
|
|
27
|
+
Command station, this is ST 321. Code Clearance Blue. We're starting our
|
|
28
|
+
approach. Deactivate the security shield.
|
|
29
|
+
</ReadMore>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
Default.args = {
|
|
34
|
+
controlled: false,
|
|
35
|
+
size: "medium",
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const Small = () => (
|
|
39
|
+
<ReadMore
|
|
40
|
+
header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
|
|
41
|
+
size="small"
|
|
42
|
+
>
|
|
43
|
+
Command station, this is ST 321. Code Clearance Blue. We're starting our
|
|
44
|
+
approach. Deactivate the security shield.
|
|
45
|
+
</ReadMore>
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
export const Open = () => (
|
|
49
|
+
<ReadMore
|
|
50
|
+
header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
|
|
51
|
+
defaultOpen
|
|
52
|
+
>
|
|
53
|
+
Command station, this is ST 321. Code Clearance Blue. We're starting our
|
|
54
|
+
approach. Deactivate the security shield.
|
|
55
|
+
</ReadMore>
|
|
56
|
+
);
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { ReadMore } from ".";
|
|
3
|
-
import { Link } from "..";
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: "ds-react/read-more",
|
|
7
|
-
component: ReadMore,
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const All = () => {
|
|
11
|
-
const [open, setOpen] = useState(false);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<>
|
|
15
|
-
<h1>Read more</h1>
|
|
16
|
-
<h2>Controlled</h2>
|
|
17
|
-
<ReadMore
|
|
18
|
-
open={open}
|
|
19
|
-
onClick={() => setOpen(!open)}
|
|
20
|
-
header="ReadMore header text ReadMore header text ReadMore header text ReadMore header text ReadMore header text"
|
|
21
|
-
>
|
|
22
|
-
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
|
23
|
-
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
|
24
|
-
occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
|
|
25
|
-
ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
|
|
26
|
-
eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
|
|
27
|
-
qui velit id eu.{" "}
|
|
28
|
-
<Link href="example.com">Deserunt magna sunt velit in</Link>. Est
|
|
29
|
-
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
|
30
|
-
proident occaecat aliquip nulla anim proident reprehenderit. Magna ipsum
|
|
31
|
-
officia veniam cupidatat duis veniam dolore reprehenderit mollit
|
|
32
|
-
velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
|
|
33
|
-
laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
|
|
34
|
-
reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo
|
|
35
|
-
cillum eiusmod eiusmod. Do laborum qui proident commodo adipisicing
|
|
36
|
-
eiusmod id.
|
|
37
|
-
</ReadMore>
|
|
38
|
-
<h2>Un-controlled</h2>
|
|
39
|
-
<ReadMore header="ReadMore header text">
|
|
40
|
-
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
|
41
|
-
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
|
42
|
-
occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
|
|
43
|
-
ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
|
|
44
|
-
eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
|
|
45
|
-
qui velit id eu. Deserunt magna sunt velit in. Est exercitation id
|
|
46
|
-
cillum qui do. Minim adipisicing nostrud commodo proident occaecat
|
|
47
|
-
aliquip nulla anim proident reprehenderit. Magna ipsum officia veniam
|
|
48
|
-
cupidatat duis veniam dolore reprehenderit mollit velit.Ut consequat
|
|
49
|
-
commodo minim occaecat id pariatur. Nisi enim tempor laborum commodo.
|
|
50
|
-
Tempor sit quis nostrud eu cupidatat sunt commodo reprehenderit irure
|
|
51
|
-
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
|
|
52
|
-
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
|
|
53
|
-
</ReadMore>
|
|
54
|
-
<h2>Default open</h2>
|
|
55
|
-
<ReadMore header="ReadMore header text" defaultOpen>
|
|
56
|
-
Body
|
|
57
|
-
</ReadMore>
|
|
58
|
-
</>
|
|
59
|
-
);
|
|
60
|
-
};
|