@dxc-technology/halstack-react 0.0.0-bcc5ff3 → 0.0.0-bd364ae

package/tabs-nav/Tab.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+
+var _NavTabs = require("./NavTabs");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
+  var href = _ref.href,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      icon = _ref.icon,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$notificationNumb = _ref.notificationNumber,
+      notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
+      children = _ref.children,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var tabRef = /*#__PURE__*/(0, _react.createRef)();
+
+  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+      iconPosition = _useContext.iconPosition,
+      tabIndex = _useContext.tabIndex,
+      hasIcons = _useContext.hasIcons,
+      focusedLabel = _useContext.focusedLabel;
+
+  (0, _react.useLayoutEffect)(function () {
+    var _tabRef$current;
+
+    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
+  }, [focusedLabel]);
+
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    var _tabRef$current2;
+
+    switch (event.keyCode) {
+      case 13: // enter
+
+      case 32:
+        // space
+        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
+        event.preventDefault();
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(TabContainer, {
+    active: active,
+    role: "tab",
+    "aria-selected": active
+  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
+    href: !disabled && href ? href : undefined,
+    disabled: disabled,
+    iconPosition: iconPosition,
+    hasIcon: hasIcons,
+    ref: function ref(anchorRef) {
+      tabRef.current = anchorRef;
+
+      if (_ref2) {
+        if (typeof _ref2 === "function") _ref2(anchorRef);else {
+          _ref2.current = anchorRef;
+        }
+      }
+    },
+    onKeyDown: handleOnKeyDown,
+    tabIndex: active ? tabIndex : -1
+  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+    iconPosition: iconPosition
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
+    src: icon
+  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
+    disabled: disabled
+  })))));
+});
+
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 2px solid ", ";\n"])), function (props) {
+  return props.active ? "#6f2c91" : "#0000001a";
+});
+
+var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  font-family: \"Open Sans\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 1rem;\n  color: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
+  return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
+}, function (props) {
+  return props.disabled ? "#0000004D" : "#333333";
+}, function (props) {
+  return props.disabled ? "not-allowed" : "pointer";
+}, function (props) {
+  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
+}, function (props) {
+  return !props.disabled && ":hover {\n    background: #0000000D;\n  }\n\n  :focus {\n    outline: 2px solid #33aaff};\n  }\n\n  :active {\n    background: #0000001A;\n    outline: 2px solid #33aaff};\n  }";
+});
+
+var TabIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+
+var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-bottom: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+  return props.iconPosition === "top" && "0.375rem";
+}, function (props) {
+  return props.iconPosition === "left" && "0.625rem";
+});
+
+var LabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
+
+var BadgeContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 0.5rem;\n"])));
+
+var _default = DxcTab;
+exports["default"] = _default;

package/tabs-nav/types.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+declare type SVG = React.SVGProps<SVGSVGElement>;
+export declare type TabProps = {
+    /**
+     * Whether the tab is active or not.
+     */
+    active?: boolean;
+    /**
+     * Whether the tab is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Page to be opened when the user clicks on the tab.
+     */
+    href?: string;
+    /**
+     * Element or path used as the icon that will be displayed in the tab.
+     */
+    icon?: string | SVG;
+    /**
+     * If the value is 'true', an empty badge will appear.
+     * If it is 'false', no badge will appear.
+     * If a number is put it will be shown as the label of the notification
+     * in the tab, taking into account that if that number is greater than 99,
+     * it will appear as '+99' in the badge.
+     */
+    notificationNumber?: boolean | number;
+    /**
+     * Content of the tab.
+     */
+    children: string;
+};
+export declare type NavTabsProps = {
+    /**
+     * Whether the icon should appear above or to the left of the label.
+     */
+    iconPosition?: "top" | "left";
+    /**
+     * Value of the tabindex for each tab.
+     */
+    tabIndex?: number;
+    /**
+     * Content of the tabs nav.
+     */
+    children: React.ReactNode;
+};
+export declare type NavTabsContextProps = {
+    iconPosition: "top" | "left";
+    tabIndex: number;
+    hasIcons: boolean;
+    focusedLabel: string;
+};
+export {};

package/text-input/TextInput.js

@@ -21,6 +21,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
@@ -207,6 +209,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var inputRef = (0, _react.useRef)(null);
   var actionRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var autosuggestId = "".concat(inputId, "-listBox");
   var errorId = "error-".concat(inputId);
@@ -223,10 +226,6 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     return value && minLength && maxLength && (value.length < minLength || value.length > maxLength);
   };
 
-  var getLengthErrorMessage = function getLengthErrorMessage() {
-    return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
-  };
-
   var isNumberIncorrect = function isNumberIncorrect(value) {
     return (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
   };
@@ -238,7 +237,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var getNumberErrorMessage = function getNumberErrorMessage(value) {
-    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return "Value must be greater than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, ".");else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return "Value must be less than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber, ".");
+    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage(numberInputContext.minNumber);else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage(numberInputContext.maxNumber);
   };
 
   var hasSuggestions = function hasSuggestions() {
@@ -259,13 +258,13 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
     if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: getNumberErrorMessage(newValue)
@@ -292,13 +291,13 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     suggestions && closeSuggestions();
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: getNumberErrorMessage(event.target.value)
@@ -481,7 +480,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     disabled: disabled,
     backgroundType: backgroundType,
     hasHelperText: helperText ? true : false
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
@@ -536,8 +535,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Clear field",
-    "aria-label": "Clear field"
+    title: translatedLabels.textInput.clearFieldActionTitle,
+    "aria-label": translatedLabels.textInput.clearFieldActionTitle
   }, textInputIcons.clear), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -549,8 +548,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Decrement value",
-    "aria-label": "Decrement value"
+    title: translatedLabels.numberInput.decrementValueTitle,
+    "aria-label": translatedLabels.numberInput.decrementValueTitle
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -562,8 +561,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Increment value",
-    "aria-label": "Increment value"
+    title: translatedLabels.numberInput.incrementValueTitle,
+    "aria-label": translatedLabels.numberInput.incrementValueTitle
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -605,9 +604,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       visuallyFocused: visualFocusedSuggIndex === index,
       highlighted: typeof suggestions === "function"
     });
-  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
     backgroundType: backgroundType
-  }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
+  }, textInputIcons.error), translatedLabels.textInput.fetchingDataErrorMessage))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     backgroundType: backgroundType,
     "aria-live": error ? "assertive" : "off"

package/textarea/Textarea.js

@@ -23,6 +23,8 @@ var _utils = require("../common/utils.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _uuid = require("uuid");
@@ -35,14 +37,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
-  return "This field is required. Please, enter a value.";
-};
-
-var getPatternErrorMessage = function getPatternErrorMessage() {
-  return "Please match the format requested.";
-};
-
 var patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -90,13 +84,10 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
 
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var textareaRef = (0, _react.useRef)(null);
   var errorId = "error-".concat(textareaId);
 
-  var getLengthErrorMessage = function getLengthErrorMessage() {
-    return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
-  };
-
   var isNotOptional = function isNotOptional(value) {
     return value === "" && !optional;
   };
@@ -109,13 +100,13 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
     if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue
     });
@@ -124,13 +115,13 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   var handleTOnBlur = function handleTOnBlur(event) {
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value
     });
@@ -160,7 +151,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     disabled: disabled,
     backgroundType: backgroundType,
     helperText: helperText
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(Textarea, {

package/useTranslatedLabels.d.ts

@@ -0,0 +1,2 @@
+declare const useTranslatedLabels: () => any;
+export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _variables = require("./common/variables");
+
+var _HalstackContext = require("./HalstackContext");
+
+var useTranslatedLabels = function useTranslatedLabels() {
+  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
+  return labels || _variables.defaultTranslatedComponentLabels;
+};
+
+var _default = useTranslatedLabels;
+exports["default"] = _default;

package/wizard/Wizard.js

@@ -147,9 +147,11 @@ var DxcWizard = function DxcWizard(_ref) {
       disabled: step.disabled,
       current: i === renderedCurrent
     }, i + 1)), step.valid !== undefined && (step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.invalidIcon))), (step.label || step.description) && /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label && /*#__PURE__*/_react["default"].createElement(Label, {
+      current: i === renderedCurrent,
       disabled: step.disabled,
       visited: i <= innerCurrent
     }, step.label), step.description && /*#__PURE__*/_react["default"].createElement(Description, {
+      current: i === renderedCurrent,
       disabled: step.disabled,
       visited: i <= innerCurrent
     }, step.description))), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
@@ -200,40 +202,40 @@ var StepHeader = _styledComponents["default"].div(_templateObject4 || (_template
   return props.validityIcon && "padding-bottom: 4px;";
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
-  return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
 }, function (props) {
-  return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current && !props.disabled ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  return "\n    ".concat(props.disabled ? "border: ".concat(props.theme.disabledStepBorderThickness, " ").concat(props.theme.disabledStepBorderStyle, " ").concat(props.theme.disabledStepBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedStepBorderThickness, " ").concat(props.theme.selectedStepBorderStyle, " ").concat(props.theme.selectedStepBorderColor, ";") : props.visited ? "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.visitedStepBorderColor, ";") : "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.unvisitedStepBorderColor, ";"), "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledStepBackgroundColor) : props.current ? "".concat(props.theme.selectedStepBackgroundColor) : !props.visited ? "".concat(props.theme.unvisitedStepBackgroundColor) : "".concat(props.theme.visitedStepBackgroundColor), ";\n  ");
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledStepFontColor, ";") : "color: ".concat(props.current ? props.theme.selectedStepFontColor : !props.visited ? props.theme.unvisitedStepFontColor : props.theme.visitedStepFontColor, ";");
 }, function (props) {
-  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
+  return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
 });
 
 var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 });
 
 var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 });
 
 var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  opacity: 1;\n  margin: 0px 0px 0px 1px;\n"])), function (props) {
-  return props.theme.stepContainerFontSize;
+  return props.theme.stepFontSize;
 }, function (props) {
-  return props.theme.stepContainerFontFamily;
+  return props.theme.stepFontFamily;
 }, function (props) {
-  return props.theme.stepContainerFontStyle;
+  return props.theme.stepFontStyle;
 }, function (props) {
-  return props.theme.stepContainerFontWeight;
+  return props.theme.stepFontWeight;
 }, function (props) {
-  return props.theme.stepContainerLetterSpacing;
+  return props.theme.stepFontTracking;
 });
 
 var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
@@ -251,29 +253,29 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, function (props) {
   return props.theme.labelFontWeight;
 }, function (props) {
-  return props.theme.labelLetterSpacing;
+  return props.theme.labelFontTracking;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledLabelFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedLabelFontColor : props.current ? props.theme.selectedLabelFontColor : props.theme.visitedLabelFontColor, ";");
 }, function (props) {
   return props.theme.labelFontTextTransform;
 });
 
 var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.descriptionTextAlign;
+  return props.theme.helperTextTextAlign;
 }, function (props) {
-  return props.theme.descriptionFontFamily;
+  return props.theme.helperTextFontFamily;
 }, function (props) {
-  return props.theme.descriptionFontSize;
+  return props.theme.helperTextFontSize;
 }, function (props) {
-  return props.theme.descriptionFontStyle;
+  return props.theme.helperTextFontStyle;
 }, function (props) {
-  return props.theme.descriptionFontWeight;
+  return props.theme.helperTextFontWeight;
 }, function (props) {
-  return props.theme.descriptionLetterSpacing;
+  return props.theme.helperTextFontTracking;
 }, function (props) {
-  return props.theme.descriptionFontTextTransform;
+  return props.theme.helperTextFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
 });
 
 var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {

package/radio/Radio.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import RadioPropsType from "./types";
-declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
-export default DxcRadio;