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

package/build/cjs/__tests__/radio.test.js

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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Radio", {
     return _radio.Radio;
   }
 });
-
 var _radio = require("./radio.js");

package/build/cjs/radio-icons.js

@@ -5,20 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RadioDense = RadioDense;
 exports.RadioRegular = RadioRegular;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const styles = ["svg.jsx-1120332023{display:block;pointer-events:none;}", "svg.jsx-1120332023{fill:".concat(_uiConstants.colors.grey800, ";}"), "circle.background.jsx-1120332023{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-1120332023{fill:".concat(_uiConstants.colors.teal700, ";}"), "svg.disabled.jsx-1120332023{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.error.jsx-1120332023{fill:".concat(_uiConstants.theme.error, ";}"), "svg.valid.jsx-1120332023{fill:".concat(_uiConstants.theme.valid, ";}"), "svg.warning.jsx-1120332023{fill:".concat(_uiConstants.theme.warning, ";}"), "svg.jsx-1120332023:not(.checked) .inner.jsx-1120332023,svg.jsx-1120332023:not(.checked) .outer.checked.jsx-1120332023{fill:none;}"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = ["svg.jsx-1120332023{display:block;pointer-events:none;}", `svg.jsx-1120332023{fill:${_uiConstants.colors.grey800};}`, `circle.background.jsx-1120332023{fill:${_uiConstants.colors.white};}`, `svg.checked.jsx-1120332023{fill:${_uiConstants.colors.teal700};}`, `svg.disabled.jsx-1120332023{fill:${_uiConstants.colors.grey400};}`, `svg.error.jsx-1120332023{fill:${_uiConstants.theme.error};}`, `svg.valid.jsx-1120332023{fill:${_uiConstants.theme.valid};}`, `svg.warning.jsx-1120332023{fill:${_uiConstants.theme.warning};}`, "svg.jsx-1120332023:not(.checked) .inner.jsx-1120332023,svg.jsx-1120332023:not(.checked) .outer.checked.jsx-1120332023{fill:none;}"];
 styles.__hash = "1120332023";
-
 function RadioRegular(_ref) {
   let {
     className
@@ -26,34 +19,32 @@ function RadioRegular(_ref) {
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 18 18",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + (className || "")
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "9",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "background"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "background"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 Z",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "outer unchecked"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18 Z M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "outer checked"
   }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "5",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "inner"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "inner"
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1260643562"
   }, ["svg.jsx-1260643562{height:18px;width:18px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: styles.__hash
   }, styles));
 }
-
 RadioRegular.propTypes = {
   className: _propTypes.default.string
 };
-
 function RadioDense(_ref2) {
   let {
     className
@@ -61,30 +52,29 @@ function RadioDense(_ref2) {
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 14 14",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + (className || "")
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement("circle", {
     cx: "7",
     cy: "7",
     r: "7",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "background"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "background"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 C10.3137085,1 13,3.6862915 13,7 C13,10.3137085 10.3137085,13 7,13 Z",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "outer unchecked"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,12 C4.23857625,12 2,9.76142375 2,7 C2,4.23857625 4.23857625,2 7,2 C9.76142375,2 12,4.23857625 12,7 C12,9.76142375 9.76142375,12 7,12 Z",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "outer checked"
   }), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "7",
     cy: "7",
     r: "3",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "inner"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "inner"
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1659897952"
   }, ["svg.jsx-1659897952{height:14px;width:14px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: styles.__hash
   }, styles));
 }
-
 RadioDense.propTypes = {
   className: _propTypes.default.string
 };

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnFocus = exports.WithOnChange = exports.WithLabel = exports.WithInitialFocusAndOnBlur = exports.WithInitialFocus = exports.WithDisabled = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _radio = require("./radio.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onChange = window.Cypress && window.Cypress.cy.stub();
+window.onBlur = window.Cypress && window.Cypress.cy.stub();
+window.onFocus = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'Radio'
+};
+const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  name: "Ex",
+  label: "Radio",
+  value: "default",
+  onChange: window.onChange
+});
+exports.WithOnChange = WithOnChange;
+const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  name: "Ex",
+  label: "Radio",
+  value: "default",
+  initialFocus: true,
+  onBlur: window.onBlur
+});
+exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  initialFocus: true,
+  name: "Ex",
+  label: "Radio",
+  value: "default",
+  onFocus: window.onFocus
+});
+exports.WithOnFocus = WithOnFocus;
+const WithDisabled = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  name: "Ex",
+  label: "Radio",
+  value: "default",
+  disabled: true
+});
+exports.WithDisabled = WithDisabled;
+const WithLabel = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  name: "Ex",
+  label: "The label",
+  value: "default"
+});
+exports.WithLabel = WithLabel;
+const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+  name: "Ex",
+  label: "The label",
+  value: "default",
+  initialFocus: true
+});
+exports.WithInitialFocus = WithInitialFocus;

package/build/cjs/radio.js

@@ -4,64 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Radio = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _radioIcons = require("./radio-icons.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 class Radio extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/(0, _react.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,
@@ -69,7 +53,6 @@ class Radio extends _react.Component {
       checked: !this.props.checked
     };
   }
-
   render() {
     const {
       checked = false,
@@ -122,11 +105,9 @@ class Radio extends _react.Component {
     })), label, /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "2849316266",
       dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, label ? _uiConstants.spacers.dp4 : 0, _uiConstants.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;color:".concat(_uiConstants.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(_uiConstants.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(label ? _uiConstants.spacers.dp4 : 0, ";border:2px solid transparent;padding:1px;border-radius:50%;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(_uiConstants.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;color:${_uiConstants.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:${_uiConstants.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:${label ? _uiConstants.spacers.dp4 : 0};border:2px solid transparent;padding:1px;border-radius:50%;}`, "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`]));
   }
-
 }
-
 exports.Radio = Radio;
 Radio.defaultProps = {
   dataTest: 'dhis2-uicore-radio'
@@ -137,34 +118,25 @@ Radio.propTypes = {
   dataTest: _propTypes.default.string,
   dense: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-
   /** Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
   initialFocus: _propTypes.default.bool,
   label: _propTypes.default.node,
-
   /** Name associated with this element. Passed in object to event handler functions  */
   name: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
-
   /** Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Value associated with this element. Passed in object to event handler functions */
   value: _propTypes.default.string,
-
   /** Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onBlur: _propTypes.default.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onKeyDown: _propTypes.default.func
 };

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

@@ -4,48 +4,53 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RTL = exports.NoLabel = 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 _radio = require("./radio.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 control that allows a user to select a single option from a choice of several`;
+const description = `
+Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.
+
+Do not use a radio button if only a single option is available; use a Checkbox here instead.
+
+If there are many options that need to select from, consider using a Select instead.
+
+#### Size
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.
 
-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); }
+#### See more
 
-const subtitle = "A control that allows a user to select a single option from a choice of several";
-const description = "\nRadio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.\n\nDo not use a radio button if only a single option is available; use a Checkbox here instead.\n\nIf there are many options that need to select from, consider using a Select instead.\n\n#### Size\n\nRadio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.\n\n#### See more\n\nLearn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).\n\n```js\nimport { Radio } from '@dhis2/ui'\n```\n";
+Learn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).
 
+\`\`\`js
+import { Radio } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onChange payload', payload);
   console.log('onChange event', event);
 };
-
 window.onFocus = (payload, event) => {
   console.log('onFocus payload', payload);
   console.log('onFocus event', event);
 };
-
 window.onBlur = (payload, event) => {
   console.log('onBlur payload', payload);
   console.log('onBlur event', event);
 };
-
 const onChange = function () {
   return window.onChange(...arguments);
 };
-
 const onFocus = function () {
   return window.onFocus(...arguments);
 };
-
 const onBlur = function () {
   return window.onBlur(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Radio',
   component: _radio.Radio,
   parameters: {
@@ -66,41 +71,36 @@ var _default = {
     onBlur: onBlur
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_radio.Radio, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_radio.Radio, args), /*#__PURE__*/_react.default.createElement(_radio.Radio, _extends({}, args, {
   checked: true
 })));
-
-const Default = Template.bind({});
-exports.Default = Default;
-
+const Default = exports.Default = Template.bind({});
 const FocusedUnchecked = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_radio.Radio, _extends({}, args, {
   initialFocus: true,
   className: "initially-focused"
 })), /*#__PURE__*/_react.default.createElement(_radio.Radio, _extends({}, args, {
   className: "initially-unfocused"
-}))); // Stories with initial focus are distracting on docs page
-
-
+})));
+// Stories with initial focus are distracting on docs page
 exports.FocusedUnchecked = FocusedUnchecked;
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
   }
 };
-const FocusedChecked = FocusedUnchecked.bind({});
-exports.FocusedChecked = FocusedChecked;
+const FocusedChecked = exports.FocusedChecked = FocusedUnchecked.bind({});
 FocusedChecked.args = {
   checked: true
 };
@@ -109,53 +109,46 @@ FocusedChecked.parameters = {
     disable: true
   }
 };
-const Checked = Template.bind({});
-exports.Checked = Checked;
+const Checked = exports.Checked = Template.bind({});
 Checked.args = {
   checked: true,
   value: 'checked'
 };
-const Disabled = CheckedUncheckedTemplate.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = CheckedUncheckedTemplate.bind({});
 Disabled.args = {
   disabled: true,
   value: 'disabled'
 };
-const Valid = CheckedUncheckedTemplate.bind({});
-exports.Valid = Valid;
+const Valid = exports.Valid = CheckedUncheckedTemplate.bind({});
 Valid.args = {
   valid: true,
   value: 'valid'
 };
-const Warning = CheckedUncheckedTemplate.bind({});
-exports.Warning = Warning;
+const Warning = exports.Warning = CheckedUncheckedTemplate.bind({});
 Warning.args = {
   warning: true,
   value: 'warning'
 };
-const Error = CheckedUncheckedTemplate.bind({});
-exports.Error = Error;
+const Error = exports.Error = CheckedUncheckedTemplate.bind({});
 Error.args = {
   error: true,
   value: 'error'
 };
-const ImageLabel = Template.bind({});
-exports.ImageLabel = ImageLabel;
+const ImageLabel = exports.ImageLabel = Template.bind({});
 ImageLabel.args = {
   label: /*#__PURE__*/_react.default.createElement("img", {
     src: "https://picsum.photos/id/82/200/100"
   }),
   value: 'with-help'
 };
-const DefaultDense = Template.bind({});
-exports.DefaultDense = DefaultDense;
+const DefaultDense = exports.DefaultDense = Template.bind({});
 DefaultDense.args = {
   dense: true
 };
 DefaultDense.storyName = 'Default - Dense';
-const FocusedUncheckedDense = FocusedUnchecked.bind({});
-exports.FocusedUncheckedDense = FocusedUncheckedDense;
-FocusedUncheckedDense.args = { ...DefaultDense.args
+const FocusedUncheckedDense = exports.FocusedUncheckedDense = FocusedUnchecked.bind({});
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
 FocusedUncheckedDense.parameters = {
@@ -163,9 +156,9 @@ FocusedUncheckedDense.parameters = {
     disable: true
   }
 };
-const FocusedCheckedDense = FocusedUnchecked.bind({});
-exports.FocusedCheckedDense = FocusedCheckedDense;
-FocusedCheckedDense.args = { ...DefaultDense.args,
+const FocusedCheckedDense = exports.FocusedCheckedDense = FocusedUnchecked.bind({});
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   checked: true
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
@@ -174,51 +167,48 @@ FocusedCheckedDense.parameters = {
     disable: true
   }
 };
-const CheckedDense = Template.bind({});
-exports.CheckedDense = CheckedDense;
-CheckedDense.args = { ...Checked.args,
+const CheckedDense = exports.CheckedDense = Template.bind({});
+CheckedDense.args = {
+  ...Checked.args,
   ...DefaultDense.args
 };
 CheckedDense.storyName = 'Checked - Dense';
-const DisabledDense = CheckedUncheckedTemplate.bind({});
-exports.DisabledDense = DisabledDense;
-DisabledDense.args = { ...Disabled.args,
+const DisabledDense = exports.DisabledDense = CheckedUncheckedTemplate.bind({});
+DisabledDense.args = {
+  ...Disabled.args,
   ...DefaultDense.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
-const ValidDense = CheckedUncheckedTemplate.bind({});
-exports.ValidDense = ValidDense;
-ValidDense.args = { ...Valid.args,
+const ValidDense = exports.ValidDense = CheckedUncheckedTemplate.bind({});
+ValidDense.args = {
+  ...Valid.args,
   ...DefaultDense.args
 };
 ValidDense.storyName = 'Valid - Dense';
-const WarningDense = CheckedUncheckedTemplate.bind({});
-exports.WarningDense = WarningDense;
-WarningDense.args = { ...Warning.args,
+const WarningDense = exports.WarningDense = CheckedUncheckedTemplate.bind({});
+WarningDense.args = {
+  ...Warning.args,
   ...DefaultDense.args
 };
 WarningDense.storyName = 'Warning - Dense';
-const ErrorDense = CheckedUncheckedTemplate.bind({});
-exports.ErrorDense = ErrorDense;
-ErrorDense.args = { ...Error.args,
+const ErrorDense = exports.ErrorDense = CheckedUncheckedTemplate.bind({});
+ErrorDense.args = {
+  ...Error.args,
   ...DefaultDense.args
 };
 ErrorDense.storyName = 'Error - Dense';
-const ImageLabelDense = Template.bind({});
-exports.ImageLabelDense = ImageLabelDense;
-ImageLabelDense.args = { ...ImageLabel.args,
+const ImageLabelDense = exports.ImageLabelDense = Template.bind({});
+ImageLabelDense.args = {
+  ...ImageLabel.args,
   ...DefaultDense.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';
-const NoLabel = Template.bind({});
-exports.NoLabel = NoLabel;
+const NoLabel = exports.NoLabel = Template.bind({});
 NoLabel.args = {
   label: null,
   className: 'some-name'
 };
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(Template, args));
-
 exports.RTL = RTL;

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

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

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

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

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

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

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

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

package/build/es/radio-icons.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const styles = ["svg.jsx-1120332023{display:block;pointer-events:none;}", "svg.jsx-1120332023{fill:".concat(colors.grey800, ";}"), "circle.background.jsx-1120332023{fill:".concat(colors.white, ";}"), "svg.checked.jsx-1120332023{fill:".concat(colors.teal700, ";}"), "svg.disabled.jsx-1120332023{fill:".concat(colors.grey400, ";}"), "svg.error.jsx-1120332023{fill:".concat(theme.error, ";}"), "svg.valid.jsx-1120332023{fill:".concat(theme.valid, ";}"), "svg.warning.jsx-1120332023{fill:".concat(theme.warning, ";}"), "svg.jsx-1120332023:not(.checked) .inner.jsx-1120332023,svg.jsx-1120332023:not(.checked) .outer.checked.jsx-1120332023{fill:none;}"];
+const styles = ["svg.jsx-1120332023{display:block;pointer-events:none;}", `svg.jsx-1120332023{fill:${colors.grey800};}`, `circle.background.jsx-1120332023{fill:${colors.white};}`, `svg.checked.jsx-1120332023{fill:${colors.teal700};}`, `svg.disabled.jsx-1120332023{fill:${colors.grey400};}`, `svg.error.jsx-1120332023{fill:${theme.error};}`, `svg.valid.jsx-1120332023{fill:${theme.valid};}`, `svg.warning.jsx-1120332023{fill:${theme.warning};}`, "svg.jsx-1120332023:not(.checked) .inner.jsx-1120332023,svg.jsx-1120332023:not(.checked) .outer.checked.jsx-1120332023{fill:none;}"];
 styles.__hash = "1120332023";
 export function RadioRegular(_ref) {
   let {
@@ -11,23 +11,23 @@ export function RadioRegular(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 18 18",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + (className || "")
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + (className || "")
   }, /*#__PURE__*/React.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "9",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "background"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "background"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 Z",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "outer unchecked"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18 Z M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "outer checked"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "5",
-    className: "jsx-1260643562 " + "jsx-".concat(styles.__hash) + " " + "inner"
+    className: "jsx-1260643562 " + `jsx-${styles.__hash}` + " " + "inner"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1260643562"
   }, ["svg.jsx-1260643562{height:18px;width:18px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -44,23 +44,23 @@ export function RadioDense(_ref2) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 14 14",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + (className || "")
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + (className || "")
   }, /*#__PURE__*/React.createElement("circle", {
     cx: "7",
     cy: "7",
     r: "7",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "background"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "background"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 C10.3137085,1 13,3.6862915 13,7 C13,10.3137085 10.3137085,13 7,13 Z",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer unchecked"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "outer unchecked"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,12 C4.23857625,12 2,9.76142375 2,7 C2,4.23857625 4.23857625,2 7,2 C9.76142375,2 12,4.23857625 12,7 C12,9.76142375 9.76142375,12 7,12 Z",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "outer checked"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "outer checked"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: "7",
     cy: "7",
     r: "3",
-    className: "jsx-1659897952 " + "jsx-".concat(styles.__hash) + " " + "inner"
+    className: "jsx-1659897952 " + `jsx-${styles.__hash}` + " " + "inner"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1659897952"
   }, ["svg.jsx-1659897952{height:14px;width:14px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {

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

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

package/build/es/radio.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, spacers, theme, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component, createRef } from 'react';
 import { RadioRegular, RadioDense } from './radio-icons.js';
-
 class Radio 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 Radio extends Component {
       checked: !this.props.checked
     };
   }
-
   render() {
     const {
       checked = false,
@@ -105,11 +96,9 @@ class Radio extends Component {
     })), label, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "2849316266",
       dynamic: [colors.grey900, theme.disabled, label ? spacers.dp4 : 0, 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;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(label ? spacers.dp4 : 0, ";border:2px solid transparent;padding:1px;border-radius:50%;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;}", "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;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:${label ? spacers.dp4 : 0};border:2px solid transparent;padding:1px;border-radius:50%;}`, "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${theme.focus};outline-offset:-3px;}`]));
   }
-
 }
-
 Radio.defaultProps = {
   dataTest: 'dhis2-uicore-radio'
 };
@@ -119,34 +108,25 @@ Radio.propTypes = {
   dataTest: PropTypes.string,
   dense: PropTypes.bool,
   disabled: PropTypes.bool,
-
   /** Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
   initialFocus: PropTypes.bool,
   label: PropTypes.node,
-
   /** Name associated with this element. Passed in object to event handler functions  */
   name: PropTypes.string,
   tabIndex: PropTypes.string,
-
   /** Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Value associated with this element. Passed in object to event handler functions */
   value: PropTypes.string,
-
   /** Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onChange: PropTypes.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
   onKeyDown: PropTypes.func
 };

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

@@ -1,38 +1,48 @@
-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 { Radio } from './radio.js';
-const subtitle = "A control that allows a user to select a single option from a choice of several";
-const description = "\nRadio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.\n\nDo not use a radio button if only a single option is available; use a Checkbox here instead.\n\nIf there are many options that need to select from, consider using a Select instead.\n\n#### Size\n\nRadio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.\n\n#### See more\n\nLearn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).\n\n```js\nimport { Radio } from '@dhis2/ui'\n```\n";
+const subtitle = `A control that allows a user to select a single option from a choice of several`;
+const description = `
+Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.
+
+Do not use a radio button if only a single option is available; use a Checkbox here instead.
+
+If there are many options that need to select from, consider using a Select instead.
+
+#### Size
+
+Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.
 
+#### See more
+
+Learn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).
+
+\`\`\`js
+import { Radio } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onChange payload', payload);
   console.log('onChange 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: 'Radio',
   component: Radio,
@@ -54,29 +64,29 @@ export default {
     onBlur: 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(Radio, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio, args), /*#__PURE__*/React.createElement(Radio, _extends({}, args, {
   checked: true
 })));
-
 export const Default = Template.bind({});
 export const FocusedUnchecked = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio, _extends({}, args, {
   initialFocus: true,
   className: "initially-focused"
 })), /*#__PURE__*/React.createElement(Radio, _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 +139,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 +149,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 +160,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/radio",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI Radio",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "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-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

@@ -1,45 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _radio = require("./radio.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)('Radio', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  name: "Ex",
-  label: "Radio",
-  value: "default",
-  onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  name: "Ex",
-  label: "Radio",
-  value: "default",
-  initialFocus: true,
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  initialFocus: true,
-  name: "Ex",
-  label: "Radio",
-  value: "default",
-  onFocus: window.onFocus
-})).add('With disabled', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  name: "Ex",
-  label: "Radio",
-  value: "default",
-  disabled: true
-})).add('With label', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  name: "Ex",
-  label: "The label",
-  value: "default"
-})).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_radio.Radio, {
-  name: "Ex",
-  label: "The label",
-  value: "default",
-  initialFocus: true
-}));