@zohodesk/components 1.2.58 → 1.2.59

package/es/Textarea/Textarea.js

@@ -59,7 +59,10 @@ export default class Textarea extends React.Component {
       htmlId,
       a11y,
       customClass,
-      isFocus
+      isFocus,
+      rows,
+      cols,
+      customAttributes
     } = this.props;
     let {
       ariaLabel,
@@ -86,7 +89,7 @@ export default class Textarea extends React.Component {
     }
 
     const isEditable = !(isReadOnly || isDisabled);
-    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
+    let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
     return /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
@@ -103,7 +106,10 @@ export default class Textarea extends React.Component {
       ref: getRef,
       value: text,
       id: htmlId,
-      "data-selector-id": dataSelectorId
+      "data-selector-id": dataSelectorId,
+      rows: rows,
+      cols: cols,
+      ...customAttributes
     });
   }
 

package/es/Textarea/Textarea.module.css

@@ -7,7 +7,8 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
-  --textarea_height: var(--zd_size30);
+  --textarea_height: auto;
+  --textarea_width: auto;
 
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
     height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  width: 100% ;
+  width: var(--textarea_width);
   max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
@@ -138,3 +139,10 @@
   composes: semibold from '../common/common.module.css';
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
+.xsmall, 
+.small, 
+.xmedium, 
+.medium, 
+.large {
+  --textarea_width: 100%;
+}

package/es/Textarea/__tests__/Textarea.spec.js

@@ -225,4 +225,24 @@ describe('Textarea component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render rows and cols ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: "default",
+      rows: "3",
+      cols: "3"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render custom Attributes ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      customAttributes: {
+        disabled: true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -11,6 +11,18 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render custom Attributes  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect  borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
@@ -185,6 +197,19 @@ exports[`Textarea component Should be render placeholder 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render rows and cols  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container  default needBorder noresize     effect  borderColor_default"
+    cols="3"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    rows="3"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea

package/es/Textarea/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   autoFocus: false,
   customClass: '',
   a11y: {},
-  dataSelectorId: 'textarea'
+  dataSelectorId: 'textarea',
+  customAttributes: {}
 };

package/es/Textarea/props/propTypes.js

@@ -20,7 +20,7 @@ export const propTypes = {
   onKeyDown: PropTypes.func,
   placeHolder: PropTypes.string,
   resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large', 'default']),
   text: PropTypes.string,
   variant: PropTypes.oneOf(['default', 'primary']),
   customClass: PropTypes.string,
@@ -28,5 +28,8 @@ export const propTypes = {
     ariaLabel: PropTypes.string,
     ariaLabelledby: PropTypes.string
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  rows: PropTypes.number,
+  cols: PropTypes.number,
+  customAttributes: PropTypes.object
 };

package/lib/Textarea/Textarea.js

@@ -102,7 +102,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
           customClass = _this$props.customClass,
-          isFocus = _this$props.isFocus;
+          isFocus = _this$props.isFocus,
+          rows = _this$props.rows,
+          cols = _this$props.cols,
+          customAttributes = _this$props.customAttributes;
       var ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby;
       var resizes = {
@@ -126,7 +129,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       }
 
       var isEditable = !(isReadOnly || isDisabled);
-      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
+      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(size !== 'default' ? _TextareaModule["default"][size] : '', " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated && size !== 'default' ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
@@ -143,8 +146,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         ref: getRef,
         value: text,
         id: htmlId,
-        "data-selector-id": dataSelectorId
-      }));
+        "data-selector-id": dataSelectorId,
+        rows: rows,
+        cols: cols
+      }, customAttributes));
     }
   }]);
 

package/lib/Textarea/Textarea.module.css

@@ -7,7 +7,8 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
-  --textarea_height: var(--zd_size30);
+  --textarea_height: auto;
+  --textarea_width: auto;
 
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
     height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  width: 100% ;
+  width: var(--textarea_width);
   max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
@@ -138,3 +139,10 @@
   composes: semibold from '../common/common.module.css';
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
+.xsmall, 
+.small, 
+.xmedium, 
+.medium, 
+.large {
+  --textarea_width: 100%;
+}

package/lib/Textarea/__tests__/Textarea.spec.js

@@ -232,4 +232,24 @@ describe('Textarea component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should be render rows and cols ', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      size: "default",
+      rows: "3",
+      cols: "3"
+    })),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render custom Attributes ', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      customAttributes: {
+        disabled: true
+      }
+    })),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -11,6 +11,18 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render custom Attributes  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect  borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
@@ -185,6 +197,19 @@ exports[`Textarea component Should be render placeholder 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Textarea component Should be render rows and cols  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container  default needBorder noresize     effect  borderColor_default"
+    cols="3"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    rows="3"
+  />
+</DocumentFragment>
+`;
+
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea

package/lib/Textarea/props/defaultProps.js

@@ -19,6 +19,7 @@ var defaultProps = {
   autoFocus: false,
   customClass: '',
   a11y: {},
-  dataSelectorId: 'textarea'
+  dataSelectorId: 'textarea',
+  customAttributes: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Textarea/props/propTypes.js

@@ -30,7 +30,7 @@ var propTypes = {
   onKeyDown: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,
   resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
-  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large', 'default']),
   text: _propTypes["default"].string,
   variant: _propTypes["default"].oneOf(['default', 'primary']),
   customClass: _propTypes["default"].string,
@@ -38,6 +38,9 @@ var propTypes = {
     ariaLabel: _propTypes["default"].string,
     ariaLabelledby: _propTypes["default"].string
   }),
-  isFocus: _propTypes["default"].bool
+  isFocus: _propTypes["default"].bool,
+  rows: _propTypes["default"].number,
+  cols: _propTypes["default"].number,
+  customAttributes: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.58",
+  "version": "1.2.59",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,