@dxc-technology/halstack-react 0.0.0-efa7c74 → 0.0.0-eff2879

package/text-input/types.d.ts

@@ -1,35 +1,29 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-declare type Action = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type Action = {
     /**
      * This function will be called when the user clicks the action.
      */
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: () => void;
     /**
-     * Icon to be shown in the action.
+     * Icon to be placed in the action..
      */
     icon: string | SVG;
     /**
-     * Title of the action.
+     * 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;
 };
-declare type RequiredMinLength = {
-    min: number;
-    max?: number;
-};
-declare type RequiredMaxLength = {
-    min?: number;
-    max: number;
-};
-declare type Props = {
+type Props = {
     /**
      * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
      */
@@ -38,6 +32,10 @@ declare type Props = {
      * 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.
      */
@@ -51,8 +49,7 @@ declare type Props = {
      */
     placeholder?: string;
     /**
-     * Action to be shown in the input. This is an object composed of an onClick function and an icon,
-     * being the latter either an inline svg or a URL to the image.
+     * Action to be shown in the input.
      */
     action?: Action;
     /**
@@ -63,6 +60,12 @@ declare type Props = {
      * 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
@@ -82,33 +85,37 @@ declare type Props = {
      * 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 be null.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        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 be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * 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, we will send as a parameter the new value;
-     *                apart from that this function should return one promise on which we should make 'then' to get the suggestions filtered.
+     *    - 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[]>);
     /**
@@ -118,19 +125,29 @@ declare type Props = {
      * 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 be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
-     * Specifies the minimun and maximum length allowed by the input.
+     * 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 length, the onBlur and onChange functions will be called
+     * 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 be null.
+     * reached, the error parameter of both events will not be defined.
      */
-    length?: RequiredMinLength | RequiredMaxLength;
+    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', ...
@@ -142,7 +159,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**
@@ -150,8 +167,39 @@ declare type Props = {
      */
     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 declare type RefType = HTMLDivElement;
+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/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 _jestAxe = require("jest-axe");
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+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, _jestAxe.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, _jestAxe.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, _jestAxe.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, _jestAxe.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, _jestAxe.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;