@navikt/ds-react 5.7.5 → 5.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/_docs.json +1 -1
  2. package/cjs/chips/Toggle.js +2 -3
  3. package/esm/chips/Toggle.d.ts +1 -1
  4. package/esm/chips/Toggle.js +2 -3
  5. package/esm/chips/Toggle.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/chips/Toggle.tsx +22 -12
  8. package/src/chips/chips.stories.tsx +9 -3
  9. package/src/date/datepicker/datepicker.stories.tsx +0 -1
  10. package/src/date/monthpicker/monthpicker.stories.tsx +28 -1
package/_docs.json CHANGED
@@ -1407,7 +1407,7 @@
1407
1407
  "props": {
1408
1408
  "selected": {
1409
1409
  "defaultValue": null,
1410
- "description": "Toggles aria-pressed and visual-changes",
1410
+ "description": "Toggles aria-pressed and visual changes",
1411
1411
  "name": "selected",
1412
1412
  "parent": {
1413
1413
  "fileName": "src/chips/Toggle.tsx",
package/cjs/chips/Toggle.js CHANGED
@@ -42,9 +42,8 @@ const clsx_1 = __importDefault(require("clsx"));
42
42
  const react_1 = __importStar(require("react"));
43
43
  exports.ToggleChips = (0, react_1.forwardRef)((_a, ref) => {
44
44
  var { className, children, selected, variant = "action", checkmark = true, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "variant", "checkmark", "as"]);
45
- return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__toggle", className, `navds-chips__toggle--${variant}`), "aria-pressed": selected }),
46
- selected && checkmark && (react_1.default.createElement("svg", { "aria-hidden": true, className: "navds-chips__toggle-icon", width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img" },
47
- react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z", fill: "currentColor" }))),
45
+ return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__toggle", className, `navds-chips__toggle--${variant}`, { "navds-chips__toggle--with-checkmark": checkmark }), "aria-pressed": selected }),
46
+ checkmark && (react_1.default.createElement("svg", { "aria-hidden": true, className: "navds-chips__toggle-icon", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img" }, selected ? (react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z", fill: "currentColor" })) : (react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z", fill: "var(--a-border-default)" })))),
48
47
  react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children)));
49
48
  });
50
49
  exports.default = exports.ToggleChips;
package/esm/chips/Toggle.d.ts CHANGED
@@ -3,7 +3,7 @@ import { OverridableComponent } from "../util";
3
3
  export interface ToggleChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
4
  children: string;
5
5
  /**
6
- * Toggles aria-pressed and visual-changes
6
+ * Toggles aria-pressed and visual changes
7
7
  */
8
8
  selected?: boolean;
9
9
  /**
package/esm/chips/Toggle.js CHANGED
@@ -13,9 +13,8 @@ import cl from "clsx";
13
13
  import React, { forwardRef } from "react";
14
14
  export const ToggleChips = forwardRef((_a, ref) => {
15
15
  var { className, children, selected, variant = "action", checkmark = true, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "variant", "checkmark", "as"]);
16
- return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-chips__chip navds-chips__toggle", className, `navds-chips__toggle--${variant}`), "aria-pressed": selected }),
17
- selected && checkmark && (React.createElement("svg", { "aria-hidden": true, className: "navds-chips__toggle-icon", width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img" },
18
- React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z", fill: "currentColor" }))),
16
+ return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-chips__chip navds-chips__toggle", className, `navds-chips__toggle--${variant}`, { "navds-chips__toggle--with-checkmark": checkmark }), "aria-pressed": selected }),
17
+ checkmark && (React.createElement("svg", { "aria-hidden": true, className: "navds-chips__toggle-icon", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img" }, selected ? (React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z", fill: "currentColor" })) : (React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z", fill: "var(--a-border-default)" })))),
19
18
  React.createElement("span", { className: "navds-chips__chip-text" }, children)));
20
19
  });
21
20
  export default ToggleChips;
package/esm/chips/Toggle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/chips/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAsB1C,MAAM,CAAC,MAAM,WAAW,GAGpB,UAAU,CACZ,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,IAAI,EAChB,EAAE,EAAE,SAAS,GAAG,QAAQ,OAEzB,EADI,IAAI,cAPT,mEAQC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,SAAS,EACT,wBAAwB,OAAO,EAAE,CAClC,kBACa,QAAQ;QAErB,QAAQ,IAAI,SAAS,IAAI,CACxB,kDAEE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;YAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wUAAwU,EAC1U,IAAI,EAAC,cAAc,GACnB,CACE,CACP;QACD,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ,CAChD,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/chips/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAsB1C,MAAM,CAAC,MAAM,WAAW,GAGpB,UAAU,CACZ,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,IAAI,EAChB,EAAE,EAAE,SAAS,GAAG,QAAQ,OAEzB,EADI,IAAI,cAPT,mEAQC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,SAAS,EACT,wBAAwB,OAAO,EAAE,EACjC,EAAE,qCAAqC,EAAE,SAAS,EAAE,CACrD,kBACa,QAAQ;QAErB,SAAS,IAAI,CACZ,kDAEE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,QAAQ,EACd,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK,IAET,QAAQ,CAAC,CAAC,CAAC,CACV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,mhBAAmhB,EACrhB,IAAI,EAAC,cAAc,GACnB,CACH,CAAC,CAAC,CAAC,CACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,sUAAsU,EACxU,IAAI,EAAC,yBAAyB,GAC9B,CACH,CACG,CACP;QACD,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ,CAChD,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "5.7.5",
3
+ "version": "5.7.6",
4
4
  "description": "Aksel react-components for NAV designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "license": "MIT",
@@ -38,8 +38,8 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@floating-ui/react": "0.25.4",
41
- "@navikt/aksel-icons": "^5.7.5",
42
- "@navikt/ds-tokens": "^5.7.5",
41
+ "@navikt/aksel-icons": "^5.7.6",
42
+ "@navikt/ds-tokens": "^5.7.6",
43
43
  "@radix-ui/react-tabs": "1.0.0",
44
44
  "@radix-ui/react-toggle-group": "1.0.0",
45
45
  "clsx": "^1.2.1",
package/src/chips/Toggle.tsx CHANGED
@@ -6,7 +6,7 @@ export interface ToggleChipsProps
6
6
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
7
7
  children: string;
8
8
  /**
9
- * Toggles aria-pressed and visual-changes
9
+ * Toggles aria-pressed and visual changes
10
10
  */
11
11
  selected?: boolean;
12
12
  /**
@@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent<
44
44
  className={cl(
45
45
  "navds-chips__chip navds-chips__toggle",
46
46
  className,
47
- `navds-chips__toggle--${variant}`
47
+ `navds-chips__toggle--${variant}`,
48
+ { "navds-chips__toggle--with-checkmark": checkmark }
48
49
  )}
49
50
  aria-pressed={selected}
50
51
  >
51
- {selected && checkmark && (
52
+ {checkmark && (
52
53
  <svg
53
54
  aria-hidden
54
55
  className="navds-chips__toggle-icon"
55
- width="10"
56
- height="8"
57
- viewBox="0 0 10 8"
56
+ width="1.25em"
57
+ height="1.25em"
58
+ viewBox="0 0 20 20"
58
59
  fill="none"
59
60
  xmlns="http://www.w3.org/2000/svg"
60
61
  focusable={false}
61
62
  role="img"
62
63
  >
63
- <path
64
- fillRule="evenodd"
65
- clipRule="evenodd"
66
- d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
67
- fill="currentColor"
68
- />
64
+ {selected ? (
65
+ <path
66
+ fillRule="evenodd"
67
+ clipRule="evenodd"
68
+ d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
69
+ fill="currentColor"
70
+ />
71
+ ) : (
72
+ <path
73
+ fillRule="evenodd"
74
+ clipRule="evenodd"
75
+ d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
76
+ fill="var(--a-border-default)"
77
+ />
78
+ )}
69
79
  </svg>
70
80
  )}
71
81
  <span className="navds-chips__chip-text">{children}</span>
package/src/chips/chips.stories.tsx CHANGED
@@ -60,11 +60,11 @@ Default.argTypes = {
60
60
  },
61
61
  };
62
62
 
63
- export const Toggle = () => {
63
+ export const Toggle = ({ size }) => {
64
64
  const [selected, setSelected] = useState<number[]>([2, 4]);
65
65
  return (
66
66
  <div className="colgap">
67
- <Chips>
67
+ <Chips size={size}>
68
68
  {options.map((c, y) => (
69
69
  <Chips.Toggle
70
70
  selected={selected.includes(y)}
@@ -81,7 +81,7 @@ export const Toggle = () => {
81
81
  </Chips.Toggle>
82
82
  ))}
83
83
  </Chips>
84
- <Chips>
84
+ <Chips size={size}>
85
85
  {options.map((c, y) => (
86
86
  <Chips.Toggle
87
87
  variant="neutral"
@@ -102,6 +102,12 @@ export const Toggle = () => {
102
102
  </div>
103
103
  );
104
104
  };
105
+ Toggle.argTypes = {
106
+ size: {
107
+ control: { type: "radio" },
108
+ options: ["medium", "small"],
109
+ },
110
+ };
105
111
 
106
112
  export const ToggleNoCheckmark = () => {
107
113
  const [selected, setSelected] = useState<number>(2);
package/src/date/datepicker/datepicker.stories.tsx CHANGED
@@ -4,7 +4,6 @@ import isSameDay from "date-fns/isSameDay";
4
4
  import React, { useId, useState } from "react";
5
5
  import { useDatepicker, useRangeDatepicker } from "..";
6
6
  import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
7
-
8
7
  import DatePicker, { DatePickerProps } from "./DatePicker";
9
8
 
10
9
  const disabledDays = [
package/src/date/monthpicker/monthpicker.stories.tsx CHANGED
@@ -1,8 +1,10 @@
1
1
  import { Meta, StoryFn } from "@storybook/react";
2
+ import setYear from "date-fns/setYear";
2
3
  import React, { useId, useState } from "react";
3
4
  import { Button, DateInputProps } from "../..";
4
5
  import { useMonthpicker } from "../hooks";
5
- import MonthPicker, { MonthPickerProps } from "./MonthPicker";
6
+ import MonthPicker from "./MonthPicker";
7
+ import { MonthPickerProps } from "./types";
6
8
 
7
9
  export default {
8
10
  title: "ds-react/Monthpicker",
@@ -147,3 +149,28 @@ export const UserControlled = () => {
147
149
  </div>
148
150
  );
149
151
  };
152
+
153
+ export const FollowYear = () => {
154
+ const { monthpickerProps, inputProps, selectedMonth, setSelected } =
155
+ useMonthpicker({
156
+ fromDate: new Date("Aug 23 2019"),
157
+ toDate: new Date("Aug 23 2025"),
158
+ onMonthChange: console.log,
159
+ });
160
+
161
+ const customYearChange = (yearDate?: Date) => {
162
+ monthpickerProps.onYearChange?.(yearDate);
163
+ if (selectedMonth && yearDate) {
164
+ setSelected(setYear(selectedMonth, yearDate.getFullYear()));
165
+ }
166
+ };
167
+
168
+ return (
169
+ <div className="min-h-96">
170
+ <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
171
+ <MonthPicker.Input {...inputProps} label="Velg månede" />
172
+ </MonthPicker>
173
+ {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
174
+ </div>
175
+ );
176
+ };