@dxc-technology/halstack-react 0.0.0-c680086 → 0.0.0-c713b1b

package/dropdown/Dropdown.js

@@ -138,6 +138,11 @@ var DxcDropdown = function DxcDropdown(_ref) {
     }));
   };
 
+  var labelComponent = /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
+    iconPosition: iconPosition,
+    label: label
+  }, label);
+
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dropdown
   }, /*#__PURE__*/_react["default"].createElement(DXCDropdownContainer, {
@@ -160,18 +165,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
     ref: ref,
     tabIndex: tabIndex
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContainer, {
-    iconPosition: iconPosition,
     caretHidden: caretHidden
-  }, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
+  }, iconPosition === "after" && labelComponent, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
     label: label,
     iconPosition: iconPosition,
     disabled: disabled
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
     src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
-    iconPosition: iconPosition,
-    label: label
-  }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
+  }) : icon), iconPosition === "before" && labelComponent), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
     caretHidden: caretHidden,
     disabled: disabled
   }, !caretHidden && (anchorEl === null ? /*#__PURE__*/_react["default"].createElement(DownArrowIcon, null) : /*#__PURE__*/_react["default"].createElement(UpArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(DXCMenu, {
@@ -187,7 +188,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       vertical: "top",
       horizontal: "left"
     },
-    optionsIconPosition: optionsIconPosition,
     size: size,
     width: width,
     role: undefined,
@@ -209,12 +209,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
+      }, optionsIconPosition === "after" && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "optionLabel"
+      }, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
         iconPosition: optionsIconPosition
       }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
         src: option.icon
-      }) : option.icon), /*#__PURE__*/_react["default"].createElement("span", {
+      }) : option.icon), optionsIconPosition === "before" && /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -251,7 +253,7 @@ var DXCDropdownContainer = _styledComponents["default"].div(_templateObject || (
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      flex-direction: ", ";\n      justify-content: ", ";\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
+var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.theme.optionPaddingTop;
@@ -277,10 +279,6 @@ var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObj
   return props.theme.scrollBarTrackColor;
 }, function (props) {
   return props.theme.scrollBarThumbColor;
-}, function (props) {
-  return props.optionsIconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
-  return props.optionsIconPosition === "after" && "flex-end" || "";
 }, function (props) {
   return props.theme.optionBackgroundColor;
 }, function (props) {
@@ -345,9 +343,7 @@ var DropdownTrigger = _styledComponents["default"].button(_templateObject3 || (_
 
 var DropdownTriggerLabel = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: left;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 
-var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
-  return props.iconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
+var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
   return props.caretHidden ? "100%" : "calc(100% - 36px)";
 });
 

package/dropdown/Dropdown.test.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+global.document.createRange = function () {
+  return {
+    setStart: function setStart() {},
+    setEnd: function setEnd() {},
+    commonAncestorContainer: {
+      nodeName: "BODY",
+      ownerDocument: document
+    }
+  };
+};
+
+describe("Dropdown component tests", function () {
+  test("Dropdown renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      label: "dropdown-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("dropdown-test")).toBeTruthy();
+  });
+  test("Dropdown renders with correct icon before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render2.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      iconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render3.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("onClick shows and hides option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        queryByText = _render4.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Before clicked is not showed
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+  test("Disabled dropdown is not clickable", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      disabled: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render5.queryByText;
+
+    var dropdown = queryByText("dropdown-test");
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeFalsy();
+  });
+  test("Dropdown renders with correct icon before option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      optionsIconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with caret hidden", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      caretHidden: true,
+      label: "dropdown-test"
+    })),
+        queryByRole = _render8.queryByRole;
+
+    expect(queryByRole("img")).toBeFalsy();
+  });
+  test("onSelectOption fuction is called correctly", function () {
+    var onSelectOption = jest.fn(function (i) {
+      return i;
+    });
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      onSelectOption: onSelectOption,
+      label: "dropdown-test"
+    })),
+        getByText = _render9.getByText;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    var option = getByText("option-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(option);
+    });
+    expect(onSelectOption).toHaveBeenCalledWith(1);
+  });
+  test("expandOnHover shows and hides the option correctly", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      expandOnHover: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render10.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Verify that is not showed before
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseOver(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+});