@navikt/ds-react 3.2.2 → 3.2.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 +1 -1
- package/cjs/date/DateInput.js +3 -2
- package/esm/copybutton/CopyButton.d.ts +2 -1
- package/esm/copybutton/CopyButton.js.map +1 -1
- package/esm/date/DateInput.js +4 -3
- package/esm/date/DateInput.js.map +1 -1
- package/package.json +2 -2
- package/src/copybutton/CopyButton.tsx +2 -1
- package/src/copybutton/copy-button.stories.tsx +33 -1
- package/src/date/DateInput.tsx +15 -17
- package/src/date/datepicker/datepicker.stories.tsx +19 -0
package/_docs.json
CHANGED
package/cjs/date/DateInput.js
CHANGED
|
@@ -70,9 +70,10 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
|
|
|
70
70
|
}), id: inputDescriptionId, size: size }, description)),
|
|
71
71
|
react_1.default.createElement("div", { className: "navds-date__field-wrapper" },
|
|
72
72
|
react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
|
|
73
|
-
react_1.default.createElement(
|
|
73
|
+
react_1.default.createElement("button", { disabled: inputProps.disabled, tabIndex: open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
|
|
74
|
+
react_1.default.createElement(aksel_icons_1.CalendarIcon, { pointerEvents: "none", title: open
|
|
74
75
|
? conditionalVariables.iconTitle.close
|
|
75
|
-
: conditionalVariables.iconTitle.open })
|
|
76
|
+
: conditionalVariables.iconTitle.open }))),
|
|
76
77
|
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)))));
|
|
77
78
|
});
|
|
78
79
|
exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(DateInput, Object.assign({}, props, { ref: ref })));
|
|
@@ -2,8 +2,9 @@ import React, { ButtonHTMLAttributes } from "react";
|
|
|
2
2
|
export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
3
3
|
/**
|
|
4
4
|
* @default "medium"
|
|
5
|
+
* xsmall should only be used in tables/
|
|
5
6
|
*/
|
|
6
|
-
size?: "medium" | "small";
|
|
7
|
+
size?: "medium" | "small" | "xsmall";
|
|
7
8
|
/**
|
|
8
9
|
* @default "neutral"
|
|
9
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/copybutton/CopyButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/copybutton/CopyButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AAyDxC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EAcC,EACD,GAAG,EACH,EAAE;QAhBF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,UAAU,GAAG,UAAU,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,cAAc,EACd,IAAI,EACJ,UAAU,EACV,cAAc,GAAG,IAAI,EACrB,KAAK,GAAG,QAAQ,EAChB,WAAW,GAAG,SAAS,OAExB,EADI,IAAI,cAbT,oJAcC,CADQ;IAIT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,EAAU,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;;QACF,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,QAAQ,CAAC,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,IAAI,CAAC,CAAC;QACvB,MAAA,IAAI,CAAC,OAAO,qDAAG,KAAK,CAAC,CAAC;QAEtB,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC1C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,cAAc,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,IACT,IAAI,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,kBAAkB,EAClB,SAAS,EACT,qBAAqB,IAAI,EAAE,EAC3B,qBAAqB,OAAO,EAAE,EAC9B;YACE,6BAA6B,EAAE,CAAC,IAAI;YACpC,0BAA0B,EAAE,MAAM;SACnC,CACF,EACD,OAAO,EAAE,WAAW;QAEpB,8BAAM,SAAS,EAAC,2BAA2B;YACxC,MAAM,CAAC,CAAC,CAAC,CACR,8BAAM,SAAS,EAAC,wBAAwB,IACrC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,aAAa,mBACC,CAAC,CAAC,IAAI,EACnB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,GACrC,CACH,CACI,CACR,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAC,wBAAwB,IACrC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,CACP,oBAAC,SAAS,mBACK,CAAC,CAAC,IAAI,EACnB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAC/B,CACH,CACI,CACR;YAEA,IAAI;gBACH,CAAC,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,UAAU,CACL,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,IAAI,CACC,CACT,CAAC,CACC,CACA,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/esm/date/DateInput.js
CHANGED
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { CalendarIcon } from "@navikt/aksel-icons";
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import React, { forwardRef } from "react";
|
|
15
|
-
import { BodyShort,
|
|
15
|
+
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
|
16
16
|
import { useFormField } from "../form/useFormField";
|
|
17
17
|
import { useDateInputContext } from "./context";
|
|
18
18
|
const DateInput = forwardRef((props, ref) => {
|
|
@@ -41,9 +41,10 @@ const DateInput = forwardRef((props, ref) => {
|
|
|
41
41
|
}), id: inputDescriptionId, size: size }, description)),
|
|
42
42
|
React.createElement("div", { className: "navds-date__field-wrapper" },
|
|
43
43
|
React.createElement("input", Object.assign({ ref: ref }, omit(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: cl("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
|
|
44
|
-
React.createElement(
|
|
44
|
+
React.createElement("button", { disabled: inputProps.disabled, tabIndex: open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
|
|
45
|
+
React.createElement(CalendarIcon, { pointerEvents: "none", title: open
|
|
45
46
|
? conditionalVariables.iconTitle.close
|
|
46
|
-
: conditionalVariables.iconTitle.open })
|
|
47
|
+
: conditionalVariables.iconTitle.open }))),
|
|
47
48
|
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)))));
|
|
48
49
|
});
|
|
49
50
|
export const DatePickerInput = forwardRef((props, ref) => React.createElement(DateInput, Object.assign({}, props, { ref: ref })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.3",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "0.17.0",
|
|
41
|
-
"@navikt/aksel-icons": "^3.2.
|
|
41
|
+
"@navikt/aksel-icons": "^3.2.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",
|
|
@@ -14,8 +14,9 @@ export interface CopyButtonProps
|
|
|
14
14
|
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
15
15
|
/**
|
|
16
16
|
* @default "medium"
|
|
17
|
+
* xsmall should only be used in tables/
|
|
17
18
|
*/
|
|
18
|
-
size?: "medium" | "small";
|
|
19
|
+
size?: "medium" | "small" | "xsmall";
|
|
19
20
|
/**
|
|
20
21
|
* @default "neutral"
|
|
21
22
|
*/
|
|
@@ -11,7 +11,7 @@ export default {
|
|
|
11
11
|
size: {
|
|
12
12
|
defaultValue: "medium",
|
|
13
13
|
control: { type: "radio" },
|
|
14
|
-
options: ["small", "medium"],
|
|
14
|
+
options: ["small", "medium", "xsmall"],
|
|
15
15
|
},
|
|
16
16
|
variant: {
|
|
17
17
|
defaultValue: undefined,
|
|
@@ -85,6 +85,22 @@ export const Sizes = {
|
|
|
85
85
|
text="Kopier"
|
|
86
86
|
/>
|
|
87
87
|
</div>
|
|
88
|
+
<div className="rowgap">
|
|
89
|
+
<CopyButton size="xsmall" copyText="3.14" variant="action" />
|
|
90
|
+
<CopyButton size="xsmall" copyText="3.14" variant="neutral" />
|
|
91
|
+
<CopyButton
|
|
92
|
+
size="xsmall"
|
|
93
|
+
copyText="3.14"
|
|
94
|
+
variant="action"
|
|
95
|
+
text="Kopier"
|
|
96
|
+
/>
|
|
97
|
+
<CopyButton
|
|
98
|
+
size="xsmall"
|
|
99
|
+
copyText="3.14"
|
|
100
|
+
variant="neutral"
|
|
101
|
+
text="Kopier"
|
|
102
|
+
/>
|
|
103
|
+
</div>
|
|
88
104
|
</div>
|
|
89
105
|
),
|
|
90
106
|
};
|
|
@@ -107,6 +123,14 @@ export const Texts = {
|
|
|
107
123
|
activeText="Kopierte XYZ"
|
|
108
124
|
/>
|
|
109
125
|
</div>
|
|
126
|
+
<div>
|
|
127
|
+
<CopyButton
|
|
128
|
+
copyText="3.14"
|
|
129
|
+
size="xsmall"
|
|
130
|
+
text="Kopier XYZ"
|
|
131
|
+
activeText="Kopierte XYZ"
|
|
132
|
+
/>
|
|
133
|
+
</div>
|
|
110
134
|
</div>
|
|
111
135
|
),
|
|
112
136
|
};
|
|
@@ -129,6 +153,14 @@ export const Icons = {
|
|
|
129
153
|
activeIcon={<ThumbUpIcon title="Kopiert" />}
|
|
130
154
|
/>
|
|
131
155
|
</div>
|
|
156
|
+
<div>
|
|
157
|
+
<CopyButton
|
|
158
|
+
copyText="3.14"
|
|
159
|
+
size="xsmall"
|
|
160
|
+
icon={<LinkIcon title="Kopier" />}
|
|
161
|
+
activeIcon={<ThumbUpIcon title="Kopiert" />}
|
|
162
|
+
/>
|
|
163
|
+
</div>
|
|
132
164
|
</div>
|
|
133
165
|
),
|
|
134
166
|
};
|
package/src/date/DateInput.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CalendarIcon } from "@navikt/aksel-icons";
|
|
2
2
|
import cl from "clsx";
|
|
3
3
|
import React, { forwardRef, InputHTMLAttributes } from "react";
|
|
4
|
-
import { BodyShort,
|
|
4
|
+
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
|
5
5
|
import { FormFieldProps, useFormField } from "../form/useFormField";
|
|
6
6
|
import { useDateInputContext } from "./context";
|
|
7
7
|
|
|
@@ -115,24 +115,22 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
|
|
|
115
115
|
)}
|
|
116
116
|
size={14}
|
|
117
117
|
/>
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
size="small"
|
|
118
|
+
<button
|
|
119
|
+
disabled={inputProps.disabled}
|
|
120
|
+
tabIndex={open ? -1 : 0}
|
|
122
121
|
onClick={() => onOpen()}
|
|
122
|
+
type="button"
|
|
123
123
|
className="navds-date__field-button"
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
/>
|
|
124
|
+
>
|
|
125
|
+
<CalendarIcon
|
|
126
|
+
pointerEvents="none"
|
|
127
|
+
title={
|
|
128
|
+
open
|
|
129
|
+
? conditionalVariables.iconTitle.close
|
|
130
|
+
: conditionalVariables.iconTitle.open
|
|
131
|
+
}
|
|
132
|
+
/>
|
|
133
|
+
</button>
|
|
136
134
|
</div>
|
|
137
135
|
<div
|
|
138
136
|
className="navds-form-field__error"
|
|
@@ -324,3 +324,22 @@ export const defaultShownMonth = () => {
|
|
|
324
324
|
</div>
|
|
325
325
|
);
|
|
326
326
|
};
|
|
327
|
+
|
|
328
|
+
export const Size = () => {
|
|
329
|
+
const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
|
|
330
|
+
fromDate: new Date("Aug 23 2019"),
|
|
331
|
+
toDate: new Date("Feb 23 2024"),
|
|
332
|
+
onDateChange: console.log,
|
|
333
|
+
});
|
|
334
|
+
|
|
335
|
+
return (
|
|
336
|
+
<div style={{ display: "flex", gap: "1rem" }}>
|
|
337
|
+
<DatePicker {...datepickerProps} dropdownCaption>
|
|
338
|
+
<DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
|
|
339
|
+
</DatePicker>
|
|
340
|
+
<DatePicker {...datepickerProps} dropdownCaption>
|
|
341
|
+
<DatePicker.Input size="small" {...inputProps} label="Velg dato" />
|
|
342
|
+
</DatePicker>
|
|
343
|
+
</div>
|
|
344
|
+
);
|
|
345
|
+
};
|