@dxc-technology/halstack-react 0.0.0-34d2259 → 0.0.0-35ba783

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/{dist/new-date/NewDate.js → 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,55 +29,43 @@ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _variables = require("../common/variables.js");
+var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _templateObject;
 
-var _NewInputText = _interopRequireDefault(require("../new-input-text/NewInputText"));
+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 _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
+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; }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var getValueForPicker = function getValueForPicker(value, format) {
+  return (0, _moment["default"])(value, format.toUpperCase(), true).format();
+};
 
-var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
+var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+      name = _ref.name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       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,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$optional = _ref.optional,
-      optional = _ref$optional === void 0 ? false : _ref$optional,
+      clearable = _ref.clearable,
+      disabled = _ref.disabled,
+      optional = _ref.optional,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
-      _ref$autocomplete = _ref.autocomplete,
-      autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
+      error = _ref.error,
+      autocomplete = _ref.autocomplete,
       margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      size = _ref.size,
+      tabIndex = _ref.tabIndex;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(defaultValue),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
@@ -95,6 +81,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       setAnchorEl = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var refDate = ref || (0, _react.useRef)(null);
 
   var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
     switch (event.keyCode) {
@@ -112,7 +99,7 @@ var DxcNewDate = _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 DxcNewDate = _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,19 +124,14 @@ var DxcNewDate = _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
     });
   };
 
-  var getValueForPicker = function getValueForPicker() {
-    return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
-  };
-
-  var openCalendar = function openCalendar(event) {
-    if (event) {
-      setIsOpen(!isOpen);
-      setAnchorEl(event.currentTarget);
-    }
+  var openCalendar = function openCalendar() {
+    var dateBtn = refDate.current.getElementsByTagName("button")[0];
+    setIsOpen(!isOpen);
+    setAnchorEl(dateBtn);
   };
 
   var closeCalendar = function closeCalendar() {
@@ -158,16 +140,16 @@ var DxcNewDate = _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"
     }))
   };
@@ -175,12 +157,12 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
     overrides: {
       MuiTypography: {
         root: {
-          fontFamily: "".concat(colorsTheme.newDate.pickerFontFamily, " !important")
+          fontFamily: "".concat(colorsTheme.dateInput.pickerFontFamily, " !important")
         }
       },
       MuiPickersYearSelection: {
         container: {
-          color: colorsTheme.newDate.pickerYearFontColor,
+          color: colorsTheme.dateInput.pickerYearFontColor,
           "&::-webkit-scrollbar": {
             width: "3px"
           },
@@ -196,8 +178,8 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       },
       MuiPickersToolbar: {
         toolbar: {
-          backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
-          color: colorsTheme.newDate.pickerDayFontColor
+          backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
+          color: colorsTheme.dateInput.pickerDayFontColor
         }
       },
       MuiIconButton: {
@@ -215,7 +197,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       MuiButtonBase: {
         root: {
           "&:focus": {
-            outline: colorsTheme.newDate.pickerFocusColor + " solid 2px"
+            outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px"
           }
         }
       },
@@ -225,38 +207,38 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
           maxWidth: "unset",
           minHeight: "unset",
           padding: "0px 10px",
-          height: colorsTheme.newDate.pickerHeight,
-          width: colorsTheme.newDate.pickerWidth,
-          backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily
+          height: colorsTheme.dateInput.pickerHeight,
+          width: colorsTheme.dateInput.pickerWidth,
+          backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily
         }
       },
       MuiPickersToolbarText: {
         toolbarTxt: {
-          color: colorsTheme.newDate.pickerActualDateFontColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily,
+          color: colorsTheme.dateInput.pickerActualDateFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily,
           fontSize: "2rem"
         },
         toolbarBtnSelected: {
-          color: colorsTheme.newDate.pickerActualDateFontColor
+          color: colorsTheme.dateInput.pickerActualDateFontColor
         }
       },
       MuiPickersCalendarHeader: {
         transitionContainer: {
-          color: colorsTheme.newDate.pickerMonthFontColor
+          color: colorsTheme.dateInput.pickerMonthFontColor
         },
         dayLabel: {
-          color: colorsTheme.newDate.pickerWeekFontColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily
+          color: colorsTheme.dateInput.pickerWeekFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily
         },
         switchHeader: {
           backgroundColor: "#ffffff",
-          color: colorsTheme.newDate.pickerDayFontColor
+          color: colorsTheme.dateInput.pickerDayFontColor
         },
         iconButton: {
-          backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor,
+          backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor
+            backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor
           }
         }
       },
@@ -267,37 +249,37 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       },
       MuiPickersDay: {
         current: {
-          color: colorsTheme.newDate.pickerDayFontColor
+          color: colorsTheme.dateInput.pickerDayFontColor
         },
         day: {
-          fontFamily: colorsTheme.newDate.pickerFontFamily,
-          color: colorsTheme.newDate.pickerDayFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily,
+          color: colorsTheme.dateInput.pickerDayFontColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor,
-            color: colorsTheme.newDate.pickerHoverDateFontColor
+            backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
+            color: colorsTheme.dateInput.pickerHoverDateFontColor
           }
         },
         daySelected: {
-          backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
-          color: colorsTheme.newDate.pickerSelectedDateColor,
+          backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
+          color: colorsTheme.dateInput.pickerSelectedDateColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
-            color: colorsTheme.newDate.pickerSelectedDateColor,
+            backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
+            color: colorsTheme.dateInput.pickerSelectedDateColor,
             opacity: "1"
           }
         }
       },
       MuiPickersYear: {
         yearSelected: {
-          color: colorsTheme.newDate.pickerSelectedDateColor,
-          backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
+          color: colorsTheme.dateInput.pickerSelectedDateColor,
+          backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
           margin: "0px 100px",
           borderRadius: "20px"
         },
         root: {
           "&:focus": {
-            color: colorsTheme.newDate.pickerHoverDateFontColor,
-            backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor
+            color: colorsTheme.dateInput.pickerHoverDateFontColor,
+            backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor
           }
         }
       },
@@ -308,15 +290,16 @@ var DxcNewDate = _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(_NewInputText["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
+    defaultValue: defaultValue,
     value: value !== null && value !== void 0 ? value : innerValue,
     helperText: helperText,
     placeholder: placeholder ? format.toUpperCase() : null,
@@ -331,8 +314,8 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
     margin: margin,
     size: size,
     tabIndex: tabIndex,
-    ref: ref
-  }), _react["default"].createElement(_Popover["default"], {
+    ref: refDate
+  }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     onKeyDown: handleCalendarOnKeyDown,
     open: isOpen,
     anchorEl: anchorEl,
@@ -349,14 +332,14 @@ var DxcNewDate = _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(),
+    value: getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format),
     onChange: function onChange(date) {
       return handleCalendarOnClick(date);
     },
@@ -365,36 +348,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
   }))))))));
 });
 
-var sizes = {
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
+var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var StyledDPicker = _styledComponents["default"].div(_templateObject());
-
-DxcNewDate.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 _default = DxcNewDate;
+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" defaultValue="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." defaultValue="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" defaultValue="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" defaultValue="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" defaultValue="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" defaultValue="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" defaultValue="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();
+};