@navikt/ds-react 0.14.13 → 0.14.14

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 (6) hide show
  1. package/cjs/form/Switch.js +5 -4
  2. package/esm/form/Switch.js +5 -4
  3. package/esm/form/Switch.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/form/Switch.tsx +4 -2
  6. package/src/form/stories/switch.stories.tsx +8 -0
package/cjs/form/Switch.js CHANGED
@@ -40,7 +40,7 @@ const useFormField_1 = require("./useFormField");
40
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
41
  react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
42
42
  const Switch = (0, react_1.forwardRef)((props, ref) => {
43
- var _a;
43
+ var _a, _b, _c;
44
44
  const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
45
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"]);
46
46
  const Description = size === "medium" ? __1.BodyShort : __1.Detail;
@@ -53,11 +53,12 @@ const Switch = (0, react_1.forwardRef)((props, ref) => {
53
53
  props.onChange && props.onChange(e);
54
54
  };
55
55
  return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
56
- "navds-switch--disabled": inputProps.disabled,
56
+ "navds-switch--loading": loading,
57
+ "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
57
58
  }) },
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") })),
59
+ react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
59
60
  react_1.default.createElement("span", { className: "navds-switch__track" },
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)),
61
+ react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
61
62
  react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
62
63
  react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
63
64
  "navds-sr-only": hideLabel,
package/esm/form/Switch.js CHANGED
@@ -16,7 +16,7 @@ import { useFormField } from "./useFormField";
16
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
17
  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
18
18
  const Switch = forwardRef((props, ref) => {
19
- var _a;
19
+ var _a, _b, _c;
20
20
  const { inputProps, size } = useFormField(props, "switch");
21
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"]);
22
22
  const Description = size === "medium" ? BodyShort : Detail;
@@ -29,11 +29,12 @@ const Switch = forwardRef((props, ref) => {
29
29
  props.onChange && props.onChange(e);
30
30
  };
31
31
  return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
32
- "navds-switch--disabled": inputProps.disabled,
32
+ "navds-switch--loading": loading,
33
+ "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
33
34
  }) },
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") })),
35
+ React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: cl(className, "navds-switch__input") })),
35
36
  React.createElement("span", { className: "navds-switch__track" },
36
- React.createElement("span", { className: "navds-switch__thumb" }, loading ? (React.createElement(Loader, { size: "xsmall" })) : checked ? (React.createElement(SelectedIcon, null)) : null)),
37
+ React.createElement("span", { className: "navds-switch__thumb" }, loading ? (React.createElement(Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (React.createElement(SelectedIcon, null)) : null)),
37
38
  React.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
38
39
  React.createElement("div", { className: cl("navds-switch__content", {
39
40
  "navds-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":"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"}
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;AAuBF,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,EACP,OAAO,EAAE,WAAW,EACpB,cAAc,EACd,QAAQ,GAAG,MAAM,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,yGAUL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,MAAA,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,WAAW,mCAAI,KAAK,CACvC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,KAAK,SAAS,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,cAAc,EACd,KAAK,CAAC,SAAS,EACf,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,QAAQ,EAAE,EAC3B;YACE,uBAAuB,EAAE,OAAO;YAChC,wBAAwB,EAAE,MAAA,UAAU,CAAC,QAAQ,mCAAI,OAAO;SACzD,CACF;QAED,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,IAC1D,QAAQ,EAAE,MAAA,UAAU,CAAC,QAAQ,mCAAI,OAAO,EACxC,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,IAC/C;QACF,8BAAM,SAAS,EAAC,qBAAqB;YACnC,8BAAM,SAAS,EAAC,qBAAqB,IAClC,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,GAAG,CAC5C,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ,oBAAC,YAAY,OAAG,CACjB,CAAC,CAAC,CAAC,IAAI,CACH,CACF;QACP,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,6BAA6B;YACpE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;oBACrC,eAAe,EAAE,SAAS;oBAC1B,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.14.13",
3
+ "version": "0.14.14",
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": "74d0b0cf1f0d0becc7b1b2768bddcc007b00e432"
67
+ "gitHead": "9597c24328f81e62cd8b67ec8ab26bfaf3b0cebe"
68
68
  }
package/src/form/Switch.tsx CHANGED
@@ -89,13 +89,15 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
89
89
  `navds-switch--${size}`,
90
90
  `navds-switch--${position}`,
91
91
  {
92
- "navds-switch--disabled": inputProps.disabled,
92
+ "navds-switch--loading": loading,
93
+ "navds-switch--disabled": inputProps.disabled ?? loading,
93
94
  }
94
95
  )}
95
96
  >
96
97
  <input
97
98
  {...omit(rest, ["size"])}
98
99
  {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
100
+ disabled={inputProps.disabled ?? loading}
99
101
  checked={checkedProp}
100
102
  defaultChecked={defaultChecked}
101
103
  ref={ref}
@@ -106,7 +108,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
106
108
  <span className="navds-switch__track">
107
109
  <span className="navds-switch__thumb">
108
110
  {loading ? (
109
- <Loader size="xsmall" />
111
+ <Loader size="xsmall" aria-live="polite" />
110
112
  ) : checked ? (
111
113
  <SelectedIcon />
112
114
  ) : null}
package/src/form/stories/switch.stories.tsx CHANGED
@@ -9,6 +9,7 @@ export default {
9
9
 
10
10
  export const All = () => {
11
11
  const [checked, setChecked] = useState(false);
12
+ const [loadingState, setLoadingState] = useState(false);
12
13
  return (
13
14
  <div style={{ width: "fit-content" }}>
14
15
  <h1>Switch</h1>
@@ -91,6 +92,13 @@ export const All = () => {
91
92
  <Switch disabled loading>
92
93
  Label text
93
94
  </Switch>
95
+ <Switch checked loading>
96
+ Label text
97
+ </Switch>
98
+ <button onClick={() => setLoadingState(!loadingState)}>
99
+ Toggle loading
100
+ </button>
101
+ <Switch loading={loadingState}>Label text</Switch>
94
102
  </div>
95
103
  );
96
104
  };