@dxc-technology/halstack-react 0.0.0-feed711 → 0.0.0-ff31c60

package/date-input/DateInput.test.js

@@ -1,479 +0,0 @@
-"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."
-    });
-  });
-  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."
-    });
-
-    _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",
-      date: d
-    });
-
-    _react2.fireEvent.blur(input);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "10-10-2011",
-      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."
-    });
-
-    _react2.fireEvent.blur(input);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "10-10-",
-      error: "Invalid date."
-    });
-  });
-  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."
-    });
-
-    _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",
-      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."
-    });
-
-    _userEvent["default"].clear(input);
-
-    _react2.fireEvent.blur(input);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: ""
-    });
-  });
-  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."
-    });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-  });
-  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

@@ -1,107 +0,0 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type Props = {
-    /**
-     * Text to be placed above the date.
-     */
-    label?: string;
-    /**
-     * 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.
-     */
-    value?: string;
-    /**
-     * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
-     */
-    format?: string;
-    /**
-     * Helper text to be placed above the date.
-     */
-    helperText?: string;
-    /**
-     * If true, the date format will appear as placeholder in the field.
-     */
-    placeholder?: boolean;
-    /**
-     * If true, the date input will have an action to clear the entered value.
-     */
-    clearable?: boolean;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the date will be optional, showing '(Optional)'
-     * next to the label. Otherwise, the field will be considered required and an error will be
-     * passed as a parameter to the OnBlur and onChange functions when it has
-     * not been filled.
-     */
-    optional?: boolean;
-    /**
-     * This function will be called when the user types within the input
-     * element of the component. An object including the string value, the
-     * error and the date value will be passed to this function.
-     * If the string value is a valid date, error will
-     * be undefined. Also, if the string value is not a valid date, date will be undefined.
-     */
-    onChange?: (val: {
-        value: string;
-        error?: string;
-        date?: Date;
-    }) => void;
-    /**
-     * This function will be called when the input element loses the focus.
-     * An object including the string value, the error and the date value
-     * will be passed to this function. If the string value is a valid date, error will
-     * be undefined. Also, if the string value is not a valid date, date will be undefined.
-     */
-    onBlur?: (val: {
-        value: string;
-        error?: string;
-        date?: Date;
-    }) => void;
-    /**
-     * If it is a defined value and also a truthy string, the component will
-     * change its appearance, showing the error below the date input
-     * component. If the defined value is an empty string, it will reserve a
-     * space below the component for a future error, but it would not change
-     * its look. In case of being undefined or null, both the appearance and
-     * the space for the error message would not be modified.
-     */
-    error?: string;
-    /**
-     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
-     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
-     */
-    autocomplete?: string;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space | Margin;
-    /**
-     * Size of the component.
-     */
-    size?: "medium" | "large" | "fillParent";
-    /**
-     * Value of the tabindex attribute.
-     */
-    tabIndex?: number;
-};
-/**
- * Reference to the component.
- */
-export declare type RefType = HTMLDivElement;
-export default Props;

package/date-input/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dialog/Dialog.d.ts

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