@dxc-technology/halstack-react 0.0.0-89de434 → 0.0.0-8a597df

package/progress-bar/ProgressBar.accessibility.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
+describe("ProgressBar component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+            label: "test-label",
+            helperText: "helper-text",
+            margin: "medium",
+            value: 50,
+            showValue: true,
+            overlay: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/quick-nav/QuickNav.accessibility.test.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _QuickNav = _interopRequireDefault(require("./QuickNav"));
+var links = [{
+  label: "Overview",
+  links: [{
+    label: "Introduction"
+  }]
+}, {
+  label: "Components",
+  links: [{
+    label: "Introduction"
+  }, {
+    label: "Accordion"
+  }]
+}, {
+  label: "Principles very very very very very very very very long",
+  links: [{
+    label: "Color very very very very very very very very long"
+  }, {
+    label: "Spacingveryveryveryveryveryveryveryverylong"
+  }, {
+    label: "Typography"
+  }]
+}, {
+  label: "Componentsveryveryveryveryveryveryveryverylong",
+  links: [{
+    label: "Accordion"
+  }]
+}];
+describe("Quick Nav component accessibility tests", function () {
+  it("Should not have basic accessibility issues for icon mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_QuickNav["default"], {
+            links: links
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/radio-group/RadioGroup.accessibility.test.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
+var options = [{
+  label: "Option 01",
+  value: "1"
+}, {
+  label: "Option 02",
+  value: "2"
+}, {
+  label: "Option 03",
+  value: "3"
+}, {
+  label: "Option 04",
+  value: "4"
+}, {
+  label: "Option 05",
+  value: "5",
+  disabled: true
+}, {
+  label: "Option 06",
+  value: "6",
+  disabled: true
+}, {
+  label: "Option 07",
+  value: "7",
+  disabled: true
+}, {
+  label: "Option 08",
+  value: "8",
+  disabled: true
+}, {
+  label: "Option 09",
+  value: "9"
+}];
+describe("Radio Group component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            options: options,
+            error: "Error",
+            defaultValue: "3",
+            helperText: "Helper Text",
+            name: "Name",
+            stacking: "row",
+            optionalItemLabel: "Optional",
+            optional: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            options: options,
+            error: "Error",
+            defaultValue: "3",
+            helperText: "Helper Text",
+            name: "Name",
+            stacking: "row",
+            optionalItemLabel: "Optional",
+            readOnly: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/resultset-table/ResultsetTable.accessibility.test.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
+var deleteIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  viewBox: "0 0 24 24",
+  width: "24"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  fill: "currentColor",
+  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}));
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+var actions = [{
+  title: "icon",
+  onClick: function onClick() {},
+  options: [{
+    value: "1",
+    label: "Amazon with a very long text"
+  }, {
+    value: "2",
+    label: "Ebay"
+  }, {
+    value: "3",
+    label: "Apple"
+  }]
+}, {
+  icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
+  title: "icon",
+  onClick: function onClick() {}
+}, {
+  icon: deleteIcon,
+  title: "icon",
+  onClick: function onClick() {},
+  disabled: true
+}, {
+  icon: deleteIcon,
+  title: "icon",
+  onClick: function onClick() {}
+}];
+var columns = [{
+  displayValue: "Id",
+  isSortable: false
+}, {
+  displayValue: "Name",
+  isSortable: true
+}, {
+  displayValue: "City",
+  isSortable: false
+}];
+var rows = [[{
+  displayValue: "001",
+  sortValue: "001"
+}, {
+  displayValue: "Peter",
+  sortValue: "Peter"
+}, {
+  displayValue: "Oviedo",
+  sortValue: "Oviedo"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "002",
+  sortValue: "002"
+}, {
+  displayValue: "Louis",
+  sortValue: "Louis"
+}, {
+  displayValue: "Oviedo",
+  sortValue: "Oviedo"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "003",
+  sortValue: "003"
+}, {
+  displayValue: "Lana",
+  sortValue: "Lana"
+}, {
+  displayValue: "Albacete",
+  sortValue: "Albacete"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "004",
+  sortValue: "004"
+}, {
+  displayValue: "Rick",
+  sortValue: "Rick"
+}, {
+  displayValue: "Albacete",
+  sortValue: "Albacete"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "005",
+  sortValue: "005"
+}, {
+  displayValue: "Mark",
+  sortValue: "Mark"
+}, {
+  displayValue: "Madrid",
+  sortValue: "Madrid"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "006",
+  sortValue: "006"
+}, {
+  displayValue: "Cris",
+  sortValue: "Cris"
+}, {
+  displayValue: "Barcelona",
+  sortValue: "Barcelona"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "007",
+  sortValue: "007"
+}, {
+  displayValue: "Susan",
+  sortValue: "Susan"
+}, {
+  displayValue: "Madrid",
+  sortValue: "Madrid"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "008",
+  sortValue: "008"
+}, {
+  displayValue: "Tina",
+  sortValue: "Tina"
+}, {
+  displayValue: "Barcelona",
+  sortValue: "Barcelona"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "009",
+  sortValue: "009"
+}, {
+  displayValue: "Kevin",
+  sortValue: "Kevin"
+}, {
+  displayValue: "Oviedo",
+  sortValue: "Oviedo"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}], [{
+  displayValue: "010",
+  sortValue: "010"
+}, {
+  displayValue: "Cosmin",
+  sortValue: "Cosmin"
+}, {
+  displayValue: "Barcelona",
+  sortValue: "Barcelona"
+}, {
+  displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
+    actions: actions
+  })
+}]];
+describe("Resultset Table input component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+            columns: columns,
+            rows: rows,
+            itemsPerPage: 2,
+            margin: "medium",
+            mode: "default",
+            itemsPerPageOptions: [2, 3],
+            showGoToPage: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for reduced mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+            columns: columns,
+            rows: rows,
+            itemsPerPage: 2,
+            margin: "medium",
+            mode: "reduced",
+            itemsPerPageOptions: [2, 3],
+            showGoToPage: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/resultset-table/ResultsetTable.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import ResultsetTablePropsType from "./types";
 declare const DxcResultsetTable: {
-    ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: ResultsetTablePropsType): JSX.Element;
+    ({ columns, rows, hidePaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: ResultsetTablePropsType): JSX.Element;
     ActionsCell: ({ actions }: import("../table/types").ActionCellsPropsType) => JSX.Element;
 };
 export default DxcResultsetTable;

package/resultset-table/ResultsetTable.js

@@ -50,6 +50,8 @@ var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIn
 var DxcResultsetTable = function DxcResultsetTable(_ref) {
   var columns = _ref.columns,
     rows = _ref.rows,
+    _ref$hidePaginator = _ref.hidePaginator,
+    hidePaginator = _ref$hidePaginator === void 0 ? false : _ref$hidePaginator,
     _ref$showGoToPage = _ref.showGoToPage,
     showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
     _ref$itemsPerPage = _ref.itemsPerPage,
@@ -95,7 +97,9 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
     changeSortOrder(sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending");
   };
   (0, _react.useEffect)(function () {
-    rows.length > 0 ? changePage(1) : changePage(0);
+    if (!hidePaginator) {
+      rows.length > 0 ? changePage(1) : changePage(0);
+    }
   }, [rows]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.table
@@ -117,15 +121,15 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
       isSortable: column.isSortable,
       mode: mode
     }, /*#__PURE__*/_react["default"].createElement("span", null, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, sortColumnIndex === index ? sortOrder === "ascending" ? _Icons["default"].arrowUp : _Icons["default"].arrowDown : _Icons["default"].bothArrows)));
-  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, filteredResultset.map(function (cells, index) {
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, filteredResultset.map(function (cells, rowIndex) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
-      key: "resultSetTableCell_".concat(page, "_").concat(index)
-    }, cells.map(function (cellContent, index) {
+      key: "resultSetTableCell_".concat(page, "_").concat(rowIndex)
+    }, cells.map(function (cellContent, cellIndex) {
       return /*#__PURE__*/_react["default"].createElement("td", {
-        key: "resultSetTableCellContent_".concat(index)
+        key: "resultSetTableCellContent_".concat(cellIndex)
       }, cellContent.displayValue);
     }));
-  }))), /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+  }))), !hidePaginator && /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
     totalItems: rows.length,
     itemsPerPage: itemsPerPage,
     itemsPerPageOptions: itemsPerPageOptions,

package/resultset-table/ResultsetTable.stories.tsx

@@ -62,7 +62,7 @@ const actions = [
     ],
   },
   {
-    icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
+    icon: "filled_edit",
     title: "icon",
     onClick: () => {},
   },
@@ -260,6 +260,10 @@ export const Chromatic = () => (
       <Title title="Scroll resultset table" theme="light" level={4} />
       <DxcResultsetTable columns={longColumns} rows={longRows} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without paginator" theme="light" level={4} />
+      <DxcResultsetTable columns={columns} rows={rows} hidePaginator />
+    </ExampleContainer>
     <ExampleContainer>
       <SmallContainer>
         <Title title="Small container and text overflow" theme="light" level={4} />

package/resultset-table/ResultsetTable.test.js

@@ -314,6 +314,16 @@ describe("Resultset table component tests", function () {
     _react2.fireEvent.click(lastButton);
     expect(getAllByRole("row").length - 1).toEqual(1);
   });
+  test("Resultset table may not use the paginator", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+        columns: columns,
+        rows: rows,
+        hidePaginator: true
+      })),
+      getAllByRole = _render8.getAllByRole;
+    var nextButton = getAllByRole("button")[3];
+    expect(nextButton).not.toBeTruthy();
+  });
   test("Resultset table with ActionsCell", function () {
     var onSelectOption = jest.fn();
     var onClick = jest.fn();
@@ -348,14 +358,14 @@ describe("Resultset table component tests", function () {
       }),
       sortValue: "Actions"
     }]];
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
         columns: columns,
         rows: actionRows,
         itemsPerPage: 3
       })),
-      getAllByRole = _render8.getAllByRole,
-      getByRole = _render8.getByRole,
-      getByText = _render8.getByText;
+      getAllByRole = _render9.getAllByRole,
+      getByRole = _render9.getByRole,
+      getByText = _render9.getByText;
     var dropdown = getAllByRole("button")[2];
     (0, _react2.act)(function () {
       _userEvent["default"].click(dropdown);

package/resultset-table/types.d.ts

@@ -16,7 +16,7 @@ export type Column = {
      */
     isSortable?: boolean;
 };
-type Row = {
+export type Row = {
     /**
      * Value to be displayed in the cell.
      */
@@ -27,7 +27,7 @@ type Row = {
      */
     sortValue?: string;
 };
-type Props = {
+type CommonProps = {
     /**
      * An array of objects representing the columns of the table.
      */
@@ -37,6 +37,24 @@ type Props = {
      * as many objects as columns in the table.
      */
     rows: Row[][];
+    /**
+     * Size of the margin to be applied to the component. You can pass an object with 'top',
+     * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute applied to the sortable icon.
+     */
+    tabIndex?: number;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with big spacing
+     * - "reduced": A reduced mode with minimal spacing for dense tables
+     */
+    mode?: "default" | "reduced";
+};
+type PaginatedProps = CommonProps & {
+    hidePaginator?: false;
     /**
      * If true, a select component for navigation between pages will be displayed.
      */
@@ -54,20 +72,29 @@ type Props = {
      * option. The value selected will be passed as a parameter.
      */
     itemsPerPageFunction?: (value: number) => void;
+};
+type NonPaginatedProps = CommonProps & {
     /**
-     * Size of the margin to be applied to the component. You can pass an object with 'top',
-     * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * If true, paginator will not be displayed.
      */
-    margin?: Space | Margin;
+    hidePaginator: true;
     /**
-     * Value of the tabindex attribute applied to the sortable icon.
+     * If true, a select component for navigation between pages will be displayed.
      */
-    tabIndex?: number;
+    showGoToPage?: never;
     /**
-     * Determines the visual style and layout
-     * - "default": The default mode with big spacing
-     * - "reduced": A reduced mode with minimal spacing for dense tables
+     * Number of items per page.
      */
-    mode?: "default" | "reduced";
+    itemsPerPage?: never;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: never;
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: never;
 };
+type Props = PaginatedProps | NonPaginatedProps;
 export default Props;