@dxc-technology/halstack-react 0.0.0-4bbfa6c → 0.0.0-4c0fd86

package/text-input/types.d.ts

@@ -0,0 +1,205 @@
+/// <reference types="react" />
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type Action = {
+    /**
+     * This function will be called when the user clicks the action.
+     */
+    onClick: () => void;
+    /**
+     * Icon to be placed in the action..
+     */
+    icon: string | SVG;
+    /**
+     * Text representing advisory information related
+     * to the button's action. Under the hood, this prop also serves
+     * as an accessible label for the component.
+     */
+    title?: string;
+};
+type Props = {
+    /**
+     * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the input.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the input.
+     */
+    placeholder?: string;
+    /**
+     * Action to be shown in the input.
+     */
+    action?: Action;
+    /**
+     * If true, the input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     * In addition, the clear action will not be displayed even if the flag is set to true
+     * and the custom action will not execute its onClick event.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the input 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;
+    /**
+     * Prefix to be placed before the input value.
+     */
+    prefix?: string;
+    /**
+     * Suffix to be placed after the input value.
+     */
+    suffix?: string;
+    /**
+     * This function will be called when the user types within the input
+     * element of the component. An object including the current value and
+     * the error (if the value entered is not valid) will be passed to this
+     * function. If there is no error, error will not be defined.
+     */
+    onChange?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input value and the error (if the value
+     * entered is not valid) will be passed to this function. If there is no error,
+     * error will not be defined.
+     */
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the 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;
+    /**
+     * These are the options to be displayed as suggestions. It can be either an array or a function:
+     *    - Array:    Array of options that will be filtered by the component.
+     *    - Function: This function will be called when the user changes the value.
+     *                It will receive the new value as a parameter and should return a promise
+     *                that resolves to an array with the filtered options.
+     */
+    suggestions?: string[] | ((value: string) => Promise<string[]>);
+    /**
+     * Regular expression that defines the valid format allowed by the input.
+     * This will be checked both when the input element loses the focus and
+     * while typing within it. If the string entered does not match the
+     * pattern, the onBlur and onChange functions will be called with the
+     * current value and an internal error informing that this value does not
+     * match the pattern. If the pattern is met, the error parameter of both
+     * events will not be defined.
+     */
+    pattern?: string;
+    /**
+     * Specifies the minimum length allowed by the input.
+     * This will be checked both when the input element loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the minimum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
+     */
+    minLength?: number;
+    /**
+     * Specifies the maximum length allowed by the input.
+     * This will be checked both when the input element loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the maximum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
+     */
+    maxLength?: number;
+    /**
+     * 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?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+/**
+ * List of suggestions of an Text Input component.
+ */
+export type SuggestionsProps = {
+    id: string;
+    value: string;
+    suggestions: string[];
+    visualFocusIndex: number;
+    highlightedSuggestions: boolean;
+    searchHasErrors: boolean;
+    isSearching: boolean;
+    suggestionOnClick: (suggestion: string) => void;
+    styles: React.CSSProperties;
+};
+/**
+ * Reference to the component.
+ */
+export type RefType = HTMLDivElement;
+/**
+ * Single suggestion of an Text Input component.
+ */
+export type SuggestionProps = {
+    id: string;
+    value: string;
+    onClick: (suggestion: string) => void;
+    suggestion: string;
+    isLast: boolean;
+    visuallyFocused: boolean;
+    highlighted: boolean;
+};
+export type AutosuggestWrapperProps = {
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => JSX.Element;
+    children: React.ReactNode;
+};
+export default Props;

package/text-input/types.js

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

package/textarea/Textarea.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/textarea/Textarea.accessibility.test.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+describe("Textarea component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            helperText: "Helper Text",
+            defaultValue: "Value",
+            margin: "medium",
+            placeholder: "Placeholder",
+            verticalGrow: "manual",
+            name: "Name",
+            autocomplete: "on",
+            minLength: 0,
+            maxLength: 100,
+            optional: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for pattern mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            helperText: "Helper Text",
+            defaultValue: "Value",
+            margin: "medium",
+            placeholder: "Placeholder",
+            verticalGrow: "manual",
+            name: "Name",
+            autocomplete: "on",
+            minLength: 0,
+            maxLength: 100,
+            pattern: "^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? \"]).*$"
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for error mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            helperText: "Helper Text",
+            defaultValue: "Value",
+            margin: "medium",
+            placeholder: "Placeholder",
+            verticalGrow: "manual",
+            name: "Name",
+            error: "Error message.",
+            minLength: 0,
+            maxLength: 100
+          })), container = _render3.container;
+          _context3.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, container, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            helperText: "Helper Text",
+            defaultValue: "Value",
+            margin: "medium",
+            placeholder: "Placeholder",
+            verticalGrow: "manual",
+            name: "Name",
+            autocomplete: "on",
+            minLength: 0,
+            maxLength: 100,
+            disabled: true
+          })), container = _render4.container;
+          _context4.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render5, container, results;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            helperText: "Helper Text",
+            defaultValue: "Value",
+            margin: "medium",
+            placeholder: "Placeholder",
+            verticalGrow: "manual",
+            name: "Name",
+            autocomplete: "on",
+            minLength: 0,
+            maxLength: 100,
+            readOnly: true
+          })), container = _render5.container;
+          _context5.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context5.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+});

package/textarea/Textarea.d.ts

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