@dhis2-ui/switch 8.2.0 → 8.2.1

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 (11) hide show
  1. package/build/cjs/switch/switch-icons.js +12 -11
  2. package/build/cjs/switch/switch.js +3 -3
  3. package/build/cjs/switch/switch.stories.js +12 -14
  4. package/build/cjs/switch-field/switch-field.js +63 -57
  5. package/build/cjs/switch-field/switch-field.stories.js +11 -16
  6. package/build/es/switch/switch-icons.js +12 -11
  7. package/build/es/switch/switch.js +3 -3
  8. package/build/es/switch/switch.stories.js +11 -13
  9. package/build/es/switch-field/switch-field.js +63 -57
  10. package/build/es/switch-field/switch-field.stories.js +10 -15
  11. package/package.json +4 -4
package/build/cjs/switch/switch-icons.js CHANGED
@@ -15,42 +15,43 @@ var _react = _interopRequireDefault(require("react"));
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
18
- const styles = ["svg.jsx-2218109610{display:block;pointer-events:none;height:18px;width:35px;}", "svg.dense.jsx-2218109610{height:14px;width:27px;}", `svg.jsx-2218109610 .background.jsx-2218109610,svg.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.grey600};}`, `svg.jsx-2218109610 .checkmark.jsx-2218109610,svg.jsx-2218109610 .cross.jsx-2218109610,svg.jsx-2218109610 .handle.jsx-2218109610{fill:${_uiConstants.colors.white};}`, "svg.checked.jsx-2218109610 .handle-unchecked.jsx-2218109610,svg.jsx-2218109610:not(.checked) .handle-checked.jsx-2218109610{fill:none;}", `svg.checked.jsx-2218109610 .background.jsx-2218109610{fill:${_uiConstants.colors.teal400};}`, `svg.valid.jsx-2218109610 .background.jsx-2218109610{fill:${_uiConstants.colors.blue600};}`, `svg.warning.jsx-2218109610 .background.jsx-2218109610{fill:${_uiConstants.colors.yellow700};}`, `svg.error.jsx-2218109610 .background.jsx-2218109610{fill:${_uiConstants.colors.red500};}`, `svg.checked.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.teal700};}`, `svg.disabled.jsx-2218109610 .background.jsx-2218109610{fill:${_uiConstants.colors.grey300};}`, `svg.disabled.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.grey400};}`, `svg.valid.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.blue600};}`, `svg.valid.checked.jsx-2218109610 .border.jsx-2218109610,svg.valid.indeterminate.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.blue700};}`, `svg.warning.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.yellow700};}`, `svg.warning.checked.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.yellow800};}`, `svg.error.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.red500};}`, `svg.error.checked.jsx-2218109610 .border.jsx-2218109610{fill:${_uiConstants.colors.red700};}`];
18
+ const styles = ["svg.jsx-2218109610{display:block;pointer-events:none;height:18px;width:35px;}", "svg.dense.jsx-2218109610{height:14px;width:27px;}", "svg.jsx-2218109610 .background.jsx-2218109610,svg.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.grey600, ";}"), "svg.jsx-2218109610 .checkmark.jsx-2218109610,svg.jsx-2218109610 .cross.jsx-2218109610,svg.jsx-2218109610 .handle.jsx-2218109610{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-2218109610 .handle-unchecked.jsx-2218109610,svg.jsx-2218109610:not(.checked) .handle-checked.jsx-2218109610{fill:none;}", "svg.checked.jsx-2218109610 .background.jsx-2218109610{fill:".concat(_uiConstants.colors.teal400, ";}"), "svg.valid.jsx-2218109610 .background.jsx-2218109610{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.warning.jsx-2218109610 .background.jsx-2218109610{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.error.jsx-2218109610 .background.jsx-2218109610{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.teal700, ";}"), "svg.disabled.jsx-2218109610 .background.jsx-2218109610{fill:".concat(_uiConstants.colors.grey300, ";}"), "svg.disabled.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.valid.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.jsx-2218109610 .border.jsx-2218109610,svg.valid.indeterminate.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.blue700, ";}"), "svg.warning.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(_uiConstants.colors.red700, ";}")];
19
19
  styles.__hash = "2218109610";
20
20
 
21
- function SwitchRegular({
22
- className
23
- }) {
21
+ function SwitchRegular(_ref) {
22
+ let {
23
+ className
24
+ } = _ref;
24
25
  return /*#__PURE__*/_react.default.createElement("svg", {
25
26
  viewBox: "0 0 42 22",
26
27
  xmlns: "http://www.w3.org/2000/svg",
27
- className: `jsx-${styles.__hash}` + " " + (className || "")
28
+ className: "jsx-".concat(styles.__hash) + " " + (className || "")
28
29
  }, /*#__PURE__*/_react.default.createElement("path", {
29
30
  d: "M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z",
30
31
  fill: "red",
31
- className: `jsx-${styles.__hash}` + " " + "background"
32
+ className: "jsx-".concat(styles.__hash) + " " + "background"
32
33
  }), /*#__PURE__*/_react.default.createElement("path", {
33
34
  d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z" // fill="#00695C"
34
35
  // fillRule="nonzero"
35
36
  ,
36
- className: `jsx-${styles.__hash}` + " " + "border"
37
+ className: "jsx-".concat(styles.__hash) + " " + "border"
37
38
  }), /*#__PURE__*/_react.default.createElement("path", {
38
39
  d: "M27.7071068,7.29289322 L30,9.585 L32.2928932,7.29289322 C32.6533772,6.93240926 33.2206082,6.90467972 33.6128994,7.20970461 L33.7071068,7.29289322 C34.0976311,7.68341751 34.0976311,8.31658249 33.7071068,8.70710678 L33.7071068,8.70710678 L31.415,11 L33.7071068,13.2928932 C34.0976311,13.6834175 34.0976311,14.3165825 33.7071068,14.7071068 C33.3165825,15.0976311 32.6834175,15.0976311 32.2928932,14.7071068 L30,12.415 L27.7071068,14.7071068 C27.3466228,15.0675907 26.7793918,15.0953203 26.3871006,14.7902954 L26.2928932,14.7071068 C25.9023689,14.3165825 25.9023689,13.6834175 26.2928932,13.2928932 L26.2928932,13.2928932 L28.585,11 L26.2928932,8.70710678 C25.9023689,8.31658249 25.9023689,7.68341751 26.2928932,7.29289322 C26.6834175,6.90236893 27.3165825,6.90236893 27.7071068,7.29289322 Z",
39
40
  fill: "#FFFFFF",
40
- className: `jsx-${styles.__hash}` + " " + "cross"
41
+ className: "jsx-".concat(styles.__hash) + " " + "cross"
41
42
  }), /*#__PURE__*/_react.default.createElement("path", {
42
43
  d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z" // fill="#FFFFFF"
43
44
  // fillRule="nonzero"
44
45
  ,
45
- className: `jsx-${styles.__hash}` + " " + "checkmark"
46
+ className: "jsx-".concat(styles.__hash) + " " + "checkmark"
46
47
  }), /*#__PURE__*/_react.default.createElement("path", {
47
48
  d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z" // fill="#FFFFFF"
48
49
  ,
49
- className: `jsx-${styles.__hash}` + " " + "handle handle-unchecked"
50
+ className: "jsx-".concat(styles.__hash) + " " + "handle handle-unchecked"
50
51
  }), /*#__PURE__*/_react.default.createElement("path", {
51
52
  d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z" // fill="#FFFFFF"
52
53
  ,
53
- className: `jsx-${styles.__hash}` + " " + "handle handle-checked"
54
+ className: "jsx-".concat(styles.__hash) + " " + "handle handle-checked"
54
55
  }), /*#__PURE__*/_react.default.createElement(_style.default, {
55
56
  id: styles.__hash
56
57
  }, styles));
package/build/cjs/switch/switch.js CHANGED
@@ -26,8 +26,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
26
26
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
27
27
 
28
28
  class Switch extends _react.Component {
29
- constructor(...args) {
30
- super(...args);
29
+ constructor() {
30
+ super(...arguments);
31
31
 
32
32
  _defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
33
33
 
@@ -118,7 +118,7 @@ class Switch extends _react.Component {
118
118
  })), label, /*#__PURE__*/_react.default.createElement(_style.default, {
119
119
  id: "3592976892",
120
120
  dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.theme.focus]
121
- }, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${_uiConstants.colors.grey900};font-size:16px;line-height:20px;}`, "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", `label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:${_uiConstants.theme.disabled};}`, "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`]));
121
+ }, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:".concat(_uiConstants.colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(_uiConstants.theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}")]));
122
122
  }
123
123
 
124
124
  }
package/build/cjs/switch/switch.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ImageLabelDense = exports.ErrorDense = exports.WarningDense = exports.ValidDense = exports.DisabledDense = exports.CheckedDense = exports.FocusedCheckedDense = exports.FocusedUncheckedDense = exports.DefaultDense = exports.ImageLabel = exports.Error = exports.Warning = exports.Valid = exports.Disabled = exports.Checked = exports.FocusedChecked = exports.FocusedUnchecked = exports.Default = exports.default = void 0;
6
+ exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.ImageLabelDense = exports.ImageLabel = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
@@ -16,15 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
16
16
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
 
18
18
  const subtitle = 'An input control that allows an on and an off state';
19
- const description = `
20
- **Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.**
21
-
22
- Use switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a checkbox instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing.
23
-
24
- \`\`\`js
25
- import { Switch } from '@dhis2/ui'
26
- \`\`\`
27
- `;
19
+ const description = "\n**Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.**\n\nUse switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a checkbox instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing.\n\n```js\nimport { Switch } from '@dhis2/ui'\n```\n";
28
20
 
29
21
  window.onChange = (payload, event) => {
30
22
  console.log('onClick payload', payload);
@@ -41,14 +33,20 @@ window.onBlur = (payload, event) => {
41
33
  console.log('onBlur event', event);
42
34
  };
43
35
 
44
- const onChange = (...args) => window.onChange(...args);
36
+ const onChange = function () {
37
+ return window.onChange(...arguments);
38
+ };
45
39
 
46
- const onFocus = (...args) => window.onFocus(...args);
40
+ const onFocus = function () {
41
+ return window.onFocus(...arguments);
42
+ };
47
43
 
48
- const onBlur = (...args) => window.onBlur(...args);
44
+ const onBlur = function () {
45
+ return window.onBlur(...arguments);
46
+ };
49
47
 
50
48
  var _default = {
51
- title: 'Forms/Switch/Switch',
49
+ title: 'Switch',
52
50
  component: _index.Switch,
53
51
  parameters: {
54
52
  componentSubtitle: subtitle,
package/build/cjs/switch-field/switch-field.js CHANGED
@@ -19,13 +19,16 @@ var _index = require("../index.js");
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
- const AddRequired = ({
23
- label,
24
- required,
25
- dataTest
26
- }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label, required && /*#__PURE__*/_react.default.createElement(_required.Required, {
27
- dataTest: `${dataTest}-required`
28
- }));
22
+ const AddRequired = _ref => {
23
+ let {
24
+ label,
25
+ required,
26
+ dataTest
27
+ } = _ref;
28
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label, required && /*#__PURE__*/_react.default.createElement(_required.Required, {
29
+ dataTest: "".concat(dataTest, "-required")
30
+ }));
31
+ };
29
32
 
30
33
  AddRequired.propTypes = {
31
34
  dataTest: _propTypes.default.string,
@@ -33,57 +36,60 @@ AddRequired.propTypes = {
33
36
  required: _propTypes.default.bool
34
37
  };
35
38
 
36
- const SwitchField = ({
37
- value,
38
- label,
39
- name,
40
- className,
41
- tabIndex,
42
- onChange,
43
- onFocus,
44
- onBlur,
45
- checked,
46
- disabled,
47
- valid,
48
- warning,
49
- error,
50
- dense,
51
- initialFocus,
52
- required,
53
- helpText,
54
- validationText,
55
- dataTest
56
- }) => /*#__PURE__*/_react.default.createElement(_field.Field, {
57
- className: className,
58
- dataTest: dataTest,
59
- helpText: helpText,
60
- validationText: validationText,
61
- error: error,
62
- warning: warning,
63
- valid: valid,
64
- required: required,
65
- name: name,
66
- disabled: disabled
67
- }, /*#__PURE__*/_react.default.createElement(_index.Switch, {
68
- value: value,
69
- label: /*#__PURE__*/_react.default.createElement(AddRequired, {
70
- label: label,
39
+ const SwitchField = _ref2 => {
40
+ let {
41
+ value,
42
+ label,
43
+ name,
44
+ className,
45
+ tabIndex,
46
+ onChange,
47
+ onFocus,
48
+ onBlur,
49
+ checked,
50
+ disabled,
51
+ valid,
52
+ warning,
53
+ error,
54
+ dense,
55
+ initialFocus,
56
+ required,
57
+ helpText,
58
+ validationText,
59
+ dataTest
60
+ } = _ref2;
61
+ return /*#__PURE__*/_react.default.createElement(_field.Field, {
62
+ className: className,
63
+ dataTest: dataTest,
64
+ helpText: helpText,
65
+ validationText: validationText,
66
+ error: error,
67
+ warning: warning,
68
+ valid: valid,
71
69
  required: required,
72
- dataTest: dataTest
73
- }),
74
- name: name,
75
- tabIndex: tabIndex,
76
- onChange: onChange,
77
- onFocus: onFocus,
78
- onBlur: onBlur,
79
- checked: checked,
80
- disabled: disabled,
81
- valid: valid,
82
- warning: warning,
83
- error: error,
84
- dense: dense,
85
- initialFocus: initialFocus
86
- }));
70
+ name: name,
71
+ disabled: disabled
72
+ }, /*#__PURE__*/_react.default.createElement(_index.Switch, {
73
+ value: value,
74
+ label: /*#__PURE__*/_react.default.createElement(AddRequired, {
75
+ label: label,
76
+ required: required,
77
+ dataTest: dataTest
78
+ }),
79
+ name: name,
80
+ tabIndex: tabIndex,
81
+ onChange: onChange,
82
+ onFocus: onFocus,
83
+ onBlur: onBlur,
84
+ checked: checked,
85
+ disabled: disabled,
86
+ valid: valid,
87
+ warning: warning,
88
+ error: error,
89
+ dense: dense,
90
+ initialFocus: initialFocus
91
+ }));
92
+ };
87
93
 
88
94
  exports.SwitchField = SwitchField;
89
95
  SwitchField.defaultProps = {
package/build/cjs/switch-field/switch-field.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ImageLabelDense = exports.ErrorDense = exports.WarningDense = exports.ValidDense = exports.DisabledDense = exports.RequiredDense = exports.CheckedDense = exports.FocusedCheckedDense = exports.FocusedUncheckedDense = exports.DefaultDense = exports.ImageLabel = exports.Error = exports.Warning = exports.Valid = exports.HelpText = exports.Disabled = exports.Required = exports.Checked = exports.FocusedChecked = exports.FocusedUnchecked = exports.Default = exports.default = void 0;
6
+ exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RequiredDense = exports.Required = exports.ImageLabelDense = exports.ImageLabel = exports.HelpText = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
7
7
 
8
8
  var _uiConstants = require("@dhis2/ui-constants");
9
9
 
@@ -15,24 +15,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
 
18
- const description = `
19
- A \`SwitchField\` is a Switch component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.
18
+ const description = "\nA `SwitchField` is a Switch component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.\n\nSee the basic Switch for usage and design system guidelines.\n\n```js\nimport { SwitchField } from '@dhis2/ui'\n```\n";
20
19
 
21
- See the basic Switch for usage and design system guidelines.
22
-
23
- \`\`\`js
24
- import { SwitchField } from '@dhis2/ui'
25
- \`\`\`
26
- `;
27
-
28
- const logger = ({
29
- name,
30
- value,
31
- checked
32
- }) => console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
20
+ const logger = _ref => {
21
+ let {
22
+ name,
23
+ value,
24
+ checked
25
+ } = _ref;
26
+ return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
27
+ };
33
28
 
34
29
  var _default = {
35
- title: 'Forms/Switch/Switch Field',
30
+ title: 'Switch Field',
36
31
  component: _index.SwitchField,
37
32
  parameters: {
38
33
  docs: {
package/build/es/switch/switch-icons.js CHANGED
@@ -2,41 +2,42 @@ import _JSXStyle from "styled-jsx/style";
2
2
  import { colors } from '@dhis2/ui-constants';
3
3
  import PropTypes from 'prop-types';
4
4
  import React from 'react';
5
- const styles = ["svg.jsx-2218109610{display:block;pointer-events:none;height:18px;width:35px;}", "svg.dense.jsx-2218109610{height:14px;width:27px;}", `svg.jsx-2218109610 .background.jsx-2218109610,svg.jsx-2218109610 .border.jsx-2218109610{fill:${colors.grey600};}`, `svg.jsx-2218109610 .checkmark.jsx-2218109610,svg.jsx-2218109610 .cross.jsx-2218109610,svg.jsx-2218109610 .handle.jsx-2218109610{fill:${colors.white};}`, "svg.checked.jsx-2218109610 .handle-unchecked.jsx-2218109610,svg.jsx-2218109610:not(.checked) .handle-checked.jsx-2218109610{fill:none;}", `svg.checked.jsx-2218109610 .background.jsx-2218109610{fill:${colors.teal400};}`, `svg.valid.jsx-2218109610 .background.jsx-2218109610{fill:${colors.blue600};}`, `svg.warning.jsx-2218109610 .background.jsx-2218109610{fill:${colors.yellow700};}`, `svg.error.jsx-2218109610 .background.jsx-2218109610{fill:${colors.red500};}`, `svg.checked.jsx-2218109610 .border.jsx-2218109610{fill:${colors.teal700};}`, `svg.disabled.jsx-2218109610 .background.jsx-2218109610{fill:${colors.grey300};}`, `svg.disabled.jsx-2218109610 .border.jsx-2218109610{fill:${colors.grey400};}`, `svg.valid.jsx-2218109610 .border.jsx-2218109610{fill:${colors.blue600};}`, `svg.valid.checked.jsx-2218109610 .border.jsx-2218109610,svg.valid.indeterminate.jsx-2218109610 .border.jsx-2218109610{fill:${colors.blue700};}`, `svg.warning.jsx-2218109610 .border.jsx-2218109610{fill:${colors.yellow700};}`, `svg.warning.checked.jsx-2218109610 .border.jsx-2218109610{fill:${colors.yellow800};}`, `svg.error.jsx-2218109610 .border.jsx-2218109610{fill:${colors.red500};}`, `svg.error.checked.jsx-2218109610 .border.jsx-2218109610{fill:${colors.red700};}`];
5
+ const styles = ["svg.jsx-2218109610{display:block;pointer-events:none;height:18px;width:35px;}", "svg.dense.jsx-2218109610{height:14px;width:27px;}", "svg.jsx-2218109610 .background.jsx-2218109610,svg.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.grey600, ";}"), "svg.jsx-2218109610 .checkmark.jsx-2218109610,svg.jsx-2218109610 .cross.jsx-2218109610,svg.jsx-2218109610 .handle.jsx-2218109610{fill:".concat(colors.white, ";}"), "svg.checked.jsx-2218109610 .handle-unchecked.jsx-2218109610,svg.jsx-2218109610:not(.checked) .handle-checked.jsx-2218109610{fill:none;}", "svg.checked.jsx-2218109610 .background.jsx-2218109610{fill:".concat(colors.teal400, ";}"), "svg.valid.jsx-2218109610 .background.jsx-2218109610{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-2218109610 .background.jsx-2218109610{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-2218109610 .background.jsx-2218109610{fill:".concat(colors.red500, ";}"), "svg.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.teal700, ";}"), "svg.disabled.jsx-2218109610 .background.jsx-2218109610{fill:".concat(colors.grey300, ";}"), "svg.disabled.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.grey400, ";}"), "svg.valid.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.jsx-2218109610 .border.jsx-2218109610,svg.valid.indeterminate.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.blue700, ";}"), "svg.warning.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.yellow800, ";}"), "svg.error.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.red500, ";}"), "svg.error.checked.jsx-2218109610 .border.jsx-2218109610{fill:".concat(colors.red700, ";}")];
6
6
  styles.__hash = "2218109610";
7
- export function SwitchRegular({
8
- className
9
- }) {
7
+ export function SwitchRegular(_ref) {
8
+ let {
9
+ className
10
+ } = _ref;
10
11
  return /*#__PURE__*/React.createElement("svg", {
11
12
  viewBox: "0 0 42 22",
12
13
  xmlns: "http://www.w3.org/2000/svg",
13
- className: `jsx-${styles.__hash}` + " " + (className || "")
14
+ className: "jsx-".concat(styles.__hash) + " " + (className || "")
14
15
  }, /*#__PURE__*/React.createElement("path", {
15
16
  d: "M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z",
16
17
  fill: "red",
17
- className: `jsx-${styles.__hash}` + " " + "background"
18
+ className: "jsx-".concat(styles.__hash) + " " + "background"
18
19
  }), /*#__PURE__*/React.createElement("path", {
19
20
  d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z" // fill="#00695C"
20
21
  // fillRule="nonzero"
21
22
  ,
22
- className: `jsx-${styles.__hash}` + " " + "border"
23
+ className: "jsx-".concat(styles.__hash) + " " + "border"
23
24
  }), /*#__PURE__*/React.createElement("path", {
24
25
  d: "M27.7071068,7.29289322 L30,9.585 L32.2928932,7.29289322 C32.6533772,6.93240926 33.2206082,6.90467972 33.6128994,7.20970461 L33.7071068,7.29289322 C34.0976311,7.68341751 34.0976311,8.31658249 33.7071068,8.70710678 L33.7071068,8.70710678 L31.415,11 L33.7071068,13.2928932 C34.0976311,13.6834175 34.0976311,14.3165825 33.7071068,14.7071068 C33.3165825,15.0976311 32.6834175,15.0976311 32.2928932,14.7071068 L30,12.415 L27.7071068,14.7071068 C27.3466228,15.0675907 26.7793918,15.0953203 26.3871006,14.7902954 L26.2928932,14.7071068 C25.9023689,14.3165825 25.9023689,13.6834175 26.2928932,13.2928932 L26.2928932,13.2928932 L28.585,11 L26.2928932,8.70710678 C25.9023689,8.31658249 25.9023689,7.68341751 26.2928932,7.29289322 C26.6834175,6.90236893 27.3165825,6.90236893 27.7071068,7.29289322 Z",
25
26
  fill: "#FFFFFF",
26
- className: `jsx-${styles.__hash}` + " " + "cross"
27
+ className: "jsx-".concat(styles.__hash) + " " + "cross"
27
28
  }), /*#__PURE__*/React.createElement("path", {
28
29
  d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z" // fill="#FFFFFF"
29
30
  // fillRule="nonzero"
30
31
  ,
31
- className: `jsx-${styles.__hash}` + " " + "checkmark"
32
+ className: "jsx-".concat(styles.__hash) + " " + "checkmark"
32
33
  }), /*#__PURE__*/React.createElement("path", {
33
34
  d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z" // fill="#FFFFFF"
34
35
  ,
35
- className: `jsx-${styles.__hash}` + " " + "handle handle-unchecked"
36
+ className: "jsx-".concat(styles.__hash) + " " + "handle handle-unchecked"
36
37
  }), /*#__PURE__*/React.createElement("path", {
37
38
  d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z" // fill="#FFFFFF"
38
39
  ,
39
- className: `jsx-${styles.__hash}` + " " + "handle handle-checked"
40
+ className: "jsx-".concat(styles.__hash) + " " + "handle handle-checked"
40
41
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
41
42
  id: styles.__hash
42
43
  }, styles));
package/build/es/switch/switch.js CHANGED
@@ -9,8 +9,8 @@ import React, { Component, createRef } from 'react';
9
9
  import { SwitchRegular } from './switch-icons.js';
10
10
 
11
11
  class Switch extends Component {
12
- constructor(...args) {
13
- super(...args);
12
+ constructor() {
13
+ super(...arguments);
14
14
 
15
15
  _defineProperty(this, "ref", /*#__PURE__*/createRef());
16
16
 
@@ -101,7 +101,7 @@ class Switch extends Component {
101
101
  })), label, /*#__PURE__*/React.createElement(_JSXStyle, {
102
102
  id: "3592976892",
103
103
  dynamic: [colors.grey900, theme.disabled, theme.focus]
104
- }, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${colors.grey900};font-size:16px;line-height:20px;}`, "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", `label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:${theme.disabled};}`, "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${theme.focus};outline-offset:-3px;}`]));
104
+ }, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:".concat(colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
105
105
  }
106
106
 
107
107
  }
package/build/es/switch/switch.stories.js CHANGED
@@ -4,15 +4,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
4
4
  import React from 'react';
5
5
  import { Switch } from './index.js';
6
6
  const subtitle = 'An input control that allows an on and an off state';
7
- const description = `
8
- **Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.**
9
-
10
- Use switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a checkbox instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing.
11
-
12
- \`\`\`js
13
- import { Switch } from '@dhis2/ui'
14
- \`\`\`
15
- `;
7
+ const description = "\n**Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.**\n\nUse switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a checkbox instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing.\n\n```js\nimport { Switch } from '@dhis2/ui'\n```\n";
16
8
 
17
9
  window.onChange = (payload, event) => {
18
10
  console.log('onClick payload', payload);
@@ -29,14 +21,20 @@ window.onBlur = (payload, event) => {
29
21
  console.log('onBlur event', event);
30
22
  };
31
23
 
32
- const onChange = (...args) => window.onChange(...args);
24
+ const onChange = function () {
25
+ return window.onChange(...arguments);
26
+ };
33
27
 
34
- const onFocus = (...args) => window.onFocus(...args);
28
+ const onFocus = function () {
29
+ return window.onFocus(...arguments);
30
+ };
35
31
 
36
- const onBlur = (...args) => window.onBlur(...args);
32
+ const onBlur = function () {
33
+ return window.onBlur(...arguments);
34
+ };
37
35
 
38
36
  export default {
39
- title: 'Forms/Switch/Switch',
37
+ title: 'Switch',
40
38
  component: Switch,
41
39
  parameters: {
42
40
  componentSubtitle: subtitle,
package/build/es/switch-field/switch-field.js CHANGED
@@ -5,13 +5,16 @@ import PropTypes from 'prop-types';
5
5
  import React from 'react';
6
6
  import { Switch } from '../index.js';
7
7
 
8
- const AddRequired = ({
9
- label,
10
- required,
11
- dataTest
12
- }) => /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement(Required, {
13
- dataTest: `${dataTest}-required`
14
- }));
8
+ const AddRequired = _ref => {
9
+ let {
10
+ label,
11
+ required,
12
+ dataTest
13
+ } = _ref;
14
+ return /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement(Required, {
15
+ dataTest: "".concat(dataTest, "-required")
16
+ }));
17
+ };
15
18
 
16
19
  AddRequired.propTypes = {
17
20
  dataTest: PropTypes.string,
@@ -19,57 +22,60 @@ AddRequired.propTypes = {
19
22
  required: PropTypes.bool
20
23
  };
21
24
 
22
- const SwitchField = ({
23
- value,
24
- label,
25
- name,
26
- className,
27
- tabIndex,
28
- onChange,
29
- onFocus,
30
- onBlur,
31
- checked,
32
- disabled,
33
- valid,
34
- warning,
35
- error,
36
- dense,
37
- initialFocus,
38
- required,
39
- helpText,
40
- validationText,
41
- dataTest
42
- }) => /*#__PURE__*/React.createElement(Field, {
43
- className: className,
44
- dataTest: dataTest,
45
- helpText: helpText,
46
- validationText: validationText,
47
- error: error,
48
- warning: warning,
49
- valid: valid,
50
- required: required,
51
- name: name,
52
- disabled: disabled
53
- }, /*#__PURE__*/React.createElement(Switch, {
54
- value: value,
55
- label: /*#__PURE__*/React.createElement(AddRequired, {
56
- label: label,
25
+ const SwitchField = _ref2 => {
26
+ let {
27
+ value,
28
+ label,
29
+ name,
30
+ className,
31
+ tabIndex,
32
+ onChange,
33
+ onFocus,
34
+ onBlur,
35
+ checked,
36
+ disabled,
37
+ valid,
38
+ warning,
39
+ error,
40
+ dense,
41
+ initialFocus,
42
+ required,
43
+ helpText,
44
+ validationText,
45
+ dataTest
46
+ } = _ref2;
47
+ return /*#__PURE__*/React.createElement(Field, {
48
+ className: className,
49
+ dataTest: dataTest,
50
+ helpText: helpText,
51
+ validationText: validationText,
52
+ error: error,
53
+ warning: warning,
54
+ valid: valid,
57
55
  required: required,
58
- dataTest: dataTest
59
- }),
60
- name: name,
61
- tabIndex: tabIndex,
62
- onChange: onChange,
63
- onFocus: onFocus,
64
- onBlur: onBlur,
65
- checked: checked,
66
- disabled: disabled,
67
- valid: valid,
68
- warning: warning,
69
- error: error,
70
- dense: dense,
71
- initialFocus: initialFocus
72
- }));
56
+ name: name,
57
+ disabled: disabled
58
+ }, /*#__PURE__*/React.createElement(Switch, {
59
+ value: value,
60
+ label: /*#__PURE__*/React.createElement(AddRequired, {
61
+ label: label,
62
+ required: required,
63
+ dataTest: dataTest
64
+ }),
65
+ name: name,
66
+ tabIndex: tabIndex,
67
+ onChange: onChange,
68
+ onFocus: onFocus,
69
+ onBlur: onBlur,
70
+ checked: checked,
71
+ disabled: disabled,
72
+ valid: valid,
73
+ warning: warning,
74
+ error: error,
75
+ dense: dense,
76
+ initialFocus: initialFocus
77
+ }));
78
+ };
73
79
 
74
80
  SwitchField.defaultProps = {
75
81
  dataTest: 'dhis2-uiwidgets-switchfield'
package/build/es/switch-field/switch-field.stories.js CHANGED
@@ -3,24 +3,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import { sharedPropTypes } from '@dhis2/ui-constants';
4
4
  import React from 'react';
5
5
  import { SwitchField } from './index.js';
6
- const description = `
7
- A \`SwitchField\` is a Switch component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.
6
+ const description = "\nA `SwitchField` is a Switch component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.\n\nSee the basic Switch for usage and design system guidelines.\n\n```js\nimport { SwitchField } from '@dhis2/ui'\n```\n";
8
7
 
9
- See the basic Switch for usage and design system guidelines.
10
-
11
- \`\`\`js
12
- import { SwitchField } from '@dhis2/ui'
13
- \`\`\`
14
- `;
15
-
16
- const logger = ({
17
- name,
18
- value,
19
- checked
20
- }) => console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
8
+ const logger = _ref => {
9
+ let {
10
+ name,
11
+ value,
12
+ checked
13
+ } = _ref;
14
+ return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
15
+ };
21
16
 
22
17
  export default {
23
- title: 'Forms/Switch/Switch Field',
18
+ title: 'Switch Field',
24
19
  component: SwitchField,
25
20
  parameters: {
26
21
  docs: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/switch",
3
- "version": "8.2.0",
3
+ "version": "8.2.1",
4
4
  "description": "UI Switch",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,9 +32,9 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2-ui/field": "8.2.0",
36
- "@dhis2-ui/required": "8.2.0",
37
- "@dhis2/ui-constants": "8.2.0",
35
+ "@dhis2-ui/field": "8.2.1",
36
+ "@dhis2-ui/required": "8.2.1",
37
+ "@dhis2/ui-constants": "8.2.1",
38
38
  "classnames": "^2.3.1",
39
39
  "prop-types": "^15.7.2"
40
40
  },