@dxc-technology/halstack-react 0.0.0-d4fec82 → 0.0.0-d53aaf7

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

package/date-input/DateInput.test.js

@@ -0,0 +1,492 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _DateInput = _interopRequireDefault(require("./DateInput"));
+
+describe("DateInput component tests", function () {
+  test("Renders with correct label, helper text, optional, placeholder and clearable action", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Example label",
+      helperText: "Example of helper text",
+      placeholder: true,
+      optional: true,
+      clearable: true
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole,
+        getAllByRole = _render.getAllByRole;
+
+    var input = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("Example of helper text")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
+
+    _userEvent["default"].type(input, "10/10/2010");
+
+    var closeAction = getAllByRole("button")[0];
+
+    _userEvent["default"].click(closeAction);
+
+    expect(input.value).toBe("");
+  });
+  test("Renders with custom error", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      error: "Personalized error."
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Personalized error.")).toBeTruthy();
+  });
+  test("Renders with an initial value when it is uncontrolled", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Default label",
+      placeholder: "Placeholder",
+      defaultValue: "21-10-2015"
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("button");
+    var d = new Date(2015, 9, 21);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(input.value).toBe("21-10-2015");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Renders with correct format: user typed date but it's invalid, onBlur error", function () {
+    var onBlur = jest.fn(function (_ref) {
+      var value = _ref.value,
+          error = _ref.error;
+      expect(value).toBe("10/90/2010");
+      expect(error).toBe("Invalid date.");
+    });
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format MM/dd/yyyy",
+      format: "MM/dd/yyyy",
+      onBlur: onBlur
+    })),
+        getByRole = _render4.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10/90/2010");
+
+    _react2.fireEvent.blur(input);
+  });
+  test("Renders with correct format: user typed date but it's invalid, onChange error", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format MM/dd/yyyy",
+      format: "MM/dd/yyyy",
+      onChange: onChange
+    })),
+        getByRole = _render5.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10/90/2010");
+
+    expect(onChange).toHaveBeenCalledTimes(10);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10/90/2010",
+      error: "Invalid date.",
+      date: null
+    });
+  });
+  test("Calendar renders with correct date: today's date", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: value prop", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      value: "20-10-2019"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date(2019, 9, 20);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: user typed value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date(2010, 0, 1);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-2010");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: invalid date, renders with today's date", function () {
+    var onBlur = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur
+    })),
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-xxxx");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "01-01-xxxx",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Selecting a date from the calendar with an specific format", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format M-dd-yyyy",
+      format: "M-dd-yyyy"
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("button");
+
+    _userEvent["default"].click(calendarAction);
+
+    var dayButton = getByText("10").closest("button");
+
+    _react2.fireEvent.click(dayButton);
+
+    var d = new Date();
+    d.setDate(10);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("".concat(d.getMonth() + 1, "-10-").concat(d.getFullYear()));
+  });
+  test("Selecting a date from the calendar (using keyboard presses)", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render11.getByRole;
+
+    var calendarAction = getByRole("button");
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-2010");
+
+    _userEvent["default"].click(calendarAction);
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowLeft",
+      code: "ArrowLeft",
+      keyCode: 37,
+      charCode: 37
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("03-01-2010");
+  });
+  test("onChange & onBlur functions are called correctly", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render12.getByRole;
+
+    var input = getByRole("textbox");
+    var d = new Date(2011, 9, 10);
+
+    _userEvent["default"].type(input, "10-10-2011");
+
+    expect(input.value).toBe("10-10-2011");
+    expect(onChange).toHaveBeenCalledTimes(10);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10-10-2011",
+      error: null,
+      date: d
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "10-10-2011",
+      error: null,
+      date: d
+    });
+  });
+  test("onChange & onBlur functions are called correctly, also with errors", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render13.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10-10-");
+
+    expect(input.value).toBe("10-10-");
+    expect(onChange).toHaveBeenCalledTimes(6);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10-10-",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "10-10-",
+      error: "Invalid date.",
+      date: null
+    });
+  });
+  test("onBlur function removes the error when it is fixed", function () {
+    var onBlur = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur
+    })),
+        getByRole = _render14.getByRole;
+
+    var input = getByRole("textbox");
+    var d = new Date(2002, 1, 20);
+
+    _userEvent["default"].type(input, "test");
+
+    expect(input.value).toBe("test");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].clear(input);
+
+    _userEvent["default"].type(input, "20-02-2002");
+
+    expect(input.value).toBe("20-02-2002");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "20-02-2002",
+      error: null,
+      date: d
+    });
+  });
+  test("onBlur function removes the error when the input is empty", function () {
+    var onBlur = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur,
+      optional: true
+    })),
+        getByRole = _render15.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "test");
+
+    expect(input.value).toBe("test");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: null,
+      date: null
+    });
+  });
+  test("onBlur & onChange functions error: required field (not optional)", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByRole = _render16.getByRole;
+
+    var date = getByRole("textbox");
+
+    _userEvent["default"].type(date, "t");
+
+    expect(date.value).toBe("t");
+
+    _userEvent["default"].clear(date);
+
+    _react2.fireEvent.blur(date);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null
+    });
+  });
+  test("Disabled date input (calendar action must be shown but not clickable)", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      disabled: true
+    })),
+        getByRole = _render17.getByRole,
+        queryByText = _render17.queryByText;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(getByRole("textbox").disabled).toBeTruthy();
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
+  });
+  test("Input has correct accesibility attributes", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Date input label"
+    })),
+        getByRole = _render18.getByRole;
+
+    var input = getByRole("textbox");
+    expect(input.getAttribute("aria-autocomplete")).toBeNull();
+    expect(input.getAttribute("aria-controls")).toBeNull();
+    expect(input.getAttribute("aria-expanded")).toBeNull();
+    var calendarAction = getByRole("button");
+
+    _userEvent["default"].click(calendarAction);
+
+    var datePicker = getByRole("dialog");
+    expect(datePicker.getAttribute("aria-modal")).toBe("true");
+  });
+});

package/date-input/types.d.ts

@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the input element.
      */
     name?: string;
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */

package/dialog/Dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import DialogPropsType from "./types";
+declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, padding, tabIndex, }: DialogPropsType) => JSX.Element;
+export default DxcDialog;