@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.
- package/.cli/propValidation_report.html +1 -1
- package/README.md +8 -0
- package/es/DropBox/DropBoxElement/__tests__/DropBoxElement.spec.js +17 -0
- package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +59 -0
- package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +2 -2
- package/es/Textarea/Textarea.js +9 -3
- package/es/Textarea/Textarea.module.css +10 -2
- package/es/Textarea/__tests__/Textarea.spec.js +20 -0
- package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +25 -0
- package/es/Textarea/props/defaultProps.js +2 -1
- package/es/Textarea/props/propTypes.js +5 -2
- package/lib/DropBox/DropBoxElement/__tests__/DropBoxElement.spec.js +17 -0
- package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +59 -0
- package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +2 -2
- package/lib/Textarea/Textarea.js +9 -4
- package/lib/Textarea/Textarea.module.css +10 -2
- package/lib/Textarea/__tests__/Textarea.spec.js +20 -0
- package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +25 -0
- package/lib/Textarea/props/defaultProps.js +2 -1
- package/lib/Textarea/props/propTypes.js +5 -2
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -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
|
-
.
|
|
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:
|
|
217
|
+
composes: arrowBase;
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
|
package/es/Textarea/Textarea.js
CHANGED
|
@@ -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:
|
|
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:
|
|
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
|
|
@@ -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
|
-
.
|
|
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:
|
|
217
|
+
composes: arrowBase;
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
|
package/lib/Textarea/Textarea.js
CHANGED
|
@@ -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:
|
|
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:
|
|
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
|
|
@@ -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;
|