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

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

@@ -4,29 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RequiredDense = exports.Required = exports.RTL = 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;
-
 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 description = `
+A \`CheckboxField\` is a Checkbox 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.
 
-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); }
-
-const description = "\nA `CheckboxField` is a Checkbox 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 Checkbox for usage and design system guidelines.\n\n```js\nimport { CheckboxField } from '@dhis2/ui'\n```\n";
+See the basic Checkbox for usage and design system guidelines.
 
+\`\`\`js
+import { CheckboxField } 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}`);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Checkbox Field',
   component: _index.CheckboxField,
   parameters: {
@@ -44,38 +44,35 @@ var _default = {
     onChange: logger
   },
   argTypes: {
-    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.CheckboxField, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CheckboxField, args), /*#__PURE__*/_react.default.createElement(_index.CheckboxField, _extends({}, args, {
   checked: true
 })));
-
-const Default = Template.bind({});
-exports.Default = Default;
-const FocusedUnchecked = Template.bind({});
-exports.FocusedUnchecked = FocusedUnchecked;
+const Default = exports.Default = Template.bind({});
+const FocusedUnchecked = exports.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
   }
 };
-const FocusedChecked = Template.bind({});
-exports.FocusedChecked = FocusedChecked;
-FocusedChecked.args = { ...FocusedUnchecked.args,
+const FocusedChecked = exports.FocusedChecked = Template.bind({});
+FocusedChecked.args = {
+  ...FocusedUnchecked.args,
   checked: true
 };
 FocusedChecked.parameters = {
@@ -83,69 +80,59 @@ FocusedChecked.parameters = {
     disable: true
   }
 };
-const Checked = Template.bind({});
-exports.Checked = Checked;
+const Checked = exports.Checked = Template.bind({});
 Checked.args = {
   checked: true,
   value: 'checkedValue'
 };
-const Required = Template.bind({});
-exports.Required = Required;
+const Required = exports.Required = Template.bind({});
 Required.args = {
   required: true
 };
-const Disabled = CheckedUncheckedTemplate.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = CheckedUncheckedTemplate.bind({});
 Disabled.args = {
   disabled: true
 };
-
 const HelpText = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CheckboxField, args), /*#__PURE__*/_react.default.createElement(_index.CheckboxField, _extends({}, args, {
   error: true,
   validationText: "Validation text (error state)"
 })));
-
 exports.HelpText = HelpText;
 HelpText.args = {
   helpText: 'Help text'
 };
-const Valid = CheckedUncheckedTemplate.bind({});
-exports.Valid = Valid;
+const Valid = exports.Valid = CheckedUncheckedTemplate.bind({});
 Valid.args = {
   valid: true,
   validationText: 'I am validation text',
   value: 'validValue'
 };
-const Warning = CheckedUncheckedTemplate.bind({});
-exports.Warning = Warning;
+const Warning = exports.Warning = CheckedUncheckedTemplate.bind({});
 Warning.args = {
   warning: true,
   value: 'warningValue',
   validationText: 'I am validation text'
 };
-const Error = CheckedUncheckedTemplate.bind({});
-exports.Error = Error;
+const Error = exports.Error = CheckedUncheckedTemplate.bind({});
 Error.args = {
   error: true,
   value: 'errorValue',
   validationText: 'I am validation text'
 };
-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"
   })
 };
-const DefaultDense = Template.bind({});
-exports.DefaultDense = DefaultDense;
+const DefaultDense = exports.DefaultDense = Template.bind({});
 DefaultDense.storyName = 'Default - Dense';
 DefaultDense.args = {
   dense: true
 };
-const FocusedUncheckedDense = Template.bind({});
-exports.FocusedUncheckedDense = FocusedUncheckedDense;
-FocusedUncheckedDense.args = { ...DefaultDense.args,
+const FocusedUncheckedDense = exports.FocusedUncheckedDense = Template.bind({});
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedUnchecked.args
 };
 FocusedUncheckedDense.parameters = {
@@ -154,9 +141,9 @@ FocusedUncheckedDense.parameters = {
   }
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
-const FocusedCheckedDense = Template.bind({});
-exports.FocusedCheckedDense = FocusedCheckedDense;
-FocusedCheckedDense.args = { ...DefaultDense.args,
+const FocusedCheckedDense = exports.FocusedCheckedDense = Template.bind({});
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedChecked.args
 };
 FocusedCheckedDense.parameters = {
@@ -165,51 +152,49 @@ FocusedCheckedDense.parameters = {
   }
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
-const CheckedDense = Template.bind({});
-exports.CheckedDense = CheckedDense;
-CheckedDense.args = { ...DefaultDense.args,
+const CheckedDense = exports.CheckedDense = Template.bind({});
+CheckedDense.args = {
+  ...DefaultDense.args,
   ...Checked.args
 };
 CheckedDense.storyName = 'Checked - Dense';
-const RequiredDense = Template.bind({});
-exports.RequiredDense = RequiredDense;
-RequiredDense.args = { ...DefaultDense.args,
+const RequiredDense = exports.RequiredDense = Template.bind({});
+RequiredDense.args = {
+  ...DefaultDense.args,
   ...Required.args
 };
 RequiredDense.storyName = 'Required - Dense';
-const DisabledDense = CheckedUncheckedTemplate.bind({});
-exports.DisabledDense = DisabledDense;
-DisabledDense.args = { ...DefaultDense.args,
+const DisabledDense = exports.DisabledDense = CheckedUncheckedTemplate.bind({});
+DisabledDense.args = {
+  ...DefaultDense.args,
   ...Disabled.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
-const ValidDense = CheckedUncheckedTemplate.bind({});
-exports.ValidDense = ValidDense;
-ValidDense.args = { ...DefaultDense.args,
+const ValidDense = exports.ValidDense = CheckedUncheckedTemplate.bind({});
+ValidDense.args = {
+  ...DefaultDense.args,
   ...Valid.args
 };
 ValidDense.storyName = 'Valid - Dense';
-const WarningDense = CheckedUncheckedTemplate.bind({});
-exports.WarningDense = WarningDense;
-WarningDense.args = { ...DefaultDense.args,
+const WarningDense = exports.WarningDense = CheckedUncheckedTemplate.bind({});
+WarningDense.args = {
+  ...DefaultDense.args,
   ...Warning.args
 };
 WarningDense.storyName = 'Warning - Dense';
-const ErrorDense = CheckedUncheckedTemplate.bind({});
-exports.ErrorDense = ErrorDense;
-ErrorDense.args = { ...DefaultDense.args,
+const ErrorDense = exports.ErrorDense = CheckedUncheckedTemplate.bind({});
+ErrorDense.args = {
+  ...DefaultDense.args,
   ...Error.args
 };
 ErrorDense.storyName = 'Error - Dense';
-const ImageLabelDense = Template.bind({});
-exports.ImageLabelDense = ImageLabelDense;
-ImageLabelDense.args = { ...DefaultDense.args,
+const ImageLabelDense = exports.ImageLabelDense = Template.bind({});
+ImageLabelDense.args = {
+  ...DefaultDense.args,
   ...ImageLabel.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CheckboxField, args)));
-
 exports.RTL = RTL;

package/build/cjs/checkbox-field/features/accepts_help_text/index.js

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

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

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

package/build/cjs/checkbox-field/features/accepts_validation_text/index.js

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

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

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

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

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

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "CheckboxField", {
     return _index2.CheckboxField;
   }
 });
-
 var _index = require("./checkbox/index.js");
-
 var _index2 = require("./checkbox-field/index.js");

package/build/es/checkbox/checkbox-icon.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", "svg.jsx-4069423049 .border.jsx-4069423049{fill:".concat(colors.grey800, ";}"), "svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:".concat(colors.white, ";}"), "svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.teal500, ";}"), "svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.red500, ";}"), "svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:".concat(colors.teal900, ";}"), "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", "svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:".concat(colors.white, ";}")];
+const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", `svg.jsx-4069423049 .border.jsx-4069423049{fill:${colors.grey800};}`, `svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:${colors.white};}`, `svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:${colors.teal500};}`, `svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:${colors.blue600};}`, `svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:${colors.yellow700};}`, `svg.error.jsx-4069423049 .background.jsx-4069423049{fill:${colors.red500};}`, `svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:${colors.teal900};}`, "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", `svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:${colors.white};}`];
 commonStyles.__hash = "4069423049";
 export function CheckboxRegular(_ref) {
   let {
@@ -11,33 +11,33 @@ export function CheckboxRegular(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + (className || "")
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement("rect", {
     x: "0",
     y: "0",
     width: "18",
     height: "18",
     rx: "3",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "background"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "background"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 L15,0 Z M15,1 L3,1 C1.9456382,1 1.08183488,1.81587779 1.00548574,2.85073766 L1,3 L1,15 C1,16.0543618 1.81587779,16.9181651 2.85073766,16.9945143 L3,17 L15,17 C16.0543618,17 16.9181651,16.1841222 16.9945143,15.1492623 L17,15 L17,3 C17,1.9456382 16.1841222,1.08183488 15.1492623,1.00548574 L15,1 Z",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "border"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "border"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "checkmark"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "checkmark"
   }), /*#__PURE__*/React.createElement("rect", {
     x: "4",
     y: "8",
     width: "10",
     height: "2",
     rx: "1",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "indeterminate"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "indeterminate"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: commonStyles.__hash
   }, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2753140462",
     dynamic: [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]
-  }, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey300, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue700, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red700, ";}")]));
+  }, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", `svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:${colors.grey300};}`, `svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.grey400};}`, `svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.blue600};}`, `svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.blue700};}`, `svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.yellow700};}`, `svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.yellow800};}`, `svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.red500};}`, `svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.red700};}`]));
 }
 CheckboxRegular.propTypes = {
   className: PropTypes.string
@@ -49,32 +49,32 @@ export function CheckboxDense(_ref2) {
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 14 14",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + (className || "")
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement("rect", {
     x: "0",
     y: "0",
     width: "14",
     height: "14",
     rx: "2",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "background"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "background"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "border"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "border"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "checkmark"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "checkmark"
   }), /*#__PURE__*/React.createElement("rect", {
     x: "3",
     y: "6",
     width: "8",
     height: "2",
-    className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "indeterminate"
+    className: `jsx-${commonStyles.__hash}` + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "indeterminate"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: commonStyles.__hash
   }, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "86695588",
     dynamic: [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]
-  }, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue800, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red800, ";}")]));
+  }, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", `svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:${colors.grey400};}`, `svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.grey400};}`, `svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.grey500};}`, `svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.blue600};}`, `svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.blue800};}`, `svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.yellow700};}`, `svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.yellow800};}`, `svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.red500};}`, `svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${colors.red800};}`]));
 }
 CheckboxDense.propTypes = {
   className: PropTypes.string

package/build/es/checkbox/{checkbox.stories.e2e.js → checkbox.e2e.stories.js}

@@ -1,48 +1,57 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Checkbox } from './index.js';
 window.onClick = window.Cypress && window.Cypress.cy.stub();
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Checkbox', module).add('With onChange', () => /*#__PURE__*/React.createElement(Checkbox, {
+export default {
+  title: 'Checkbox'
+};
+export const WithOnChange = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "Checkbox",
   value: "default",
   onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const WithInitialFocusAndOnBlur = () => /*#__PURE__*/React.createElement(Checkbox, {
   initialFocus: true,
   name: "Ex",
   label: "Checkbox",
   value: "default",
   onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "Checkbox",
   value: "default",
   onFocus: window.onFocus
-})).add('Disabled with onClick', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const DisabledWithOnClick = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "Checkbox",
   value: "default",
   disabled: true,
   onClick: window.onClick
-})).add('With label', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const WithLabel = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "The label",
   value: "default"
-})).add('With initialFocus', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "The label",
   value: "default",
   initialFocus: true
-})).add('Indeterminate prop', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const IndeterminateProp = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "The label",
   value: "default",
   indeterminate: true
-})).add('No indeterminate prop', () => /*#__PURE__*/React.createElement(Checkbox, {
+});
+export const NoIndeterminateProp = () => /*#__PURE__*/React.createElement(Checkbox, {
   name: "Ex",
   label: "The label",
   value: "default"
-}));
+});

package/build/es/checkbox/checkbox.js

@@ -1,63 +1,52 @@
 import _JSXStyle from "styled-jsx/style";
-
-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; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { mutuallyExclusive } from '@dhis2/prop-types';
 import { colors, spacers, theme, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component, createRef } from 'react';
 import { CheckboxRegular, CheckboxDense } from './checkbox-icon.js';
-
 class Checkbox extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/createRef());
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(), e);
       }
     });
   }
-
   componentDidMount() {
     if (this.props.initialFocus) {
       this.ref.current.focus();
     }
-
     this.setIndeterminate(this.props.indeterminate);
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.indeterminate !== this.props.indeterminate) {
       this.setIndeterminate(this.props.indeterminate);
     }
   }
-
   setIndeterminate(indeterminate) {
     this.ref.current.indeterminate = indeterminate;
   }
-
   createHandlerPayload() {
     return {
       value: this.props.value,
@@ -65,7 +54,6 @@ class Checkbox extends Component {
       checked: !this.props.checked
     };
   }
-
   render() {
     const {
       checked,
@@ -120,11 +108,9 @@ class Checkbox extends Component {
     })), label, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "1252368010",
       dynamic: [colors.grey900, theme.disabled, spacers.dp4, theme.focus]
-    }, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-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;cursor:pointer;color:".concat(colors.grey900, ";font-size:14px;line-height:19px;}"), "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:18px;inset-inline-start:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-inline-end:".concat(spacers.dp4, ";border:2px solid transparent;padding:1px;border-radius:5px;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
+    }, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-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;cursor:pointer;color:${colors.grey900};font-size:14px;line-height:19px;}`, "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:18px;inset-inline-start:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", `.icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-inline-end:${spacers.dp4};border:2px solid transparent;padding:1px;border-radius:5px;}`, "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;border-radius:4px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${theme.focus};outline-offset:-3px;}`]));
   }
-
 }
-
 Checkbox.defaultProps = {
   checked: false,
   indeterminate: false,
@@ -147,7 +133,6 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   warning: sharedPropTypes.statusPropType,
   onBlur: PropTypes.func,
-
   /** Called with signature `(object, event)` */
   onChange: PropTypes.func,
   onFocus: PropTypes.func,