@zohodesk/components 1.2.57 → 1.2.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,4 +8,21 @@ describe('DropBoxElement', () => {
8
8
  } = render( /*#__PURE__*/React.createElement(DropBoxElement, null));
9
9
  expect(asFragment()).toMatchSnapshot();
10
10
  });
11
+ test('renders when isActive is true', () => {
12
+ const {
13
+ asFragment
14
+ } = render( /*#__PURE__*/React.createElement(DropBoxElement, {
15
+ isActive: true
16
+ }));
17
+ expect(asFragment()).toMatchSnapshot();
18
+ });
19
+ test('renders when isActive is true and isArrow is false', () => {
20
+ const {
21
+ asFragment
22
+ } = render( /*#__PURE__*/React.createElement(DropBoxElement, {
23
+ isActive: true,
24
+ isArrow: false
25
+ }));
26
+ expect(asFragment()).toMatchSnapshot();
27
+ });
11
28
  });
@@ -34,3 +34,62 @@ exports[`DropBoxElement rendering the defult props 1`] = `
34
34
  </div>
35
35
  </DocumentFragment>
36
36
  `;
37
+
38
+ exports[`DropBoxElement renders when isActive is true 1`] = `
39
+ <DocumentFragment>
40
+ <div
41
+ class="main container bottomStart default boxDirection arrow"
42
+ data-a11y-focus-main-area="true"
43
+ data-arrow-position="end"
44
+ data-box-direction="bottom"
45
+ data-id="dropBox"
46
+ data-position="bottomStart"
47
+ data-selector-id="dropBox"
48
+ data-test-id="dropBox"
49
+ dot-ui-element="dropbox"
50
+ >
51
+ <div
52
+ class="subContainer shadow radius defaultPalette"
53
+ data-id="dropBox_subcontainer"
54
+ data-selector-id="dropBox_subcontainer"
55
+ data-test-id="dropBox_subcontainer"
56
+ tabindex="-1"
57
+ >
58
+ <div
59
+ class="arrowPosition"
60
+ data-id="dropBox_arrow"
61
+ data-selector-id="dropBox_arrow"
62
+ data-test-id="dropBox_arrow"
63
+ >
64
+ <div
65
+ class="arrowShape"
66
+ />
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </DocumentFragment>
71
+ `;
72
+
73
+ exports[`DropBoxElement renders when isActive is true and isArrow is false 1`] = `
74
+ <DocumentFragment>
75
+ <div
76
+ class="main container bottomStart default paddingSpace"
77
+ data-a11y-focus-main-area="true"
78
+ data-arrow-position="end"
79
+ data-box-direction="bottom"
80
+ data-id="dropBox"
81
+ data-position="bottomStart"
82
+ data-selector-id="dropBox"
83
+ data-test-id="dropBox"
84
+ dot-ui-element="dropbox"
85
+ >
86
+ <div
87
+ class="subContainer shadow radius defaultPalette"
88
+ data-id="dropBox_subcontainer"
89
+ data-selector-id="dropBox_subcontainer"
90
+ data-test-id="dropBox_subcontainer"
91
+ tabindex="-1"
92
+ />
93
+ </div>
94
+ </DocumentFragment>
95
+ `;
@@ -192,7 +192,7 @@
192
192
  padding-top: var(--zd_size5) ;
193
193
  }
194
194
 
195
- .arrow {
195
+ .arrowBase {
196
196
  position: absolute;
197
197
  height: var(--zd_size34) ;
198
198
  width: var(--zd_size34) ;
@@ -214,7 +214,7 @@
214
214
 
215
215
  /* arrow placement styles */
216
216
  .arrowPosition {
217
- composes: arrow;
217
+ composes: arrowBase;
218
218
  }
219
219
 
220
220
  .boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
@@ -59,7 +59,10 @@ export default class Textarea extends React.Component {
59
59
  htmlId,
60
60
  a11y,
61
61
  customClass,
62
- isFocus
62
+ isFocus,
63
+ rows,
64
+ cols,
65
+ customAttributes
63
66
  } = this.props;
64
67
  let {
65
68
  ariaLabel,
@@ -86,7 +89,7 @@ export default class Textarea extends React.Component {
86
89
  }
87
90
 
88
91
  const isEditable = !(isReadOnly || isDisabled);
89
- 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}`;
92
+ 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}`;
90
93
  return /*#__PURE__*/React.createElement("textarea", {
91
94
  "aria-label": ariaLabel,
92
95
  "aria-labelledby": ariaLabelledby,
@@ -103,7 +106,10 @@ export default class Textarea extends React.Component {
103
106
  ref: getRef,
104
107
  value: text,
105
108
  id: htmlId,
106
- "data-selector-id": dataSelectorId
109
+ "data-selector-id": dataSelectorId,
110
+ rows: rows,
111
+ cols: cols,
112
+ ...customAttributes
107
113
  });
108
114
  }
109
115
 
@@ -7,7 +7,8 @@
7
7
  --textarea_font_size: var(--zd_font_size14);
8
8
  --textarea_line_height: 1.5712;
9
9
  --textarea_padding: var(--zd_size2) 0;
10
- --textarea_height: var(--zd_size30);
10
+ --textarea_height: auto;
11
+ --textarea_width: auto;
11
12
 
12
13
  /* textarea placeholder default variable */
13
14
  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
63
64
  height var(--zd_transition2) linear 0s;
64
65
  -moz-transition: border var(--zd_transition2) linear 0s,
65
66
  height var(--zd_transition2) linear 0s;
66
- width: 100% ;
67
+ width: var(--textarea_width);
67
68
  max-width: 100% ;
68
69
  min-width: var(--zd_size100) ;
69
70
  font-size: var(--textarea_font_size);
@@ -138,3 +139,10 @@
138
139
  composes: semibold from '../common/common.module.css';
139
140
  --textarea_text_color: var(--zdt_textarea_black_text);
140
141
  }
142
+ .xsmall,
143
+ .small,
144
+ .xmedium,
145
+ .medium,
146
+ .large {
147
+ --textarea_width: 100%;
148
+ }
@@ -225,4 +225,24 @@ describe('Textarea component', () => {
225
225
  }));
226
226
  expect(asFragment()).toMatchSnapshot();
227
227
  });
228
+ test('Should be render rows and cols ', () => {
229
+ const {
230
+ asFragment
231
+ } = render( /*#__PURE__*/React.createElement(Textarea, {
232
+ size: "default",
233
+ rows: "3",
234
+ cols: "3"
235
+ }));
236
+ expect(asFragment()).toMatchSnapshot();
237
+ });
238
+ test('Should be render custom Attributes ', () => {
239
+ const {
240
+ asFragment
241
+ } = render( /*#__PURE__*/React.createElement(Textarea, {
242
+ customAttributes: {
243
+ disabled: true
244
+ }
245
+ }));
246
+ expect(asFragment()).toMatchSnapshot();
247
+ });
228
248
  });
@@ -11,6 +11,18 @@ exports[`Textarea component Should be render autofocus true 1`] = `
11
11
  </DocumentFragment>
12
12
  `;
13
13
 
14
+ exports[`Textarea component Should be render custom Attributes 1`] = `
15
+ <DocumentFragment>
16
+ <textarea
17
+ class=" container small default needBorder noresize effect borderColor_default"
18
+ data-id="TextareaComp"
19
+ data-selector-id="textarea"
20
+ data-test-id="TextareaComp"
21
+ disabled=""
22
+ />
23
+ </DocumentFragment>
24
+ `;
25
+
14
26
  exports[`Textarea component Should be render customClass 1`] = `
15
27
  <DocumentFragment>
16
28
  <textarea
@@ -185,6 +197,19 @@ exports[`Textarea component Should be render placeholder 1`] = `
185
197
  </DocumentFragment>
186
198
  `;
187
199
 
200
+ exports[`Textarea component Should be render rows and cols 1`] = `
201
+ <DocumentFragment>
202
+ <textarea
203
+ class=" container default needBorder noresize effect borderColor_default"
204
+ cols="3"
205
+ data-id="TextareaComp"
206
+ data-selector-id="textarea"
207
+ data-test-id="TextareaComp"
208
+ rows="3"
209
+ />
210
+ </DocumentFragment>
211
+ `;
212
+
188
213
  exports[`Textarea component Should be render text 1`] = `
189
214
  <DocumentFragment>
190
215
  <textarea
@@ -13,5 +13,6 @@ export const defaultProps = {
13
13
  autoFocus: false,
14
14
  customClass: '',
15
15
  a11y: {},
16
- dataSelectorId: 'textarea'
16
+ dataSelectorId: 'textarea',
17
+ customAttributes: {}
17
18
  };
@@ -20,7 +20,7 @@ export const propTypes = {
20
20
  onKeyDown: PropTypes.func,
21
21
  placeHolder: PropTypes.string,
22
22
  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
23
- size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
23
+ size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large', 'default']),
24
24
  text: PropTypes.string,
25
25
  variant: PropTypes.oneOf(['default', 'primary']),
26
26
  customClass: PropTypes.string,
@@ -28,5 +28,8 @@ export const propTypes = {
28
28
  ariaLabel: PropTypes.string,
29
29
  ariaLabelledby: PropTypes.string
30
30
  }),
31
- isFocus: PropTypes.bool
31
+ isFocus: PropTypes.bool,
32
+ rows: PropTypes.number,
33
+ cols: PropTypes.number,
34
+ customAttributes: PropTypes.object
32
35
  };
@@ -15,4 +15,21 @@ describe('DropBoxElement', function () {
15
15
 
16
16
  expect(asFragment()).toMatchSnapshot();
17
17
  });
18
+ test('renders when isActive is true', function () {
19
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], {
20
+ isActive: true
21
+ })),
22
+ asFragment = _render2.asFragment;
23
+
24
+ expect(asFragment()).toMatchSnapshot();
25
+ });
26
+ test('renders when isActive is true and isArrow is false', function () {
27
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], {
28
+ isActive: true,
29
+ isArrow: false
30
+ })),
31
+ asFragment = _render3.asFragment;
32
+
33
+ expect(asFragment()).toMatchSnapshot();
34
+ });
18
35
  });
@@ -34,3 +34,62 @@ exports[`DropBoxElement rendering the defult props 1`] = `
34
34
  </div>
35
35
  </DocumentFragment>
36
36
  `;
37
+
38
+ exports[`DropBoxElement renders when isActive is true 1`] = `
39
+ <DocumentFragment>
40
+ <div
41
+ class="main container bottomStart default boxDirection arrow"
42
+ data-a11y-focus-main-area="true"
43
+ data-arrow-position="end"
44
+ data-box-direction="bottom"
45
+ data-id="dropBox"
46
+ data-position="bottomStart"
47
+ data-selector-id="dropBox"
48
+ data-test-id="dropBox"
49
+ dot-ui-element="dropbox"
50
+ >
51
+ <div
52
+ class="subContainer shadow radius defaultPalette"
53
+ data-id="dropBox_subcontainer"
54
+ data-selector-id="dropBox_subcontainer"
55
+ data-test-id="dropBox_subcontainer"
56
+ tabindex="-1"
57
+ >
58
+ <div
59
+ class="arrowPosition"
60
+ data-id="dropBox_arrow"
61
+ data-selector-id="dropBox_arrow"
62
+ data-test-id="dropBox_arrow"
63
+ >
64
+ <div
65
+ class="arrowShape"
66
+ />
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </DocumentFragment>
71
+ `;
72
+
73
+ exports[`DropBoxElement renders when isActive is true and isArrow is false 1`] = `
74
+ <DocumentFragment>
75
+ <div
76
+ class="main container bottomStart default paddingSpace"
77
+ data-a11y-focus-main-area="true"
78
+ data-arrow-position="end"
79
+ data-box-direction="bottom"
80
+ data-id="dropBox"
81
+ data-position="bottomStart"
82
+ data-selector-id="dropBox"
83
+ data-test-id="dropBox"
84
+ dot-ui-element="dropbox"
85
+ >
86
+ <div
87
+ class="subContainer shadow radius defaultPalette"
88
+ data-id="dropBox_subcontainer"
89
+ data-selector-id="dropBox_subcontainer"
90
+ data-test-id="dropBox_subcontainer"
91
+ tabindex="-1"
92
+ />
93
+ </div>
94
+ </DocumentFragment>
95
+ `;
@@ -192,7 +192,7 @@
192
192
  padding-top: var(--zd_size5) ;
193
193
  }
194
194
 
195
- .arrow {
195
+ .arrowBase {
196
196
  position: absolute;
197
197
  height: var(--zd_size34) ;
198
198
  width: var(--zd_size34) ;
@@ -214,7 +214,7 @@
214
214
 
215
215
  /* arrow placement styles */
216
216
  .arrowPosition {
217
- composes: arrow;
217
+ composes: arrowBase;
218
218
  }
219
219
 
220
220
  .boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
@@ -102,7 +102,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
102
102
  htmlId = _this$props.htmlId,
103
103
  a11y = _this$props.a11y,
104
104
  customClass = _this$props.customClass,
105
- isFocus = _this$props.isFocus;
105
+ isFocus = _this$props.isFocus,
106
+ rows = _this$props.rows,
107
+ cols = _this$props.cols,
108
+ customAttributes = _this$props.customAttributes;
106
109
  var ariaLabel = a11y.ariaLabel,
107
110
  ariaLabelledby = a11y.ariaLabelledby;
108
111
  var resizes = {
@@ -126,7 +129,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
126
129
  }
127
130
 
128
131
  var isEditable = !(isReadOnly || isDisabled);
129
- 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);
132
+ 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);
130
133
  return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
131
134
  "aria-label": ariaLabel,
132
135
  "aria-labelledby": ariaLabelledby,
@@ -143,8 +146,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
143
146
  ref: getRef,
144
147
  value: text,
145
148
  id: htmlId,
146
- "data-selector-id": dataSelectorId
147
- }));
149
+ "data-selector-id": dataSelectorId,
150
+ rows: rows,
151
+ cols: cols
152
+ }, customAttributes));
148
153
  }
149
154
  }]);
150
155
 
@@ -7,7 +7,8 @@
7
7
  --textarea_font_size: var(--zd_font_size14);
8
8
  --textarea_line_height: 1.5712;
9
9
  --textarea_padding: var(--zd_size2) 0;
10
- --textarea_height: var(--zd_size30);
10
+ --textarea_height: auto;
11
+ --textarea_width: auto;
11
12
 
12
13
  /* textarea placeholder default variable */
13
14
  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
@@ -63,7 +64,7 @@
63
64
  height var(--zd_transition2) linear 0s;
64
65
  -moz-transition: border var(--zd_transition2) linear 0s,
65
66
  height var(--zd_transition2) linear 0s;
66
- width: 100% ;
67
+ width: var(--textarea_width);
67
68
  max-width: 100% ;
68
69
  min-width: var(--zd_size100) ;
69
70
  font-size: var(--textarea_font_size);
@@ -138,3 +139,10 @@
138
139
  composes: semibold from '../common/common.module.css';
139
140
  --textarea_text_color: var(--zdt_textarea_black_text);
140
141
  }
142
+ .xsmall,
143
+ .small,
144
+ .xmedium,
145
+ .medium,
146
+ .large {
147
+ --textarea_width: 100%;
148
+ }
@@ -232,4 +232,24 @@ describe('Textarea component', function () {
232
232
 
233
233
  expect(asFragment()).toMatchSnapshot();
234
234
  });
235
+ test('Should be render rows and cols ', function () {
236
+ var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
237
+ size: "default",
238
+ rows: "3",
239
+ cols: "3"
240
+ })),
241
+ asFragment = _render26.asFragment;
242
+
243
+ expect(asFragment()).toMatchSnapshot();
244
+ });
245
+ test('Should be render custom Attributes ', function () {
246
+ var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
247
+ customAttributes: {
248
+ disabled: true
249
+ }
250
+ })),
251
+ asFragment = _render27.asFragment;
252
+
253
+ expect(asFragment()).toMatchSnapshot();
254
+ });
235
255
  });
@@ -11,6 +11,18 @@ exports[`Textarea component Should be render autofocus true 1`] = `
11
11
  </DocumentFragment>
12
12
  `;
13
13
 
14
+ exports[`Textarea component Should be render custom Attributes 1`] = `
15
+ <DocumentFragment>
16
+ <textarea
17
+ class=" container small default needBorder noresize effect borderColor_default"
18
+ data-id="TextareaComp"
19
+ data-selector-id="textarea"
20
+ data-test-id="TextareaComp"
21
+ disabled=""
22
+ />
23
+ </DocumentFragment>
24
+ `;
25
+
14
26
  exports[`Textarea component Should be render customClass 1`] = `
15
27
  <DocumentFragment>
16
28
  <textarea
@@ -185,6 +197,19 @@ exports[`Textarea component Should be render placeholder 1`] = `
185
197
  </DocumentFragment>
186
198
  `;
187
199
 
200
+ exports[`Textarea component Should be render rows and cols 1`] = `
201
+ <DocumentFragment>
202
+ <textarea
203
+ class=" container default needBorder noresize effect borderColor_default"
204
+ cols="3"
205
+ data-id="TextareaComp"
206
+ data-selector-id="textarea"
207
+ data-test-id="TextareaComp"
208
+ rows="3"
209
+ />
210
+ </DocumentFragment>
211
+ `;
212
+
188
213
  exports[`Textarea component Should be render text 1`] = `
189
214
  <DocumentFragment>
190
215
  <textarea
@@ -19,6 +19,7 @@ var defaultProps = {
19
19
  autoFocus: false,
20
20
  customClass: '',
21
21
  a11y: {},
22
- dataSelectorId: 'textarea'
22
+ dataSelectorId: 'textarea',
23
+ customAttributes: {}
23
24
  };
24
25
  exports.defaultProps = defaultProps;
@@ -30,7 +30,7 @@ var propTypes = {
30
30
  onKeyDown: _propTypes["default"].func,
31
31
  placeHolder: _propTypes["default"].string,
32
32
  resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
33
- size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
33
+ size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large', 'default']),
34
34
  text: _propTypes["default"].string,
35
35
  variant: _propTypes["default"].oneOf(['default', 'primary']),
36
36
  customClass: _propTypes["default"].string,
@@ -38,6 +38,9 @@ var propTypes = {
38
38
  ariaLabel: _propTypes["default"].string,
39
39
  ariaLabelledby: _propTypes["default"].string
40
40
  }),
41
- isFocus: _propTypes["default"].bool
41
+ isFocus: _propTypes["default"].bool,
42
+ rows: _propTypes["default"].number,
43
+ cols: _propTypes["default"].number,
44
+ customAttributes: _propTypes["default"].object
42
45
  };
43
46
  exports.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.2.57",
3
+ "version": "1.2.59",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,