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

package/build/cjs/circular-loader/__tests__/circular-loader.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _circularLoader = require("../circular-loader.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Circular Loader', () => {
+  it('renders the circular loader with aria label', () => {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_circularLoader.CircularLoader, {
+      dataTest: 'circular-loader-test',
+      "aria-label": "Circular Loader"
+    }));
+    const actual = wrapper.find({
+      'data-test': 'circular-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe('Circular Loader');
+  });
+  it('renders the circular loader without aria label', () => {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_circularLoader.CircularLoader, {
+      dataTest: 'circular-loader-test'
+    }));
+    const actual = wrapper.find({
+      'data-test': 'circular-loader-test'
+    });
+    expect(actual.prop('aria-label')).toBe(undefined);
+    expect(actual.prop('role')).toBe('progressbar');
+  });
+});

package/build/cjs/circular-loader/circular-loader.js

@@ -24,11 +24,13 @@ const CircularLoader = _ref => {
     extrasmall,
     invert,
     className,
-    dataTest
+    dataTest,
+    'aria-label': ariaLabel
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "progressbar",
     "data-test": dataTest,
+    "aria-label": ariaLabel,
     className: _style.default.dynamic([["3803726117", [_uiConstants.colors.blue600, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
       small,
       large,
@@ -46,6 +48,7 @@ CircularLoader.defaultProps = {
   dataTest: 'dhis2-uicore-circularloader'
 };
 CircularLoader.propTypes = {
+  'aria-label': _propTypes.default.string,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
   extrasmall: _uiConstants.sharedPropTypes.sizePropType,

package/build/cjs/circular-loader/circular-loader.stories.js

@@ -41,18 +41,24 @@ const Template = args => /*#__PURE__*/_react.default.createElement(_index.Circul
 
 const Default = Template.bind({});
 exports.Default = Default;
+Default.args = {
+  'aria-label': 'Default Loader'
+};
 const Small = Template.bind({});
 exports.Small = Small;
 Small.args = {
-  small: true
+  small: true,
+  'aria-label': 'Small Loader'
 };
 const Large = Template.bind({});
 exports.Large = Large;
 Large.args = {
-  large: true
+  large: true,
+  'aria-label': 'Large Loader'
 };
 const ExtraSmall = Template.bind({});
 exports.ExtraSmall = ExtraSmall;
 ExtraSmall.args = {
-  extrasmall: true
+  extrasmall: true,
+  'aria-label': 'ExtraSmall Loader'
 };

package/build/cjs/linear-loader/__tests__/linear-loader.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _linearLoader = require("../linear-loader.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Linear Loader', () => {
+  it('renders the linear loader with provided aria attributes', () => {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_linearLoader.LinearLoader, {
+      dataTest: 'linear-loader-test',
+      "aria-label": "Linear Loader",
+      amount: 15
+    }));
+    const actual = wrapper.find({
+      'data-test': 'linear-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe('Linear Loader');
+    expect(actual.prop('aria-valuenow')).toBe(15);
+  });
+  it('renders the linear loader without aria label', () => {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_linearLoader.LinearLoader, {
+      dataTest: 'linear-loader-test',
+      amount: 45
+    }));
+    const actual = wrapper.find({
+      'data-test': 'linear-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe(undefined);
+    expect(actual.prop('aria-valuenow')).toBe(45);
+  });
+});

package/build/cjs/linear-loader/linear-loader.js

@@ -49,10 +49,13 @@ const LinearLoader = _ref2 => {
     margin,
     invert,
     className,
-    dataTest
+    dataTest,
+    'aria-label': ariaLabel
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "progressbar",
+    "aria-valuenow": amount,
+    "aria-label": ariaLabel,
     "data-test": dataTest,
     className: "jsx-3127531794 " + _style.default.dynamic([["3224415970", [width, margin]]]) + " " + ((0, _classnames.default)(className, {
       invert
@@ -77,6 +80,7 @@ LinearLoader.defaultProps = {
 LinearLoader.propTypes = {
   /** The progression in percent without the '%' sign */
   amount: _propTypes.default.number.isRequired,
+  'aria-label': _propTypes.default.string,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
 

package/build/cjs/linear-loader/linear-loader.stories.js

@@ -48,7 +48,8 @@ const Determinate = args => /*#__PURE__*/_react.default.createElement(_index.Lin
 
 exports.Determinate = Determinate;
 Determinate.args = {
-  amount: 60
+  amount: 60,
+  'aria-label': 'Determinate Loader'
 };
 
 const OverlayPage = args => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
@@ -58,7 +59,8 @@ const OverlayPage = args => /*#__PURE__*/_react.default.createElement(_layer.Lay
 
 exports.OverlayPage = OverlayPage;
 OverlayPage.args = {
-  amount: 30
+  amount: 30,
+  'aria-label': 'Loader with Overlay Page'
 };
 OverlayPage.parameters = {
   docs: {
@@ -77,7 +79,8 @@ const OverlayComponent = args => /*#__PURE__*/_react.default.createElement("div"
 
 exports.OverlayComponent = OverlayComponent;
 OverlayComponent.args = {
-  amount: 80
+  amount: 80,
+  'aria-label': 'Loader with Overlay Component'
 };
 
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {

package/build/es/circular-loader/__tests__/circular-loader.test.js

@@ -0,0 +1,26 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { CircularLoader } from '../circular-loader.js';
+describe('Circular Loader', () => {
+  it('renders the circular loader with aria label', () => {
+    const wrapper = mount( /*#__PURE__*/React.createElement(CircularLoader, {
+      dataTest: 'circular-loader-test',
+      "aria-label": "Circular Loader"
+    }));
+    const actual = wrapper.find({
+      'data-test': 'circular-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe('Circular Loader');
+  });
+  it('renders the circular loader without aria label', () => {
+    const wrapper = mount( /*#__PURE__*/React.createElement(CircularLoader, {
+      dataTest: 'circular-loader-test'
+    }));
+    const actual = wrapper.find({
+      'data-test': 'circular-loader-test'
+    });
+    expect(actual.prop('aria-label')).toBe(undefined);
+    expect(actual.prop('role')).toBe('progressbar');
+  });
+});

package/build/es/circular-loader/circular-loader.js

@@ -11,11 +11,13 @@ const CircularLoader = _ref => {
     extrasmall,
     invert,
     className,
-    dataTest
+    dataTest,
+    'aria-label': ariaLabel
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     role: "progressbar",
     "data-test": dataTest,
+    "aria-label": ariaLabel,
     className: _JSXStyle.dynamic([["3803726117", [colors.blue600, colors.white]]]) + " " + (cx(className, {
       small,
       large,
@@ -32,6 +34,7 @@ CircularLoader.defaultProps = {
   dataTest: 'dhis2-uicore-circularloader'
 };
 CircularLoader.propTypes = {
+  'aria-label': PropTypes.string,
   className: PropTypes.string,
   dataTest: PropTypes.string,
   extrasmall: sharedPropTypes.sizePropType,

package/build/es/circular-loader/circular-loader.stories.js

@@ -27,15 +27,21 @@ export default {
 const Template = args => /*#__PURE__*/React.createElement(CircularLoader, args);
 
 export const Default = Template.bind({});
+Default.args = {
+  'aria-label': 'Default Loader'
+};
 export const Small = Template.bind({});
 Small.args = {
-  small: true
+  small: true,
+  'aria-label': 'Small Loader'
 };
 export const Large = Template.bind({});
 Large.args = {
-  large: true
+  large: true,
+  'aria-label': 'Large Loader'
 };
 export const ExtraSmall = Template.bind({});
 ExtraSmall.args = {
-  extrasmall: true
+  extrasmall: true,
+  'aria-label': 'ExtraSmall Loader'
 };

package/build/es/linear-loader/__tests__/linear-loader.test.js

@@ -0,0 +1,30 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { LinearLoader } from '../linear-loader.js';
+describe('Linear Loader', () => {
+  it('renders the linear loader with provided aria attributes', () => {
+    const wrapper = mount( /*#__PURE__*/React.createElement(LinearLoader, {
+      dataTest: 'linear-loader-test',
+      "aria-label": "Linear Loader",
+      amount: 15
+    }));
+    const actual = wrapper.find({
+      'data-test': 'linear-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe('Linear Loader');
+    expect(actual.prop('aria-valuenow')).toBe(15);
+  });
+  it('renders the linear loader without aria label', () => {
+    const wrapper = mount( /*#__PURE__*/React.createElement(LinearLoader, {
+      dataTest: 'linear-loader-test',
+      amount: 45
+    }));
+    const actual = wrapper.find({
+      'data-test': 'linear-loader-test'
+    });
+    expect(actual.prop('role')).toBe('progressbar');
+    expect(actual.prop('aria-label')).toBe(undefined);
+    expect(actual.prop('aria-valuenow')).toBe(45);
+  });
+});

package/build/es/linear-loader/linear-loader.js

@@ -36,10 +36,13 @@ const LinearLoader = _ref2 => {
     margin,
     invert,
     className,
-    dataTest
+    dataTest,
+    'aria-label': ariaLabel
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     role: "progressbar",
+    "aria-valuenow": amount,
+    "aria-label": ariaLabel,
     "data-test": dataTest,
     className: "jsx-3127531794 " + _JSXStyle.dynamic([["3224415970", [width, margin]]]) + " " + (cx(className, {
       invert
@@ -63,6 +66,7 @@ LinearLoader.defaultProps = {
 LinearLoader.propTypes = {
   /** The progression in percent without the '%' sign */
   amount: PropTypes.number.isRequired,
+  'aria-label': PropTypes.string,
   className: PropTypes.string,
   dataTest: PropTypes.string,
 

package/build/es/linear-loader/linear-loader.stories.js

@@ -29,14 +29,16 @@ export default {
 };
 export const Determinate = args => /*#__PURE__*/React.createElement(LinearLoader, args);
 Determinate.args = {
-  amount: 60
+  amount: 60,
+  'aria-label': 'Determinate Loader'
 };
 export const OverlayPage = args => /*#__PURE__*/React.createElement(Layer, {
   level: layers.blocking,
   translucent: true
 }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(LinearLoader, args)));
 OverlayPage.args = {
-  amount: 30
+  amount: 30,
+  'aria-label': 'Loader with Overlay Page'
 };
 OverlayPage.parameters = {
   docs: {
@@ -52,7 +54,8 @@ export const OverlayComponent = args => /*#__PURE__*/React.createElement("div",
   translucent: true
 }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(LinearLoader, args))));
 OverlayComponent.args = {
-  amount: 80
+  amount: 80,
+  'aria-label': 'Loader with Overlay Component'
 };
 export const RTL = args => /*#__PURE__*/React.createElement("div", {
   dir: "rtl"

package/package.json

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

package/types/index.d.ts

@@ -7,6 +7,7 @@ export interface CircularLoaderProps {
     invert?: boolean
     large?: boolean
     small?: boolean
+    'aria-label'?: string
 }
 
 export const CircularLoader: React.FC<CircularLoaderProps>
@@ -30,6 +31,7 @@ export interface LinearLoaderProps {
      * The width of the entire indicator
      */
     width?: string
+    'aria-label'?: string
 }
 
 export const LinearLoader: React.FC<LinearLoaderProps>