@dxc-technology/halstack-react 5.0.0 → 6.0.0

package/common/variables.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
+exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
 var globalTokens = {
-  // Color
+  //  Color
   inherit: "inherit",
   transparent: "transparent",
   hal_white: "#ffffff",
@@ -19,12 +19,15 @@ var globalTokens = {
   color_grey_800: "#4d4d4d",
   color_grey_600: "#808080",
   color_grey_50: "#fafafa",
+  color_grey_a_100: "#0000000d",
+  color_grey_a_300: "#00000033",
   hal_purple_l_95: "#f2eafa",
   hal_purple_l_90: "#e5d5f6",
   hal_purple_l_65: "#a46ede",
   hal_purple_s_38: "#5f249f",
   hal_purple_d_30: "#4b1c7d",
   hal_purple_d_20: "#321353",
+  hal_purple_d_70: "#9A6BB2",
   color_purple_600: "#7D2FD0",
   color_purple_300: "#cbacec",
   hal_blue_l_95: "#e6f4ff",
@@ -107,7 +110,7 @@ var globalTokens = {
   type_normal: "normal",
   type_spacing_tight_02: "-0.05em",
   type_spacing_tight_01: "-0.025em",
-  type_spacing_normal: "0",
+  type_spacing_normal: "0em",
   type_spacing_wide_01: "0.025em",
   type_spacing_wide_02: "0.05em",
   type_spacing_wide_03: "0.1em",
@@ -236,7 +239,7 @@ var componentTokens = {
     successBackgroundColor: globalTokens.hal_green_l_95,
     warningBackgroundColor: globalTokens.hal_yellow_l_95,
     errorBackgroundColor: globalTokens.hal_red_l_95,
-    hoverActionBackgroundColor: "#0000000D",
+    hoverActionBackgroundColor: globalTokens.color_grey_a_100,
     activeActionBackgroundColor: "#0000001A",
     focusActionBorderColor: globalTokens.hal_blue_l_50,
     overlayColor: "#000000B3"
@@ -257,12 +260,21 @@ var componentTokens = {
     oneShadowDepthShadowOffsetY: "3px",
     oneShadowDepthShadowBlur: "6px",
     oneShadowDepthShadowSpread: "0px",
-    oneShadowDepthShadowColor: "#00000033",
+    oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
     twoShadowDepthShadowOffsetX: "0px",
     twoShadowDepthShadowOffsetY: "3px",
     twoShadowDepthShadowBlur: "10px",
     twoShadowDepthShadowSpread: "0px",
-    twoShadowDepthShadowColor: "#00000033"
+    twoShadowDepthShadowColor: globalTokens.color_grey_a_300
+  },
+  bulletedList: {
+    fontColor: globalTokens.hal_black,
+    fontColorOnDark: globalTokens.hal_white,
+    bulletIconHeight: "1.5rem",
+    bulletIconWidth: "1.5rem",
+    bulletHeight: "5px",
+    bulletWidth: "5px",
+    bulletMarginRight: "0.5rem"
   },
   button: {
     labelFontLineHeight: globalTokens.type_leading_normal,
@@ -483,14 +495,13 @@ var componentTokens = {
     focusDropBorderColor: globalTokens.hal_blue_l_50,
     disabledDropBorderColor: globalTokens.hal_grey_l_60,
     dragoverDropBackgroundColor: globalTokens.color_blue_50,
-    hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
     activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
     errorFileItemBorderColor: globalTokens.hal_red_s_41,
     errorFileItemBackgroundColor: globalTokens.color_red_50,
-    errorFileItemIconBackgroundColor: globalTokens.color_red_700,
+    errorFilePreviewBackgroundColor: globalTokens.color_red_700,
     errorFileItemIconColor: globalTokens.hal_red_s_41,
     fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
-    fileItemIconColor: globalTokens.color_grey_600,
+    deleteFileItemColor: globalTokens.hal_black,
     errorMessageFontColor: globalTokens.hal_red_s_41,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_02,
@@ -517,9 +528,12 @@ var componentTokens = {
     fileItemBorderThickness: globalTokens.border_width_1,
     fileItemBorderStyle: globalTokens.border_solid,
     fileItemBorderRadius: globalTokens.border_radius_medium,
-    hoverDeleteFileItemBackgroundColor: "#0000000d",
-    activeDeleteFileItemBackgroundColor: "#00000033",
-    focusActionBorderColor: globalTokens.hal_blue_l_50
+    hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
+    activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
+    focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
+    filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
+    filePreviewIconColor: globalTokens.color_grey_600,
+    errorFilePreviewIconColor: globalTokens.hal_red_s_41
   },
   footer: {
     height: "124px",
@@ -712,7 +726,7 @@ var componentTokens = {
   link: {
     fontColor: globalTokens.hal_blue_s_35,
     fontFamily: globalTokens.inherit,
-    fontSize: globalTokens.type_scale_root,
+    fontSize: globalTokens.inherit,
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular,
     iconSize: "16px",
@@ -729,6 +743,13 @@ var componentTokens = {
     activeUnderlineColor: globalTokens.black,
     focusColor: globalTokens.hal_blue_l_50
   },
+  paragraph: {
+    fontColor: globalTokens.hal_black,
+    fontColorOnDark: globalTokens.hal_white,
+    display: "block",
+    fontSize: globalTokens.type_scale_03,
+    fontWeight: globalTokens.type_regular
+  },
   paginator: {
     backgroundColor: globalTokens.darkWhite,
     fontColor: globalTokens.hal_black,
@@ -737,15 +758,15 @@ var componentTokens = {
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular,
     fontTextTransform: "none",
-    height: "64px",
-    width: "100%",
-    marginRight: "40px",
-    marginLeft: "20px",
+    verticalPadding: "0.75rem",
+    horizontalPadding: "2rem",
+    marginRight: "2rem",
+    marginLeft: "2rem",
     itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "30px",
+    itemsPerPageSelectorMarginRight: "1rem",
     pageSelectorMarginRight: "30px",
     pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "30px",
+    totalItemsContainerMarginRight: "3rem",
     totalItemsContainerMarginLeft: "0px"
   },
   progressBar: {
@@ -777,21 +798,21 @@ var componentTokens = {
     overlayColor: globalTokens.black,
     overlayOpacity: "0.8"
   },
-  radio: {
-    circleLabelSpacing: "10px",
-    circleSize: "24px",
-    color: globalTokens.black,
-    colorOnDark: globalTokens.white,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    disabledFontColor: globalTokens.lighterBlack,
-    disabledFontColorOnDark: "#575757",
-    focusColor: globalTokens.hal_blue_l_50,
-    focusColorOnDark: "#1682FF",
-    fontColor: globalTokens.inherit,
-    fontColorOnDark: globalTokens.white,
+  quickNav: {
+    fontColor: globalTokens.hal_grey_s_40,
+    hoverFontColor: globalTokens.hal_purple_d_70,
+    selectedFontColor: globalTokens.hal_purple_s_38,
+    dividerBorderColor: globalTokens.hal_grey_l_75,
+    focusBorderColor: globalTokens.hal_blue_l_50,
+    focusBorderStyle: globalTokens.border_solid,
+    focusBorderThickness: globalTokens.border_width_2,
+    focusBorderRadius: globalTokens.border_width_2,
+    paddingTop: globalTokens.spacing_03,
+    paddingBottom: globalTokens.spacing_03,
+    paddingLeft: globalTokens.spacing_05,
+    paddingRight: globalTokens.spacing_05,
     fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_root,
+    fontSize: globalTokens.type_scale_02,
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular
   },
@@ -905,24 +926,33 @@ var componentTokens = {
     arrowContainerColor: globalTokens.hal_grey_l_90,
     arrowColor: globalTokens.hal_black,
     titleFontFamily: globalTokens.type_sans,
-    titleFontSize: globalTokens.type_scale_05,
+    titleFontSize: globalTokens.type_scale_04,
     titleFontStyle: globalTokens.type_normal,
-    titleFontWeight: globalTokens.type_regular,
-    titleFontColor: globalTokens.hal_black,
+    titleFontWeight: globalTokens.type_semibold,
+    titleFontColor: globalTokens.color_grey_800,
     titleFontTextTransform: "none",
     titleFontLetterSpacing: globalTokens.type_spacing_normal,
-    subtitleFontFamily: globalTokens.type_sans,
-    subtitleFontSize: globalTokens.type_scale_03,
-    subtitleFontStyle: globalTokens.type_normal,
-    subtitleFontWeight: globalTokens.type_regular,
-    subtitleFontColor: globalTokens.color_grey_800,
-    subtitleFontTextTransform: globalTokens.type_uppercase,
-    subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
+    groupTitleFontFamily: globalTokens.type_sans,
+    groupTitleFontSize: globalTokens.type_scale_02,
+    groupTitleFontStyle: globalTokens.type_normal,
+    groupTitleFontWeight: globalTokens.type_semibold,
+    groupTitleFontColor: globalTokens.color_grey_800,
+    groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
+    groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
+    groupTitleSelectedFontColor: globalTokens.white,
+    groupTitleSelectedBackgroundColor: globalTokens.white,
+    groupTitleFontTextTransform: globalTokens.type_uppercase,
+    groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
     linkFontFamily: globalTokens.type_sans,
     linkFontSize: globalTokens.type_scale_02,
     linkFontStyle: globalTokens.type_normal,
     linkFontWeight: globalTokens.type_regular,
     linkFontColor: globalTokens.color_grey_800,
+    linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
+    linkSelectedFontColor: globalTokens.white,
+    linkSelectedBackgroundColor: globalTokens.color_grey_800,
+    linkSelectedHoverFontColor: globalTokens.white,
+    linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
     linkFontTextTransform: "none",
     linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
     linkTextDecoration: globalTokens.type_no_line,
@@ -1010,7 +1040,7 @@ var componentTokens = {
   },
   spinner: {
     trackCircleColor: "#5f249f",
-    trackCircleColorOnDark: "#a46ede",
+    trackCircleColorOverlay: "#a46ede",
     totalCircleColor: globalTokens.white,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_02,
@@ -1145,6 +1175,7 @@ var componentTokens = {
     disabledFontColor: "#999999",
     disabledIconColor: "#999999",
     disabledFontStyle: globalTokens.type_normal,
+    disabledBadgeBackgroundColor: "#0000004D",
     hoverBackgroundColor: "#f2eafa",
     pressedBackgroundColor: "#e5d5f6",
     pressedFontWeight: globalTokens.type_semibold,
@@ -1264,57 +1295,64 @@ var componentTokens = {
     optionFocusBorderThickness: globalTokens.border_width_2
   },
   wizard: {
-    disabledBackgroundColor: globalTokens.lightGrey,
-    disabledFontColor: globalTokens.darkGrey,
-    stepContainerFontSize: globalTokens.type_scale_03,
-    stepContainerFontFamily: globalTokens.type_sans,
-    stepContainerFontStyle: globalTokens.type_normal,
-    stepContainerFontWeight: globalTokens.type_regular,
-    stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
-    stepContainerFontColor: globalTokens.black,
-    stepContainerSelectedFontColor: globalTokens.white,
-    stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
-    stepContainerBackgroundColor: globalTokens.white,
-    stepContainerIconSize: "19px",
+    visitedStepFontColor: globalTokens.hal_black,
+    visitedStepBackgroundColor: globalTokens.hal_white,
+    visitedStepBorderColor: globalTokens.hal_black,
+    unvisitedStepFontColor: globalTokens.hal_grey_s_40,
+    unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
+    unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
+    unvisitedStepBackgroundColor: globalTokens.transparent,
+    unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
+    selectedStepFontColor: globalTokens.white,
+    selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
+    selectedStepBorderColor: globalTokens.hal_purple_s_38,
+    selectedLabelFontColor: globalTokens.hal_black,
+    selectedHelperTextFontColor: globalTokens.hal_black,
+    selectedStepWidth: "32px",
+    selectedStepHeight: "32px",
+    selectedStepBorderThickness: "2px",
+    selectedStepBorderStyle: "solid",
+    selectedStepBorderRadius: "45px",
+    stepFontSize: globalTokens.type_scale_03,
+    stepFontFamily: globalTokens.type_sans,
+    stepFontStyle: globalTokens.type_normal,
+    stepFontWeight: globalTokens.type_regular,
+    stepFontTracking: globalTokens.type_spacing_wide_02,
+    stepIconSize: "20px",
+    stepWidth: "32px",
+    stepHeight: "32px",
+    stepBorderThickness: "2px",
+    stepBorderStyle: "solid",
+    stepBorderRadius: "45px",
+    visitedLabelFontColor: globalTokens.hal_black,
     labelFontSize: globalTokens.type_scale_03,
     labelFontFamily: globalTokens.type_sans,
     labelFontStyle: globalTokens.type_normal,
     labelFontWeight: globalTokens.type_regular,
-    labelLetterSpacing: globalTokens.type_spacing_normal,
+    labelFontTracking: globalTokens.type_spacing_normal,
     labelFontTextTransform: "none",
     labelTextAlign: "left",
-    labelFontColor: globalTokens.darkGrey,
-    visitedLabelFontColor: globalTokens.black,
-    visitedDescriptionFontColor: globalTokens.black,
-    descriptionFontSize: globalTokens.type_scale_01,
-    descriptionFontFamily: globalTokens.type_sans,
-    descriptionFontStyle: globalTokens.type_normal,
-    descriptionFontWeight: globalTokens.type_regular,
-    descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
-    descriptionFontTextTransform: "none",
-    descriptionFontColor: globalTokens.darkGrey,
-    descriptionTextAlign: "left",
-    circleWidth: "32px",
-    circleHeight: "32px",
-    circleBorderThickness: "2px",
-    circleBorderStyle: "solid",
-    circleBorderRadius: "45px",
-    circleBorderColor: globalTokens.black,
-    selectedCircleWidth: "32px",
-    selectedCircleHeight: "32px",
-    selectedCircleBorderThickness: "2px",
-    selectedCircleBorderStyle: "solid",
-    selectedCircleBorderRadius: "45px",
-    selectedCircleBorderColor: globalTokens.purple,
-    disabledCircleWidth: "32px",
-    disabledCircleHeight: "32px",
-    disabledCircleBorderThickness: "2px",
-    disabledCircleBorderStyle: "solid",
-    disabledCircleBorderRadius: "45px",
-    disabledCircleBorderColor: globalTokens.lightGrey,
+    helperTextFontSize: globalTokens.type_scale_02,
+    helperTextFontFamily: globalTokens.type_sans,
+    helperTextFontStyle: globalTokens.type_normal,
+    helperTextFontWeight: globalTokens.type_regular,
+    helperTextFontTracking: globalTokens.type_spacing_normal,
+    helperTextFontTextTransform: "none",
+    visitedHelperTextFontColor: globalTokens.hal_black,
+    helperTextTextAlign: "left",
+    disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
+    disabledStepFontColor: globalTokens.hal_grey_l_60,
+    disabledLabelFontColor: globalTokens.hal_grey_l_60,
+    disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
+    disabledStepBorderColor: globalTokens.hal_grey_l_95,
+    disabledStepWidth: "32px",
+    disabledStepHeight: "32px",
+    disabledStepBorderThickness: "2px",
+    disabledStepBorderStyle: "solid",
+    disabledStepBorderRadius: "45px",
     separatorBorderThickness: "1px",
     separatorBorderStyle: "solid",
-    separatorColor: globalTokens.lightGrey,
+    separatorColor: globalTokens.hal_grey_s_40,
     focusColor: globalTokens.hal_blue_l_50
   }
 };
@@ -1369,4 +1407,89 @@ var typeface = {
     textTransform: "uppercase"
   }
 };
-exports.typeface = typeface;
+exports.typeface = typeface;
+var defaultTranslatedComponentLabels = {
+  formFields: {
+    optionalLabel: "(Optional)",
+    requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
+    requiredValueErrorMessage: "This field is required. Please, enter a value.",
+    formatRequestedErrorMessage: "Please match the format requested.",
+    lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
+      return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
+    },
+    logoAlternativeText: "Logo"
+  },
+  alert: {
+    infoTitleText: "information",
+    successTitleText: "success",
+    warningTitleText: "warning",
+    errorTitleText: "error"
+  },
+  dateInput: {
+    invalidDateErrorMessage: "Invalid date."
+  },
+  fileInput: {
+    fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
+    fileSizeLessThanErrorMessage: "File size must be less than max size.",
+    multipleButtonLabelDefault: "Select files",
+    singleButtonLabelDefault: "Select file",
+    dropAreaButtonLabelDefault: "Select",
+    multipleDropAreaLabelDefault: "or drop files",
+    singleDropAreaLabelDefault: "or drop a file"
+  },
+  footer: {
+    copyrightText: function copyrightText(year) {
+      return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
+    }
+  },
+  numberInput: {
+    valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
+      return "Value must be greater than or equal to ".concat(value, ".");
+    },
+    valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
+      return "Value must be less than or equal to ".concat(value, ".");
+    },
+    decrementValueTitle: "Decrement value",
+    incrementValueTitle: "Increment value"
+  },
+  paginator: {
+    itemsPerPageText: "Items per page ",
+    minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
+      return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
+    },
+    goToPageText: "Go to page:",
+    pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
+      return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
+    }
+  },
+  passwordInput: {
+    inputShowPasswordTitle: "Show password",
+    inputHidePasswordTitle: "Hide password"
+  },
+  quickNav: {
+    contentTitle: "Contents"
+  },
+  radioGroup: {
+    optionalItemLabelDefault: "N/A"
+  },
+  select: {
+    noMatchesErrorMessage: "No matches found",
+    actionClearSelectionTitle: "Clear selection",
+    actionClearSearchTitle: "Clear search"
+  },
+  textInput: {
+    clearFieldActionTitle: "Clear field",
+    searchingMessage: "Searching...",
+    fetchingDataErrorMessage: "Error fetching data"
+  },
+  calendar: {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+  },
+  applicationLayout: {
+    visibilityToggleTitle: "Toggle visibility sidenav"
+  }
+};
+exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;

package/date-input/DateInput.js

@@ -33,6 +33,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
 var _templateObject;
@@ -87,6 +89,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       setAnchorEl = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var refDate = ref || (0, _react.useRef)(null);
 
   var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
@@ -115,7 +118,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
         inputError = _ref2.error;
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
     var dayjsDate = (0, _dayjs["default"])(newValue, format.toUpperCase(), true);
-    var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && "Invalid date.";
+    var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
     var callbackParams = inputError || invalidDateMessage ? {
       value: newValue,
       error: inputError || invalidDateMessage
@@ -131,7 +134,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var value = _ref3.value,
         inputError = _ref3.error;
     var dayjsDate = (0, _dayjs["default"])(value, format.toUpperCase(), true);
-    var invalidDateMessage = value !== "" && !dayjsDate.isValid() && "Invalid date.";
+    var invalidDateMessage = value !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
     var callbackParams = inputError || invalidDateMessage ? {
       value: value,
       error: inputError || invalidDateMessage

package/dropdown/Dropdown.stories.tsx

@@ -17,7 +17,7 @@ const iconSVG = (
 );
 
 const iconSVGLarge = (
-  <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+  <svg enableBackground="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" />

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,

package/file-input/FileItem.js

@@ -133,9 +133,9 @@ var FileItemContainer = _styledComponents["default"].div(_templateObject3 || (_t
 var ImagePreview = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  object-fit: contain;\n  margin-right: 12px;\n  border-radius: 2px;\n"])));
 
 var IconPreviewContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  background-color: ", ";\n  width: 48px;\n  height: 48px;\n  border-radius: 2px;\n  color: ", ";\n"])), function (props) {
-  return props.error ? props.theme.errorFileItemIconBackgroundColor : props.theme.fileItemIconBackgroundColor;
+  return props.error ? props.theme.errorFilePreviewBackgroundColor : props.theme.filePreviewBackgroundColor;
 }, function (props) {
-  return props.error ? props.theme.errorFileItemIconColor : props.theme.fileItemIconColor;
+  return props.error ? props.theme.errorFilePreviewIconColor : props.theme.filePreviewIconColor;
 });
 
 var IconPreview = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
@@ -156,14 +156,16 @@ var FileName = _styledComponents["default"].span(_templateObject7 || (_templateO
 
 var ErrorIcon = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  color: #d0011b;\n"])));
 
-var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  margin-left: 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  margin-left: 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  color: ", ";\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.deleteFileItemColor;
 }, function (props) {
   return props.theme.hoverDeleteFileItemBackgroundColor;
 }, function (props) {
-  return props.theme.focusActionBorderColor;
+  return props.theme.focusDeleteFileItemBorderColor;
 }, function (props) {
-  return props.theme.focusActionBorderColor;
+  return props.theme.focusDeleteFileItemBorderColor;
 }, function (props) {
   return props.theme.activeDeleteFileItemBackgroundColor;
 });

package/flex/Flex.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FlexPropsType from "./types";
+declare const DxcFlex: ({ children, ...props }: FlexPropsType) => JSX.Element;
+export default DxcFlex;

package/flex/Flex.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var _excluded = ["children"];
+
+var DxcFlex = function DxcFlex(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(Flex, props, children);
+};
+
+var Flex = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
+  var _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? "row" : _ref2$direction,
+      _ref2$wrap = _ref2.wrap,
+      wrap = _ref2$wrap === void 0 ? "nowrap" : _ref2$wrap,
+      _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? "flex-start" : _ref2$justifyContent,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? "stretch" : _ref2$alignItems,
+      _ref2$alignContent = _ref2.alignContent,
+      alignContent = _ref2$alignContent === void 0 ? "normal" : _ref2$alignContent,
+      _ref2$alignSelf = _ref2.alignSelf,
+      alignSelf = _ref2$alignSelf === void 0 ? "auto" : _ref2$alignSelf,
+      _ref2$gap = _ref2.gap,
+      gap = _ref2$gap === void 0 ? "0" : _ref2$gap,
+      _ref2$order = _ref2.order,
+      order = _ref2$order === void 0 ? 0 : _ref2$order,
+      _ref2$grow = _ref2.grow,
+      grow = _ref2$grow === void 0 ? 0 : _ref2$grow,
+      _ref2$shrink = _ref2.shrink,
+      shrink = _ref2$shrink === void 0 ? 1 : _ref2$shrink,
+      _ref2$basis = _ref2.basis,
+      basis = _ref2$basis === void 0 ? "auto" : _ref2$basis;
+  return "\n    flex-direction: ".concat(direction, "; \n    flex-wrap: ").concat(wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    gap: ").concat((0, _typeof2["default"])(gap) === "object" ? "".concat(gap.rowGap, " ").concat(gap.columnGap) : gap, ";\n    order: ").concat(order, ";\n    flex-grow: ").concat(grow, ";\n    flex-shrink: ").concat(shrink, ";\n    flex-basis: ").concat(basis, ";\n    align-self: ").concat(alignSelf, ";\n  ");
+});
+
+var _default = DxcFlex;
+exports["default"] = _default;