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

package/build/cjs/switch-field/{switch-field.stories.js → switch-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.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 \`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.
 
-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 `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";
+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}`);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Switch Field',
   component: _index.SwitchField,
   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.SwitchField, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.SwitchField, args), /*#__PURE__*/_react.default.createElement(_index.SwitchField, _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.SwitchField, args), /*#__PURE__*/_react.default.createElement(_index.SwitchField, _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,45 +152,45 @@ 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';

package/build/es/switch/features/accepts_initial_focus/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Switch with initialFocus is rendered', () => {
-  cy.visitStory('Switch', 'With initialFocus');
+  cy.visitStory('Switch', 'With initial focus');
 });
 Then('the Switch is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-switch"]').should('exist');

package/build/es/switch/features/can_be_blurred/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Switch with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Switch', 'With initialFocus and onBlur');
+  cy.visitStory('Switch', 'With initial focus and on blur');
 });
 When('the Switch is blurred', () => {
   cy.get('[data-test="dhis2-uicore-switch"] input').blur();

package/build/es/switch/features/can_be_changed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Switch with onChange handler is rendered', () => {
-  cy.visitStory('Switch', 'With onChange');
+  cy.visitStory('Switch', 'With on change');
 });
 When('the Switch is clicked', () => {
   cy.get('[data-test="dhis2-uicore-switch"]').click();

package/build/es/switch/features/can_be_focused/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Switch with onFocus handler is rendered', () => {
-  cy.visitStory('Switch', 'With onFocus');
+  cy.visitStory('Switch', 'With on focus');
 });
 When('the Switch is focused', () => {
   cy.get('[data-test="dhis2-uicore-switch"] input').focus();

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

@@ -2,11 +2,10 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const styles = ["svg.jsx-4217794981{display:block;pointer-events:none;height:18px;width:35px;}", "svg.jsx-4217794981:dir(rtl){-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg[dir='rtl'].jsx-4217794981{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg.dense.jsx-4217794981{height:14px;width:27px;}", "svg.jsx-4217794981 .background.jsx-4217794981,svg.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.grey600, ";}"), "svg.jsx-4217794981 .checkmark.jsx-4217794981,svg.jsx-4217794981 .cross.jsx-4217794981,svg.jsx-4217794981 .handle.jsx-4217794981{fill:".concat(colors.white, ";}"), "svg.jsx-4217794981 .checkmark.jsx-4217794981:dir(rtl){display:none;}", "svg[dir='rtl'].jsx-4217794981 .checkmark.jsx-4217794981{display:none;}", "svg.checked.jsx-4217794981 .handle-unchecked.jsx-4217794981,svg.jsx-4217794981:not(.checked) .handle-checked.jsx-4217794981{fill:none;}", "svg.checked.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.teal400, ";}"), "svg.valid.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.red500, ";}"), "svg.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.teal700, ";}"), "svg.disabled.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.grey300, ";}"), "svg.disabled.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.grey400, ";}"), "svg.valid.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.jsx-4217794981 .border.jsx-4217794981,svg.valid.indeterminate.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.blue700, ";}"), "svg.warning.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.yellow800, ";}"), "svg.error.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.red500, ";}"), "svg.error.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.red700, ";}")];
+const styles = ["svg.jsx-4217794981{display:block;pointer-events:none;height:18px;width:35px;}", "svg.jsx-4217794981:dir(rtl){-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg[dir='rtl'].jsx-4217794981{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg.dense.jsx-4217794981{height:14px;width:27px;}", `svg.jsx-4217794981 .background.jsx-4217794981,svg.jsx-4217794981 .border.jsx-4217794981{fill:${colors.grey600};}`, `svg.jsx-4217794981 .checkmark.jsx-4217794981,svg.jsx-4217794981 .cross.jsx-4217794981,svg.jsx-4217794981 .handle.jsx-4217794981{fill:${colors.white};}`, "svg.jsx-4217794981 .checkmark.jsx-4217794981:dir(rtl){display:none;}", "svg[dir='rtl'].jsx-4217794981 .checkmark.jsx-4217794981{display:none;}", "svg.checked.jsx-4217794981 .handle-unchecked.jsx-4217794981,svg.jsx-4217794981:not(.checked) .handle-checked.jsx-4217794981{fill:none;}", `svg.checked.jsx-4217794981 .background.jsx-4217794981{fill:${colors.teal400};}`, `svg.valid.jsx-4217794981 .background.jsx-4217794981{fill:${colors.blue600};}`, `svg.warning.jsx-4217794981 .background.jsx-4217794981{fill:${colors.yellow700};}`, `svg.error.jsx-4217794981 .background.jsx-4217794981{fill:${colors.red500};}`, `svg.checked.jsx-4217794981 .border.jsx-4217794981{fill:${colors.teal700};}`, `svg.disabled.jsx-4217794981 .background.jsx-4217794981{fill:${colors.grey300};}`, `svg.disabled.jsx-4217794981 .border.jsx-4217794981{fill:${colors.grey400};}`, `svg.valid.jsx-4217794981 .border.jsx-4217794981{fill:${colors.blue600};}`, `svg.valid.checked.jsx-4217794981 .border.jsx-4217794981,svg.valid.indeterminate.jsx-4217794981 .border.jsx-4217794981{fill:${colors.blue700};}`, `svg.warning.jsx-4217794981 .border.jsx-4217794981{fill:${colors.yellow700};}`, `svg.warning.checked.jsx-4217794981 .border.jsx-4217794981{fill:${colors.yellow800};}`, `svg.error.jsx-4217794981 .border.jsx-4217794981{fill:${colors.red500};}`, `svg.error.checked.jsx-4217794981 .border.jsx-4217794981{fill:${colors.red700};}`];
 styles.__hash = "4217794981";
 export function SwitchRegular(_ref) {
   var _document$documentEle, _document$documentEle2;
-
   let {
     className
   } = _ref;
@@ -14,33 +13,41 @@ export function SwitchRegular(_ref) {
     viewBox: "0 0 42 22",
     xmlns: "http://www.w3.org/2000/svg",
     dir: (_document$documentEle = (_document$documentEle2 = document.documentElement) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.dir) !== null && _document$documentEle !== void 0 ? _document$documentEle : 'ltr',
-    className: "jsx-".concat(styles.__hash) + " " + (className || "")
+    className: `jsx-${styles.__hash}` + " " + (className || "")
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z",
     fill: "red",
-    className: "jsx-".concat(styles.__hash) + " " + "background"
+    className: `jsx-${styles.__hash}` + " " + "background"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z" // fill="#00695C"
+    d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z"
+
+    // fill="#00695C"
     // fillRule="nonzero"
     ,
-    className: "jsx-".concat(styles.__hash) + " " + "border"
+    className: `jsx-${styles.__hash}` + " " + "border"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M27.7071068,7.29289322 L30,9.585 L32.2928932,7.29289322 C32.6533772,6.93240926 33.2206082,6.90467972 33.6128994,7.20970461 L33.7071068,7.29289322 C34.0976311,7.68341751 34.0976311,8.31658249 33.7071068,8.70710678 L33.7071068,8.70710678 L31.415,11 L33.7071068,13.2928932 C34.0976311,13.6834175 34.0976311,14.3165825 33.7071068,14.7071068 C33.3165825,15.0976311 32.6834175,15.0976311 32.2928932,14.7071068 L30,12.415 L27.7071068,14.7071068 C27.3466228,15.0675907 26.7793918,15.0953203 26.3871006,14.7902954 L26.2928932,14.7071068 C25.9023689,14.3165825 25.9023689,13.6834175 26.2928932,13.2928932 L26.2928932,13.2928932 L28.585,11 L26.2928932,8.70710678 C25.9023689,8.31658249 25.9023689,7.68341751 26.2928932,7.29289322 C26.6834175,6.90236893 27.3165825,6.90236893 27.7071068,7.29289322 Z",
     fill: "#FFFFFF",
-    className: "jsx-".concat(styles.__hash) + " " + "cross"
+    className: `jsx-${styles.__hash}` + " " + "cross"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z" // fill="#FFFFFF"
+    d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z"
+
+    // fill="#FFFFFF"
     // fillRule="nonzero"
     ,
-    className: "jsx-".concat(styles.__hash) + " " + "checkmark"
+    className: `jsx-${styles.__hash}` + " " + "checkmark"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z" // fill="#FFFFFF"
+    d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z"
+
+    // fill="#FFFFFF"
     ,
-    className: "jsx-".concat(styles.__hash) + " " + "handle handle-unchecked"
+    className: `jsx-${styles.__hash}` + " " + "handle handle-unchecked"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z" // fill="#FFFFFF"
+    d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z"
+
+    // fill="#FFFFFF"
     ,
-    className: "jsx-".concat(styles.__hash) + " " + "handle handle-checked"
+    className: `jsx-${styles.__hash}` + " " + "handle handle-checked"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

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

@@ -1,37 +1,44 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Switch } from './index.js';
 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('Switch', module).add('With onChange', () => /*#__PURE__*/React.createElement(Switch, {
+export default {
+  title: 'Switch'
+};
+export const WithOnChange = () => /*#__PURE__*/React.createElement(Switch, {
   name: "Ex",
   label: "Switch",
   value: "default",
   onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/React.createElement(Switch, {
+});
+export const WithInitialFocusAndOnBlur = () => /*#__PURE__*/React.createElement(Switch, {
   initialFocus: true,
   name: "Ex",
   label: "Switch",
   value: "default",
   onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/React.createElement(Switch, {
+});
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(Switch, {
   name: "Ex",
   label: "Switch",
   value: "default",
   onFocus: window.onFocus
-})).add('With disabled', () => /*#__PURE__*/React.createElement(Switch, {
+});
+export const WithDisabled = () => /*#__PURE__*/React.createElement(Switch, {
   name: "Ex",
   label: "Switch",
   value: "default",
   disabled: true
-})).add('With label', () => /*#__PURE__*/React.createElement(Switch, {
+});
+export const WithLabel = () => /*#__PURE__*/React.createElement(Switch, {
   name: "Ex",
   label: "The label",
   value: "default"
-})).add('With initialFocus', () => /*#__PURE__*/React.createElement(Switch, {
+});
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(Switch, {
   name: "Ex",
   label: "The label",
   value: "default",
   initialFocus: true
-}));
+});

package/build/es/switch/switch.js

@@ -1,50 +1,42 @@
 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 { colors, theme, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component, createRef } from 'react';
 import { SwitchRegular } from './switch-icons.js';
-
 class Switch 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();
     }
   }
-
   createHandlerPayload() {
     return {
       value: this.props.value,
@@ -52,7 +44,6 @@ class Switch extends Component {
       checked: !this.props.checked
     };
   }
-
   render() {
     const {
       'aria-label': ariaLabel,
@@ -108,11 +99,9 @@ class Switch extends Component {
     })), label, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "3097670863",
       dynamic: [colors.grey900, theme.disabled, theme.focus]
-    }, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:".concat(colors.grey900, ";font-size: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:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
+    }, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${colors.grey900};font-size: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:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${theme.focus};outline-offset:-3px;}`]));
   }
-
 }
-
 Switch.defaultProps = {
   checked: false,
   dataTest: 'dhis2-uicore-switch',
@@ -124,47 +113,33 @@ Switch.propTypes = {
   checked: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Makes the switch smaller for information-dense layouts */
   dense: PropTypes.bool,
-
   /** Disables the switch */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types */
   error: sharedPropTypes.statusPropType,
-
   /** Grab initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Label for the switch. Can be a string or an element, for example an image */
   label: PropTypes.node,
-
   /** Name associated with the switch. Passed to event handlers in object */
   name: PropTypes.string,
-
   /** Sets a role attribute on the input */
   role: PropTypes.string,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types */
   valid: sharedPropTypes.statusPropType,
-
   /** Value associated with the switch. Passed to event handlers in object */
   value: PropTypes.string,
-
   /** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types */
   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
 };