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

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

@@ -4,29 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _splitButton = require("./split-button.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nSimilar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be \"Save and add another\" and \"Save and open\".\n\n```js\nimport { SplitButton } from '@dhis2/ui'\n```\n";
-
+\`\`\`js
+import { SplitButton } from '@dhis2/ui'
+\`\`\`
+`;
 window.onClick = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 const onClick = function () {
   return window.onClick(...arguments);
 };
-
 const DropdownComponent = /*#__PURE__*/_react.default.createElement("span", null, "Dropdown component");
-
-var _default = {
+var _default = exports.default = {
   title: 'Split Button',
   component: _splitButton.SplitButton,
   parameters: {
@@ -44,84 +41,75 @@ var _default = {
     children: 'Label me!'
   },
   argTypes: {
-    small: { ..._uiConstants.sharedPropTypes.sizeArgType
+    small: {
+      ..._uiConstants.sharedPropTypes.sizeArgType
     },
-    large: { ..._uiConstants.sharedPropTypes.sizeArgType
+    large: {
+      ..._uiConstants.sharedPropTypes.sizeArgType
     },
-    primary: { ..._uiConstants.sharedPropTypes.buttonVariantArgType
+    primary: {
+      ..._uiConstants.sharedPropTypes.buttonVariantArgType
     },
-    secondary: { ..._uiConstants.sharedPropTypes.buttonVariantArgType
+    secondary: {
+      ..._uiConstants.sharedPropTypes.buttonVariantArgType
     },
-    destructive: { ..._uiConstants.sharedPropTypes.buttonVariantArgType
+    destructive: {
+      ..._uiConstants.sharedPropTypes.buttonVariantArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Primary = Template.bind({});
-exports.Primary = Primary;
+const Default = exports.Default = Template.bind({});
+const Primary = exports.Primary = Template.bind({});
 Primary.args = {
   primary: true
 };
 Primary.parameters = {
   docs: {
     description: {
-      story: "_**Note**: The dropdown components in the following examples do not appear in the right place on this page. View the following examples in the 'Canvas' tab for the correct placement._"
+      story: `_**Note**: The dropdown components in the following examples do not appear in the right place on this page. View the following examples in the 'Canvas' tab for the correct placement._`
     }
   }
 };
-const Secondary = Template.bind({});
-exports.Secondary = Secondary;
+const Secondary = exports.Secondary = Template.bind({});
 Secondary.args = {
   secondary: true
 };
-const Destructive = Template.bind({});
-exports.Destructive = Destructive;
+const Destructive = exports.Destructive = Template.bind({});
 Destructive.props = {
   destructive: true
 };
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true
 };
-const Small = Template.bind({});
-exports.Small = Small;
+const Small = exports.Small = Template.bind({});
 Small.args = {
   small: true
 };
-const Large = Template.bind({});
-exports.Large = Large;
+const Large = exports.Large = Template.bind({});
 Large.args = {
   large: true
 };
-const InitialFocus = Template.bind({});
-exports.InitialFocus = InitialFocus;
+const InitialFocus = exports.InitialFocus = Template.bind({});
 InitialFocus.args = {
   initialFocus: true
-}; // Disable this on docs page because grabbing focus repeatedly is annoying
-
+};
+// Disable this on docs page because grabbing focus repeatedly is annoying
 InitialFocus.parameters = {
   docs: {
     disable: true
   }
 };
-const WithIcon = Template.bind({});
-exports.WithIcon = WithIcon;
+const WithIcon = exports.WithIcon = Template.bind({});
 WithIcon.args = {
   children: 'Children',
   component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
   icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
 };
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, args));
-
 exports.RTL = RTL;
 RTL.args = {
   children: 'RTL text'

package/build/cjs/split-button/split-button.test.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 require("@testing-library/jest-dom/extend-expect");
-
 var _splitButton = require("./split-button.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('SplitButton', () => {
   afterEach(_react.cleanup);
   it('renders button with children', () => {
@@ -24,13 +19,9 @@ describe('SplitButton', () => {
       queryByTestId
     } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
     const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
-
     _react.fireEvent.click(toggleButton);
-
     expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
-
     _react.fireEvent.click(toggleButton);
-
     expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
   });
   it('renders dropdown content when open is true', () => {
@@ -40,9 +31,7 @@ describe('SplitButton', () => {
       component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
     }));
     const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
-
     _react.fireEvent.click(toggleButton);
-
     expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
   });
   it("does not close dropdown 'Enter' key is pressed", async () => {
@@ -52,16 +41,13 @@ describe('SplitButton', () => {
       component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
     }));
     const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
-
     _react.fireEvent.click(toggleButton);
-
     expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
-
     _react.fireEvent.keyDown(document, {
       key: 'Enter'
-    }); // Use waitFor to wait for the DOM to update
-
+    });
 
+    // Use waitFor to wait for the DOM to update
     await (0, _react.waitFor)(() => {
       expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
     });
@@ -74,16 +60,13 @@ describe('SplitButton', () => {
       component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
     }));
     const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
-
     _react.fireEvent.click(toggleButton);
-
     expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
-
     _react.fireEvent.keyDown(document, {
       key: 'Escape'
-    }); // Use waitFor to wait for the DOM to update
-
+    });
 
+    // Use waitFor to wait for the DOM to update
     await (0, _react.waitFor)(() => {
       expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
     });

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

@@ -1,20 +1,24 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Button } from './button.js';
 window.onClick = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Button', module).add('With onClick', () => /*#__PURE__*/React.createElement(Button, {
+export default {
+  title: 'Button'
+};
+export const WithOnClick = () => /*#__PURE__*/React.createElement(Button, {
   name: "Button",
   value: "default",
   onClick: window.onClick
-}, "Label me!")).add('With initialFocus and onBlur', () => /*#__PURE__*/React.createElement(Button, {
+}, "Label me!");
+export const WithInitialFocusAndOnBlur = () => /*#__PURE__*/React.createElement(Button, {
   name: "Button",
   value: "default",
   initialFocus: true,
   onBlur: window.onBlur
-}, "Label me!")).add('With onFocus', () => /*#__PURE__*/React.createElement(Button, {
+}, "Label me!");
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(Button, {
   name: "Button",
   value: "default",
   onFocus: window.onFocus
-}, "Label me!"));
+}, "Label me!");

package/build/es/button/button.js

@@ -1,9 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
-
-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); }
-
-import { CircularLoader } from '@dhis2-ui/loader';
+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 { CircularLoader } from '@dhis2-ui/loader';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
@@ -43,31 +41,25 @@ export 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 = cx(className, {
     primary,
@@ -91,16 +83,16 @@ export const Button = _ref => {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown
   }, otherProps, {
-    className: "jsx-".concat(styles.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
+    className: `jsx-${styles.__hash}` + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
   }), loading && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "loader"
+    className: `jsx-${styles.__hash}` + " " + "loader"
   }, destructive || primary ? /*#__PURE__*/React.createElement(CircularLoader, {
     extrasmall: true,
     invert: true
   }) : /*#__PURE__*/React.createElement(CircularLoader, {
     extrasmall: true
   })), icon && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "button-icon"
+    className: `jsx-${styles.__hash}` + " " + "button-icon"
   }, icon), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
@@ -112,85 +104,65 @@ Button.defaultProps = {
 Button.propTypes = {
   /** Component to render inside the button */
   children: PropTypes.node,
-
   /** A className that will be passed to the `<button>` element */
   className: PropTypes.string,
-
   /**
    * A string that will be applied as a `data-test` attribute on the button element
    * for identification during testing
    */
   dataTest: PropTypes.string,
-
   /**
    * Applies 'destructive' button appearance, implying a dangerous action.
    */
   destructive: PropTypes.bool,
-
   /** Applies a greyed-out appearance and makes the button non-interactive  */
   disabled: PropTypes.bool,
-
   /** An icon element to display inside the button */
   icon: PropTypes.element,
-
   /** Use this variant to capture the initial focus on the page. */
   initialFocus: PropTypes.bool,
-
   /** Makes the button large. Mutually exclusive with `small` */
   large: sharedPropTypes.sizePropType,
-
   /** Sets the button into a loading state */
   loading: PropTypes.bool,
-
   /**
    * Sets `name` attribute on button element.
    * Gets passed as part of the first argument to callbacks (see `onClick`).
    */
   name: PropTypes.string,
-
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
   primary: PropTypes.bool,
-
   /**
    * Applies 'secondary' button appearance.
    */
   secondary: PropTypes.bool,
-
   /** Makes the button small. Mutually exclusive with `large` prop */
   small: sharedPropTypes.sizePropType,
-
   /** Tab index for focusing the button with a keyboard */
   tabIndex: PropTypes.string,
-
   /** Changes appearance of button to an on/off state */
   toggled: PropTypes.bool,
-
   /** Sets `type` attribute on `<button>` element */
   type: PropTypes.oneOf(['submit', 'reset', 'button']),
-
   /**
    * Value associated with the button.
    * Gets passed as part of the first argument to callbacks (see `onClick`).
    */
   value: PropTypes.string,
-
   /**
    * Callback to trigger on de-focus (blur).
    * Called with same args as `onClick`
    * */
   onBlur: PropTypes.func,
-
   /**
    * Callback to trigger on click.
    * Called with args `({ value, name }, event)`
    * */
   onClick: PropTypes.func,
-
   /** Callback to trigger on focus. Called with same args as `onClick` */
   onFocus: PropTypes.func,
-
   /** Callback to trigger on key-down. Called with same args as `onClick` */
   onKeyDown: PropTypes.func
 };

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

@@ -1,23 +1,27 @@
-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 { Button } from './button.js'; // Note: make sure 'fenced code blocks' are not indentend in this template string
+import { Button } from './button.js';
+
+// Note: make sure 'fenced code blocks' are not indentend in this template string
+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.
 
-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```";
+\`\`\`js
+import { Button } from '@dhis2/ui'
+\`\`\``;
 const {
   buttonVariantArgType,
   sizeArgType
 } = sharedPropTypes;
-
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("".concat(name, ": ").concat(value));
+  return console.log(`${name}: ${value}`);
 };
-
 export default {
   title: 'Button',
   component: Button,
@@ -37,15 +41,20 @@ export default {
     ariaLabel: 'Button'
   },
   argTypes: {
-    primary: { ...buttonVariantArgType
+    primary: {
+      ...buttonVariantArgType
     },
-    secondary: { ...buttonVariantArgType
+    secondary: {
+      ...buttonVariantArgType
     },
-    destructive: { ...buttonVariantArgType
+    destructive: {
+      ...buttonVariantArgType
     },
-    small: { ...sizeArgType
+    small: {
+      ...sizeArgType
     },
-    large: { ...sizeArgType
+    large: {
+      ...sizeArgType
     }
   }
 };
@@ -67,9 +76,7 @@ const DemoIcon16 = /*#__PURE__*/React.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.createElement(Button, args);
-
 export const Basic = Template.bind({});
 Basic.args = {
   name: 'Basic button'
@@ -182,9 +189,9 @@ export const 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

package/build/es/button/button.styles.js

@@ -1,4 +1,4 @@
 import { colors, theme, spacers } from '@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(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-1796590446:disabled{cursor:not-allowed;}", "button.jsx-1796590446:focus{outline:3px solid ".concat(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(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:".concat(colors.grey500, ";background-color:").concat(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(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-1796590446{height:43px;padding:0 ".concat(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(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-1796590446:hover{border-color:".concat(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(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(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(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(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(colors.white, ";fill:").concat(colors.white, ";}"), ".destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:".concat(colors.red700, ";fill:").concat(colors.red700, ";font-weight:400;}"), ".destructive.secondary.jsx-1796590446:hover{border-color:".concat(colors.red600, ";background:").concat(colors.red050, ";color:").concat(colors.red800, ";fill:").concat(colors.red800, ";}"), ".destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(colors.red100, ";border-color:").concat(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(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-1796590446:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-1796590446:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-1796590446:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(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:${colors.grey900};height:36px;padding:0 ${spacers.dp12};font-size:14px;line-height:16px;border:1px solid ${colors.grey500};background-color:#f9fafb;}`, "button.jsx-1796590446:disabled{cursor:not-allowed;}", `button.jsx-1796590446:focus{outline:3px solid ${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:${colors.grey500};background-color:${colors.grey200};}`, `button.jsx-1796590446:active,button.jsx-1796590446:active.jsx-1796590446:focus{border-color:${colors.grey500};background-color:${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:${colors.grey400};background-color:#f9fafb;box-shadow:none;color:${theme.disabled};fill:${theme.disabled};}`, ".small.jsx-1796590446{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", `.large.jsx-1796590446{height:43px;padding:0 ${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:${theme.primary800};background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:${colors.white};fill:${colors.white};font-weight:500;}`, `.primary.jsx-1796590446:hover{border-color:${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:${colors.blue800};border-color:${colors.blue900};outline-offset:-5px;}`, `.primary.jsx-1796590446:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:${colors.white};fill:${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:${theme.disabled};fill:${theme.disabled};}`, `.destructive.jsx-1796590446{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:${colors.white};fill:${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:${colors.white};fill:${colors.white};}`, `.destructive.secondary.jsx-1796590446{border-color:rgba(74,87,104,0.25);background:transparent;color:${colors.red700};fill:${colors.red700};font-weight:400;}`, `.destructive.secondary.jsx-1796590446:hover{border-color:${colors.red600};background:${colors.red050};color:${colors.red800};fill:${colors.red800};}`, `.destructive.secondary.jsx-1796590446:active,.destructive.secondary.jsx-1796590446:active.jsx-1796590446:focus{background:${colors.red100};border-color:${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:${colors.grey700};border:1px solid ${colors.grey900};color:${colors.grey050};fill:${colors.grey050};}`, `.toggled.jsx-1796590446:focus{background:${colors.grey800};}`, `.toggled.jsx-1796590446:hover{background:${colors.grey800};border-color:${colors.grey900};}`, `.toggled.jsx-1796590446:active,.toggled.jsx-1796590446:active.jsx-1796590446:focus{background:${colors.grey900};border-color:${colors.grey900};}`, `.toggled.jsx-1796590446:disabled{background:${colors.grey500};border-color:${colors.grey600};color:${colors.grey050};fill:${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";
 export default _defaultExport;

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

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 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');
 });
 When('the Button is blurred', () => {

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Button } from '../index.js';
+import { ButtonStrip } from './index.js';
+export default {
+  title: 'ButtonStrip'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, null, "I am a child"), /*#__PURE__*/React.createElement(Button, null, "I am a child"), /*#__PURE__*/React.createElement(Button, null, "I am a child"));

package/build/es/button-strip/button-strip.js

@@ -4,7 +4,6 @@ import { spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Children } from 'react';
-
 const ButtonStrip = _ref => {
   let {
     className,
@@ -25,9 +24,8 @@ const ButtonStrip = _ref => {
   }, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3148822533",
     dynamic: [spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", ".box.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp8, ";}"), ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
 };
-
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);
 ButtonStrip.defaultProps = {
   dataTest: 'dhis2-uicore-buttonstrip'
@@ -36,10 +34,8 @@ ButtonStrip.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Horizontal alignment for buttons. Mutually exclusive with `middle` prop */
   end: alignmentPropType,
-
   /** Horizontal alignment. Mutually exclusive with `end` prop */
   middle: alignmentPropType
 };

package/build/es/button-strip/{button-strip.stories.js → button-strip.prod.stories.js}

@@ -1,8 +1,13 @@
 import React from 'react';
 import { Button, SplitButton } from '../index.js';
 import { ButtonStrip } from './index.js';
-const description = "\nA wrapper for buttons to add spacing and alignment.\n\n```js\nimport { ButtonStrip } from '@dhis2/ui'\n```\n";
+const description = `
+A wrapper for buttons to add spacing and alignment.
 
+\`\`\`js
+import { ButtonStrip } from '@dhis2/ui'
+\`\`\`
+`;
 const Wrapper = fn => /*#__PURE__*/React.createElement("div", {
   style: {
     width: '100%',
@@ -10,7 +15,6 @@ const Wrapper = fn => /*#__PURE__*/React.createElement("div", {
     padding: 8
   }
 }, fn());
-
 const alignmentArgType = {
   table: {
     type: {
@@ -34,9 +38,11 @@ export default {
     }
   },
   argTypes: {
-    middle: { ...alignmentArgType
+    middle: {
+      ...alignmentArgType
     },
-    end: { ...alignmentArgType
+    end: {
+      ...alignmentArgType
     }
   }
 };