@dxc-technology/halstack-react 5.0.0 → 6.1.0

package/dialog/Dialog.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
 import DxcDialog from "./Dialog";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -209,4 +208,4 @@ export const DialogWithXxlargePadding = () => (
       </p>{" "}
     </DxcDialog>
   </ExampleContainer>
-);
+);

package/dialog/Dialog.test.js

@@ -9,10 +9,13 @@ var _react2 = require("@testing-library/react");
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 
 describe("Dialog component tests", function () {
-  test("Dialog renders with correct text", function () {
+  test("Dialog renders with correct text and accesibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
-        getByText = _render.getByText;
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
 
+    expect(getByRole("dialog")).toBeTruthy();
+    expect(getByRole("dialog").getAttribute("aria-modal")).toBe("true");
     expect(getByText("dialog-text")).toBeTruthy();
   });
   test("Dialog renders without close button", function () {
@@ -23,18 +26,45 @@ describe("Dialog component tests", function () {
 
     expect(queryByRole("button")).toBeFalsy();
   });
+  test("Dialog renders with aria-modal false when overlay is not used", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      isCloseVisible: false,
+      overlay: false
+    }, "dialog-text")),
+        getByRole = _render3.getByRole;
+
+    expect(getByRole("dialog")).toBeTruthy();
+    expect(getByRole("dialog").getAttribute("aria-modal")).toBe("false");
+  });
   test("Calls correct function onCloseClick", function () {
     var onCloseClick = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
       onCloseClick: onCloseClick
     }, "dialog-text")),
-        getByRole = _render3.getByRole;
+        getByRole = _render4.getByRole;
 
     var closeButton = getByRole("button");
 
     _react2.fireEvent.click(closeButton);
 
+    expect(onCloseClick).toHaveBeenCalled();
+  });
+  test("Calls correct function onCloseClick when 'escape' key is pressed", function () {
+    var onCloseClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      onCloseClick: onCloseClick
+    }, "dialog-text")),
+        getByRole = _render5.getByRole;
+
+    _react2.fireEvent.keyDown(getByRole("button"), {
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    });
+
     expect(onCloseClick).toHaveBeenCalled();
   });
 });

package/dialog/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import DropdownPropsType from "./types";
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: DropdownPropsType) => JSX.Element;
 export default DxcDropdown;