@dxc-technology/halstack-react 0.0.0-1e57e26 → 0.0.0-1e5db1e

package/date-input/DateInput.test.js

@@ -37,7 +37,7 @@ describe("DateInput component tests", function () {
 
     expect(input.value).toBe("");
   });
-  test("Renders with personalized error", function () {
+  test("Renders with custom error", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       error: "Personalized error."
     })),
@@ -45,6 +45,29 @@ describe("DateInput component tests", function () {
 
     expect(getByText("Personalized error.")).toBeTruthy();
   });
+  test("Renders with an initial value when it is uncontrolled", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Default label",
+      placeholder: "Placeholder",
+      defaultValue: "21-10-2015"
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("button");
+    var d = new Date(2015, 9, 21);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(input.value).toBe("21-10-2015");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
   test("Renders with correct format: user typed date but it's invalid, onBlur error", function () {
     var onBlur = jest.fn(function (_ref) {
       var value = _ref.value,
@@ -53,12 +76,12 @@ describe("DateInput component tests", function () {
       expect(error).toBe("Invalid date.");
     });
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format MM/dd/yyyy",
       format: "MM/dd/yyyy",
       onBlur: onBlur
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render4.getByRole;
 
     var input = getByRole("textbox");
 
@@ -69,12 +92,12 @@ describe("DateInput component tests", function () {
   test("Renders with correct format: user typed date but it's invalid, onChange error", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format MM/dd/yyyy",
       format: "MM/dd/yyyy",
       onChange: onChange
     })),
-        getByRole = _render4.getByRole;
+        getByRole = _render5.getByRole;
 
     var input = getByRole("textbox");
 
@@ -83,14 +106,13 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10/90/2010",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
   });
   test("Calendar renders with correct date: today's date", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -105,11 +127,11 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Calendar renders with correct date: value prop", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       value: "20-10-2019"
     })),
-        getByText = _render6.getByText,
-        getByRole = _render6.getByRole;
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date(2019, 9, 20);
@@ -124,9 +146,9 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Calendar renders with correct date: user typed value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render7.getByText,
-        getByRole = _render7.getByRole;
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date(2010, 0, 1);
@@ -146,11 +168,11 @@ describe("DateInput component tests", function () {
   test("Calendar renders with correct date: invalid date, renders with today's date", function () {
     var onBlur = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByText = _render8.getByText,
-        getByRole = _render8.getByRole;
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -168,8 +190,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "01-01-xxxx",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].click(calendarAction);
@@ -177,12 +198,12 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Selecting a date from the calendar with an specific format", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format M-dd-yyyy",
       format: "M-dd-yyyy"
     })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole;
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
 
     var input = getByRole("textbox");
     var calendarAction = getByRole("button");
@@ -212,8 +233,8 @@ describe("DateInput component tests", function () {
     expect(input.value).toBe("".concat(d.getMonth() + 1, "-10-").concat(d.getFullYear()));
   });
   test("Selecting a date from the calendar (using keyboard presses)", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByRole = _render10.getByRole;
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render11.getByRole;
 
     var calendarAction = getByRole("button");
     var input = getByRole("textbox");
@@ -263,11 +284,11 @@ describe("DateInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render11.getByRole;
+        getByRole = _render12.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2011, 9, 10);
@@ -278,7 +299,6 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
 
@@ -287,7 +307,6 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
   });
@@ -295,11 +314,11 @@ describe("DateInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render12.getByRole;
+        getByRole = _render13.getByRole;
 
     var input = getByRole("textbox");
 
@@ -309,8 +328,7 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(6);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _react2.fireEvent.blur(input);
@@ -318,17 +336,16 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
   });
   test("onBlur function removes the error when it is fixed", function () {
     var onBlur = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByRole = _render13.getByRole;
+        getByRole = _render14.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2002, 1, 20);
@@ -342,8 +359,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -357,18 +373,17 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "20-02-2002",
-      error: null,
       date: d
     });
   });
   test("onBlur function removes the error when the input is empty", function () {
     var onBlur = jest.fn();
 
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       optional: true
     })),
-        getByRole = _render14.getByRole;
+        getByRole = _render15.getByRole;
 
     var input = getByRole("textbox");
 
@@ -381,8 +396,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -391,20 +405,18 @@ describe("DateInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: null,
-      date: null
+      value: ""
     });
   });
   test("onBlur & onChange functions error: required field (not optional)", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       onChange: onChange
     })),
-        getByRole = _render15.getByRole;
+        getByRole = _render16.getByRole;
 
     var date = getByRole("textbox");
 
@@ -419,22 +431,20 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
   });
   test("Disabled date input (calendar action must be shown but not clickable)", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       disabled: true
     })),
-        getByRole = _render16.getByRole,
-        queryByText = _render16.queryByText;
+        getByRole = _render17.getByRole,
+        queryByText = _render17.queryByText;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -450,10 +460,10 @@ describe("DateInput component tests", function () {
     expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
   });
   test("Input has correct accesibility attributes", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "Date input label"
     })),
-        getByRole = _render17.getByRole;
+        getByRole = _render18.getByRole;
 
     var input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();

package/date-input/types.d.ts

@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the input element.
      */
     name?: string;
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
@@ -50,28 +54,31 @@ declare type Props = {
      * element of the component. An object including the string value, the
      * error and the date value will be passed to this function.
      * If the string value is a valid date, error will
-     * be null. Also, if the string value is not a valid date, date will be null.
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
-        date: Date | null;
+        error?: string;
+        date?: Date;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the string value, the error and the date value
      * will be passed to this function. If the string value is a valid date, error will
-     * be null. Also, if the string value is not a valid date, date will be null.
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
-        date: Date | null;
+        error?: string;
+        date?: Date;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the date input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the date input
+     * component. If the defined value is an empty string, it will reserve a
+     * space below the component for a future error, but it would not change
+     * its look. In case of being undefined or null, both the appearance and
+     * the space for the error message would not be modified.
      */
     error?: string;
     /**

package/dialog/Dialog.js

@@ -13,9 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -45,12 +43,6 @@ var DxcDialog = function DxcDialog(_ref) {
       padding = _ref$padding === void 0 ? "small" : _ref$padding,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isResponsive = _useState2[0],
-      setIsResponsive = _useState2[1];
-
   var colorsTheme = (0, _useTheme["default"])();
 
   var handleClose = function handleClose() {
@@ -61,21 +53,6 @@ var DxcDialog = function DxcDialog(_ref) {
     onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
   };
 
-  var handleResize = function handleResize(width) {
-    setIsResponsive(width && width <= _variables.responsiveSizes.tablet);
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(window.innerWidth);
-  };
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return function () {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dialog
   }, /*#__PURE__*/_react["default"].createElement(DialogContainer, {
@@ -83,8 +60,7 @@ var DxcDialog = function DxcDialog(_ref) {
     isCloseVisible: isCloseVisible,
     onClose: handleOverlayClick,
     overlay: overlay,
-    padding: padding,
-    isResponsive: isResponsive
+    padding: padding
   }, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconContainer, {
     onClick: handleClose,
     tabIndex: tabIndex
@@ -104,7 +80,7 @@ var DxcDialog = function DxcDialog(_ref) {
   }, 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    max-width: ", ";\n    min-width: ", ";\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 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) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.overlay === true ? props.theme.overlayColor : "transparent";
@@ -112,11 +88,7 @@ var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_tem
   return props.overlay === true && props.theme.overlayOpacity;
 }, function (props) {
   return props.theme.backgroundColor;
-}, function (props) {
-  return props.isResponsive ? "92%" : "80%";
-}, function (props) {
-  return props.isResponsive ? "92%" : "800px";
-}, function (props) {
+}, _variables.responsiveSizes.medium, _variables.responsiveSizes.medium, function (props) {
   return props.isCloseVisible ? "72px" : "";
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);

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/file-input/FileInput.js

@@ -33,6 +33,8 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _FileItem = _interopRequireDefault(require("./FileItem"));
@@ -127,6 +129,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
       fileInputId = _useState6[0];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   (0, _react.useEffect)(function () {
     var getFiles = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
@@ -204,11 +207,11 @@ var DxcFileInput = function DxcFileInput(_ref) {
 
   var checkFileSize = function checkFileSize(file) {
     if (file.size < minSize) {
-      return "File size must be greater than min size.";
+      return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
     }
 
     if (file.size > maxSize) {
-      return "File size must be less than max size.";
+      return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
     }
   };
 
@@ -410,7 +413,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
     onChange: selectFiles
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
-    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? "Select files" : "Select file",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault,
     onClick: handleClick,
     disabled: disabled,
     size: "medium",
@@ -450,15 +453,15 @@ var DxcFileInput = function DxcFileInput(_ref) {
     mode: mode
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
-    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : "Select",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : translatedLabels.fileInput.dropAreaButtonLabelDefault,
     onClick: handleClick,
     disabled: disabled,
     size: "fitContent"
   })), mode === "dropzone" ? /*#__PURE__*/_react["default"].createElement(DropzoneLabel, {
     disabled: disabled
-  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file") : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
+  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
     disabled: disabled
-  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file")), files.map(function (file) {
+  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault)), files.map(function (file) {
     return /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
       mode: mode,
       multiple: multiple,