@dxc-technology/halstack-react 0.0.0-a0a27b4 → 0.0.0-a1db683

package/dropdown/Dropdown.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 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"));
@@ -48,8 +48,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       _ref$optionsIconPosit = _ref.optionsIconPosition,
       optionsIconPosition = _ref$optionsIconPosit === void 0 ? "before" : _ref$optionsIconPosit,
       icon = _ref.icon,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
       _ref$label = _ref.label,
@@ -140,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, {
@@ -162,20 +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
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
-    label: label,
-    src: iconSrc,
-    iconPosition: iconPosition
-  }), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
-    iconPosition: iconPosition,
-    label: label
-  }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
+    src: icon
+  }) : 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, {
@@ -191,7 +188,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       vertical: "top",
       horizontal: "left"
     },
-    optionsIconPosition: optionsIconPosition,
     size: size,
     width: width,
     role: undefined,
@@ -213,14 +209,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon ? /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
-        label: option.label,
-        iconPosition: optionsIconPosition
-      }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : /*#__PURE__*/_react["default"].createElement(option.icon)) : option.iconSrc && /*#__PURE__*/_react["default"].createElement(ListIcon, {
+      }, optionsIconPosition === "after" && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "optionLabel"
+      }, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
-        src: option.iconSrc,
         iconPosition: optionsIconPosition
-      }), /*#__PURE__*/_react["default"].createElement("span", {
+      }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
+        src: option.icon
+      }) : option.icon), optionsIconPosition === "before" && /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -257,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;
@@ -283,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) {
@@ -351,21 +343,11 @@ 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)";
 });
 
-var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-});
+var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.buttonIconSize;
@@ -379,15 +361,7 @@ var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (
   return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
 });
 
-var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-});
+var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ListIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.optionIconSize;

package/dropdown/Dropdown.stories.tsx

@@ -9,28 +9,24 @@ export default {
   component: DxcDropdown,
 };
 
-const iconSVG = () => {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-    </svg>
-  );
-};
+const iconSVG = (
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
 
-const iconSVGLarge = () => {
-  return (
-    <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
-      <g>
-        <path d="M0,0h24v24H0V0z" fill="none" />
-        <path d="M0,0h24v24H0V0z" fill="none" />
-      </g>
-      <g>
-        <path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z" />
-      </g>
-    </svg>
-  );
-};
+const iconSVGLarge = (
+  <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+    <g>
+      <path d="M0,0h24v24H0V0z" fill="none" />
+      <path d="M0,0h24v24H0V0z" fill="none" />
+    </g>
+    <g>
+      <path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z" />
+    </g>
+  </svg>
+);
 
 const options: any = [
   {
@@ -54,7 +50,13 @@ const option: any = [
   },
 ];
 
-const optionsIcon: any = options.map((op, i) => ({ ...op, icon: i === 1 ? iconSVGLarge : iconSVG }));
+const icons = [
+  iconSVG,
+  iconSVGLarge,
+  "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+];
+
+const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
 
 export const Chromatic = () => (
   <>
@@ -92,7 +94,7 @@ export const Chromatic = () => (
         label="Icon after"
         options={options}
         onSelectOption={(value) => {}}
-        icon={iconSVG}
+        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
         iconPosition="after"
       />
     </ExampleContainer>

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();
+  });
+});

package/dropdown/types.d.ts

@@ -6,21 +6,17 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.SVGProps<SVGSVGElement>;
 declare type Option = {
     /**
      * Option display value.
      */
     label?: string;
     /**
-     * Element used as the icon that will be placed next to the
+     * Element or path used as the icon that will be placed next to the
      * option label.
      */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon that will be placed next to the option label.
-     */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Option inner value.
      */
@@ -37,15 +33,10 @@ declare type Props = {
      */
     optionsIconPosition?: "before" | "after";
     /**
-     * Element used as the icon that will be placed next to the
-     * dropdown label.
-     */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon that will be placed next to the
+     * Element or path used as the icon that will be placed next to the
      * dropdown label.
      */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Whether the icon should appear after or before the label.
      */

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,