@dxc-technology/halstack-react 0.0.0-dfcca07 → 0.0.0-dfd09f9

package/text-input/types.d.ts

@@ -11,7 +11,7 @@ declare 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.
      */
@@ -30,6 +30,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.
      */
@@ -74,26 +78,29 @@ 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;
     /**
@@ -110,7 +117,7 @@ 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;
     /**
@@ -120,7 +127,7 @@ declare type Props = {
      * 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.
      */
     minLength?: number;
     /**
@@ -130,7 +137,7 @@ declare type Props = {
      * 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 be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**

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;

package/textarea/Textarea.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -23,15 +21,13 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _variables = require("../common/variables.js");
 
 var _uuid = require("uuid");
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -52,13 +48,13 @@ var patternMatch = function patternMatch(pattern, value) {
 };
 
 var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       _ref$disabled = _ref.disabled,
@@ -71,8 +67,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       rows = _ref$rows === void 0 ? 4 : _ref$rows,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       pattern = _ref.pattern,
       minLength = _ref.minLength,
       maxLength = _ref.maxLength,
@@ -84,7 +79,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(defaultValue),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
@@ -96,7 +91,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var textareaRef = (0, _react.useRef)(null);
-  var errorId = "error-message-".concat(textareaId);
+  var errorId = "error-".concat(textareaId);
 
   var getLengthErrorMessage = function getLengthErrorMessage() {
     return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
@@ -122,8 +117,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: newValue,
       error: getPatternErrorMessage()
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: newValue,
-      error: null
+      value: newValue
     });
   };
 
@@ -138,8 +132,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: event.target.value,
       error: getPatternErrorMessage()
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      value: event.target.value,
-      error: null
+      value: event.target.value
     });
   };
 
@@ -162,11 +155,12 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     margin: margin,
     size: size,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(Label, {
+  }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: textareaId,
     disabled: disabled,
-    backgroundType: backgroundType
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), /*#__PURE__*/_react["default"].createElement(HelperText, {
+    backgroundType: backgroundType,
+    helperText: helperText
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(Textarea, {
@@ -186,12 +180,14 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
+    "aria-disabled": disabled,
     "aria-invalid": error ? "true" : "false",
-    "aria-describedby": error ? errorId : undefined,
+    "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
-  }), !disabled && /*#__PURE__*/_react["default"].createElement(Error, {
+  }), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
-    backgroundType: backgroundType
+    backgroundType: backgroundType,
+    "aria-live": error ? "assertive" : "off"
   }, error)));
 });
 
@@ -220,7 +216,7 @@ var TextareaContainer = _styledComponents["default"].div(_templateObject || (_te
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -232,13 +228,15 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
   return props.theme.labelFontWeight;
 }, function (props) {
   return props.theme.labelLineHeight;
+}, function (props) {
+  return !props.helperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.optionalLabelFontWeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-bottom: 0.25rem;\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -252,12 +250,10 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var Textarea = _styledComponents["default"].textarea(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n\n  margin: ", ";\n  padding: 0.5rem 1rem;\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 0.25rem;\n  border: 1px solid\n    ", ";\n  ", "\n\n  ", ";\n  ", ";\n\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
+var Textarea = _styledComponents["default"].textarea(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n\n  padding: 0.5rem 1rem;\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 0.25rem;\n  border: 1px solid\n    ", ";\n  ", "\n\n  ", ";\n  ", ";\n\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
   if (props.verticalGrow === "none") return "resize: none;";else if (props.verticalGrow === "auto") return "resize: none; overflow: hidden;";else if (props.verticalGrow === "manual") return "resize: vertical;";else return "resize: none;";
 }, function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");else return "background-color: transparent;";
-}, function (props) {
-  return "".concat(props.theme.inputMarginTop, " 0 ").concat(props.theme.inputMarginBottom, " 0");
 }, function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
 }, function (props) {
@@ -280,37 +276,11 @@ var Textarea = _styledComponents["default"].textarea(_templateObject5 || (_templ
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
 });
 
-var Error = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  min-height: 1.5em;\n  line-height: 1.5em;\n"])), function (props) {
+var Error = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  min-height: 1.5em;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;
 });
 
-DxcTextarea.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  helperText: _propTypes["default"].string,
-  placeholder: _propTypes["default"].string,
-  verticalGrow: _propTypes["default"].oneOf(["auto", "none", "manual"]),
-  rows: _propTypes["default"].number,
-  minLength: _propTypes["default"].number,
-  maxLength: _propTypes["default"].number,
-  pattern: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  optional: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  error: _propTypes["default"].string,
-  autocomplete: _propTypes["default"].string,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcTextarea;
 exports["default"] = _default;

package/textarea/Textarea.stories.jsx

@@ -33,7 +33,7 @@ export const Chromatic = () => (
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Disabled with value" theme="light" level={4} />
-        <DxcTextarea label="Disabled" value="Example text" disabled />
+        <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="With error" theme="light" level={4} />
@@ -41,12 +41,21 @@ export const Chromatic = () => (
           label="Textarea with error"
           helperText="Helper text"
           placeholder="Enter your text here..."
-          error="Error message"
+          error="Error message."
+        />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered with error" theme="light" level={4} />
+        <DxcTextarea
+          label="Hovered textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
         />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Helper text and optional with value" theme="light" level={4} />
-        <DxcTextarea label="Helper & optional" value="Some text" helperText="Sample text" optional />
+        <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Resizable" theme="light" level={4} />
@@ -57,36 +66,48 @@ export const Chromatic = () => (
         <DxcTextarea
           label="Manual vertical grow"
           verticalGrow="manual"
-          value="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
         />
       </ExampleContainer>
     </>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
-        <>
+        <ExampleContainer>
           <Title title="Helper text and optional with value" theme="dark" level={4} />
-          <DxcTextarea label="Helper & optional" value="Some text" margin="medium" helperText="Sample text" optional />
-
+          <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="Disabled" theme="dark" level={4} />
           <DxcTextarea
             label="Disabled"
-            margin="medium"
             optional
             helperText="Sample text"
             placeholder="Enter your text here..."
             disabled
           />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="Disabled with value" theme="dark" level={4} />
-          <DxcTextarea label="Disabled" margin="medium" value="Example text" disabled />
+          <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="With error" theme="dark" level={4} />
           <DxcTextarea
             label="Textarea with error"
-            margin="medium"
             helperText="Helper text"
             placeholder="Enter your text here..."
-            error="Error message"
+            error="Error message."
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered with error" theme="dark" level={4} />
+          <DxcTextarea
+            label="Hovered textarea with error"
+            helperText="Helper text"
+            placeholder="Enter your text here..."
+            error="Error message."
           />
-        </>
+        </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
     <Title title="Sizes" theme="light" level={2} />
@@ -105,15 +126,15 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcTextarea label="Xxsmmall" margin="xxsmall" />
+      <DxcTextarea label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcTextarea label="xsmmall" margin="xsmall" />
+      <DxcTextarea label="xsmall" margin="xsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcTextarea label="smmall" margin="small" />
+      <DxcTextarea label="small" margin="small" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium margin" theme="light" level={4} />
@@ -130,6 +151,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );