@dhis2-ui/table 7.11.4 → 7.13.0

package/build/cjs/data-table/__tests__/data-table-column-header.test.js

@@ -136,26 +136,40 @@ describe('<DataTableColumnHeader>', () => {
     }));
     expect(wrapper.find(_index.TableHeaderCell).prop('scope')).toBe(scope);
   });
-  it('accepts sortDirection and onSortIconClick props', () => {
-    //
-    const name = 'test';
-    const fakeEvent = {
-      target: 'test',
-      value: 'test'
-    };
-    const onClick = jest.fn();
-    const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-      name: name,
-      onSortIconClick: onClick,
-      sortDirection: 'asc'
-    }));
-    wrapper.find(_sorter.Sorter).dive().find(_index.TableHeaderCellAction).dive().find('button').simulate('click', fakeEvent);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith({
-      name,
-      // next sort direction
-      direction: 'desc'
-    }, fakeEvent);
+  describe('column header sorting', () => {
+    it('accepts sortDirection, sortIconTitle, and onSortIconClick props', () => {
+      const name = 'test';
+      const title = 'Custom title';
+      const fakeEvent = {
+        target: 'test',
+        value: 'test'
+      };
+      const onClick = jest.fn();
+      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+        name: name,
+        onSortIconClick: onClick,
+        sortDirection: 'asc',
+        sortIconTitle: title
+      }));
+      const button = wrapper.find(_sorter.Sorter).dive().find(_index.TableHeaderCellAction).dive().find('button');
+      button.simulate('click', fakeEvent);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith({
+        name,
+        // next sort direction
+        direction: 'desc'
+      }, fakeEvent);
+      expect(button.prop('title')).toBe(title);
+    });
+    it('has a default sort icon title', () => {
+      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+        name: 'test',
+        onSortIconClick: () => {},
+        sortDirection: 'asc'
+      }));
+      const button = wrapper.find(_sorter.Sorter).dive().find(_index.TableHeaderCellAction).dive().find('button');
+      expect(button.prop('title')).toBe('Sort items');
+    });
   });
   it('accepts a top prop', () => {
     const top = '200px';

package/build/cjs/data-table/data-table-column-header/data-table-column-header.js

@@ -50,6 +50,7 @@ const DataTableColumnHeader = /*#__PURE__*/(0, _react.forwardRef)(({
   scope,
   showFilter,
   sortDirection,
+  sortIconTitle,
   top,
   width,
   onFilterIconClick,
@@ -79,7 +80,8 @@ const DataTableColumnHeader = /*#__PURE__*/(0, _react.forwardRef)(({
 }, children), sortDirection && /*#__PURE__*/_react.default.createElement(_sorter.Sorter, {
   name: name,
   sortDirection: sortDirection,
-  onClick: onSortIconClick
+  onClick: onSortIconClick,
+  title: sortIconTitle
 }), filter && /*#__PURE__*/_react.default.createElement(_filterHandle.FilterHandle, {
   name: name,
   active: showFilter,
@@ -116,6 +118,7 @@ DataTableColumnHeader.propTypes = {
   scope: _propTypes2.default.string,
   showFilter: (0, _propTypes.requiredIf)(props => props.filter, _propTypes2.default.bool),
   sortDirection: (0, _propTypes.requiredIf)(props => props.onSortIconClick, _propTypes2.default.oneOf(_sorter.SORT_DIRECTIONS)),
+  sortIconTitle: _propTypes2.default.string,
 
   /** Left or top required when fixed */
   top: (0, _propTypes.requiredIf)(props => props.fixed && !props.left, _propTypes2.default.string),

package/build/cjs/data-table/data-table-column-header/sorter.js

@@ -41,6 +41,7 @@ exports.getNextSortDirection = getNextSortDirection;
 const Sorter = ({
   name,
   sortDirection,
+  title,
   onClick
 }) => {
   const nextSortDirection = getNextSortDirection(sortDirection);
@@ -52,7 +53,7 @@ const Sorter = ({
   } : undefined;
   return /*#__PURE__*/_react.default.createElement(_index2.TableHeaderCellAction, {
     onClick: clickHandler,
-    title: _index.default.t('Sort items')
+    title: title || _index.default.t('Sort items')
   }, /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -79,5 +80,6 @@ exports.Sorter = Sorter;
 Sorter.propTypes = {
   name: _propTypes2.default.string,
   sortDirection: (0, _propTypes.requiredIf)(props => props.onClick, _propTypes2.default.oneOf(SORT_DIRECTIONS)),
+  title: _propTypes2.default.string,
   onClick: _propTypes2.default.func
 };

package/build/cjs/data-table/data-table.stories.js

@@ -657,11 +657,13 @@ const ColumnHeaderSortingTemplate = args => {
   return /*#__PURE__*/_react.default.createElement(_dataTable.DataTable, args, /*#__PURE__*/_react.default.createElement(_dataTableHead.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
     onSortIconClick: onSortIconClick,
     sortDirection: getSortDirection('firstName'),
-    name: 'firstName'
+    name: 'firstName',
+    sortIconTitle: "Sort by first name"
   }, "First name"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
     onSortIconClick: onSortIconClick,
     sortDirection: getSortDirection('lastName'),
-    name: 'lastName'
+    name: 'lastName',
+    sortIconTitle: "Sort by last name"
   }, "Last name"))), /*#__PURE__*/_react.default.createElement(_dataTableBody.DataTableBody, null, rows.sort((a, b) => {
     const strA = a[column];
     const strB = b[column];

package/build/es/data-table/__tests__/data-table-column-header.test.js

@@ -125,26 +125,40 @@ describe('<DataTableColumnHeader>', () => {
     }));
     expect(wrapper.find(TableHeaderCell).prop('scope')).toBe(scope);
   });
-  it('accepts sortDirection and onSortIconClick props', () => {
-    //
-    const name = 'test';
-    const fakeEvent = {
-      target: 'test',
-      value: 'test'
-    };
-    const onClick = jest.fn();
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-      name: name,
-      onSortIconClick: onClick,
-      sortDirection: 'asc'
-    }));
-    wrapper.find(Sorter).dive().find(TableHeaderCellAction).dive().find('button').simulate('click', fakeEvent);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith({
-      name,
-      // next sort direction
-      direction: 'desc'
-    }, fakeEvent);
+  describe('column header sorting', () => {
+    it('accepts sortDirection, sortIconTitle, and onSortIconClick props', () => {
+      const name = 'test';
+      const title = 'Custom title';
+      const fakeEvent = {
+        target: 'test',
+        value: 'test'
+      };
+      const onClick = jest.fn();
+      const wrapper = shallow( /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+        name: name,
+        onSortIconClick: onClick,
+        sortDirection: 'asc',
+        sortIconTitle: title
+      }));
+      const button = wrapper.find(Sorter).dive().find(TableHeaderCellAction).dive().find('button');
+      button.simulate('click', fakeEvent);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith({
+        name,
+        // next sort direction
+        direction: 'desc'
+      }, fakeEvent);
+      expect(button.prop('title')).toBe(title);
+    });
+    it('has a default sort icon title', () => {
+      const wrapper = shallow( /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+        name: 'test',
+        onSortIconClick: () => {},
+        sortDirection: 'asc'
+      }));
+      const button = wrapper.find(Sorter).dive().find(TableHeaderCellAction).dive().find('button');
+      expect(button.prop('title')).toBe('Sort items');
+    });
   });
   it('accepts a top prop', () => {
     const top = '200px';

package/build/es/data-table/data-table-column-header/data-table-column-header.js

@@ -28,6 +28,7 @@ export const DataTableColumnHeader = /*#__PURE__*/forwardRef(({
   scope,
   showFilter,
   sortDirection,
+  sortIconTitle,
   top,
   width,
   onFilterIconClick,
@@ -57,7 +58,8 @@ export const DataTableColumnHeader = /*#__PURE__*/forwardRef(({
 }, children), sortDirection && /*#__PURE__*/React.createElement(Sorter, {
   name: name,
   sortDirection: sortDirection,
-  onClick: onSortIconClick
+  onClick: onSortIconClick,
+  title: sortIconTitle
 }), filter && /*#__PURE__*/React.createElement(FilterHandle, {
   name: name,
   active: showFilter,
@@ -93,6 +95,7 @@ DataTableColumnHeader.propTypes = {
   scope: PropTypes.string,
   showFilter: requiredIf(props => props.filter, PropTypes.bool),
   sortDirection: requiredIf(props => props.onSortIconClick, PropTypes.oneOf(SORT_DIRECTIONS)),
+  sortIconTitle: PropTypes.string,
 
   /** Left or top required when fixed */
   top: requiredIf(props => props.fixed && !props.left, PropTypes.string),

package/build/es/data-table/data-table-column-header/sorter.js

@@ -17,6 +17,7 @@ export const getNextSortDirection = currentDirection => {
 export const Sorter = ({
   name,
   sortDirection,
+  title,
   onClick
 }) => {
   const nextSortDirection = getNextSortDirection(sortDirection);
@@ -28,7 +29,7 @@ export const Sorter = ({
   } : undefined;
   return /*#__PURE__*/React.createElement(TableHeaderCellAction, {
     onClick: clickHandler,
-    title: i18n.t('Sort items')
+    title: title || i18n.t('Sort items')
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
@@ -53,5 +54,6 @@ export const Sorter = ({
 Sorter.propTypes = {
   name: PropTypes.string,
   sortDirection: requiredIf(props => props.onClick, PropTypes.oneOf(SORT_DIRECTIONS)),
+  title: PropTypes.string,
   onClick: PropTypes.func
 };

package/build/es/data-table/data-table.stories.js

@@ -618,11 +618,13 @@ const ColumnHeaderSortingTemplate = args => {
   return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
     onSortIconClick: onSortIconClick,
     sortDirection: getSortDirection('firstName'),
-    name: 'firstName'
+    name: 'firstName',
+    sortIconTitle: "Sort by first name"
   }, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
     onSortIconClick: onSortIconClick,
     sortDirection: getSortDirection('lastName'),
-    name: 'lastName'
+    name: 'lastName',
+    sortIconTitle: "Sort by last name"
   }, "Last name"))), /*#__PURE__*/React.createElement(DataTableBody, null, rows.sort((a, b) => {
     const strA = a[column];
     const strB = b[column];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/table",
-    "version": "7.11.4",
+    "version": "7.13.0",
     "description": "UI Table",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2/ui-constants": "7.11.4",
-        "@dhis2/ui-icons": "7.11.4",
+        "@dhis2/ui-constants": "7.13.0",
+        "@dhis2/ui-icons": "7.13.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },