@dxc-technology/halstack-react 0.0.0-4d89cae → 0.0.0-4e5859a

package/common/variables.js

@@ -1,15 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
+exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
 
 var _Icons = require("../header/Icons");
 
-var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
+var _Icons2 = require("../footer/Icons");
 
 var globalTokens = {
   // Color
@@ -99,7 +97,7 @@ var globalTokens = {
   type_sans: "Open Sans, sans-serif",
   type_scale_root: "16px",
   type_scale_08: "3.75rem",
-  type_scale_07: "3rem",
+  type_scale_07: "2.5rem",
   type_scale_06: "2rem",
   type_scale_05: "1.5rem",
   type_scale_04: "1.25rem",
@@ -535,17 +533,16 @@ var componentTokens = {
     errorMessageFontFamily: globalTokens.type_sans,
     errorMessageFontSize: globalTokens.type_scale_01,
     errorMessageFontWeight: globalTokens.type_regular,
-    errorMessageLineHeight: globalTokens.type_scale_05,
+    errorMessageLineHeight: globalTokens.type_leading_normal,
     dropBorderThickness: globalTokens.border_width_1,
     dropBorderStyle: globalTokens.border_dashed,
     dropBorderRadius: globalTokens.border_radius_large,
     fileItemBorderThickness: globalTokens.border_width_1,
     fileItemBorderStyle: globalTokens.border_solid,
     fileItemBorderRadius: globalTokens.border_radius_medium,
-    hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
-    activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
-    errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
-    errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
+    hoverDeleteFileItemBackgroundColor: "#0000000d",
+    activeDeleteFileItemBackgroundColor: "#00000033",
+    focusActionBorderColor: globalTokens.hal_blue_l_50
   },
   footer: {
     height: "124px",
@@ -565,7 +562,7 @@ var componentTokens = {
     copyrightFontStyle: globalTokens.type_normal,
     copyrightFontWeight: globalTokens.type_regular,
     copyrightFontColor: globalTokens.hal_white,
-    logo: _Icons2["default"],
+    logo: "",
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
@@ -583,8 +580,8 @@ var componentTokens = {
     hamburguerTextTransform: globalTokens.type_uppercase,
     hamburguerIconColor: globalTokens.hal_black,
     hamburguerHoverColor: globalTokens.mediumGreyBlack,
-    logo: _Icons.dxcLogo,
-    logoResponsive: _Icons.dxcLogo,
+    logo: "",
+    logoResponsive: "",
     logoHeight: "40px",
     logoWidth: "auto",
     menuBackgroundColor: globalTokens.hal_white,
@@ -608,37 +605,37 @@ var componentTokens = {
   heading: {
     level1FontColor: globalTokens.inherit,
     level1FontFamily: globalTokens.type_sans,
-    level1FontSize: globalTokens.type_scale_08,
+    level1FontSize: globalTokens.type_scale_07,
     level1FontStyle: globalTokens.type_normal,
-    level1FontWeight: globalTokens.type_regular,
+    level1FontWeight: globalTokens.type_semibold,
     level1LineHeight: globalTokens.type_leading_compact_01,
     level1LetterSpacing: globalTokens.type_spacing_tight_01,
     level2FontColor: globalTokens.inherit,
     level2FontFamily: globalTokens.type_sans,
-    level2FontSize: globalTokens.type_scale_07,
+    level2FontSize: globalTokens.type_scale_05,
     level2FontStyle: globalTokens.type_normal,
-    level2FontWeight: globalTokens.type_regular,
+    level2FontWeight: globalTokens.type_semibold,
     level2LineHeight: globalTokens.type_leading_normal,
     level2LetterSpacing: globalTokens.type_spacing_normal,
     level3FontColor: globalTokens.inherit,
     level3FontFamily: globalTokens.type_sans,
-    level3FontSize: globalTokens.type_scale_06,
+    level3FontSize: globalTokens.type_scale_04,
     level3FontStyle: globalTokens.type_normal,
-    level3FontWeight: globalTokens.type_regular,
+    level3FontWeight: globalTokens.type_semibold,
     level3LineHeight: globalTokens.type_leading_compact_01,
     level3LetterSpacing: globalTokens.type_spacing_wide_01,
     level4FontColor: globalTokens.inherit,
     level4FontFamily: globalTokens.type_sans,
-    level4FontSize: globalTokens.type_scale_05,
+    level4FontSize: globalTokens.type_scale_03,
     level4FontStyle: globalTokens.type_normal,
-    level4FontWeight: globalTokens.type_regular,
+    level4FontWeight: globalTokens.type_semibold,
     level4LineHeight: globalTokens.type_leading_normal,
     level4LetterSpacing: globalTokens.type_spacing_normal,
     level5FontColor: globalTokens.inherit,
     level5FontFamily: globalTokens.type_sans,
-    level5FontSize: globalTokens.type_scale_04,
+    level5FontSize: globalTokens.type_scale_02,
     level5FontStyle: globalTokens.type_normal,
-    level5FontWeight: globalTokens.type_regular,
+    level5FontWeight: globalTokens.type_semibold,
     level5LineHeight: globalTokens.type_leading_normal,
     level5LetterSpacing: globalTokens.type_spacing_wide_01
   },
@@ -780,7 +777,7 @@ var componentTokens = {
     activeActionBackgroundColor: globalTokens.hal_grey_l_80,
     activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
     listDialogBackgroundColor: globalTokens.hal_white,
-    listDialogBorderColor: globalTokens.hal_black,
+    listDialogBorderColor: globalTokens.hal_grey_l_75,
     listOptionDividerColor: globalTokens.hal_grey_l_90,
     listOptionFontColor: globalTokens.hal_black,
     listOptionFontSize: globalTokens.type_scale_02,
@@ -1042,9 +1039,13 @@ var componentTokens = {
   },
   slider: {
     fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_03,
-    fontStyle: globalTokens.type_normal,
-    fontWeight: globalTokens.type_regular,
+    limitValuesFontColor: globalTokens.hal_black,
+    limitValuesFontColorOnDark: globalTokens.hal_white,
+    limitValuesFontSize: globalTokens.type_scale_03,
+    limitValuesFontStyle: globalTokens.type_normal,
+    limitValuesFontWeight: globalTokens.type_regular,
+    limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
+    disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_02,
     labelFontStyle: globalTokens.type_normal,
@@ -1058,9 +1059,13 @@ var componentTokens = {
     fontColor: globalTokens.hal_black,
     fontColorOnDark: globalTokens.hal_white,
     labelFontColor: globalTokens.hal_black,
+    labelFontColorOnDark: globalTokens.hal_white,
     helperTextFontColor: globalTokens.hal_black,
-    disabledFontColor: globalTokens.hal_grey_l_60,
-    fontLetterSpacing: globalTokens.type_spacing_normal,
+    helperTextFontColorOnDark: globalTokens.hal_white,
+    disabledLabelFontColor: globalTokens.hal_grey_l_60,
+    disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
+    disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
+    disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
     thumbHeight: "12px",
     thumbWidth: "12px",
     hoverThumbHeight: "14px",
@@ -1142,30 +1147,30 @@ var componentTokens = {
   "switch": {
     checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
     checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
-    checkedThumbBackgroundColor: globalTokens.white,
-    checkedThumbBackgroundColorOnDark: globalTokens.white,
-    uncheckedTrackBackgroundColor: globalTokens.lightGrey,
-    uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
-    uncheckedThumbBackgroundColor: globalTokens.white,
-    uncheckedThumbBackgroundColorOnDark: globalTokens.white,
-    disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
+    checkedThumbBackgroundColor: globalTokens.hal_white,
+    checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
+    uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
+    uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
+    uncheckedThumbBackgroundColor: globalTokens.hal_white,
+    uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
+    disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
     disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
-    disabledCheckedThumbBackgroundColor: globalTokens.white,
-    disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
-    disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
+    disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
+    disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
+    disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
     disabledUncheckedTrackBackgroundColorOnDark: "#363636",
-    disabledUncheckedThumbBackgroundColor: globalTokens.white,
-    disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
-    disabledLabelFontColor: globalTokens.lighterBlack,
+    disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
+    disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
+    disabledLabelFontColor: globalTokens.hal_grey_l_60,
     disabledLabelFontColorOnDark: "#575757",
     disabledLabelFontStyle: globalTokens.type_normal,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_root,
     labelFontStyle: globalTokens.type_normal,
     labelFontWeight: globalTokens.type_regular,
-    labelFontColor: globalTokens.black,
-    labelFontColorOnDark: globalTokens.white,
-    thumbFocusColor: globalTokens.blue,
+    labelFontColor: globalTokens.hal_black,
+    labelFontColorOnDark: globalTokens.hal_white,
+    thumbFocusColor: globalTokens.hal_blue_l_50,
     thumbFocusColorOnDark: "#1682FF",
     thumbHeight: "24px",
     thumbWidth: "24px",
@@ -1280,6 +1285,8 @@ var componentTokens = {
     errorBorderColorOnDark: globalTokens.hal_red_l_60,
     hoverErrorBorderColor: globalTokens.color_red_600,
     hoverErrorBorderColorOnDark: "#fe677b",
+    inputMarginTop: globalTokens.spacing_02,
+    inputMarginBottom: globalTokens.spacing_02,
     errorMessageColor: globalTokens.hal_red_s_41,
     errorMessageColorOnDark: globalTokens.hal_red_l_60,
     labelFontColor: globalTokens.hal_black,

package/date/Date.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -39,19 +39,13 @@ var _InputText = _interopRequireDefault(require("../input-text/InputText"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _DxcDate$propTypes;
+var _templateObject, _DxcDate$propTypes;
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+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); }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+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 DxcDate = function DxcDate(_ref) {
   var value = _ref.value,
@@ -142,16 +136,16 @@ var DxcDate = function DxcDate(_ref) {
   };
 
   var calendarSVG = function calendarSVG() {
-    return _react["default"].createElement("svg", {
+    return /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24",
       viewBox: "0 0 24 24",
       width: "24",
       fill: "currentColor"
-    }, _react["default"].createElement("path", {
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       "data-testid": "calendarIcon",
       d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0z",
       fill: "none"
     }));
@@ -295,15 +289,15 @@ var DxcDate = function DxcDate(_ref) {
       }
     }
   });
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme
-  }, _react["default"].createElement(_core.MuiThemeProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
-  }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"]
-  }, _react["default"].createElement(StyledDPicker, {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
     margin: margin
-  }, _react["default"].createElement(_InputText["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
     label: label,
     name: name,
     suffixIcon: calendarSVG,
@@ -319,7 +313,7 @@ var DxcDate = function DxcDate(_ref) {
     onChange: onChangeInput,
     onBlur: onBlur && handlerInputBlur || null,
     tabIndex: tabIndex
-  }), _react["default"].createElement(_Popover["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     open: isOpen,
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -335,9 +329,9 @@ var DxcDate = function DxcDate(_ref) {
         marginTop: "10px"
       }
     }
-  }, _react["default"].createElement(_ClickAwayListener["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
     onClickAway: handlerPickerClose
-  }, _react["default"].createElement(_core.Paper, null, _react["default"].createElement(_pickers.DatePicker, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
     value: getValueForPicker(),
     onChange: function onChange(date) {
@@ -354,7 +348,7 @@ var sizes = {
   fillParent: "100%"
 };
 
-var StyledDPicker = _styledComponents["default"].div(_templateObject());
+var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 
 DxcDate.propTypes = (_DxcDate$propTypes = {
   value: _propTypes["default"].string,

package/date-input/DateInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import DateInputPropsType from "./types";
+declare const DxcDateInput: React.ForwardRefExoticComponent<DateInputPropsType & React.RefAttributes<HTMLDivElement>>;
+export default DxcDateInput;

package/date-input/DateInput.js

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -31,34 +29,24 @@ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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); }
 
-  return data;
-}
+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 DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
       _ref$clearable = _ref.clearable,
@@ -69,8 +57,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
       optional = _ref$optional === void 0 ? false : _ref$optional,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -112,7 +99,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
       error: null,
-      date: newDate && newDate.toJSON() ? newDate : null
+      date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
     });
   };
 
@@ -125,7 +112,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
       error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate._d : null
+      date: momentDate.isValid() ? momentDate.toDate() : null
     });
   };
 
@@ -137,7 +124,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: value,
       error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate._d : null
+      date: momentDate.isValid() ? momentDate.toDate() : null
     });
   };
 
@@ -158,16 +145,16 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
 
   var calendarAction = {
     onClick: openCalendar,
-    icon: _react["default"].createElement("svg", {
+    icon: /*#__PURE__*/_react["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       height: "24",
       viewBox: "0 0 24 24",
       width: "24",
       fill: "currentColor"
-    }, _react["default"].createElement("path", {
+    }, /*#__PURE__*/_react["default"].createElement("path", {
       d: "M0 0h24v24H0z",
       fill: "none"
-    }), _react["default"].createElement("path", {
+    }), /*#__PURE__*/_react["default"].createElement("path", {
       d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
     }))
   };
@@ -308,13 +295,13 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
       }
     }
   });
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme
-  }, _react["default"].createElement(_core.MuiThemeProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
-  }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"]
-  }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
     value: value !== null && value !== void 0 ? value : innerValue,
@@ -332,7 +319,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
     size: size,
     tabIndex: tabIndex,
     ref: ref
-  }), _react["default"].createElement(_Popover["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     onKeyDown: handleCalendarOnKeyDown,
     open: isOpen,
     anchorEl: anchorEl,
@@ -349,12 +336,12 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
         marginTop: "10px"
       }
     }
-  }, _react["default"].createElement(_ClickAwayListener["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
     onClickAway: closeCalendar
-  }, _react["default"].createElement(_core.Paper, {
+  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
     role: "dialog",
     "aria-modal": "true"
-  }, _react["default"].createElement(_pickers.DatePicker, {
+  }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
     value: getValueForPicker(),
     onChange: function onChange(date) {
@@ -365,36 +352,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
   }))))))));
 });
 
-var sizes = {
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var StyledDPicker = _styledComponents["default"].div(_templateObject());
-
-DxcDateInput.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  format: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  placeholder: _propTypes["default"].bool,
-  clearable: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  optional: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  error: _propTypes["default"].string,
-  autocomplete: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
+var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+
 var _default = DxcDateInput;
 exports["default"] = _default;

package/date-input/DateInput.stories.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
+import DxcDateInput from "./DateInput";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import DarkContainer from "../../.storybook/components/DarkSection";
+
+export default {
+  title: "Date input",
+  component: DxcDateInput,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Complete date input" theme="light" level={4} />
+      <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid" theme="light" level={4} />
+      <DxcDateInput label="Error date input" error="Error message." placeholder />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Relation between icons" theme="light" level={4} />
+      <DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <Title title="Dark" theme="dark" level={2} />
+        <ExampleContainer>
+          <Title title="Complete date input" theme="dark" level={4} />
+          <DxcDateInput label="Date input" helperText="Help message" format="yyyy/dd/mm" placeholder optional />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled" theme="dark" level={4} />
+          <DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Invalid" theme="dark" level={4} />
+          <DxcDateInput label="Error date input" error="Error message." placeholder />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Relation between icons" theme="dark" level={4} />
+          <DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
+        </ExampleContainer>
+      </DarkContainer>
+    </BackgroundColorProvider>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcDateInput label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcDateInput label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDateInput label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDateInput label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDateInput label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcDateInput label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcDateInput label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcDateInput label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcDateInput label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent size" theme="light" level={4} />
+      <DxcDateInput label="FillParent" size="fillParent" />
+    </ExampleContainer>
+  </>
+);
+
+const DatePicker = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowDatePicker = DatePicker.bind({});
+ShowDatePicker.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const dateBtn = canvas.getByRole("button");
+  await userEvent.click(dateBtn);
+  await userEvent.tab();
+};
+
+const YearPicker = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowYearPicker = YearPicker.bind({});
+ShowYearPicker.play = async () => {
+  await fireEvent.click(screen.getByRole("button"));
+  await fireEvent.click(screen.getByText("2023"));
+};
+
+const YearPickerFocus = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowYearPickerFocus = YearPickerFocus.bind({});
+ShowYearPickerFocus.play = async () => {
+  await fireEvent.click(screen.getByRole("button"));
+  await fireEvent.click(screen.getByText("2023"));
+  await screen.getByText("2021").focus();
+};