@dxc-technology/halstack-react 0.0.0-2c3a5e1 → 0.0.0-2d5bb6f

package/dialog/Dialog.stories.tsx

@@ -1,20 +1,31 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
 import DxcDialog from "./Dialog";
+import DxcTextInput from "../text-input/TextInput";
+import DxcButton from "../button/Button";
+import DxcFlex from "../flex/Flex";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Dialog ",
   component: DxcDialog,
 };
 
+const opinionatedTheme = {
+  dialog: {
+    baseColor: "#ffffff",
+    closeIconColor: "#000000",
+    overlayColor: "#000000b3",
+  },
+};
+
 export const DefaultDialog = () => (
   <>
     <ExampleContainer expanded={true}>
       <Title title="Default dialog" theme="light" level={4} />
       <DxcDialog>
-        {" "}
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
           placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -25,7 +36,74 @@ export const DefaultDialog = () => (
           fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
           augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
           dignissim, pharetra neque molestie, molestie lectus.
-        </p>{" "}
+        </p>
+      </DxcDialog>
+    </ExampleContainer>
+  </>
+);
+
+export const DefaultDialogOpinionated = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Default dialog" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDialog>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
+            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
+            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
+            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+          </p>
+        </DxcDialog>
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+
+export const DialogWithInputs = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Dialog with inputs" theme="light" level={4} />
+      <DxcDialog>
+        <DxcInset bottom="1rem">
+          <DxcFlex gap="2rem" direction="column">
+            <DxcFlex gap="1rem" direction="column">
+              <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
+              <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
+            </DxcFlex>
+            <DxcFlex justifyContent="flex-end" gap="1rem">
+              <DxcButton label="Save"></DxcButton>
+              <DxcButton label="Cancel" mode="secondary"></DxcButton>
+            </DxcFlex>
+          </DxcFlex>
+        </DxcInset>
+      </DxcDialog>
+    </ExampleContainer>
+  </>
+);
+
+const RespDialog = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Responsive dialog" theme="light" level={4} />
+      <DxcDialog>
+        <DxcInset bottom="1rem">
+          <DxcFlex gap="2rem" direction="column">
+            <DxcFlex gap="1rem" direction="column">
+              <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
+              <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
+            </DxcFlex>
+            <DxcFlex justifyContent="flex-end" gap="1rem">
+              <DxcButton label="Save"></DxcButton>
+              <DxcButton label="Cancel" mode="secondary"></DxcButton>
+            </DxcFlex>
+          </DxcFlex>
+        </DxcInset>
       </DxcDialog>
     </ExampleContainer>
   </>
@@ -35,7 +113,6 @@ export const DialogWithoutOverlay = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Without Overlay" theme="light" level={4} />
     <DxcDialog overlay={false}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -46,7 +123,7 @@ export const DialogWithoutOverlay = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -55,7 +132,6 @@ export const DialogCloseVisibleFalse = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Close Visible" theme="dark" level={4} />
     <DxcDialog isCloseVisible={false}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -66,7 +142,7 @@ export const DialogCloseVisibleFalse = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -75,7 +151,6 @@ export const DialogWithXxsmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
     <DxcDialog padding={"xxsmall"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -86,7 +161,7 @@ export const DialogWithXxsmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -95,7 +170,6 @@ export const DialogWithXsmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xsmall Padding" theme="light" level={4} />
     <DxcDialog padding={"xsmall"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -106,7 +180,7 @@ export const DialogWithXsmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -115,7 +189,6 @@ export const DialogWithSmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Small Padding" theme="light" level={4} />
     <DxcDialog padding={"small"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -126,7 +199,7 @@ export const DialogWithSmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -135,7 +208,6 @@ export const DialogWithMediumPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Medium Padding" theme="light" level={4} />
     <DxcDialog padding={"medium"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -146,7 +218,7 @@ export const DialogWithMediumPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -155,7 +227,6 @@ export const DialogWithLargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Large Padding" theme="light" level={4} />
     <DxcDialog padding={"large"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -166,7 +237,7 @@ export const DialogWithLargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -175,7 +246,6 @@ export const DialogWithXlargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xlarge Padding" theme="light" level={4} />
     <DxcDialog padding={"xlarge"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -186,7 +256,7 @@ export const DialogWithXlargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -195,7 +265,6 @@ export const DialogWithXxlargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
     <DxcDialog padding={"xxlarge"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -206,7 +275,15 @@ export const DialogWithXxlargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
-);
+);
+
+export const ResponsiveDialog = RespDialog.bind({});
+ResponsiveDialog.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [375] },
+};

package/dialog/Dialog.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+describe("Dialog component tests", 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,
+      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 () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        isCloseVisible: false
+      }, "dialog-text")),
+      queryByRole = _render2.queryByRole;
+    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 _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        onCloseClick: onCloseClick
+      }, "dialog-text")),
+      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,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
+export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+type Props = {
     /**
      * If true, the close 'x' button will be visible.
      */
@@ -26,6 +26,7 @@ declare type Props = {
      */
     onBackgroundClick?: () => void;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

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;