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

package/build/cjs/button/__tests__/Button.test.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _enzyme = require("enzyme");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _button = require("../button.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<Button>', () => {
   let consoleSpy;
   beforeEach(() => {
@@ -94,13 +89,11 @@ describe('<Button>', () => {
       value: "button-value",
       onKeyDown: onKeyDown
     }, "btn"));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('button'), {
       key: 'Enter',
       code: 'Enter',
       charCode: 13
     });
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'button-name',
       value: 'button-value'

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnFocus = exports.WithOnClick = exports.WithInitialFocusAndOnBlur = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _button = require("./button.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onClick = 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: 'Button'
+};
+const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_button.Button, {
+  name: "Button",
+  value: "default",
+  onClick: window.onClick
+}, "Label me!");
+exports.WithOnClick = WithOnClick;
+const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_button.Button, {
+  name: "Button",
+  value: "default",
+  initialFocus: true,
+  onBlur: window.onBlur
+}, "Label me!");
+exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_button.Button, {
+  name: "Button",
+  value: "default",
+  onFocus: window.onFocus
+}, "Label me!");
+exports.WithOnFocus = WithOnFocus;

package/build/cjs/button/button.js

@@ -4,29 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Button = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _loader = require("@dhis2-ui/loader");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _loader = require("@dhis2-ui/loader");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _buttonStyles = _interopRequireDefault(require("./button.styles.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 _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 _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 _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 Button = _ref => {
   let {
     children,
@@ -62,31 +50,25 @@ const Button = _ref => {
     'aria-label': ariaLabel,
     title
   } = otherProps;
-
   if (!children && !title && !ariaLabel) {
     console.debug('Button component has no children but is missing title and ariaLabel attribute.');
   }
-
   const handleClick = event => onClick && onClick({
     value,
     name
   }, event);
-
   const handleBlur = event => onBlur && onBlur({
     value,
     name
   }, event);
-
   const handleFocus = event => onFocus && onFocus({
     value,
     name
   }, event);
-
   const handleKeyDown = event => onKeyDown && onKeyDown({
     value,
     name
   }, event);
-
   const iconOnly = icon && !children;
   const buttonClassName = (0, _classnames.default)(className, {
     primary,
@@ -110,21 +92,20 @@ const Button = _ref => {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown
   }, otherProps, {
-    className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
+    className: `jsx-${_buttonStyles.default.__hash}` + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
   }), loading && /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "loader"
+    className: `jsx-${_buttonStyles.default.__hash}` + " " + "loader"
   }, destructive || primary ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
     extrasmall: true,
     invert: true
   }) : /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
     extrasmall: true
   })), icon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "button-icon"
+    className: `jsx-${_buttonStyles.default.__hash}` + " " + "button-icon"
   }, icon), children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _buttonStyles.default.__hash
   }, _buttonStyles.default));
 };
-
 exports.Button = Button;
 Button.defaultProps = {
   type: 'button',
@@ -133,85 +114,65 @@ Button.defaultProps = {
 Button.propTypes = {
   /** Component to render inside the button */
   children: _propTypes.default.node,
-
   /** A className that will be passed to the `<button>` element */
   className: _propTypes.default.string,
-
   /**
    * A string that will be applied as a `data-test` attribute on the button element
    * for identification during testing
    */
   dataTest: _propTypes.default.string,
-
   /**
    * Applies 'destructive' button appearance, implying a dangerous action.
    */
   destructive: _propTypes.default.bool,
-
   /** Applies a greyed-out appearance and makes the button non-interactive  */
   disabled: _propTypes.default.bool,
-
   /** An icon element to display inside the button */
   icon: _propTypes.default.element,
-
   /** Use this variant to capture the initial focus on the page. */
   initialFocus: _propTypes.default.bool,
-
   /** Makes the button large. Mutually exclusive with `small` */
   large: _uiConstants.sharedPropTypes.sizePropType,
-
   /** Sets the button into a loading state */
   loading: _propTypes.default.bool,
-
   /**
    * Sets `name` attribute on button element.
    * Gets passed as part of the first argument to callbacks (see `onClick`).
    */
   name: _propTypes.default.string,
-
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
   primary: _propTypes.default.bool,
-
   /**
    * Applies 'secondary' button appearance.
    */
   secondary: _propTypes.default.bool,
-
   /** Makes the button small. Mutually exclusive with `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,
-
   /** Tab index for focusing the button with a keyboard */
   tabIndex: _propTypes.default.string,
-
   /** Changes appearance of button to an on/off state */
   toggled: _propTypes.default.bool,
-
   /** Sets `type` attribute on `<button>` element */
   type: _propTypes.default.oneOf(['submit', 'reset', 'button']),
-
   /**
    * Value associated with the button.
    * Gets passed as part of the first argument to callbacks (see `onClick`).
    */
   value: _propTypes.default.string,
-
   /**
    * Callback to trigger on de-focus (blur).
    * Called with same args as `onClick`
    * */
   onBlur: _propTypes.default.func,
-
   /**
    * Callback to trigger on click.
    * Called with args `({ value, name }, event)`
    * */
   onClick: _propTypes.default.func,
-
   /** Callback to trigger on focus. Called with same args as `onClick` */
   onFocus: _propTypes.default.func,
-
   /** Callback to trigger on key-down. Called with same args as `onClick` */
   onKeyDown: _propTypes.default.func
 };

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

@@ -4,33 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.IconRTL = exports.IconOnlySmall = exports.IconOnly = exports.Icon = exports.Disabled = exports.DestructiveSecondary = exports.Destructive = exports.Basic = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _button = require("./button.js");
-
-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); }
-
+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); }
 // Note: make sure 'fenced code blocks' are not indentend in this template string
-const description = "Buttons are used for triggering actions.\nThere are different types of buttons in the design system which are intended\nfor different types of actions.\n\n```js\nimport { Button } from '@dhis2/ui'\n```";
+const description = `Buttons are used for triggering actions.
+There are different types of buttons in the design system which are intended
+for different types of actions.
+
+\`\`\`js
+import { Button } from '@dhis2/ui'
+\`\`\``;
 const {
   buttonVariantArgType,
   sizeArgType
 } = _uiConstants.sharedPropTypes;
-
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("".concat(name, ": ").concat(value));
+  return console.log(`${name}: ${value}`);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Button',
   component: _button.Button,
   parameters: {
@@ -49,20 +47,23 @@ var _default = {
     ariaLabel: 'Button'
   },
   argTypes: {
-    primary: { ...buttonVariantArgType
+    primary: {
+      ...buttonVariantArgType
     },
-    secondary: { ...buttonVariantArgType
+    secondary: {
+      ...buttonVariantArgType
     },
-    destructive: { ...buttonVariantArgType
+    destructive: {
+      ...buttonVariantArgType
     },
-    small: { ...sizeArgType
+    small: {
+      ...sizeArgType
     },
-    large: { ...sizeArgType
+    large: {
+      ...sizeArgType
     }
   }
 };
-exports.default = _default;
-
 const DemoIcon24 = /*#__PURE__*/_react.default.createElement("svg", {
   height: "24",
   viewBox: "0 0 24 24",
@@ -72,7 +73,6 @@ const DemoIcon24 = /*#__PURE__*/_react.default.createElement("svg", {
   d: "m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z",
   fill: "inherit"
 }));
-
 const DemoIcon16 = /*#__PURE__*/_react.default.createElement("svg", {
   height: "16",
   viewBox: "0 0 16 16",
@@ -82,16 +82,12 @@ const DemoIcon16 = /*#__PURE__*/_react.default.createElement("svg", {
   d: "m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z",
   fill: "inherit"
 }));
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_button.Button, args);
-
-const Basic = Template.bind({});
-exports.Basic = Basic;
+const Basic = exports.Basic = Template.bind({});
 Basic.args = {
   name: 'Basic button'
 };
-const Primary = Template.bind({});
-exports.Primary = Primary;
+const Primary = exports.Primary = Template.bind({});
 Primary.args = {
   primary: true,
   name: 'Primary button'
@@ -106,8 +102,7 @@ Primary.parameters = {
     }
   }
 };
-const Secondary = Template.bind({});
-exports.Secondary = Secondary;
+const Secondary = exports.Secondary = Template.bind({});
 Secondary.args = {
   secondary: true,
   name: 'Secondary button'
@@ -122,8 +117,7 @@ Secondary.parameters = {
     }
   }
 };
-const Destructive = Template.bind({});
-exports.Destructive = Destructive;
+const Destructive = exports.Destructive = Template.bind({});
 Destructive.args = {
   destructive: true,
   name: 'Destructive button'
@@ -138,14 +132,12 @@ Destructive.parameters = {
     }
   }
 };
-const DestructiveSecondary = Template.bind({});
-exports.DestructiveSecondary = DestructiveSecondary;
+const DestructiveSecondary = exports.DestructiveSecondary = Template.bind({});
 DestructiveSecondary.args = {
   destructive: true,
   secondary: true,
   name: 'Destructive secondary button'
 };
-
 const Disabled = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
   name: "Disabled button"
 }, args)), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
@@ -158,7 +150,6 @@ const Disabled = args => /*#__PURE__*/_react.default.createElement(_react.defaul
   destructive: true,
   name: "Disabled button"
 }, args)));
-
 exports.Disabled = Disabled;
 Disabled.args = {
   disabled: true
@@ -173,8 +164,7 @@ Disabled.parameters = {
     }
   }
 };
-const Small = Template.bind({});
-exports.Small = Small;
+const Small = exports.Small = Template.bind({});
 Small.args = {
   small: true,
   name: 'Small button'
@@ -188,8 +178,7 @@ Small.parameters = {
     }
   }
 };
-const Large = Template.bind({});
-exports.Large = Large;
+const Large = exports.Large = Template.bind({});
 Large.args = {
   large: true,
   name: 'Large button'
@@ -203,20 +192,18 @@ Large.parameters = {
     }
   }
 };
-const InitialFocus = Template.bind({});
-exports.InitialFocus = InitialFocus;
+const InitialFocus = exports.InitialFocus = Template.bind({});
 InitialFocus.args = {
   initialFocus: true,
   name: 'Focused button'
-}; // When enabled, this story grabs focus every time a control is changed
+};
+// When enabled, this story grabs focus every time a control is changed
 // in the docs page. Disabled for better UX
-
 InitialFocus.parameters = {
   docs: {
     disable: true
   }
 };
-
 const Icon = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.Button, args), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
   primary: true
 }, args)), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
@@ -224,7 +211,6 @@ const Icon = args => /*#__PURE__*/_react.default.createElement(_react.default.Fr
 }, args)), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
   destructive: true
 }, args)));
-
 exports.Icon = Icon;
 Icon.args = {
   icon: DemoIcon24,
@@ -241,19 +227,16 @@ Icon.parameters = {
     }
   }
 };
-
 const IconRTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_button.Button, args));
-
 exports.IconRTL = IconRTL;
 IconRTL.args = {
   icon: DemoIcon24,
   name: 'RTL icon button',
   children: 'RTL text'
 };
-const IconOnly = Template.bind({});
-exports.IconOnly = IconOnly;
+const IconOnly = exports.IconOnly = Template.bind({});
 IconOnly.args = {
   icon: DemoIcon24,
   name: 'Icon only button',
@@ -261,24 +244,21 @@ IconOnly.args = {
   title: 'Icon Button',
   ariaLabel: 'Icon Button'
 };
-const IconSmall = Template.bind({});
-exports.IconSmall = IconSmall;
+const IconSmall = exports.IconSmall = Template.bind({});
 IconSmall.args = {
   icon: DemoIcon16,
   small: true,
   name: 'Icon small button',
   children: 'Label me!'
 };
-const IconOnlySmall = Template.bind({});
-exports.IconOnlySmall = IconOnlySmall;
+const IconOnlySmall = exports.IconOnlySmall = Template.bind({});
 IconOnlySmall.args = {
   icon: DemoIcon16,
   small: true,
   name: 'Icon only small button',
   children: null
 };
-const Toggled = Template.bind({});
-exports.Toggled = Toggled;
+const Toggled = exports.Toggled = Template.bind({});
 Toggled.args = {
   toggled: true,
   icon: DemoIcon24,
@@ -298,8 +278,7 @@ Toggled.parameters = {
     }
   }
 };
-const ToggledDisabled = Template.bind({});
-exports.ToggledDisabled = ToggledDisabled;
+const ToggledDisabled = exports.ToggledDisabled = Template.bind({});
 ToggledDisabled.args = {
   toggled: true,
   disabled: true,
@@ -307,7 +286,6 @@ ToggledDisabled.args = {
   name: 'Toggled button',
   children: null
 };
-
 const Loading = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.Button, args), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
   primary: true
 }, args)), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
@@ -315,7 +293,6 @@ const Loading = args => /*#__PURE__*/_react.default.createElement(_react.default
 }, args)), /*#__PURE__*/_react.default.createElement(_button.Button, _extends({
   destructive: true
 }, args)));
-
 exports.Loading = Loading;
 Loading.args = {
   name: 'Loading button',

package/build/cjs/button/button.styles.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
-const _defaultExport = ["button.jsx-1796590446{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-1796590446:disabled{cursor:not-allowed;}", "button.jsx-1796590446:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-1796590446:focus.jsx-1796590446:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:active.jsx-1796590446:focus,button.jsx-1796590446:disabled.jsx-1796590446:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-1796590446:focus{background-color:#f9fafb;}", "button.jsx-1796590446:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-1796590446{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-1796590446{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-1796590446:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-1796590446:active,.primary.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-1796590446:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-1796590446:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-1796590446:active,.secondary.jsx-1796590446:active.jsx-1796590446:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-1796590446:focus{background-color:transparent;}", ".secondary.jsx-1796590446:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-1796590446:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-1796590446:active,.destructive.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-1796590446:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-1796590446:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(_uiConstants.colors.red700, ";fill:").concat(_uiConstants.colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-1796590446:hover{border-color:".concat(_uiConstants.colors.red600, ";background:").concat(_uiConstants.colors.red050, ";color:").concat(_uiConstants.colors.red800, ";fill:").concat(_uiConstants.colors.red800, ";}"), ".destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(_uiConstants.colors.red100, ";border-color:").concat(_uiConstants.colors.red700, ";box-shadow:none;}"), ".destructive.secondary.jsx-1796590446:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-1796590446{padding:0 0 0 5px;}", ".button-icon.jsx-1796590446{margin-inline-end:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:5px;}", ".small.icon-only.jsx-1796590446{padding-block:0;padding-inline-start:5px;padding-inline-end:4px;}", ".small.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:2px;}", ".small.icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:1px;}", ".toggled.jsx-1796590446{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-1796590446:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-1796590446:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-1796590446:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-1796590446{width:16px;height:16px;margin-inline-end:8px;}", ".loader.jsx-1796590446+.button-icon.jsx-1796590446{display:none;}", ".icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 8px 0 4px;margin-inline-start:4px;margin-inline-end:8px;}", ".small.icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 4px;}"];
+const _defaultExport = [`button.jsx-1796590446{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${_uiConstants.colors.grey900};height:36px;padding:0 ${_uiConstants.spacers.dp12};font-size:14px;line-height:16px;border:1px solid ${_uiConstants.colors.grey500};background-color:#f9fafb;}`, "button.jsx-1796590446:disabled{cursor:not-allowed;}", `button.jsx-1796590446:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}`, "button.jsx-1796590446:focus.jsx-1796590446:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-1796590446:active.jsx-1796590446:focus,button.jsx-1796590446:disabled.jsx-1796590446:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", `button.jsx-1796590446:hover{border-color:${_uiConstants.colors.grey500};background-color:${_uiConstants.colors.grey200};}`, `button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:${_uiConstants.colors.grey500};background-color:${_uiConstants.colors.grey200};box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}`, "button.jsx-1796590446:focus{background-color:#f9fafb;}", `button.jsx-1796590446:disabled{border-color:${_uiConstants.colors.grey400};background-color:#f9fafb;box-shadow:none;color:${_uiConstants.theme.disabled};fill:${_uiConstants.theme.disabled};}`, ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", `.large.jsx-1796590446{height:43px;padding:0 ${_uiConstants.spacers.dp24};font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}`, `.primary.jsx-1796590446{border-color:${_uiConstants.theme.primary800};background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};font-weight:500;}`, `.primary.jsx-1796590446:hover{border-color:${_uiConstants.theme.primary800};background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}`, ".primary.jsx-1796590446:active,.primary.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", `.primary.jsx-1796590446:focus{background:${_uiConstants.colors.blue800};border-color:${_uiConstants.colors.blue900};outline-offset:-5px;}`, `.primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};}`, ".secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-1796590446:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-1796590446:active,.secondary.jsx-1796590446:active.jsx-1796590446:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-1796590446:focus{background-color:transparent;}", `.secondary.jsx-1796590446:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:${_uiConstants.theme.disabled};fill:${_uiConstants.theme.disabled};}`, `.destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};font-weight:500;}`, ".destructive.jsx-1796590446:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-1796590446:active,.destructive.jsx-1796590446:active.jsx-1796590446:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-1796590446:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", `.destructive.jsx-1796590446:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};}`, `.destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:${_uiConstants.colors.red700};fill:${_uiConstants.colors.red700};font-weight:400;}`, `.destructive.secondary.jsx-1796590446:hover{border-color:${_uiConstants.colors.red600};background:${_uiConstants.colors.red050};color:${_uiConstants.colors.red800};fill:${_uiConstants.colors.red800};}`, `.destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:${_uiConstants.colors.red100};border-color:${_uiConstants.colors.red700};box-shadow:none;}`, ".destructive.secondary.jsx-1796590446:disabled{background:transparent;border-color:rgba(74,87,104,0.25);color:rgba(183,28,28,0.6);fill:rgba(183,28,28,0.6);}", ".icon-only.jsx-1796590446{padding:0 0 0 5px;}", ".button-icon.jsx-1796590446{margin-inline-end:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:5px;}", ".small.icon-only.jsx-1796590446{padding-block:0;padding-inline-start:5px;padding-inline-end:4px;}", ".small.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:2px;}", ".small.icon-only.jsx-1796590446 .button-icon.jsx-1796590446{margin-inline-end:1px;}", `.toggled.jsx-1796590446{background:${_uiConstants.colors.grey700};border:1px solid ${_uiConstants.colors.grey900};color:${_uiConstants.colors.grey050};fill:${_uiConstants.colors.grey050};}`, `.toggled.jsx-1796590446:focus{background:${_uiConstants.colors.grey800};}`, `.toggled.jsx-1796590446:hover{background:${_uiConstants.colors.grey800};border-color:${_uiConstants.colors.grey900};}`, `.toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:${_uiConstants.colors.grey900};border-color:${_uiConstants.colors.grey900};}`, `.toggled.jsx-1796590446:disabled{background:${_uiConstants.colors.grey500};border-color:${_uiConstants.colors.grey600};color:${_uiConstants.colors.grey050};fill:${_uiConstants.colors.grey050};}`, ".loader.jsx-1796590446{width:16px;height:16px;margin-inline-end:8px;}", ".loader.jsx-1796590446+.button-icon.jsx-1796590446{display:none;}", ".icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 8px 0 4px;margin-inline-start:4px;margin-inline-end:8px;}", ".small.icon-only.jsx-1796590446 .loader.jsx-1796590446{margin:0 4px;}"];
 _defaultExport.__hash = "1796590446";
-var _default = _defaultExport;
-exports.default = _default;
+var _default = exports.default = _defaultExport;

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

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an Button with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Button', 'With initialFocus and onBlur');
+  cy.visitStory('Button', 'With initial focus and on blur');
   cy.focused().should('exist');
 });
 (0, _cypressCucumberPreprocessor.When)('the Button is blurred', () => {

package/build/cjs/button/features/can_be_clicked/index.js

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

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

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

package/build/cjs/button/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Button", {
     return _button.Button;
   }
 });
-
 var _button = require("./button.js");

package/build/cjs/button-strip/button-strip.e2e.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../index.js");
+var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'ButtonStrip'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_index.Button, null, "I am a child"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "I am a child"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "I am a child"));
+exports.WithChildren = WithChildren;