@dhis2-ui/button 9.3.0-alpha.2 → 9.4.0-alpha.1

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

@@ -31,6 +31,17 @@ describe('<Button>', () => {
     });
     expect(actual.length).toBe(1);
   });
+  it('has the accessibility attributes', () => {
+    const dataTest = 'button-data-test';
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
+      dataTest: dataTest,
+      ariaLabel: "test aria label",
+      title: "title for button"
+    }));
+    const buttonElement = wrapper.find('button').getDOMNode();
+    expect(buttonElement).toHaveAttribute('title', 'title for button');
+    expect(buttonElement).toHaveAttribute('ariaLabel', 'test aria label');
+  });
   describe('toggle', () => {
     it('should have class "toggled" if toggled-prop is true', () => {
       const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {

package/build/cjs/button/button.js

@@ -25,6 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
+
 const Button = _ref => {
   let {
     children,
@@ -47,7 +49,8 @@ const Button = _ref => {
     onClick,
     onFocus,
     onKeyDown,
-    loading
+    loading,
+    ...otherProps
   } = _ref;
   const ref = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
@@ -87,7 +90,7 @@ const Button = _ref => {
     toggled,
     loading: loading
   });
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement("button", _extends({
     ref: ref,
     name: name,
     "data-test": dataTest,
@@ -97,9 +100,10 @@ const Button = _ref => {
     onBlur: handleBlur,
     onClick: handleClick,
     onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (buttonClassName || "")
-  }, loading && /*#__PURE__*/_react.default.createElement("span", {
+    onKeyDown: handleKeyDown
+  }, otherProps, {
+    className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
+  }), loading && /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "loader"
   }, destructive || primary ? /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
     extrasmall: true,

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

@@ -44,7 +44,9 @@ var _default = {
   args: {
     children: 'Label me!',
     value: 'default',
-    onClick: logger
+    onClick: logger,
+    title: 'Button',
+    ariaLabel: 'Button'
   },
   argTypes: {
     primary: { ...buttonVariantArgType
@@ -255,7 +257,9 @@ exports.IconOnly = IconOnly;
 IconOnly.args = {
   icon: DemoIcon24,
   name: 'Icon only button',
-  children: null
+  children: null,
+  title: 'Icon Button',
+  ariaLabel: 'Icon Button'
 };
 const IconSmall = Template.bind({});
 exports.IconSmall = IconSmall;

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

@@ -23,6 +23,17 @@ describe('<Button>', () => {
     });
     expect(actual.length).toBe(1);
   });
+  it('has the accessibility attributes', () => {
+    const dataTest = 'button-data-test';
+    const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
+      dataTest: dataTest,
+      ariaLabel: "test aria label",
+      title: "title for button"
+    }));
+    const buttonElement = wrapper.find('button').getDOMNode();
+    expect(buttonElement).toHaveAttribute('title', 'title for button');
+    expect(buttonElement).toHaveAttribute('ariaLabel', 'test aria label');
+  });
   describe('toggle', () => {
     it('should have class "toggled" if toggled-prop is true', () => {
       const wrapper = mount( /*#__PURE__*/React.createElement(Button, {

package/build/es/button/button.js

@@ -1,4 +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';
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
@@ -27,7 +30,8 @@ export const Button = _ref => {
     onClick,
     onFocus,
     onKeyDown,
-    loading
+    loading,
+    ...otherProps
   } = _ref;
   const ref = useRef();
   useEffect(() => {
@@ -67,7 +71,7 @@ export const Button = _ref => {
     toggled,
     loading: loading
   });
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({
     ref: ref,
     name: name,
     "data-test": dataTest,
@@ -77,9 +81,10 @@ export const Button = _ref => {
     onBlur: handleBlur,
     onClick: handleClick,
     onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    className: "jsx-".concat(styles.__hash) + " " + (buttonClassName || "")
-  }, loading && /*#__PURE__*/React.createElement("span", {
+    onKeyDown: handleKeyDown
+  }, otherProps, {
+    className: "jsx-".concat(styles.__hash) + " " + (otherProps && otherProps.className != null && otherProps.className || buttonClassName || "")
+  }), loading && /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "loader"
   }, destructive || primary ? /*#__PURE__*/React.createElement(CircularLoader, {
     extrasmall: true,

package/build/es/button/button.stories.js

@@ -32,7 +32,9 @@ export default {
   args: {
     children: 'Label me!',
     value: 'default',
-    onClick: logger
+    onClick: logger,
+    title: 'Button',
+    ariaLabel: 'Button'
   },
   argTypes: {
     primary: { ...buttonVariantArgType
@@ -222,7 +224,9 @@ export const IconOnly = Template.bind({});
 IconOnly.args = {
   icon: DemoIcon24,
   name: 'Icon only button',
-  children: null
+  children: null,
+  title: 'Icon Button',
+  ariaLabel: 'Icon Button'
 };
 export const IconSmall = Template.bind({});
 IconSmall.args = {

package/package.json

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

package/types/index.d.ts

@@ -16,7 +16,7 @@ type ButtonOpenEventHandler<
     Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
 > = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
 
-export interface ButtonProps {
+export interface ButtonProps extends HTMLButtonElement {
     /**
      * Component to render inside the button
      */