@dhis2-ui/switch 9.11.0 → 9.11.1-beta.1

package/build/cjs/switch/{switch.stories.js → switch.prod.stories.js}

@@ -4,50 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RTL = 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;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = require("./index.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const subtitle = 'An input control that allows an on and an off state';
-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";
+const description = `
+**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.**
+
+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.
 
+\`\`\`js
+import { Switch } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 window.onFocus = (payload, event) => {
   console.log('onFocus payload', payload);
   console.log('onFocus event', event);
 };
-
 window.onBlur = (payload, event) => {
   console.log('onBlur payload', payload);
   console.log('onBlur event', event);
 };
-
 const onChange = function () {
   return window.onChange(...arguments);
 };
-
 const onFocus = function () {
   return window.onFocus(...arguments);
 };
-
 const onBlur = function () {
   return window.onBlur(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Switch',
   component: _index.Switch,
   parameters: {
@@ -68,41 +62,36 @@ var _default = {
     onBlur
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.Switch, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Switch, args), /*#__PURE__*/_react.default.createElement(_index.Switch, _extends({}, args, {
   checked: true
 })));
-
-const Default = Template.bind({});
-exports.Default = Default;
-
+const Default = exports.Default = Template.bind({});
 const FocusedUnchecked = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Switch, _extends({}, args, {
   initialFocus: true,
   className: "initially-focused"
 })), /*#__PURE__*/_react.default.createElement(_index.Switch, _extends({}, args, {
   className: "initially-unfocused"
-}))); // Stories with initial focus are distracting on docs page
-
-
+})));
+// Stories with initial focus are distracting on docs page
 exports.FocusedUnchecked = FocusedUnchecked;
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
   }
 };
-const FocusedChecked = FocusedUnchecked.bind({});
-exports.FocusedChecked = FocusedChecked;
+const FocusedChecked = exports.FocusedChecked = FocusedUnchecked.bind({});
 FocusedChecked.args = {
   checked: true
 };
@@ -111,53 +100,46 @@ FocusedChecked.parameters = {
     disable: true
   }
 };
-const Checked = Template.bind({});
-exports.Checked = Checked;
+const Checked = exports.Checked = Template.bind({});
 Checked.args = {
   checked: true,
   value: 'checked'
 };
-const Disabled = CheckedUncheckedTemplate.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = CheckedUncheckedTemplate.bind({});
 Disabled.args = {
   disabled: true,
   value: 'disabled'
 };
-const Valid = CheckedUncheckedTemplate.bind({});
-exports.Valid = Valid;
+const Valid = exports.Valid = CheckedUncheckedTemplate.bind({});
 Valid.args = {
   valid: true,
   value: 'valid'
 };
-const Warning = CheckedUncheckedTemplate.bind({});
-exports.Warning = Warning;
+const Warning = exports.Warning = CheckedUncheckedTemplate.bind({});
 Warning.args = {
   warning: true,
   value: 'warning'
 };
-const Error = CheckedUncheckedTemplate.bind({});
-exports.Error = Error;
+const Error = exports.Error = CheckedUncheckedTemplate.bind({});
 Error.args = {
   error: true,
   value: 'error'
 };
-const ImageLabel = Template.bind({});
-exports.ImageLabel = ImageLabel;
+const ImageLabel = exports.ImageLabel = Template.bind({});
 ImageLabel.args = {
   label: /*#__PURE__*/_react.default.createElement("img", {
     src: "https://picsum.photos/id/82/200/100"
   }),
   value: 'with-help'
 };
-const DefaultDense = Template.bind({});
-exports.DefaultDense = DefaultDense;
+const DefaultDense = exports.DefaultDense = Template.bind({});
 DefaultDense.args = {
   dense: true
 };
 DefaultDense.storyName = 'Default - Dense';
-const FocusedUncheckedDense = FocusedUnchecked.bind({});
-exports.FocusedUncheckedDense = FocusedUncheckedDense;
-FocusedUncheckedDense.args = { ...DefaultDense.args
+const FocusedUncheckedDense = exports.FocusedUncheckedDense = FocusedUnchecked.bind({});
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
 FocusedUncheckedDense.parameters = {
@@ -165,9 +147,9 @@ FocusedUncheckedDense.parameters = {
     disable: true
   }
 };
-const FocusedCheckedDense = FocusedUnchecked.bind({});
-exports.FocusedCheckedDense = FocusedCheckedDense;
-FocusedCheckedDense.args = { ...DefaultDense.args,
+const FocusedCheckedDense = exports.FocusedCheckedDense = FocusedUnchecked.bind({});
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   checked: true
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
@@ -176,43 +158,42 @@ FocusedCheckedDense.parameters = {
     disable: true
   }
 };
-const CheckedDense = Template.bind({});
-exports.CheckedDense = CheckedDense;
-CheckedDense.args = { ...Checked.args,
+const CheckedDense = exports.CheckedDense = Template.bind({});
+CheckedDense.args = {
+  ...Checked.args,
   ...DefaultDense.args
 };
 CheckedDense.storyName = 'Checked - Dense';
-const DisabledDense = CheckedUncheckedTemplate.bind({});
-exports.DisabledDense = DisabledDense;
-DisabledDense.args = { ...Disabled.args,
+const DisabledDense = exports.DisabledDense = CheckedUncheckedTemplate.bind({});
+DisabledDense.args = {
+  ...Disabled.args,
   ...DefaultDense.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
-const ValidDense = CheckedUncheckedTemplate.bind({});
-exports.ValidDense = ValidDense;
-ValidDense.args = { ...Valid.args,
+const ValidDense = exports.ValidDense = CheckedUncheckedTemplate.bind({});
+ValidDense.args = {
+  ...Valid.args,
   ...DefaultDense.args
 };
 ValidDense.storyName = 'Valid - Dense';
-const WarningDense = CheckedUncheckedTemplate.bind({});
-exports.WarningDense = WarningDense;
-WarningDense.args = { ...Warning.args,
+const WarningDense = exports.WarningDense = CheckedUncheckedTemplate.bind({});
+WarningDense.args = {
+  ...Warning.args,
   ...DefaultDense.args
 };
 WarningDense.storyName = 'Warning - Dense';
-const ErrorDense = CheckedUncheckedTemplate.bind({});
-exports.ErrorDense = ErrorDense;
-ErrorDense.args = { ...Error.args,
+const ErrorDense = exports.ErrorDense = CheckedUncheckedTemplate.bind({});
+ErrorDense.args = {
+  ...Error.args,
   ...DefaultDense.args
 };
 ErrorDense.storyName = 'Error - Dense';
-const ImageLabelDense = Template.bind({});
-exports.ImageLabelDense = ImageLabelDense;
-ImageLabelDense.args = { ...ImageLabel.args,
+const ImageLabelDense = exports.ImageLabelDense = Template.bind({});
+ImageLabelDense.args = {
+  ...ImageLabel.args,
   ...DefaultDense.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';
-
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.documentElement.setAttribute('dir', 'rtl');
@@ -231,5 +212,4 @@ const RTL = args => {
     value: "error"
   }));
 };
-
 exports.RTL = RTL;

package/build/cjs/switch-field/__tests__/switch-field.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _switchField = require("../switch-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<Switch />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -18,13 +14,11 @@ describe('<Switch />', () => {
       checked: false,
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('switch'), {
       key: 'Enter',
       code: 'Enter',
       charCode: 13
     });
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       value: 'bar',

package/build/cjs/switch-field/features/can_be_required/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a SwitchField with label and a required flag is rendered', () => {
   cy.visitStory('SwitchField', 'With label and required');
 });

package/build/cjs/switch-field/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SwitchField", {
     return _switchField.SwitchField;
   }
 });
-
 var _switchField = require("./switch-field.js");

package/build/cjs/switch-field/switch-field.e2e.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabelAndRequired = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'SwitchField'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_index.SwitchField, {
+  name: "Ex",
+  label: "SwitchField",
+  required: true,
+  value: "checked"
+});
+exports.WithLabelAndRequired = WithLabelAndRequired;

package/build/cjs/switch-field/switch-field.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _field = require("@dhis2-ui/field");
-
 var _required = require("@dhis2-ui/required");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = require("../switch/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AddRequired = _ref => {
   let {
     label,
@@ -26,16 +18,14 @@ const AddRequired = _ref => {
     dataTest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label, required && /*#__PURE__*/_react.default.createElement(_required.Required, {
-    dataTest: "".concat(dataTest, "-required")
+    dataTest: `${dataTest}-required`
   }));
 };
-
 AddRequired.propTypes = {
   dataTest: _propTypes.default.string,
   label: _propTypes.default.node,
   required: _propTypes.default.bool
 };
-
 const SwitchField = _ref2 => {
   let {
     value,
@@ -92,7 +82,6 @@ const SwitchField = _ref2 => {
     initialFocus: initialFocus
   }));
 };
-
 exports.SwitchField = SwitchField;
 SwitchField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-switchfield'
@@ -101,51 +90,36 @@ SwitchField.propTypes = {
   checked: _propTypes.default.bool,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Smaller dimensions for information-dense layouts */
   dense: _propTypes.default.bool,
-
   /** Disables the switch */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Useful instructions for the user */
   helpText: _propTypes.default.string,
   initialFocus: _propTypes.default.bool,
-
   /** Labels the switch */
   label: _propTypes.default.node,
-
   /** Name associate with the switch. Passed in object as argument to event handlers */
   name: _propTypes.default.string,
-
   /** Adds an asterisk to indicate this field is required */
   required: _propTypes.default.bool,
   tabIndex: _propTypes.default.string,
-
   /** Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: _propTypes.default.string,
-
   /** Value associated with the switch. Passed in object as argument to event handlers */
   value: _propTypes.default.string,
-
   /** Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onBlur: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onChange: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onFocus: _propTypes.default.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onKeyDown: _propTypes.default.func
 };