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

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

@@ -1,38 +1,38 @@
-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 _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); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React, { useEffect } from 'react';
 import { Switch } from './index.js';
 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);
 };
-
 export default {
   title: 'Switch',
   component: Switch,
@@ -54,29 +54,29 @@ export default {
     onBlur
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Switch, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, args), /*#__PURE__*/React.createElement(Switch, _extends({}, args, {
   checked: true
 })));
-
 export const Default = Template.bind({});
 export const FocusedUnchecked = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, _extends({}, args, {
   initialFocus: true,
   className: "initially-focused"
 })), /*#__PURE__*/React.createElement(Switch, _extends({}, args, {
   className: "initially-unfocused"
-}))); // Stories with initial focus are distracting on docs page
-
+})));
+// Stories with initial focus are distracting on docs page
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
@@ -129,7 +129,8 @@ DefaultDense.args = {
 };
 DefaultDense.storyName = 'Default - Dense';
 export const FocusedUncheckedDense = FocusedUnchecked.bind({});
-FocusedUncheckedDense.args = { ...DefaultDense.args
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
 FocusedUncheckedDense.parameters = {
@@ -138,7 +139,8 @@ FocusedUncheckedDense.parameters = {
   }
 };
 export const FocusedCheckedDense = FocusedUnchecked.bind({});
-FocusedCheckedDense.args = { ...DefaultDense.args,
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   checked: true
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
@@ -148,32 +150,38 @@ FocusedCheckedDense.parameters = {
   }
 };
 export const CheckedDense = Template.bind({});
-CheckedDense.args = { ...Checked.args,
+CheckedDense.args = {
+  ...Checked.args,
   ...DefaultDense.args
 };
 CheckedDense.storyName = 'Checked - Dense';
 export const DisabledDense = CheckedUncheckedTemplate.bind({});
-DisabledDense.args = { ...Disabled.args,
+DisabledDense.args = {
+  ...Disabled.args,
   ...DefaultDense.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
 export const ValidDense = CheckedUncheckedTemplate.bind({});
-ValidDense.args = { ...Valid.args,
+ValidDense.args = {
+  ...Valid.args,
   ...DefaultDense.args
 };
 ValidDense.storyName = 'Valid - Dense';
 export const WarningDense = CheckedUncheckedTemplate.bind({});
-WarningDense.args = { ...Warning.args,
+WarningDense.args = {
+  ...Warning.args,
   ...DefaultDense.args
 };
 WarningDense.storyName = 'Warning - Dense';
 export const ErrorDense = CheckedUncheckedTemplate.bind({});
-ErrorDense.args = { ...Error.args,
+ErrorDense.args = {
+  ...Error.args,
   ...DefaultDense.args
 };
 ErrorDense.storyName = 'Error - Dense';
 export const ImageLabelDense = Template.bind({});
-ImageLabelDense.args = { ...ImageLabel.args,
+ImageLabelDense.args = {
+  ...ImageLabel.args,
   ...DefaultDense.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SwitchField } from './index.js';
+export default {
+  title: 'SwitchField'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(SwitchField, {
+  name: "Ex",
+  label: "SwitchField",
+  required: true,
+  value: "checked"
+});

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

@@ -1,10 +1,9 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Field } from '@dhis2-ui/field';
 import { Required } from '@dhis2-ui/required';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Switch } from '../index.js';
-
+import { Switch } from '../switch/index.js';
 const AddRequired = _ref => {
   let {
     label,
@@ -12,16 +11,14 @@ const AddRequired = _ref => {
     dataTest
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement(Required, {
-    dataTest: "".concat(dataTest, "-required")
+    dataTest: `${dataTest}-required`
   }));
 };
-
 AddRequired.propTypes = {
   dataTest: PropTypes.string,
   label: PropTypes.node,
   required: PropTypes.bool
 };
-
 const SwitchField = _ref2 => {
   let {
     value,
@@ -78,7 +75,6 @@ const SwitchField = _ref2 => {
     initialFocus: initialFocus
   }));
 };
-
 SwitchField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-switchfield'
 };
@@ -86,51 +82,36 @@ SwitchField.propTypes = {
   checked: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Smaller dimensions for information-dense layouts */
   dense: PropTypes.bool,
-
   /** Disables the switch */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
-
   /** Useful instructions for the user */
   helpText: PropTypes.string,
   initialFocus: PropTypes.bool,
-
   /** Labels the switch */
   label: PropTypes.node,
-
   /** Name associate with the switch. Passed in object as argument to event handlers */
   name: PropTypes.string,
-
   /** Adds an asterisk to indicate this field is required */
   required: PropTypes.bool,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: PropTypes.string,
-
   /** Value associated with the switch. Passed in object as argument to event handlers */
   value: PropTypes.string,
-
   /** Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onBlur: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onChange: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onFocus: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string, checked: bool }, event) */
   onKeyDown: PropTypes.func
 };

package/build/es/switch-field/{switch-field.stories.js → switch-field.prod.stories.js}

@@ -1,19 +1,24 @@
-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 _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); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { SwitchField } from './index.js';
-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";
+const description = `
+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.
+
+See the basic Switch for usage and design system guidelines.
 
+\`\`\`js
+import { SwitchField } from '@dhis2/ui'
+\`\`\`
+`;
 const logger = _ref => {
   let {
     name,
     value,
     checked
   } = _ref;
-  return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
+  return console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
 };
-
 export default {
   title: 'Switch Field',
   component: SwitchField,
@@ -32,34 +37,35 @@ export default {
     onChange: logger
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(SwitchField, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SwitchField, args), /*#__PURE__*/React.createElement(SwitchField, _extends({}, args, {
   checked: true
 })));
-
 export const Default = Template.bind({});
 export const FocusedUnchecked = Template.bind({});
 FocusedUnchecked.args = {
   initialFocus: true
-}; // Disable stories on docs page that grab focus
-
+};
+// Disable stories on docs page that grab focus
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
   }
 };
 export const FocusedChecked = Template.bind({});
-FocusedChecked.args = { ...FocusedUnchecked.args,
+FocusedChecked.args = {
+  ...FocusedUnchecked.args,
   checked: true
 };
 FocusedChecked.parameters = {
@@ -117,7 +123,8 @@ DefaultDense.args = {
   dense: true
 };
 export const FocusedUncheckedDense = Template.bind({});
-FocusedUncheckedDense.args = { ...DefaultDense.args,
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedUnchecked.args
 };
 FocusedUncheckedDense.parameters = {
@@ -127,7 +134,8 @@ FocusedUncheckedDense.parameters = {
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
 export const FocusedCheckedDense = Template.bind({});
-FocusedCheckedDense.args = { ...DefaultDense.args,
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedChecked.args
 };
 FocusedCheckedDense.parameters = {
@@ -137,37 +145,44 @@ FocusedCheckedDense.parameters = {
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
 export const CheckedDense = Template.bind({});
-CheckedDense.args = { ...DefaultDense.args,
+CheckedDense.args = {
+  ...DefaultDense.args,
   ...Checked.args
 };
 CheckedDense.storyName = 'Checked - Dense';
 export const RequiredDense = Template.bind({});
-RequiredDense.args = { ...DefaultDense.args,
+RequiredDense.args = {
+  ...DefaultDense.args,
   ...Required.args
 };
 RequiredDense.storyName = 'Required - Dense';
 export const DisabledDense = CheckedUncheckedTemplate.bind({});
-DisabledDense.args = { ...DefaultDense.args,
+DisabledDense.args = {
+  ...DefaultDense.args,
   ...Disabled.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
 export const ValidDense = CheckedUncheckedTemplate.bind({});
-ValidDense.args = { ...DefaultDense.args,
+ValidDense.args = {
+  ...DefaultDense.args,
   ...Valid.args
 };
 ValidDense.storyName = 'Valid - Dense';
 export const WarningDense = CheckedUncheckedTemplate.bind({});
-WarningDense.args = { ...DefaultDense.args,
+WarningDense.args = {
+  ...DefaultDense.args,
   ...Warning.args
 };
 WarningDense.storyName = 'Warning - Dense';
 export const ErrorDense = CheckedUncheckedTemplate.bind({});
-ErrorDense.args = { ...DefaultDense.args,
+ErrorDense.args = {
+  ...DefaultDense.args,
   ...Error.args
 };
 ErrorDense.storyName = 'Error - Dense';
 export const ImageLabelDense = Template.bind({});
-ImageLabelDense.args = { ...DefaultDense.args,
+ImageLabelDense.args = {
+  ...DefaultDense.args,
   ...ImageLabel.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/switch",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI Switch",
     "repository": {
         "type": "git",
@@ -22,20 +22,20 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "9.11.0",
-        "@dhis2-ui/required": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2-ui/field": "9.11.1-beta.1",
+        "@dhis2-ui/required": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

@@ -1,44 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onChange = window.Cypress && window.Cypress.cy.stub();
-window.onBlur = window.Cypress && window.Cypress.cy.stub();
-window.onFocus = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Switch', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  name: "Ex",
-  label: "Switch",
-  value: "default",
-  onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  initialFocus: true,
-  name: "Ex",
-  label: "Switch",
-  value: "default",
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  name: "Ex",
-  label: "Switch",
-  value: "default",
-  onFocus: window.onFocus
-})).add('With disabled', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  name: "Ex",
-  label: "Switch",
-  value: "default",
-  disabled: true
-})).add('With label', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  name: "Ex",
-  label: "The label",
-  value: "default"
-})).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Switch, {
-  name: "Ex",
-  label: "The label",
-  value: "default",
-  initialFocus: true
-}));

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

@@ -1,16 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('SwitchField', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_index.SwitchField, {
-  name: "Ex",
-  label: "SwitchField",
-  required: true,
-  value: "checked"
-}));

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

@@ -1,9 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { SwitchField } from './index.js';
-storiesOf('SwitchField', module).add('With label and required', () => /*#__PURE__*/React.createElement(SwitchField, {
-  name: "Ex",
-  label: "SwitchField",
-  required: true,
-  value: "checked"
-}));