@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

package/date-input/DateInput.test.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
-var _DateInput = _interopRequireDefault(require("./DateInput.tsx"));
+var _DateInput = _interopRequireDefault(require("./DateInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -28,7 +28,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -38,7 +38,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("DateInput component tests", function () {
   test("Renders with correct label, helper text, optional, placeholder and clearable action", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -214,7 +213,7 @@ describe("DateInput component tests", function () {
           _context6.next = 5;
           return _userEvent["default"].click(calendarAction);
         case 5:
-          expect(document.activeElement === getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0]).toBeTruthy();
+          expect(document.activeElement === (getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0])).toBeTruthy();
           expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
         case 7:
         case "end":
@@ -286,7 +285,7 @@ describe("DateInput component tests", function () {
           _context9.next = 11;
           return _userEvent["default"].click(calendarAction);
         case 11:
-          expect(document.activeElement === getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0]).toBeTruthy();
+          expect(document.activeElement === (getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0])).toBeTruthy();
           expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
         case 13:
         case "end":
@@ -308,7 +307,7 @@ describe("DateInput component tests", function () {
           _context10.next = 5;
           return _userEvent["default"].click(calendarAction);
         case 5:
-          dayButton = getAllByText("10")[0].closest("button");
+          dayButton = getAllByText("10")[0];
           _react2.fireEvent.click(dayButton);
           d = (0, _dayjs["default"])();
           d = d.set("date", 10);
@@ -374,7 +373,7 @@ describe("DateInput component tests", function () {
           _context12.next = 5;
           return _userEvent["default"].click(calendarAction);
         case 5:
-          dayButton = getAllByText("31")[0].closest("button");
+          dayButton = getAllByText("31")[0];
           _react2.fireEvent.click(dayButton);
           d = (0, _dayjs["default"])("10-08-2021", "DD-MM-YYYY", true);
           d = d.set("date", 31).set("month", 6);
@@ -444,31 +443,31 @@ describe("DateInput component tests", function () {
           _context14.next = 7;
           return _userEvent["default"].click(calendarAction);
         case 7:
-          expect(document.activeElement === getAllByText("1")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("1")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("1")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("1")[0], {
             key: "ArrowRight",
             code: "ArrowRight",
             keyCode: 39,
             charCode: 39
           });
-          expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("2")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("2")[0], {
             key: "PageUp",
             code: "PageUp",
             keyCode: 33,
             charCode: 33
           });
-          expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+          expect(document.activeElement === getAllByText("2")[0]).toBeTruthy();
           expect(getByText("December 2009")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+          _react2.fireEvent.keyDown(getAllByText("2")[0], {
             key: "PageDown",
             code: "PageDown",
             keyCode: 34,
             charCode: 34
           });
-          expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+          expect(document.activeElement === getAllByText("2")[0]).toBeTruthy();
           expect(getByText("January 2010")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+          _react2.fireEvent.keyDown(getAllByText("2")[0], {
             key: "PageDown",
             code: "PageDown",
             keyCode: 34,
@@ -476,7 +475,7 @@ describe("DateInput component tests", function () {
             shiftKey: true
           });
           expect(getByText("January 2011")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+          _react2.fireEvent.keyDown(getAllByText("2")[0], {
             key: "PageUp",
             code: "PageUp",
             keyCode: 33,
@@ -484,14 +483,14 @@ describe("DateInput component tests", function () {
             shiftKey: true
           });
           expect(getByText("January 2010")).toBeTruthy();
-          expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.click(getAllByText("2")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("2")[0]).toBeTruthy();
+          _react2.fireEvent.click(getAllByText("2")[0], {
             key: " ",
             code: "Space",
             keyCode: 32,
             charCode: 32
           });
-          expect(getAllByText("2")[0].closest("button").getAttribute("aria-selected")).toBe("true");
+          expect(getAllByText("2")[0].getAttribute("aria-selected")).toBe("true");
           _react2.fireEvent.keyDown(document, {
             key: "Escape",
             code: "Escape",
@@ -518,42 +517,42 @@ describe("DateInput component tests", function () {
           _context15.next = 7;
           return _userEvent["default"].click(calendarAction);
         case 7:
-          expect(document.activeElement === getAllByText("1")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("1")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("1")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("1")[0], {
             key: "ArrowDown",
             code: "ArrowDown",
             keyCode: 40,
             charCode: 40
           });
-          expect(document.activeElement === getAllByText("8")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("8")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("8")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("8")[0], {
             key: "ArrowDown",
             code: "ArrowDown",
             keyCode: 40,
             charCode: 40
           });
-          expect(document.activeElement === getAllByText("15")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("15")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("15")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("15")[0], {
             key: "ArrowUp",
             code: "ArrowUp",
             keyCode: 38,
             charCode: 38
           });
-          expect(document.activeElement === getAllByText("8")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("8")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("8")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("8")[0], {
             key: "End",
             code: "End",
             keyCode: 35,
             charCode: 35
           });
-          expect(document.activeElement === getAllByText("10")[0].closest("button")).toBeTruthy();
-          _react2.fireEvent.keyDown(getAllByText("10")[0].closest("button"), {
+          expect(document.activeElement === getAllByText("10")[0]).toBeTruthy();
+          _react2.fireEvent.keyDown(getAllByText("10")[0], {
             key: "Home",
             code: "Home",
             keyCode: 36,
             charCode: 36
           });
-          _react2.fireEvent.keyDown(getAllByText("10")[0].closest("button"), {
+          _react2.fireEvent.keyDown(getAllByText("10")[0], {
             key: " ",
             code: "Space",
             keyCode: 32,
@@ -687,7 +686,7 @@ describe("DateInput component tests", function () {
     });
   });
   test("Disabled date input (calendar action must be shown but not clickable)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
-    var _render22, getByRole, queryByText, calendarAction, d, options;
+    var _render22, getByRole, queryByText, calendarAction, d, options, input;
     return _regenerator["default"].wrap(function _callee16$(_context16) {
       while (1) switch (_context16.prev = _context16.next) {
         case 0:
@@ -701,12 +700,13 @@ describe("DateInput component tests", function () {
             month: "short",
             day: "numeric"
           };
-          expect(getByRole("textbox").disabled).toBeTruthy();
-          _context16.next = 7;
+          input = getByRole("textbox");
+          expect(input.disabled).toBeTruthy();
+          _context16.next = 8;
           return _userEvent["default"].click(calendarAction);
-        case 7:
-          expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
         case 8:
+          expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
+        case 9:
         case "end":
           return _context16.stop();
       }
@@ -727,16 +727,16 @@ describe("DateInput component tests", function () {
           calendarAction = getByRole("combobox");
           expect(calendarAction.getAttribute("aria-autocomplete")).toBeNull();
           expect(calendarAction.getAttribute("aria-controls")).toBeTruthy();
-          expect(calendarAction.getAttribute("aria-describedby")).toBeTruthy();
-          expect(calendarAction.getAttribute("aria-describedby") === calendarAction.getAttribute("aria-controls")).toBeTruthy();
+          expect(calendarAction.getAttribute("aria-describedby")).toBeFalsy();
           expect(calendarAction.getAttribute("aria-expanded")).toBe("false");
-          _context17.next = 13;
+          _context17.next = 12;
           return _userEvent["default"].click(calendarAction);
-        case 13:
+        case 12:
           datePicker = getByRole("dialog");
           expect(datePicker.getAttribute("aria-modal")).toBe("true");
           expect(calendarAction.getAttribute("aria-expanded")).toBe("true");
           expect(document.getElementById(calendarAction.getAttribute("aria-describedby"))).toBeTruthy();
+          expect(calendarAction.getAttribute("aria-describedby") === calendarAction.getAttribute("aria-controls")).toBeTruthy();
           _context17.next = 19;
           return _userEvent["default"].type(calendarAction, "{esc}");
         case 19:

package/date-input/DatePicker.js

@@ -17,7 +17,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var today = (0, _dayjs["default"])();
 var DxcDatePicker = function DxcDatePicker(_ref) {
   var date = _ref.date,

package/date-input/YearPicker.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var getYearsArray = function getYearsArray() {
   var yearList = [];
   for (var i = 1899; i <= 2100; i++) {
@@ -26,13 +26,14 @@ var YearPicker = function YearPicker(_ref) {
   var onYearSelect = _ref.onYearSelect,
     selectedDate = _ref.selectedDate,
     today = _ref.today;
+  var id = (0, _react.useId)();
   var _useState = (0, _react.useState)(selectedDate ? selectedDate.get("year") : (0, _dayjs["default"])().get("year")),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     yearToFocus = _useState2[0],
     setYearToFocus = _useState2[1];
   (0, _react.useEffect)(function () {
     var _yearToFocusEl$scroll;
-    var yearToFocusEl = document.getElementById("year_".concat(yearToFocus));
+    var yearToFocusEl = document.getElementById("".concat(id, "_year_").concat(yearToFocus));
     yearToFocusEl === null || yearToFocusEl === void 0 ? void 0 : (_yearToFocusEl$scroll = yearToFocusEl.scrollIntoView) === null || _yearToFocusEl$scroll === void 0 ? void 0 : _yearToFocusEl$scroll.call(yearToFocusEl, {
       block: "nearest",
       inline: "start"
@@ -53,7 +54,10 @@ var YearPicker = function YearPicker(_ref) {
         break;
     }
   };
-  return /*#__PURE__*/_react["default"].createElement(YearPickerContainer, null, yearList.map(function (year) {
+  return /*#__PURE__*/_react["default"].createElement(YearPickerContainer, {
+    role: "listbox",
+    "aria-label": "Year Picker"
+  }, yearList.map(function (year) {
     return /*#__PURE__*/_react["default"].createElement(YearPickerButton, {
       "aria-label": year,
       key: year,
@@ -64,10 +68,11 @@ var YearPicker = function YearPicker(_ref) {
       onKeyDown: function onKeyDown(event) {
         return handleDayKeyboardEvent(event);
       },
-      id: "year_".concat(year),
+      id: "".concat(id, "_year_").concat(year),
       onClick: function onClick() {
         onYearSelect(year);
-      }
+      },
+      role: "option"
     }, year);
   }));
 };

package/dialog/Dialog.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dialog/Dialog.accessibility.test.js

@@ -5,8 +5,8 @@ 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 _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Dialog = _interopRequireDefault(require("./Dialog"));
 describe("Dialog component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, baseElement, results;
@@ -16,7 +16,7 @@ describe("Dialog component accessibility tests", function () {
           // baseElement is needed when using React Portals
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "Dialog text")), baseElement = _render.baseElement;
           _context.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -36,7 +36,7 @@ describe("Dialog component accessibility tests", function () {
             isCloseVisible: false
           }, "Dialog text")), baseElement = _render2.baseElement;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -56,7 +56,7 @@ describe("Dialog component accessibility tests", function () {
             overlay: false
           }, "Dialog text")), baseElement = _render3.baseElement;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();

package/dialog/Dialog.js

@@ -14,22 +14,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _reactDom = require("react-dom");
 var _FocusLock = _interopRequireDefault(require("../utils/FocusLock"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  role: "img",
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0V0z",
-  fill: "none"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-}));
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcDialog = function DxcDialog(_ref) {
   var _ref$isCloseVisible = _ref.isCloseVisible,
     isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
@@ -63,14 +51,17 @@ var DxcDialog = function DxcDialog(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(Dialog, {
     role: "dialog",
     "aria-modal": overlay,
-    isCloseVisible: isCloseVisible
+    isCloseVisible: isCloseVisible,
+    "aria-label": "Dialog"
   }, /*#__PURE__*/_react["default"].createElement(_FocusLock["default"], null, children, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconAction, {
     onClick: function onClick() {
       onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
     },
     "aria-label": translatedLabels.dialog.closeIconAriaLabel,
     tabIndex: tabIndex
-  }, closeIcon)))), document.body));
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "close"
+  }))))), document.body));
 };
 var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  body {\n    overflow: hidden;\n  }\n"])));
 var DialogContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  z-index: 2147483647;\n"])));
@@ -84,7 +75,7 @@ var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObje
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
 }, _variables.responsiveSizes.medium);
-var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  cursor: pointer;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  &:hover {\n    background-color: #f2f2f2;\n  }\n  &:active {\n    background-color: #cccccc;\n  }\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  cursor: pointer;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  &:hover {\n    background-color: #f2f2f2;\n  }\n  &:active {\n    background-color: #cccccc;\n  }\n  span {\n    font-size: ", ";\n  }\n"])), function (props) {
   return props.theme.closeIconBackgroundColor;
 }, function (props) {
   return props.theme.closeIconColor;
@@ -97,8 +88,6 @@ var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_
 }, function (props) {
   return props.theme.closeIconBorderColor;
 }, function (props) {
-  return props.theme.closeIconWidth;
-}, function (props) {
-  return props.theme.closeIconHeight;
+  return props.theme.closeIconSize;
 });
 var _default = exports["default"] = DxcDialog;

package/dialog/Dialog.stories.tsx

@@ -10,11 +10,17 @@ import { HalstackProvider } from "../HalstackContext";
 import DxcHeading from "../heading/Heading";
 import DxcParagraph from "../paragraph/Paragraph";
 import DxcAlert from "../alert/Alert";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 export default {
   title: "Dialog",
   component: DxcDialog,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
 };
 
 const opinionatedTheme = {
@@ -356,10 +362,8 @@ MobileResponsiveDialog.parameters = {
 };
 
 export const ScrollDialog = ScrollingDialog.bind({});
-ScrollDialog.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
+ScrollDialog.play = async () => {
   await userEvent.tab();
   await userEvent.tab();
   await userEvent.tab();
 };
-

package/dialog/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};