@dxc-technology/halstack-react 0.0.0-e30cba6 → 0.0.0-e832ef8

package/dist/select/readme.md

@@ -1,72 +0,0 @@
-# DXC Select Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>options: object[]</td>
-        <td><code>[]</code></td>
-        <td>An array of objects representing the selectable options. Each object has the following properties:
-        <ul>
-            <li><b>value</b>: Option inner value</li>
-            <li><b>label</b>: Option display value</li>
-            <li><b>iconSrc</b>: URL of the icon that will be placed next to the option label</li>
-        </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>iconPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>In case options include an icon, whether the icon should appear after or before the label.</td>
-    </tr>
-    <tr>
-        <td>value: string | string[]</td>
-        <td><code>[]</code></td>
-        <td>The key of the selected value/values. If the select component doesn't allow multiple selection, value must be a string. If the select component allows multiple selection, value must be an array of strings</td>
-    </tr>
-    <tr>
-        <td>multiple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the select component will support multiple selection. In that case, value must be an array of strings with the keys of the selected values, otherwise value must be a string.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed next to the select.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' | 'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>name: string</td>
-        <td></td>
-        <td>Name attribute of the input element.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>required: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed</td>
-    </tr>
-</table>

package/dist/slider/Slider.stories.js

@@ -1,241 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Slider = _interopRequireDefault(require("./Slider"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-var onDragEnd = (0, _addonActions.action)("onDragEnd");
-
-onDragEnd.toString = function () {
-  return "onDragEnd";
-};
-
-var onChangeInput = (0, _addonActions.action)("onChangeInput");
-
-onChangeInput.toString = function () {
-  return "onChangeInputHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    minValue: (0, _addonKnobs.number)("minvalue", 0),
-    maxValue: (0, _addonKnobs.number)("maxvalue", 100),
-    showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
-    showInput: (0, _addonKnobs["boolean"])("showInput", true),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    step: (0, _addonKnobs.number)("step", 1),
-    marks: (0, _addonKnobs["boolean"])("marks", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput,
-    name: "sliderImput"
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/upload/buttons-upload/drag-drop-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
-</svg>

package/dist/upload/buttons-upload/upload-button.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>

package/dist/upload/file-upload/audio-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/file-upload/close.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/file-upload/file-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
-</svg>

package/dist/upload/file-upload/video-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/audio-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/transaction/audio-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/transaction/error-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/file-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/file-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/image-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/image-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/success-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#50B50F">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>

package/dist/upload/transaction/video-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/video-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/wizard/invalid_icon.svg

@@ -1,5 +0,0 @@
-<svg id="highlight_off_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path id="Path_2943" data-name="Path 2943" d="M0,0H18V18H0Z" fill="none"/>
-  <path id="Path_2944" data-name="Path 2944" d="M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z" transform="translate(-1.002 -1.002)" fill="#ffe6e9"/>
-  <path id="Path_2945" data-name="Path 2945" d="M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z" transform="translate(-0.501 -0.501)" fill="#d0011b"/>
-</svg>

package/dist/wizard/valid_icon.svg

@@ -1,5 +0,0 @@
-<svg id="check_circle_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path id="Path_2946" data-name="Path 2946" d="M0,0H18V18H0Z" fill="none"/>
-  <path id="Path_2947" data-name="Path 2947" d="M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z" transform="translate(-0.986 -0.986)" fill="#eafaef" opacity="0.999"/>
-  <path id="Path_2948" data-name="Path 2948" d="M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z" transform="translate(-0.493 -0.493)" fill="#24a148"/>
-</svg>

package/dist/wizard/validation-wrong.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
-  <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
-    <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
-    <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
-  </g>
-</svg>

package/test/NewTextarea.test.js

@@ -1,201 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import DxcNewTextarea from "../src/new-textarea/NewTextarea";
-
-describe("NewTextarea component tests", () => {
-  test("Renders with correct label", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" />);
-    expect(getByText("Example label")).toBeTruthy();
-  });
-  test("Renders with correct label and helper text", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" />);
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct label and optional", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" optional />);
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct placeholder", () => {
-    const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
-    const input = getByRole("textbox");
-    expect(input.getAttribute("placeholder")).toBe("Placeholder");
-  });
-  test("Renders with error message", () => {
-    const { getByText } = render(<DxcNewTextarea error="Error message." />);
-    expect(getByText("Error message.")).toBeTruthy();
-  });
-  test("Renders with correct default rows", () => {
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
-    const textarea = getByLabelText("Example label");
-    expect(textarea.rows).toBe(10);
-  });
-  test("Strict mode - Pattern constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "pattern test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "pattern4&" } });
-    fireEvent.blur(textarea);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
-  });
-  test("Strict mode - Length constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test " } });
-    fireEvent.blur(textarea);
-    expect(queryByText(/Min length /)).toBeFalsy();
-  });
-  test("Strict mode - Pattern and length constraints", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test " } });
-    fireEvent.blur(textarea);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test 4" } });
-    fireEvent.blur(textarea);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
-  });
-  test("Non Strict mode - Pattern constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Please match the format requested.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("Non Strict mode - Length constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("Non Strict mode - Pattern and length constraints", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("onBlur function is called correctly", () => {
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Blur test" } });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
-  });
-  test("Controlled textarea", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} onBlur={onBlur} />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Controlled test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(textarea.value).toBe("Test value");
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Test value", error: null });
-  });
-  test("Uncontrolled input", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" onChange={onChange} />);
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Uncontrolled test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith("Uncontrolled test");
-    expect(textarea.value).toBe("Uncontrolled test");
-  });
-});