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

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

@@ -1,38 +1,46 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { DropdownButton } from './index.js';
 window.onClick = window.Cypress && window.Cypress.cy.stub();
-storiesOf('DropdownButton', module).add('Default', () => /*#__PURE__*/React.createElement(DropdownButton, {
+export default {
+  title: 'DropdownButton'
+};
+export const Default = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Content")
-}, "Button")).add('With onClick', () => /*#__PURE__*/React.createElement(DropdownButton, {
+}, "Button");
+export const WithOnClick = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   onClick: window.onClick,
   component: /*#__PURE__*/React.createElement("div", null, "Content")
-}, "Button")).add('With children', () => /*#__PURE__*/React.createElement(DropdownButton, {
+}, "Button");
+export const WithChildren = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "I am a child")).add('With component', () => /*#__PURE__*/React.createElement(DropdownButton, {
+}, "I am a child");
+export const WithComponent = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "I am a component")
-})).add('With icon', () => /*#__PURE__*/React.createElement(DropdownButton, {
+});
+export const WithIcon = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "I am a component"),
   icon: 'Icon'
-})).add('With initialFocus', () => /*#__PURE__*/React.createElement(DropdownButton, {
+});
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Content"),
   initialFocus: true
-})).add('Disabled with onClick', () => /*#__PURE__*/React.createElement(DropdownButton, {
+});
+export const DisabledWithOnClick = () => /*#__PURE__*/React.createElement(DropdownButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Content"),
   onClick: window.onClick,
   disabled: true
-}));
+});

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

@@ -1,15 +1,14 @@
 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; }
-
-import { Layer } from '@dhis2-ui/layer';
-import { Popper } from '@dhis2-ui/popper';
+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 { requiredIf } from '@dhis2/prop-types';
 import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Button } from '../index.js';
-
+import { Button } from '../button/index.js';
 function ArrowDown(_ref) {
   let {
     className
@@ -25,11 +24,9 @@ function ArrowDown(_ref) {
     id: "2347926856"
   }, ["svg.jsx-2347926856{fill:inherit;height:12px;width:12px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 ArrowDown.propTypes = {
   className: PropTypes.string
 };
-
 function ArrowUp(_ref2) {
   let {
     className
@@ -46,27 +43,22 @@ function ArrowUp(_ref2) {
     id: "2347926856"
   }, ["svg.jsx-2347926856{fill:inherit;height:12px;width:12px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 ArrowUp.propTypes = {
   className: PropTypes.string
 };
 const arrow = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1035250400"
-  }, [".jsx-1035250400{margin-inline-start:".concat(spacers.dp12, ";}")]),
+  }, [`.jsx-1035250400{margin-inline-start:${spacers.dp12};}`]),
   className: "jsx-1035250400"
 };
-
 class DropdownButton extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       open: false
     });
-
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "handleKeyDown", event => {
       if (event.key === 'Escape' && this.state.open) {
         event.preventDefault();
@@ -76,13 +68,11 @@ class DropdownButton extends Component {
         });
       }
     });
-
     _defineProperty(this, "onClickHandler", (_ref3, event) => {
       let {
         name,
         value
       } = _ref3;
-
       const handleClick = open => {
         if (this.props.onClick) {
           this.props.onClick({
@@ -92,7 +82,6 @@ class DropdownButton extends Component {
           }, event);
         }
       };
-
       if (typeof this.props.open === 'boolean') {
         handleClick(!this.props.open);
       } else {
@@ -104,15 +93,12 @@ class DropdownButton extends Component {
       }
     });
   }
-
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
-
   render() {
     const {
       component,
@@ -160,16 +146,14 @@ class DropdownButton extends Component {
       onBackdropClick: this.onClickHandler,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
-      dataTest: "".concat(dataTest, "-popper"),
+      dataTest: `${dataTest}-popper`,
       placement: "bottom-start",
       reference: this.anchorRef
     }, component)), arrow.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "3163060161"
     }, ["div.jsx-3163060161{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;color:inherit;white-space:nowrap;}"]));
   }
-
 }
-
 DropdownButton.defaultProps = {
   dataTest: 'dhis2-uicore-dropdownbutton'
 };
@@ -177,48 +161,37 @@ DropdownButton.propTypes = {
   /** Children to render inside the buton */
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** Component to show/hide when button is clicked */
   component: PropTypes.element,
   dataTest: PropTypes.string,
-
   /**
    * Applies 'destructive' button appearance, implying a dangerous action.
    */
   destructive: PropTypes.bool,
-
   /** Make the button non-interactive */
   disabled: PropTypes.bool,
   icon: PropTypes.element,
-
   /** Grants button initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Button size. Mutually exclusive with `small` prop */
   large: sharedPropTypes.sizePropType,
   name: PropTypes.string,
-
   /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
   open: PropTypes.bool,
-
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
   primary: PropTypes.bool,
-
   /**
    * Applies 'secondary' button appearance.
    */
   secondary: PropTypes.bool,
-
   /** Button size. Mutually exclusive with `large` prop */
   small: sharedPropTypes.sizePropType,
   tabIndex: PropTypes.string,
-
   /** Type of button. Can take advantage of different default behavior */
   type: PropTypes.oneOf(['submit', 'reset', 'button']),
   value: PropTypes.string,
-
   /**
    * Callback triggered on click.
    * Called with signature `({ name: string, value: string, open: bool }, event)`

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

@@ -1,10 +1,15 @@
-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 { FlyoutMenu, MenuItem } from '@dhis2-ui/menu';
+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 { FlyoutMenu, MenuItem } from '@dhis2-ui/menu';
 import React, { useState } from 'react';
 import { DropdownButton } from './index.js';
-const description = "\nPresents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.\n\n```js\nimport { DropdownButton } from '@dhis2/ui'\n```\n";
+const description = `
+Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
+
+\`\`\`js
+import { DropdownButton } from '@dhis2/ui'
+\`\`\`
+`;
 const Simple = /*#__PURE__*/React.createElement("span", null, "Simplest thing");
 const {
   sizeArgType,
@@ -21,15 +26,20 @@ export default {
     }
   },
   argTypes: {
-    primary: { ...buttonVariantArgType
+    primary: {
+      ...buttonVariantArgType
     },
-    secondary: { ...buttonVariantArgType
+    secondary: {
+      ...buttonVariantArgType
     },
-    destructive: { ...buttonVariantArgType
+    destructive: {
+      ...buttonVariantArgType
     },
-    small: { ...sizeArgType
+    small: {
+      ...sizeArgType
     },
-    large: { ...sizeArgType
+    large: {
+      ...sizeArgType
     }
   },
   // Default args for all stories (can be overridden)
@@ -40,9 +50,7 @@ export default {
     children: 'Label me!'
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(DropdownButton, args);
-
 export const Default = Template.bind({});
 export const WithClick = Template.bind({});
 WithClick.args = {
@@ -86,9 +94,9 @@ WithMenu.args = {
   }), /*#__PURE__*/React.createElement(MenuItem, {
     label: "Item 3"
   }))
-}; // FlyoutMenu needs iframe
+};
+// FlyoutMenu needs iframe
 // But docs page down too much with iframe, so disabled
-
 WithMenu.parameters = {
   docs: {
     disable: true
@@ -103,29 +111,23 @@ InitialFocus.args = {
  * a control is changed, therefore it is omitted from the docs page (but
  * not the normal 'canvas' story viewer)
  */
-
 InitialFocus.parameters = {
   docs: {
     disable: true
   }
 };
-
 const OpenTemplate = args => {
   return /*#__PURE__*/React.createElement(DropdownButton, args);
 };
-
 export const Open = OpenTemplate.bind({});
 Open.args = {
   open: true,
   component: Simple,
   onClick: () => {}
 };
-
 const ManualControlTemplate = args => {
   const [isOpen, setIsOpen] = useState(true);
-
   const handleOpen = () => setIsOpen(false);
-
   const Menu = /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "First option does nothing"), /*#__PURE__*/React.createElement("li", {
     onClick: handleOpen
   }, "Close the dropdown"));
@@ -135,7 +137,6 @@ const ManualControlTemplate = args => {
     component: Menu
   }));
 };
-
 export const ManualControl = ManualControlTemplate.bind({});
 ManualControl.args = {};
 export const RTL = args => /*#__PURE__*/React.createElement("div", {

package/build/es/dropdown-button/features/accepts_initial_focus/index.js

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

package/build/es/dropdown-button/features/button_is_clickable/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a DropdownButton with onClick handler is rendered', () => {
-  cy.visitStory('DropdownButton', 'With onClick');
+  cy.visitStory('DropdownButton', 'With on click');
 });
 Then('the onClick handler is called', () => {
   cy.window().should(win => {

package/build/es/dropdown-button/features/can_be_disabled/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a disabled DropdownButton with onClick handler is rendered', () => {
-  cy.visitStory('DropdownButton', 'Disabled with onClick');
+  cy.visitStory('DropdownButton', 'Disabled with on click');
 });
 Then('the onClick handler is not called', () => {
   cy.window().should(win => {

package/build/es/split-button/features/accepts_initial_focus/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SplitButton with initialFocus is rendered', () => {
-  cy.visitStory('SplitButton', 'With initialFocus');
+  cy.visitStory('SplitButton', 'With initial focus');
 });
 Then('the SplitButton button is focused', () => {
   cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-splitbutton-button');

package/build/es/split-button/features/button_is_clickable/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SplitButton with onClick hander is rendered', () => {
-  cy.visitStory('SplitButton', 'With onClick');
+  cy.visitStory('SplitButton', 'With on click');
 });
 Then('the onClick handler is called', () => {
   cy.window().its('onClick').should('be.calledWith', {

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

@@ -1,33 +1,40 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { SplitButton } from './split-button.js';
 window.onClick = window.Cypress && window.Cypress.cy.stub();
-storiesOf('SplitButton', module).add('Default', () => /*#__PURE__*/React.createElement(SplitButton, {
+export default {
+  title: 'SplitButton'
+};
+export const Default = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "Label me!")).add('With onClick', () => /*#__PURE__*/React.createElement(SplitButton, {
+}, "Label me!");
+export const WithOnClick = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   onClick: window.onClick
-}, "Label me!")).add('With children', () => /*#__PURE__*/React.createElement(SplitButton, {
+}, "Label me!");
+export const WithChildren = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "I am a child")).add('With icon', () => /*#__PURE__*/React.createElement(SplitButton, {
+}, "I am a child");
+export const WithIcon = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   icon: /*#__PURE__*/React.createElement("div", null, "Icon")
-}, "Children")).add('With initialFocus', () => /*#__PURE__*/React.createElement(SplitButton, {
+}, "Children");
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   initialFocus: true
-}, "Children")).add('With disabled', () => /*#__PURE__*/React.createElement(SplitButton, {
+}, "Children");
+export const WithDisabled = () => /*#__PURE__*/React.createElement(SplitButton, {
   name: "Button",
   value: "default",
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   disabled: true
-}, "Children"));
+}, "Children");

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

@@ -1,33 +1,29 @@
 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; }
-
-import { Layer } from '@dhis2-ui/layer';
-import { Popper } from '@dhis2-ui/popper';
+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 { spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import { IconChevronUp16, IconChevronDown16 } from '@dhis2/ui-icons';
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Button } from '../index.js';
+import { Button } from '../button/index.js';
 import i18n from '../locales/index.js';
 const rightButton = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2502148942"
-  }, ["button.jsx-2502148942{padding:0 ".concat(spacers.dp12, ";}")]),
+  }, [`button.jsx-2502148942{padding:0 ${spacers.dp12};}`]),
   className: "jsx-2502148942"
 };
-
 class SplitButton extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       open: false
     });
-
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "handleKeyDown", event => {
       if (event.key === 'Escape' && this.state.open) {
         event.preventDefault();
@@ -38,7 +34,6 @@ class SplitButton extends Component {
         this.anchorRef.current && this.anchorRef.current.focus();
       }
     });
-
     _defineProperty(this, "onClick", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
@@ -48,22 +43,18 @@ class SplitButton extends Component {
         }, event);
       }
     });
-
     _defineProperty(this, "onToggle", () => {
       this.setState(prevState => ({
         open: !prevState.open
       }));
     });
   }
-
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
-
   render() {
     const {
       open
@@ -106,7 +97,7 @@ class SplitButton extends Component {
       tabIndex: tabIndex,
       className: cx(className),
       initialFocus: initialFocus,
-      dataTest: "".concat(dataTest, "-button")
+      dataTest: `${dataTest}-button`
     }, children), /*#__PURE__*/React.createElement(Button, {
       name: name,
       value: value,
@@ -120,69 +111,56 @@ class SplitButton extends Component {
       type: type,
       tabIndex: tabIndex,
       className: cx(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle"),
+      dataTest: `${dataTest}-toggle`,
       title: i18n.t('Toggle dropdown'),
       "aria-label": i18n.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/React.createElement(Layer, {
       onBackdropClick: this.onToggle,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
-      dataTest: "".concat(dataTest, "-menu"),
+      dataTest: `${dataTest}-menu`,
       placement: "bottom-end",
       reference: this.anchorRef
     }, component)), rightButton.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "2116647326"
     }, ["div.jsx-2116647326{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-2116647326>button:first-child{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0;}", "div.jsx-2116647326>button:last-child{border-start-start-radius:0;border-end-start-radius:0;}"]));
   }
-
 }
-
 SplitButton.defaultProps = {
   dataTest: 'dhis2-uicore-splitbutton'
 };
 SplitButton.propTypes = {
   children: PropTypes.string,
   className: PropTypes.string,
-
   /** Component to render when the dropdown is opened */
   component: PropTypes.element,
   dataTest: PropTypes.string,
-
   /**
    * Applies 'destructive' button appearance, implying a dangerous action.
    */
   destructive: PropTypes.bool,
-
   /** Disables the button and makes it uninteractive */
   disabled: PropTypes.bool,
-
   /** An icon to add inside the button */
   icon: PropTypes.element,
-
   /** Grants the button the initial focus */
   initialFocus: PropTypes.bool,
-
   /** Changes button size. Mutually exclusive with `small` prop */
   large: sharedPropTypes.sizePropType,
   name: PropTypes.string,
-
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
   primary: PropTypes.bool,
-
   /**
    * Applies 'secondary' button appearance.
    */
   secondary: PropTypes.bool,
-
   /** Changes button size. Mutually exclusive with `large` prop */
   small: sharedPropTypes.sizePropType,
   tabIndex: PropTypes.string,
-
   /** Type of button. Applied to html `button` element */
   type: PropTypes.oneOf(['submit', 'reset', 'button']),
-
   /** Value associated with the button. Passed in object to onClick handler */
   value: PropTypes.string,
   onClick: PropTypes.func

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

@@ -1,17 +1,20 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { SplitButton } from './split-button.js';
-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";
+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".
 
+\`\`\`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.createElement("span", null, "Dropdown component");
 export default {
   title: 'Split Button',
@@ -31,21 +34,24 @@ export default {
     children: 'Label me!'
   },
   argTypes: {
-    small: { ...sharedPropTypes.sizeArgType
+    small: {
+      ...sharedPropTypes.sizeArgType
     },
-    large: { ...sharedPropTypes.sizeArgType
+    large: {
+      ...sharedPropTypes.sizeArgType
     },
-    primary: { ...sharedPropTypes.buttonVariantArgType
+    primary: {
+      ...sharedPropTypes.buttonVariantArgType
     },
-    secondary: { ...sharedPropTypes.buttonVariantArgType
+    secondary: {
+      ...sharedPropTypes.buttonVariantArgType
     },
-    destructive: { ...sharedPropTypes.buttonVariantArgType
+    destructive: {
+      ...sharedPropTypes.buttonVariantArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(SplitButton, args);
-
 export const Default = Template.bind({});
 export const Primary = Template.bind({});
 Primary.args = {
@@ -54,7 +60,7 @@ Primary.args = {
 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._`
     }
   }
 };
@@ -81,8 +87,8 @@ Large.args = {
 export const 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