@dxc-technology/halstack-react 0.0.0-c1253f5 → 0.0.0-c18d61a

package/common/variables.js

@@ -179,13 +179,13 @@ var componentTokens = {
     titleLabelFontStyle: globalTokens.type_normal,
     titleLabelFontColor: globalTokens.hal_black,
     disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
-    titleLabelPaddingLeft: "0px",
-    titleLabelPaddingRight: "16px",
     titleLabelPaddingTop: "0px",
     titleLabelPaddingBottom: "0px",
+    titleLabelPaddingLeft: "0px",
+    titleLabelPaddingRight: "16px",
+    focusBorderColor: globalTokens.hal_blue_l_50,
     focusBorderStyle: "solid",
     focusBorderThickness: "2px",
-    focusBorderColor: globalTokens.hal_blue_l_50,
     borderRadius: "4px",
     boxShadowOffsetX: "0px",
     boxShadowOffsetY: "6px",
@@ -354,7 +354,7 @@ var componentTokens = {
     backgroundColorChecked: globalTokens.hal_blue_s_35,
     backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
     hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
-    hoverBackgroundColorCheckedOnDark: global.hal_white,
+    hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
     disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
     disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
     borderColor: globalTokens.hal_blue_s_35,
@@ -435,7 +435,10 @@ var componentTokens = {
     boxShadowOffsetY: "1px",
     boxShadowBlur: "3px",
     boxShadowColor: "rgba(0, 0, 0, 0.2)",
-    overlayOpacity: "0.7"
+    overlayOpacity: "0.7",
+    fontFamily: globalTokens.type_sans,
+    fontSize: globalTokens.type_scale_03,
+    fontWeight: globalTokens.type_regular
   },
   dropdown: {
     buttonBackgroundColor: globalTokens.hal_white,
@@ -760,13 +763,13 @@ var componentTokens = {
     fontTextTransform: "none",
     verticalPadding: "0.75rem",
     horizontalPadding: "2rem",
-    marginRight: "2rem",
-    marginLeft: "2rem",
+    marginRight: "40px",
+    marginLeft: "20px",
     itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "1rem",
+    itemsPerPageSelectorMarginRight: "0.5rem",
     pageSelectorMarginRight: "30px",
     pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "3rem",
+    totalItemsContainerMarginRight: "2.5rem",
     totalItemsContainerMarginLeft: "0px"
   },
   progressBar: {
@@ -1103,10 +1106,10 @@ var componentTokens = {
     thumbFocusColorOnDark: "#1682FF",
     thumbHeight: "24px",
     thumbWidth: "24px",
-    thumbShift: "40%",
+    thumbShift: "1.25rem",
     trackHeight: "12px",
-    trackWidth: "60px",
-    spaceBetweenLabelSwitch: "0px"
+    trackWidth: "36px",
+    spaceBetweenLabelSwitch: "8px"
   },
   tag: {
     fontFamily: globalTokens.type_sans,
@@ -1437,13 +1440,18 @@ var defaultTranslatedComponentLabels = {
     singleButtonLabelDefault: "Select file",
     dropAreaButtonLabelDefault: "Select",
     multipleDropAreaLabelDefault: "or drop files",
-    singleDropAreaLabelDefault: "or drop a file"
+    singleDropAreaLabelDefault: "or drop a file",
+    deleteFileActionTitle: "Remove file"
   },
   footer: {
     copyrightText: function copyrightText(year) {
       return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
     }
   },
+  header: {
+    closeIcon: "Close menu",
+    hamburguerTitle: "Menu"
+  },
   numberInput: {
     valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
       return "Value must be greater than or equal to ".concat(value, ".");
@@ -1455,7 +1463,7 @@ var defaultTranslatedComponentLabels = {
     incrementValueTitle: "Increment value"
   },
   paginator: {
-    itemsPerPageText: "Items per page ",
+    itemsPerPageText: "Items per page: ",
     minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
       return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
     },
@@ -1479,6 +1487,10 @@ var defaultTranslatedComponentLabels = {
     actionClearSelectionTitle: "Clear selection",
     actionClearSearchTitle: "Clear search"
   },
+  tabs: {
+    scrollLeft: "Scroll left",
+    scrollRight: "Scroll right"
+  },
   textInput: {
     clearFieldActionTitle: "Clear field",
     searchingMessage: "Searching...",

package/date-input/DateInput.js

@@ -93,9 +93,9 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var refDate = ref || (0, _react.useRef)(null);
 
   var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 27:
-        // Esc
+    switch (event.key) {
+      case "Esc":
+      case "Escape":
         event.preventDefault();
         setIsOpen(false);
         break;

package/dialog/Dialog.js

@@ -13,19 +13,17 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-
 var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -53,15 +51,37 @@ var DxcDialog = function DxcDialog(_ref) {
     onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
   };
 
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      handleClose();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (isCloseVisible) {
+      window.addEventListener("keydown", handleOnKeyDown);
+    }
+
+    return function () {
+      window.removeEventListener("keydown", handleOnKeyDown);
+    };
+  }, [isCloseVisible]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dialog
-  }, /*#__PURE__*/_react["default"].createElement(DialogContainer, {
-    open: true,
-    isCloseVisible: isCloseVisible,
-    onClose: handleOverlayClick,
-    overlay: overlay,
+  }, /*#__PURE__*/_react["default"].createElement(BodyStyle, null), /*#__PURE__*/_react["default"].createElement(DialogContainer, {
+    role: "presentation"
+  }, overlay && /*#__PURE__*/_react["default"].createElement(Overlay, {
+    onClick: handleOverlayClick
+  }), /*#__PURE__*/_react["default"].createElement(Dialog, {
+    role: "dialog",
+    "aria-modal": overlay,
+    isCloseVisible: isCloseVisible
+  }, /*#__PURE__*/_react["default"].createElement(Children, {
     padding: padding
-  }, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.dialog.backgroundColor
+  }, children)), isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconContainer, {
     onClick: handleClose,
     tabIndex: tabIndex
   }, /*#__PURE__*/_react["default"].createElement(CloseIcon, {
@@ -75,24 +95,34 @@ var DxcDialog = function DxcDialog(_ref) {
     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"
-  }))), /*#__PURE__*/_react["default"].createElement(Children, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.dialog.backgroundColor
-  }, children))));
+  }))))));
 };
 
-var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: unset;\n  font-family: ", ";\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n    opacity: ", " !important;\n  }\n  .MuiDialog-paperWidthSm {\n    background-color: ", ";\n    @media (min-width: ", "rem) {\n      max-width: 80%;\n      min-width: 800px;\n    }\n\n    @media (max-width: ", "rem) {\n      //mobile phones\n      max-width: 92%;\n      min-width: 92%;\n    }\n\n    box-sizing: border-box;\n    min-height: ", ";\n    box-shadow: ", ";\n\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"])), function (props) {
+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  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  inset: 0px;\n  height: 100%;\n  z-index: 1300;\n"])));
+
+var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0px;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n"])), function (props) {
+  return props.theme.overlayColor;
+}, function (props) {
+  return props.theme.overlayOpacity;
+});
+
+var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  z-index: 1300;\n  background-color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  ", "\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 4px;\n  position: relative;\n\n  @media (min-width: ", "rem) {\n    max-width: 80%;\n    min-width: 800px;\n  }\n\n  @media (max-width: ", "rem) {\n    //mobile phones\n    max-width: 92%;\n    min-width: 92%;\n  }\n"])), function (props) {
+  return props.theme.backgroundColor;
+}, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.overlay === true ? props.theme.overlayColor : "transparent";
+  return props.theme.fontSize;
 }, function (props) {
-  return props.overlay === true && props.theme.overlayOpacity;
+  return props.theme.fontWeight;
 }, function (props) {
-  return props.theme.backgroundColor;
-}, _variables.responsiveSizes.medium, _variables.responsiveSizes.medium, function (props) {
-  return props.isCloseVisible ? "72px" : "";
+  return props.isCloseVisible && "min-height: 72px; padding-top: 24px;";
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
-}, function (props) {
+}, _variables.responsiveSizes.medium, _variables.responsiveSizes.medium);
+
+var Children = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (props) {
   return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : _variables.spaces["small"];
 }, function (props) {
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
@@ -104,13 +134,7 @@ var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_tem
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
-var Children = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var CloseIconContainer = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  background: none;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border: none;\n"])), function (props) {
-  return props.theme.closeIconTopPosition;
-}, function (props) {
-  return props.theme.closeIconRightPosition;
-}, function (props) {
+var CloseIconContainer = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  background: none;\n  border: none;\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (props) {
   return props.theme.closeIconColor;
 }, function (props) {
   return props.theme.closeIconWidth;
@@ -118,7 +142,7 @@ var CloseIconContainer = _styledComponents["default"].button(_templateObject3 ||
   return props.theme.closeIconHeight;
 });
 
-var CloseIcon = _styledComponents["default"].svg(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n"])), function (props) {
+var CloseIcon = _styledComponents["default"].svg(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n"])), function (props) {
   return props.theme.closeIconBackgroundColor;
 }, function (props) {
   return props.theme.closeIconWidth;

package/dialog/Dialog.stories.tsx

@@ -1,6 +1,9 @@
 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";
 
@@ -31,6 +34,50 @@ export const DefaultDialog = () => (
   </>
 );
 
+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>
+  </>
+);
+
 export const DialogWithoutOverlay = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Without Overlay" theme="light" level={4} />
@@ -209,4 +256,12 @@ export const DialogWithXxlargePadding = () => (
       </p>{" "}
     </DxcDialog>
   </ExampleContainer>
-);
+);
+
+export const ResponsiveDialog = RespDialog.bind({});
+ResponsiveDialog.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [375] },
+};

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;
@@ -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;