@navikt/ds-react 0.14.5 → 0.14.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 (8) hide show
  1. package/cjs/form/Switch.js +15 -4
  2. package/esm/form/Switch.d.ts +4 -0
  3. package/esm/form/Switch.js +16 -5
  4. package/esm/form/Switch.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/form/Switch.tsx +65 -6
  7. package/src/form/stories/switch.stories.mdx +73 -3
  8. package/src/form/stories/switch.stories.tsx +27 -1
package/cjs/form/Switch.js CHANGED
@@ -37,16 +37,27 @@ const classnames_1 = __importDefault(require("classnames"));
37
37
  const react_1 = __importStar(require("react"));
38
38
  const __1 = require("..");
39
39
  const useFormField_1 = require("./useFormField");
40
+ const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
41
+ react_1.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
40
42
  const Switch = (0, react_1.forwardRef)((props, ref) => {
43
+ var _a;
41
44
  const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
42
- const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
45
+ const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
43
46
  const Description = size === "medium" ? __1.BodyShort : __1.Detail;
44
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, {
47
+ const [checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
48
+ (0, react_1.useEffect)(() => {
49
+ checkedProp !== undefined && setChecked(checkedProp);
50
+ }, [checkedProp]);
51
+ const handleChange = (e) => {
52
+ setChecked(e.target.checked);
53
+ props.onChange && props.onChange(e);
54
+ };
55
+ return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
45
56
  "navds-switch--disabled": inputProps.disabled,
46
57
  }) },
47
- react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: (0, classnames_1.default)(className, "navds-switch__input") })),
58
+ react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
48
59
  react_1.default.createElement("span", { className: "navds-switch__track" },
49
- react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading && react_1.default.createElement(__1.Loader, { size: "xsmall" }))),
60
+ react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
50
61
  react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
51
62
  react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
52
63
  "sr-only": hideLabel,
package/esm/form/Switch.d.ts CHANGED
@@ -13,6 +13,10 @@ export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">,
13
13
  * Toggles loading state with loader-component on switch
14
14
  */
15
15
  loading?: boolean;
16
+ /**
17
+ * Positions switch on left/right side of label
18
+ */
19
+ position?: "left" | "right";
16
20
  }
17
21
  declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
18
22
  export default Switch;
package/esm/form/Switch.js CHANGED
@@ -10,19 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import cl from "classnames";
13
- import React, { forwardRef } from "react";
13
+ import React, { forwardRef, useEffect, useState, } from "react";
14
14
  import { BodyShort, Detail, Loader, omit } from "..";
15
15
  import { useFormField } from "./useFormField";
16
+ const SelectedIcon = () => (React.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
17
+ React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
16
18
  const Switch = forwardRef((props, ref) => {
19
+ var _a;
17
20
  const { inputProps, size } = useFormField(props, "switch");
18
- const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
21
+ const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
19
22
  const Description = size === "medium" ? BodyShort : Detail;
20
- return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, {
23
+ const [checked, setChecked] = useState((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
24
+ useEffect(() => {
25
+ checkedProp !== undefined && setChecked(checkedProp);
26
+ }, [checkedProp]);
27
+ const handleChange = (e) => {
28
+ setChecked(e.target.checked);
29
+ props.onChange && props.onChange(e);
30
+ };
31
+ return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
21
32
  "navds-switch--disabled": inputProps.disabled,
22
33
  }) },
23
- React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: cl(className, "navds-switch__input") })),
34
+ React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: cl(className, "navds-switch__input") })),
24
35
  React.createElement("span", { className: "navds-switch__track" },
25
- React.createElement("span", { className: "navds-switch__thumb" }, loading && React.createElement(Loader, { size: "xsmall" }))),
36
+ React.createElement("span", { className: "navds-switch__thumb" }, loading ? (React.createElement(Loader, { size: "xsmall" })) : checked ? (React.createElement(SelectedIcon, null)) : null)),
26
37
  React.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
27
38
  React.createElement("div", { className: cl("navds-switch__content", {
28
39
  "sr-only": hideLabel,
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,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AACrD,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9D,MAAM,MAAM,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE3D,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,gEAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,iBAAiB,IAAI,EAAE,EAAE;YACtE,wBAAwB,EAAE,UAAU,CAAC,QAAQ;SAC9C,CAAC;QAEF,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,IAC1D,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,IAC/C;QACF,8BAAM,SAAS,EAAC,qBAAqB;YACnC,8BAAM,SAAS,EAAC,qBAAqB,IAClC,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B,CACF;QAEP,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,6BAA6B;YACpE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;oBACrC,SAAS,EAAE,SAAS;oBACpB,gCAAgC,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,SAAS;iBAC9D,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,qBAAqB,IAC5D,QAAQ,CACC;gBACX,WAAW,IAAI,CACd,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2BAA2B,IAEpC,WAAW,CACA,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.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": "0.14.5",
3
+ "version": "0.14.6",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -64,5 +64,5 @@
64
64
  "@types/react": "^17.0.30",
65
65
  "react": "^17.0.0"
66
66
  },
67
- "gitHead": "3db81c9b79f8be93cb23f996002d0cbb38ca2348"
67
+ "gitHead": "d9359d1a862061125816b15efa464a8da14639cb"
68
68
  }
package/src/form/Switch.tsx CHANGED
@@ -1,8 +1,35 @@
1
1
  import cl from "classnames";
2
- import React, { forwardRef, InputHTMLAttributes } from "react";
2
+ import React, {
3
+ forwardRef,
4
+ InputHTMLAttributes,
5
+ useEffect,
6
+ useState,
7
+ } from "react";
3
8
  import { BodyShort, Detail, Loader, omit } from "..";
4
9
  import { FormFieldProps, useFormField } from "./useFormField";
5
10
 
11
+ const SelectedIcon = () => (
12
+ <svg
13
+ width="12px"
14
+ height="12px"
15
+ viewBox="0 0 12 12"
16
+ fill="none"
17
+ xmlns="http://www.w3.org/2000/svg"
18
+ focusable={false}
19
+ role="img"
20
+ aria-hidden
21
+ aria-label="Deaktiver valg"
22
+ >
23
+ <path
24
+ fill-rule="evenodd"
25
+ clip-rule="evenodd"
26
+ d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
27
+ fill="currentColor"
28
+ stroke="currentColor"
29
+ />
30
+ </svg>
31
+ );
32
+
6
33
  export interface SwitchProps
7
34
  extends Omit<FormFieldProps, "error" | "errorId">,
8
35
  Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -18,6 +45,10 @@ export interface SwitchProps
18
45
  * Toggles loading state with loader-component on switch
19
46
  */
20
47
  loading?: boolean;
48
+ /**
49
+ * Positions switch on left/right side of label
50
+ */
51
+ position?: "left" | "right";
21
52
  }
22
53
 
23
54
  const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
@@ -29,30 +60,58 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
29
60
  description,
30
61
  hideLabel = false,
31
62
  loading,
63
+ checked: checkedProp,
64
+ defaultChecked,
65
+ position = "left",
32
66
  ...rest
33
67
  } = props;
34
68
 
35
69
  const Description = size === "medium" ? BodyShort : Detail;
36
70
 
71
+ const [checked, setChecked] = useState(
72
+ defaultChecked ?? checkedProp ?? false
73
+ );
74
+
75
+ useEffect(() => {
76
+ checkedProp !== undefined && setChecked(checkedProp);
77
+ }, [checkedProp]);
78
+
79
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
80
+ setChecked(e.target.checked);
81
+ props.onChange && props.onChange(e);
82
+ };
83
+
37
84
  return (
38
85
  <div
39
- className={cl("navds-switch", props.className, `navds-switch--${size}`, {
40
- "navds-switch--disabled": inputProps.disabled,
41
- })}
86
+ className={cl(
87
+ "navds-switch",
88
+ props.className,
89
+ `navds-switch--${size}`,
90
+ `navds-switch--${position}`,
91
+ {
92
+ "navds-switch--disabled": inputProps.disabled,
93
+ }
94
+ )}
42
95
  >
43
96
  <input
44
97
  {...omit(rest, ["size"])}
45
98
  {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
99
+ checked={checkedProp}
100
+ defaultChecked={defaultChecked}
46
101
  ref={ref}
47
102
  type="checkbox"
103
+ onChange={(e) => handleChange(e)}
48
104
  className={cl(className, "navds-switch__input")}
49
105
  />
50
106
  <span className="navds-switch__track">
51
107
  <span className="navds-switch__thumb">
52
- {loading && <Loader size="xsmall" />}
108
+ {loading ? (
109
+ <Loader size="xsmall" />
110
+ ) : checked ? (
111
+ <SelectedIcon />
112
+ ) : null}
53
113
  </span>
54
114
  </span>
55
-
56
115
  <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
57
116
  <div
58
117
  className={cl("navds-switch__content", {
package/src/form/stories/switch.stories.mdx CHANGED
@@ -6,21 +6,70 @@ import { Switch } from "../index";
6
6
  # Hvordan ta i bruk Switch
7
7
 
8
8
  ```jsx
9
- <Switch>Slå på feature</Switch>
9
+ <Switch>Slå på feature</Switch>
10
+ <div>
11
+ <Switch position="right">Slå på feature</Switch>
12
+ </div>
10
13
  ```
11
14
 
12
15
  <Canvas>
13
16
  <Switch>Slå på feature</Switch>
17
+ <div>
18
+ <Switch position="right">Slå på feature</Switch>
19
+ </div>
14
20
  </Canvas>
15
21
 
16
22
  ## Description
17
23
 
18
24
  ```jsx
19
25
  <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
26
+ <div>
27
+ <Switch position="right" description="Dette vil gjøre x og y">
28
+ Slå på feature
29
+ </Switch>
30
+ </div>
20
31
  ```
21
32
 
22
33
  <Canvas>
23
34
  <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
35
+ <div>
36
+ <Switch position="right" description="Dette vil gjøre x og y">
37
+ Slå på feature
38
+ </Switch>
39
+ </div>
40
+ </Canvas>
41
+
42
+ ## Position
43
+
44
+ Switch kan ha label på høyre eller venstre side. Velges med "Position"-prop "left" | "right". Husk at hvis position
45
+ "right" velges, må man selv passe på at den har en definert bredde slik at elementet ikke vises over hele skjermen.
46
+
47
+ ```jsx
48
+ <div>
49
+ <div>
50
+ <h3>Feil</h3>
51
+ <Switch position="right">Slå på feature</Switch>
52
+ <h3>Riktig</h3>
53
+ <div style={{ width: 200 }}>
54
+ <Switch position="right">Slå på feature 1</Switch>
55
+ <Switch position="right">Slå på feature 2</Switch>
56
+ <Switch position="right">Slå på feature 3</Switch>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ ```
61
+
62
+ <Canvas>
63
+ <div>
64
+ <h3>Feil</h3>
65
+ <Switch position="right">Slå på feature</Switch>
66
+ <h3>Riktig</h3>
67
+ <div style={{ width: 300 }}>
68
+ <Switch position="right">Slå på feature 1</Switch>
69
+ <Switch position="right">Slå på feature 2</Switch>
70
+ <Switch position="right">Slå på feature 3</Switch>
71
+ </div>
72
+ </div>
24
73
  </Canvas>
25
74
 
26
75
  ## Sizing
@@ -30,6 +79,9 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
30
79
  ```jsx
31
80
  <Switch size="small" >Slå på feature</Switch>
32
81
  <Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
82
+
83
+ <Switch position="right" size="small" >Slå på feature</Switch>
84
+ <Switch position="right" size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
33
85
  ```
34
86
 
35
87
  <Canvas>
@@ -39,6 +91,14 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
39
91
  Slå på feature
40
92
  </Switch>
41
93
  </div>
94
+ <div>
95
+ <Switch position="right" size="small">
96
+ Slå på feature
97
+ </Switch>
98
+ <Switch position="right" size="small" description="Dette vil gjøre x og y">
99
+ Slå på feature
100
+ </Switch>
101
+ </div>
42
102
  </Canvas>
43
103
 
44
104
  ## defaultChecked
@@ -58,11 +118,21 @@ Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
58
118
  Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
59
119
 
60
120
  ```jsx
61
- <Switch hideLabel>Slå på feature</Switch>
121
+ <div style={{ width: 300 }}>
122
+ <Switch hideLabel>Slå på feature</Switch>
123
+ <Switch hideLabel position="right">
124
+ Slå på feature
125
+ </Switch>
126
+ </div>
62
127
  ```
63
128
 
64
129
  <Canvas>
65
- <Switch hideLabel>Slå på feature</Switch>
130
+ <div style={{ width: 300 }}>
131
+ <Switch hideLabel>Slå på feature</Switch>
132
+ <Switch hideLabel position="right">
133
+ Slå på feature
134
+ </Switch>
135
+ </div>
66
136
  </Canvas>
67
137
 
68
138
  ## Disabled
package/src/form/stories/switch.stories.tsx CHANGED
@@ -10,15 +10,22 @@ export default {
10
10
  export const All = () => {
11
11
  const [checked, setChecked] = useState(false);
12
12
  return (
13
- <div>
13
+ <div style={{ width: "fit-content" }}>
14
14
  <h1>Switch</h1>
15
15
  <Switch>Label text</Switch>
16
+ <Switch position="right">Label text</Switch>
16
17
 
17
18
  <h2>Switch w/Description</h2>
18
19
  <Switch>Label text</Switch>
19
20
  <Switch description="Switch description">Label text</Switch>
20
21
  <Switch>Label text</Switch>
21
22
 
23
+ <Switch position="right">Label text</Switch>
24
+ <Switch position="right" description="Switch description">
25
+ Label text
26
+ </Switch>
27
+ <Switch position="right">Label text</Switch>
28
+
22
29
  <h2>hidelabel</h2>
23
30
  <Switch description="Switch description" hideLabel>
24
31
  Label text
@@ -29,6 +36,15 @@ export const All = () => {
29
36
  <Switch hideLabel size="small">
30
37
  Label text small
31
38
  </Switch>
39
+ <Switch position="right" description="Switch description" hideLabel>
40
+ Label text
41
+ </Switch>
42
+ <Switch position="right" description="Switch description" hideLabel>
43
+ Label text
44
+ </Switch>
45
+ <Switch position="right" hideLabel size="small">
46
+ Label text small
47
+ </Switch>
32
48
 
33
49
  <h2>Switch small</h2>
34
50
  <Switch size="small">Label text</Switch>
@@ -37,6 +53,16 @@ export const All = () => {
37
53
  </Switch>
38
54
  <Switch size="small">Label text</Switch>
39
55
 
56
+ <Switch position="right" size="small">
57
+ Label text
58
+ </Switch>
59
+ <Switch position="right" description="Switch description" size="small">
60
+ Label text
61
+ </Switch>
62
+ <Switch position="right" size="small">
63
+ Label text
64
+ </Switch>
65
+
40
66
  <h2>Controlled</h2>
41
67
  <Switch checked={checked} onChange={() => setChecked(!checked)}>
42
68
  Label text