@dhis2-ui/checkbox 9.11.0 → 9.11.1-beta.2

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

@@ -4,47 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RTL = exports.IndeterminateDense = exports.Indeterminate = 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 = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 = 'A checkbox is a control that allows a user to toggle an option.';
+const description = `
+Checkboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
+Do not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.
 
-const subtitle = 'A checkbox is a control that allows a user to toggle an option.';
-const description = "\nCheckboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.\n\nDo not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.\n\nIf there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.\n\n```js\nimport { Checkbox } from '@dhis2/ui'\n```\n";
+If there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.
 
+\`\`\`js
+import { Checkbox } 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);
 };
-
 const defaultArgs = {
   name: 'Ex',
   label: 'Checkbox',
@@ -63,7 +60,7 @@ const uniqueOnStateArgType = {
     type: 'boolean'
   }
 };
-var _default = {
+var _default = exports.default = {
   title: 'Checkbox',
   component: _index.Checkbox,
   parameters: {
@@ -75,35 +72,35 @@ var _default = {
     }
   },
   // Sets default args on all stories unless overridden
-  args: { ...defaultArgs
+  args: {
+    ...defaultArgs
   },
   argTypes: {
-    checked: { ...uniqueOnStateArgType
+    checked: {
+      ...uniqueOnStateArgType
     },
-    indeterminate: { ...uniqueOnStateArgType
+    indeterminate: {
+      ...uniqueOnStateArgType
     },
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.Checkbox, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Checkbox, args), /*#__PURE__*/_react.default.createElement(_index.Checkbox, _extends({
   checked: true
 }, args)));
-
-const Default = Template.bind({});
-exports.Default = Default;
+const Default = exports.Default = Template.bind({});
 Default.args = {
   value: 'default'
 };
-
 const FocusedUnchecked = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Checkbox, _extends({
   initialFocus: true,
   value: "default",
@@ -112,20 +109,17 @@ const FocusedUnchecked = args => /*#__PURE__*/_react.default.createElement(_reac
   value: "default2",
   className: "initially-unfocused"
 }, args)));
-
 exports.FocusedUnchecked = FocusedUnchecked;
 FocusedUnchecked.storyName = 'Focused unchecked';
 /**
  * 'initialFocus' causes docs page to scroll away every time a control is
  * changed, so it's disabled
  */
-
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
   }
 };
-
 const FocusedChecked = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Checkbox, _extends({
   initialFocus: true,
   checked: true,
@@ -134,7 +128,6 @@ const FocusedChecked = args => /*#__PURE__*/_react.default.createElement(_react.
   checked: true,
   value: "default2"
 }, args)));
-
 exports.FocusedChecked = FocusedChecked;
 FocusedChecked.storyName = 'Focused checked';
 FocusedChecked.parameters = {
@@ -142,59 +135,50 @@ FocusedChecked.parameters = {
     disable: true
   }
 };
-const Checked = Template.bind({});
-exports.Checked = Checked;
+const Checked = exports.Checked = Template.bind({});
 Checked.args = {
   checked: true,
   value: 'checked'
 };
-const Indeterminate = Template.bind({});
-exports.Indeterminate = Indeterminate;
+const Indeterminate = exports.Indeterminate = Template.bind({});
 Indeterminate.args = {
   indeterminate: 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,
   value: 'default'
 };
 DefaultDense.storyName = 'Default - Dense';
-const FocusedUncheckedDense = Template.bind({});
-exports.FocusedUncheckedDense = FocusedUncheckedDense;
+const FocusedUncheckedDense = exports.FocusedUncheckedDense = Template.bind({});
 FocusedUncheckedDense.args = {
   dense: true,
   initialFocus: true,
@@ -206,9 +190,9 @@ FocusedUncheckedDense.parameters = {
     disable: true
   }
 };
-const FocusedCheckedDense = Template.bind({});
-exports.FocusedCheckedDense = FocusedCheckedDense;
-FocusedCheckedDense.args = { ...FocusedUncheckedDense.args,
+const FocusedCheckedDense = exports.FocusedCheckedDense = Template.bind({});
+FocusedCheckedDense.args = {
+  ...FocusedUncheckedDense.args,
   checked: true
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
@@ -217,55 +201,51 @@ FocusedCheckedDense.parameters = {
     disable: true
   }
 };
-const CheckedDense = Template.bind({});
-exports.CheckedDense = CheckedDense;
+const CheckedDense = exports.CheckedDense = Template.bind({});
 CheckedDense.args = {
   dense: true,
   checked: true,
   value: 'checked'
 };
 CheckedDense.storyName = 'Checked - Dense';
-const IndeterminateDense = Template.bind({});
-exports.IndeterminateDense = IndeterminateDense;
+const IndeterminateDense = exports.IndeterminateDense = Template.bind({});
 IndeterminateDense.args = {
   dense: true,
   indeterminate: true,
   value: 'checked'
 };
 IndeterminateDense.storyName = 'Indeterminate - Dense';
-const DisabledDense = CheckedUncheckedTemplate.bind({});
-exports.DisabledDense = DisabledDense;
-DisabledDense.args = { ...Disabled.args,
+const DisabledDense = exports.DisabledDense = CheckedUncheckedTemplate.bind({});
+DisabledDense.args = {
+  ...Disabled.args,
   dense: true
 };
 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,
   dense: true
 };
 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,
   dense: true
 };
 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,
   dense: true
 };
 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,
   dense: true
 };
 ImageLabelDense.storyName = 'Image label - Dense';
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_index.Checkbox, args));
-
 exports.RTL = RTL;

package/build/cjs/checkbox/features/accepts_initial_focus/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Checkbox with initialFocus is rendered', () => {
-  cy.visitStory('Checkbox', 'With initialFocus');
+  cy.visitStory('Checkbox', 'With initial focus');
 });
 (0, _cypressCucumberPreprocessor.Then)('the Checkbox is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-checkbox"]').should('exist');

package/build/cjs/checkbox/features/accepts_label/index.js

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

package/build/cjs/checkbox/features/can_be_blurred/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Checkbox with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With initialFocus and onBlur');
+  cy.visitStory('Checkbox', 'With initial focus and on blur');
 });
 (0, _cypressCucumberPreprocessor.When)('the Checkbox is blurred', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').blur();

package/build/cjs/checkbox/features/can_be_changed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Checkbox with onChange handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With onChange');
+  cy.visitStory('Checkbox', 'With on change');
 });
 (0, _cypressCucumberPreprocessor.When)('the Checkbox is clicked', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"]').click();

package/build/cjs/checkbox/features/can_be_disabled/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a disabled Checkbox with onClick handler is rendered', () => {
-  cy.visitStory('Checkbox', 'Disabled with onClick');
+  cy.visitStory('Checkbox', 'Disabled with on click');
 });
 (0, _cypressCucumberPreprocessor.When)('the Checkbox is clicked', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').click({

package/build/cjs/checkbox/features/can_be_focused/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Checkbox with onFocus handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With onFocus');
+  cy.visitStory('Checkbox', 'With on focus');
 });
 (0, _cypressCucumberPreprocessor.When)('the Checkbox is focused', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').focus();

package/build/cjs/checkbox/features/has_indeterminate_prop/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the checkbox is marked as indeterminate', () => {
   cy.visitStory('Checkbox', 'Indeterminate prop');
 });

package/build/cjs/checkbox/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Checkbox", {
     return _checkbox.Checkbox;
   }
 });
-
 var _checkbox = require("./checkbox.js");

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithValidationText = exports.WithLabelAndRequired = exports.WithLabel = exports.WithHelpText = 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: 'CheckboxField'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_index.CheckboxField, {
+  name: "Ex",
+  label: "CheckboxField",
+  required: true,
+  value: "checked"
+});
+exports.WithLabelAndRequired = WithLabelAndRequired;
+const WithHelpText = () => /*#__PURE__*/_react.default.createElement(_index.CheckboxField, {
+  name: "Ex",
+  label: "CheckboxField",
+  value: "checked",
+  helpText: "Help text"
+});
+exports.WithHelpText = WithHelpText;
+const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index.CheckboxField, {
+  name: "Ex",
+  label: "The label",
+  value: "checked"
+});
+exports.WithLabel = WithLabel;
+const WithValidationText = () => /*#__PURE__*/_react.default.createElement(_index.CheckboxField, {
+  name: "Ex",
+  label: "The label",
+  value: "checked",
+  validationText: "Validation text"
+});
+exports.WithValidationText = WithValidationText;

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

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxField = 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("../checkbox/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 CheckboxField = _ref2 => {
   let {
     value,
@@ -90,7 +80,6 @@ const CheckboxField = _ref2 => {
     initialFocus: initialFocus
   }));
 };
-
 exports.CheckboxField = CheckboxField;
 CheckboxField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-checkboxfield'
@@ -99,51 +88,36 @@ CheckboxField.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 checkbox */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styling to checkbox 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 checkbox */
   label: _propTypes.default.node,
-
   /** Name associate with the checkbox. 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 checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: _propTypes.default.string,
-
   /** Value associated with the checkbox. Passed in object as argument to event handlers */
   value: _propTypes.default.string,
-
   /** Applies 'warning' styling to checkbox 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
 };