@dhis2-ui/button 9.4.2 → 9.5.0-alpha.1

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

@@ -11,6 +11,37 @@ var _button = require("../button.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('<Button>', () => {
+  let consoleSpy;
+  beforeEach(() => {
+    consoleSpy = jest.spyOn(console, 'debug').mockImplementation();
+  });
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+  describe('warning for missing aria-label and title', () => {
+    it('No warning  if children exist but aria-label and title is missing', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('does not warn if aria-label and title is present', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
+        "aria-label": "Test",
+        title: "Test"
+      }, "Children content"));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('warns if no children are present with no arial-label and title', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
+      expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
+    });
+    it('No warning if there are no children but arial label and title', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
+        "aria-label": "Test",
+        title: "Test"
+      }));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+  });
   it('renders a default data-test attribute', () => {
     const dataTest = 'dhis2-uicore-button';
     const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {

package/build/cjs/button/button.js

@@ -58,6 +58,14 @@ const Button = _ref => {
       ref.current.focus();
     }
   }, [initialFocus, ref.current]);
+  const {
+    '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,

package/build/cjs/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Toggle dropdown": "Toggle dropdown"
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+const namespace = 'default';
+
+_d2I18n.default.addResources('en', namespace, _translations.default);
+
+var _default = _d2I18n.default;
+exports.default = _default;

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

@@ -23,6 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../index.js");
 
+var _index2 = _interopRequireDefault(require("../locales/index.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; }
@@ -48,6 +50,18 @@ class SplitButton extends _react.Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
 
+    _defineProperty(this, "handleKeyDown", event => {
+      event.preventDefault();
+
+      if (event.key === 'Escape' && this.state.open) {
+        event.stopPropagation();
+        this.setState({
+          open: false
+        });
+        this.anchorRef.current && this.anchorRef.current.focus();
+      }
+    });
+
     _defineProperty(this, "onClick", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
@@ -58,9 +72,19 @@ class SplitButton extends _react.Component {
       }
     });
 
-    _defineProperty(this, "onToggle", () => this.setState({
-      open: !this.state.open
-    }));
+    _defineProperty(this, "onToggle", () => {
+      this.setState(prevState => ({
+        open: !prevState.open
+      }));
+    });
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
   render() {
@@ -119,7 +143,9 @@ class SplitButton extends _react.Component {
       type: type,
       tabIndex: tabIndex,
       className: (0, _classnames.default)(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle")
+      dataTest: "".concat(dataTest, "-toggle"),
+      title: _index2.default.t('Toggle dropdown'),
+      "aria-label": _index2.default.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
       onBackdropClick: this.onToggle,
       transparent: true

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

@@ -0,0 +1,99 @@
+"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 }; }
+
+describe('SplitButton', () => {
+  afterEach(_react.cleanup);
+  it('renders button with children', () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
+    expect(getByText('Click me')).toBeInTheDocument();
+  });
+  it('toggles dropdown when left button is clicked', () => {
+    const {
+      getByTestId,
+      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', () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.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 () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.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
+
+
+    await (0, _react.waitFor)(() => {
+      expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    });
+  });
+  it('closes dropdown when escape key is pressed', async () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.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
+
+
+    await (0, _react.waitFor)(() => {
+      expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+    });
+  });
+  it('adds title and aria-label attributes to the right button', () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
+    expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
+  });
+});

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

@@ -3,6 +3,37 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { Button } from '../button.js';
 describe('<Button>', () => {
+  let consoleSpy;
+  beforeEach(() => {
+    consoleSpy = jest.spyOn(console, 'debug').mockImplementation();
+  });
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+  describe('warning for missing aria-label and title', () => {
+    it('No warning  if children exist but aria-label and title is missing', () => {
+      render( /*#__PURE__*/React.createElement(Button, null, "Children content"));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('does not warn if aria-label and title is present', () => {
+      render( /*#__PURE__*/React.createElement(Button, {
+        "aria-label": "Test",
+        title: "Test"
+      }, "Children content"));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('warns if no children are present with no arial-label and title', () => {
+      render( /*#__PURE__*/React.createElement(Button, null));
+      expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
+    });
+    it('No warning if there are no children but arial label and title', () => {
+      render( /*#__PURE__*/React.createElement(Button, {
+        "aria-label": "Test",
+        title: "Test"
+      }));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+  });
   it('renders a default data-test attribute', () => {
     const dataTest = 'dhis2-uicore-button';
     const wrapper = mount( /*#__PURE__*/React.createElement(Button, {

package/build/es/button/button.js

@@ -39,6 +39,14 @@ export const Button = _ref => {
       ref.current.focus();
     }
   }, [initialFocus, ref.current]);
+  const {
+    '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,

package/build/es/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Toggle dropdown": "Toggle dropdown"
+}

package/build/es/locales/index.js

@@ -0,0 +1,13 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+i18n.addResources('en', namespace, enTranslations);
+export default i18n;

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

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Button } from '../index.js';
+import i18n from '../locales/index.js';
 const rightButton = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2502148942"
@@ -27,6 +28,18 @@ class SplitButton extends Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(this, "handleKeyDown", event => {
+      event.preventDefault();
+
+      if (event.key === 'Escape' && this.state.open) {
+        event.stopPropagation();
+        this.setState({
+          open: false
+        });
+        this.anchorRef.current && this.anchorRef.current.focus();
+      }
+    });
+
     _defineProperty(this, "onClick", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
@@ -37,9 +50,19 @@ class SplitButton extends Component {
       }
     });
 
-    _defineProperty(this, "onToggle", () => this.setState({
-      open: !this.state.open
-    }));
+    _defineProperty(this, "onToggle", () => {
+      this.setState(prevState => ({
+        open: !prevState.open
+      }));
+    });
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
   render() {
@@ -98,7 +121,9 @@ class SplitButton extends Component {
       type: type,
       tabIndex: tabIndex,
       className: cx(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle")
+      dataTest: "".concat(dataTest, "-toggle"),
+      title: i18n.t('Toggle dropdown'),
+      "aria-label": i18n.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/React.createElement(Layer, {
       onBackdropClick: this.onToggle,
       transparent: true

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

@@ -0,0 +1,77 @@
+import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { SplitButton } from './split-button.js';
+describe('SplitButton', () => {
+  afterEach(cleanup);
+  it('renders button with children', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
+    expect(getByText('Click me')).toBeInTheDocument();
+  });
+  it('toggles dropdown when left button is clicked', () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.click(toggleButton);
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+  });
+  it('renders dropdown content when open is true', () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+  });
+  it("does not close dropdown 'Enter' key is pressed", async () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.keyDown(document, {
+      key: 'Enter'
+    }); // Use waitFor to wait for the DOM to update
+
+    await waitFor(() => {
+      expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    });
+  });
+  it('closes dropdown when escape key is pressed', async () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.keyDown(document, {
+      key: 'Escape'
+    }); // Use waitFor to wait for the DOM to update
+
+    await waitFor(() => {
+      expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+    });
+  });
+  it('adds title and aria-label attributes to the right button', () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
+    expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.4.2",
+    "version": "9.5.0-alpha.1",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -33,11 +33,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.4.2",
-        "@dhis2-ui/loader": "9.4.2",
-        "@dhis2-ui/popper": "9.4.2",
-        "@dhis2/ui-constants": "9.4.2",
-        "@dhis2/ui-icons": "9.4.2",
+        "@dhis2-ui/layer": "9.5.0-alpha.1",
+        "@dhis2-ui/loader": "9.5.0-alpha.1",
+        "@dhis2-ui/popper": "9.5.0-alpha.1",
+        "@dhis2/ui-constants": "9.5.0-alpha.1",
+        "@dhis2/ui-icons": "9.5.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },