@zohodesk/components 1.1.0 → 1.1.1
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/README.md +5 -1
- package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +24 -24
- package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +24 -24
- package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +24 -24
- package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +24 -24
- package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +24 -24
- package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +24 -24
- package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +24 -24
- package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +24 -24
- package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +24 -24
- package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +24 -24
- package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +24 -24
- package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +24 -24
- package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +24 -24
- package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +24 -24
- package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +24 -24
- package/es/Button/__tests__/Button.spec.js +61 -0
- package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +440 -0
- package/lib/Button/__tests__/Button.spec.js +62 -0
- package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +440 -0
- package/package.json +12 -7
- package/result.json +1 -0
- package/es/Accordion/__tests__/Accordion.spec.js +0 -79
- package/es/Animation/__tests__/Animation.spec.js +0 -17
- package/es/Avatar/__tests__/Avatar.spec.js +0 -161
- package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +0 -288
- package/es/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -76
- package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +0 -226
- package/es/Buttongroup/__test__/Buttongroup.spec.js +0 -73
- package/es/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap +0 -146
- package/es/Card/__tests__/Card.spec.js +0 -36
- package/es/CheckBox/__tests__/CheckBox.spec.js +0 -12
- package/es/DateTime/__tests__/CalendarView.spec.js +0 -33
- package/es/DateTime/__tests__/DateTime.spec.js +0 -115
- package/es/DateTime/__tests__/DateWidget.spec.js +0 -75
- package/es/DropBox/__tests__/DropBox.spec.js +0 -81
- package/es/DropDown/__tests__/DropDown.spec.js +0 -44
- package/es/DropDown/__tests__/DropDownItem.spec.js +0 -45
- package/es/DropDown/__tests__/DropDownSearch.spec.js +0 -11
- package/es/Label/__tests__/Label.spec.js +0 -120
- package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +0 -101
- package/es/Layout/__tests__/Box.spec.js +0 -114
- package/es/Layout/__tests__/Container.spec.js +0 -120
- package/es/MultiSelect/__tests__/MultiSelect.spec.js +0 -160
- package/es/PopOver/__tests__/PopOver.spec.js +0 -14
- package/es/Popup/__tests__/Popup.spec.js +0 -134
- package/es/Radio/__tests__/Radiospec.js +0 -23
- package/es/Ribbon/__tests__/Ribbon.spec.js +0 -168
- package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +0 -163
- package/es/Select/__tests__/Select.spec.js +0 -345
- package/es/Stencils/__tests__/Stencils.spec.js +0 -69
- package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +0 -49
- package/es/Tab/__tests__/Tab.spec.js +0 -117
- package/es/Tab/__tests__/TabContent.spec.js +0 -16
- package/es/Tab/__tests__/TabContentWrapper.spec.js +0 -50
- package/es/Tab/__tests__/TabWrapper.spec.js +0 -86
- package/es/Tab/__tests__/Tabs.spec.js +0 -115
- package/es/Tag/__tests__/Tag.spec.js +0 -28
- package/es/TextBox/__tests__/TextBox.spec.js +0 -189
- package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +0 -127
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +0 -212
- package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +0 -334
- package/es/Textarea/__tests__/Textarea.spec.js +0 -171
- package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +0 -97
- package/es/Tooltip/__tests__/Tooltip.spec.js +0 -52
- package/es/utils/__tests__/constructFullName.spec.js +0 -9
- package/es/utils/__tests__/debounce.spec.js +0 -37
- package/es/utils/__tests__/getInitial.spec.js +0 -23
- package/lib/Accordion/__tests__/Accordion.spec.js +0 -85
- package/lib/Animation/__tests__/Animation.spec.js +0 -23
- package/lib/Avatar/__tests__/Avatar.spec.js +0 -208
- package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +0 -288
- package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -92
- package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +0 -226
- package/lib/Buttongroup/__test__/Buttongroup.spec.js +0 -86
- package/lib/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap +0 -146
- package/lib/Card/__tests__/Card.spec.js +0 -56
- package/lib/CheckBox/__tests__/CheckBox.spec.js +0 -18
- package/lib/DateTime/__tests__/CalendarView.spec.js +0 -45
- package/lib/DateTime/__tests__/DateTime.spec.js +0 -127
- package/lib/DateTime/__tests__/DateWidget.spec.js +0 -81
- package/lib/DropBox/__tests__/DropBox.spec.js +0 -87
- package/lib/DropDown/__tests__/DropDown.spec.js +0 -50
- package/lib/DropDown/__tests__/DropDownItem.spec.js +0 -51
- package/lib/DropDown/__tests__/DropDownSearch.spec.js +0 -17
- package/lib/Label/__tests__/Label.spec.js +0 -137
- package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +0 -101
- package/lib/Layout/__tests__/Box.spec.js +0 -121
- package/lib/Layout/__tests__/Container.spec.js +0 -127
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +0 -170
- package/lib/PopOver/__tests__/PopOver.spec.js +0 -20
- package/lib/Popup/__tests__/Popup.spec.js +0 -192
- package/lib/Radio/__tests__/Radiospec.js +0 -29
- package/lib/Ribbon/__tests__/Ribbon.spec.js +0 -193
- package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +0 -163
- package/lib/Select/__tests__/Select.spec.js +0 -383
- package/lib/Stencils/__tests__/Stencils.spec.js +0 -84
- package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +0 -49
- package/lib/Tab/__tests__/Tab.spec.js +0 -123
- package/lib/Tab/__tests__/TabContent.spec.js +0 -22
- package/lib/Tab/__tests__/TabContentWrapper.spec.js +0 -59
- package/lib/Tab/__tests__/TabWrapper.spec.js +0 -100
- package/lib/Tab/__tests__/Tabs.spec.js +0 -123
- package/lib/Tag/__tests__/Tag.spec.js +0 -35
- package/lib/TextBox/__tests__/TextBox.spec.js +0 -205
- package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +0 -127
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +0 -228
- package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +0 -334
- package/lib/Textarea/__tests__/Textarea.spec.js +0 -186
- package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +0 -97
- package/lib/Tooltip/__tests__/Tooltip.spec.js +0 -98
- package/lib/utils/__tests__/constructFullName.spec.js +0 -12
- package/lib/utils/__tests__/debounce.spec.js +0 -40
- package/lib/utils/__tests__/getInitial.spec.js +0 -26
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = _interopRequireDefault(require("react"));
|
|
4
|
-
|
|
5
|
-
var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon"));
|
|
6
|
-
|
|
7
|
-
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
|
|
8
|
-
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
-
|
|
11
|
-
// children: PropTypes.node,
|
|
12
|
-
// disabled: PropTypes.bool,
|
|
13
|
-
// iconRotated: PropTypes.bool,
|
|
14
|
-
// id: PropTypes.string,
|
|
15
|
-
// inputRef: PropTypes.func,
|
|
16
|
-
// isClear: PropTypes.bool,
|
|
17
|
-
// maxLength: PropTypes.string,
|
|
18
|
-
// name: PropTypes.string,
|
|
19
|
-
// needBorder: PropTypes.bool,
|
|
20
|
-
// onBlur: PropTypes.func,
|
|
21
|
-
// onChange: PropTypes.func,
|
|
22
|
-
// onClear: PropTypes.func,
|
|
23
|
-
// onClick: PropTypes.func,
|
|
24
|
-
// onFocus: PropTypes.func,
|
|
25
|
-
// onKeyDown: PropTypes.func,
|
|
26
|
-
// onKeyUp: PropTypes.func,
|
|
27
|
-
// placeHolder: PropTypes.string,
|
|
28
|
-
// readOnly: PropTypes.bool,
|
|
29
|
-
// size: PropTypes.oneOf(['small', 'medium', 'xmedium']),
|
|
30
|
-
// title: PropTypes.func,
|
|
31
|
-
// type: PropTypes.oneOf(['text', 'password', 'number']),
|
|
32
|
-
// value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
33
|
-
// variant: PropTypes.oneOf(['primary', 'secondary', 'default'])
|
|
34
|
-
describe('TextBoxIcon component', function () {
|
|
35
|
-
it('should display size small', function () {
|
|
36
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
37
|
-
maxLength: "100",
|
|
38
|
-
placeHolder: "Text Box Icon",
|
|
39
|
-
size: "small",
|
|
40
|
-
variant: "default"
|
|
41
|
-
}));
|
|
42
|
-
|
|
43
|
-
var tree = ele.toJSON();
|
|
44
|
-
expect(tree).toMatchSnapshot();
|
|
45
|
-
});
|
|
46
|
-
it('should display size medium', function () {
|
|
47
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
48
|
-
maxLength: "100",
|
|
49
|
-
placeHolder: "Text Area",
|
|
50
|
-
size: "medium",
|
|
51
|
-
variant: "default"
|
|
52
|
-
}));
|
|
53
|
-
|
|
54
|
-
var tree = ele.toJSON();
|
|
55
|
-
expect(tree).toMatchSnapshot();
|
|
56
|
-
});
|
|
57
|
-
it('should display size xmedium', function () {
|
|
58
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
59
|
-
maxLength: "100",
|
|
60
|
-
placeHolder: "Text Area",
|
|
61
|
-
size: "xmedium",
|
|
62
|
-
variant: "default"
|
|
63
|
-
}));
|
|
64
|
-
|
|
65
|
-
var tree = ele.toJSON();
|
|
66
|
-
expect(tree).toMatchSnapshot();
|
|
67
|
-
});
|
|
68
|
-
it('should display size small - primary', function () {
|
|
69
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
70
|
-
maxLength: "100",
|
|
71
|
-
placeHolder: "Text Area",
|
|
72
|
-
size: "small",
|
|
73
|
-
variant: "primary"
|
|
74
|
-
}));
|
|
75
|
-
|
|
76
|
-
var tree = ele.toJSON();
|
|
77
|
-
expect(tree).toMatchSnapshot();
|
|
78
|
-
});
|
|
79
|
-
it('should display size medium - primary', function () {
|
|
80
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
81
|
-
maxLength: "100",
|
|
82
|
-
placeHolder: "Text Area",
|
|
83
|
-
size: "medium",
|
|
84
|
-
variant: "primary"
|
|
85
|
-
}));
|
|
86
|
-
|
|
87
|
-
var tree = ele.toJSON();
|
|
88
|
-
expect(tree).toMatchSnapshot();
|
|
89
|
-
});
|
|
90
|
-
it('should display size xmedium - primary', function () {
|
|
91
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
92
|
-
maxLength: "100",
|
|
93
|
-
placeHolder: "Text Area",
|
|
94
|
-
size: "xmedium",
|
|
95
|
-
variant: "primary"
|
|
96
|
-
}));
|
|
97
|
-
|
|
98
|
-
var tree = ele.toJSON();
|
|
99
|
-
expect(tree).toMatchSnapshot();
|
|
100
|
-
});
|
|
101
|
-
it('should display size small - secondary', function () {
|
|
102
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
103
|
-
maxLength: "100",
|
|
104
|
-
placeHolder: "Text Area",
|
|
105
|
-
size: "small",
|
|
106
|
-
variant: "secondary"
|
|
107
|
-
}));
|
|
108
|
-
|
|
109
|
-
var tree = ele.toJSON();
|
|
110
|
-
expect(tree).toMatchSnapshot();
|
|
111
|
-
});
|
|
112
|
-
it('should display size medium - secondary', function () {
|
|
113
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
114
|
-
maxLength: "100",
|
|
115
|
-
placeHolder: "Text Area",
|
|
116
|
-
size: "medium",
|
|
117
|
-
variant: "secondary"
|
|
118
|
-
}));
|
|
119
|
-
|
|
120
|
-
var tree = ele.toJSON();
|
|
121
|
-
expect(tree).toMatchSnapshot();
|
|
122
|
-
});
|
|
123
|
-
it('should display size xmedium - secondary', function () {
|
|
124
|
-
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
125
|
-
maxLength: "100",
|
|
126
|
-
placeHolder: "Text Area",
|
|
127
|
-
size: "xmedium",
|
|
128
|
-
variant: "secondary"
|
|
129
|
-
}));
|
|
130
|
-
|
|
131
|
-
var tree = ele.toJSON();
|
|
132
|
-
expect(tree).toMatchSnapshot();
|
|
133
|
-
});
|
|
134
|
-
it('should text propertly entered', function () {
|
|
135
|
-
var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
136
|
-
maxLength: "100",
|
|
137
|
-
placeHolder: "Text Box",
|
|
138
|
-
size: "medium",
|
|
139
|
-
variant: "primary",
|
|
140
|
-
value: "Text Box Working"
|
|
141
|
-
}));
|
|
142
|
-
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').value.contains('Text Box Working')).toBe(true);
|
|
143
|
-
});
|
|
144
|
-
it('should placeHolder propertly entered', function () {
|
|
145
|
-
var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
146
|
-
maxLength: "100",
|
|
147
|
-
placeHolder: "Text Box",
|
|
148
|
-
size: "medium",
|
|
149
|
-
variant: "primary",
|
|
150
|
-
text: "Text Box Working"
|
|
151
|
-
}));
|
|
152
|
-
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').getAttribute('placeholder')).toMatch(/Text Box/);
|
|
153
|
-
}); // it('Check disabled works', () => {
|
|
154
|
-
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
155
|
-
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
|
|
156
|
-
// );
|
|
157
|
-
// let pass = false;
|
|
158
|
-
// let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').classList;
|
|
159
|
-
// Object.keys(classNames)
|
|
160
|
-
// .map(className => {
|
|
161
|
-
// if (classNames[className] == 'disabled') {
|
|
162
|
-
// pass = true;
|
|
163
|
-
// }
|
|
164
|
-
// });
|
|
165
|
-
// expect(
|
|
166
|
-
// pass
|
|
167
|
-
// ).toBe(true);
|
|
168
|
-
// });
|
|
169
|
-
// it('Check readOnly works', () => {
|
|
170
|
-
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
171
|
-
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
|
|
172
|
-
// );
|
|
173
|
-
// let pass = false;
|
|
174
|
-
// let classNames = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').classList;
|
|
175
|
-
// Object.keys(classNames)
|
|
176
|
-
// .map(className => {
|
|
177
|
-
// if (classNames[className] == 'pointer') {
|
|
178
|
-
// pass = true;
|
|
179
|
-
// }
|
|
180
|
-
// });
|
|
181
|
-
// expect(
|
|
182
|
-
// pass
|
|
183
|
-
// ).toBe(true);
|
|
184
|
-
// });
|
|
185
|
-
|
|
186
|
-
it('Check onchange works', function () {
|
|
187
|
-
var mockfn = jest.fn();
|
|
188
|
-
var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
189
|
-
maxLength: "100",
|
|
190
|
-
placeHolder: "Text Box",
|
|
191
|
-
size: "medium",
|
|
192
|
-
variant: "primary",
|
|
193
|
-
value: "Text Box Working",
|
|
194
|
-
onChange: mockfn
|
|
195
|
-
}));
|
|
196
|
-
var onChangeEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
|
|
197
|
-
TestUtils.Simulate.change(onChangeEle);
|
|
198
|
-
expect(mockfn.mock.calls.length).toBe(1);
|
|
199
|
-
});
|
|
200
|
-
it('Check onBlur works', function () {
|
|
201
|
-
var mockfn = jest.fn();
|
|
202
|
-
var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
203
|
-
maxLength: "100",
|
|
204
|
-
placeHolder: "Text Box",
|
|
205
|
-
size: "medium",
|
|
206
|
-
variant: "primary",
|
|
207
|
-
value: "Text Box Working",
|
|
208
|
-
onBlur: mockfn
|
|
209
|
-
}));
|
|
210
|
-
var onBlurEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
|
|
211
|
-
TestUtils.Simulate.blur(onBlurEle);
|
|
212
|
-
expect(mockfn.mock.calls.length).toBe(1);
|
|
213
|
-
});
|
|
214
|
-
it('Check onFocus works', function () {
|
|
215
|
-
var mockfn = jest.fn();
|
|
216
|
-
var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
217
|
-
maxLength: "100",
|
|
218
|
-
placeHolder: "Text Box",
|
|
219
|
-
size: "medium",
|
|
220
|
-
variant: "primary",
|
|
221
|
-
value: "Text Box Working",
|
|
222
|
-
onFocus: mockfn
|
|
223
|
-
}));
|
|
224
|
-
var onFocusEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon');
|
|
225
|
-
TestUtils.Simulate.focus(onFocusEle);
|
|
226
|
-
expect(mockfn.mock.calls.length).toBe(1);
|
|
227
|
-
});
|
|
228
|
-
});
|
|
@@ -1,334 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`TextBoxIcon component should display size medium - primary 1`] = `
|
|
4
|
-
<div
|
|
5
|
-
className="container effect flex rowdir"
|
|
6
|
-
data-id="containerComponent"
|
|
7
|
-
data-title=""
|
|
8
|
-
>
|
|
9
|
-
<div
|
|
10
|
-
className="grow basis shrinkOff"
|
|
11
|
-
data-id="boxComponent"
|
|
12
|
-
>
|
|
13
|
-
<input
|
|
14
|
-
className=" container medium primary effect borderColor_default"
|
|
15
|
-
data-id="textBoxIcon"
|
|
16
|
-
maxLength="100"
|
|
17
|
-
onBlur={[Function]}
|
|
18
|
-
onChange={[Function]}
|
|
19
|
-
onFocus={[Function]}
|
|
20
|
-
placeholder="Text Area"
|
|
21
|
-
type="text"
|
|
22
|
-
value=""
|
|
23
|
-
/>
|
|
24
|
-
</div>
|
|
25
|
-
<div
|
|
26
|
-
className="iconContainer shrinkOff"
|
|
27
|
-
data-id="boxComponent"
|
|
28
|
-
>
|
|
29
|
-
<div
|
|
30
|
-
className="flex cover rowdir vCenter"
|
|
31
|
-
data-id="containerComponent"
|
|
32
|
-
/>
|
|
33
|
-
</div>
|
|
34
|
-
<div
|
|
35
|
-
className="line borderColor_default"
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
38
|
-
`;
|
|
39
|
-
|
|
40
|
-
exports[`TextBoxIcon component should display size medium - secondary 1`] = `
|
|
41
|
-
<div
|
|
42
|
-
className="container effect flex rowdir"
|
|
43
|
-
data-id="containerComponent"
|
|
44
|
-
data-title=""
|
|
45
|
-
>
|
|
46
|
-
<div
|
|
47
|
-
className="grow basis shrinkOff"
|
|
48
|
-
data-id="boxComponent"
|
|
49
|
-
>
|
|
50
|
-
<input
|
|
51
|
-
className=" container medium secondary effect borderColor_default"
|
|
52
|
-
data-id="textBoxIcon"
|
|
53
|
-
maxLength="100"
|
|
54
|
-
onBlur={[Function]}
|
|
55
|
-
onChange={[Function]}
|
|
56
|
-
onFocus={[Function]}
|
|
57
|
-
placeholder="Text Area"
|
|
58
|
-
type="text"
|
|
59
|
-
value=""
|
|
60
|
-
/>
|
|
61
|
-
</div>
|
|
62
|
-
<div
|
|
63
|
-
className="iconContainer shrinkOff"
|
|
64
|
-
data-id="boxComponent"
|
|
65
|
-
>
|
|
66
|
-
<div
|
|
67
|
-
className="flex cover rowdir vCenter"
|
|
68
|
-
data-id="containerComponent"
|
|
69
|
-
/>
|
|
70
|
-
</div>
|
|
71
|
-
<div
|
|
72
|
-
className="line borderColor_default"
|
|
73
|
-
/>
|
|
74
|
-
</div>
|
|
75
|
-
`;
|
|
76
|
-
|
|
77
|
-
exports[`TextBoxIcon component should display size medium 1`] = `
|
|
78
|
-
<div
|
|
79
|
-
className="container effect flex rowdir"
|
|
80
|
-
data-id="containerComponent"
|
|
81
|
-
data-title=""
|
|
82
|
-
>
|
|
83
|
-
<div
|
|
84
|
-
className="grow basis shrinkOff"
|
|
85
|
-
data-id="boxComponent"
|
|
86
|
-
>
|
|
87
|
-
<input
|
|
88
|
-
className=" container medium default effect borderColor_default"
|
|
89
|
-
data-id="textBoxIcon"
|
|
90
|
-
maxLength="100"
|
|
91
|
-
onBlur={[Function]}
|
|
92
|
-
onChange={[Function]}
|
|
93
|
-
onFocus={[Function]}
|
|
94
|
-
placeholder="Text Area"
|
|
95
|
-
type="text"
|
|
96
|
-
value=""
|
|
97
|
-
/>
|
|
98
|
-
</div>
|
|
99
|
-
<div
|
|
100
|
-
className="iconContainer shrinkOff"
|
|
101
|
-
data-id="boxComponent"
|
|
102
|
-
>
|
|
103
|
-
<div
|
|
104
|
-
className="flex cover rowdir vCenter"
|
|
105
|
-
data-id="containerComponent"
|
|
106
|
-
/>
|
|
107
|
-
</div>
|
|
108
|
-
<div
|
|
109
|
-
className="line borderColor_default"
|
|
110
|
-
/>
|
|
111
|
-
</div>
|
|
112
|
-
`;
|
|
113
|
-
|
|
114
|
-
exports[`TextBoxIcon component should display size small - primary 1`] = `
|
|
115
|
-
<div
|
|
116
|
-
className="container effect flex rowdir"
|
|
117
|
-
data-id="containerComponent"
|
|
118
|
-
data-title=""
|
|
119
|
-
>
|
|
120
|
-
<div
|
|
121
|
-
className="grow basis shrinkOff"
|
|
122
|
-
data-id="boxComponent"
|
|
123
|
-
>
|
|
124
|
-
<input
|
|
125
|
-
className=" container small primary effect borderColor_default"
|
|
126
|
-
data-id="textBoxIcon"
|
|
127
|
-
maxLength="100"
|
|
128
|
-
onBlur={[Function]}
|
|
129
|
-
onChange={[Function]}
|
|
130
|
-
onFocus={[Function]}
|
|
131
|
-
placeholder="Text Area"
|
|
132
|
-
type="text"
|
|
133
|
-
value=""
|
|
134
|
-
/>
|
|
135
|
-
</div>
|
|
136
|
-
<div
|
|
137
|
-
className="iconContainer shrinkOff"
|
|
138
|
-
data-id="boxComponent"
|
|
139
|
-
>
|
|
140
|
-
<div
|
|
141
|
-
className="flex cover rowdir vCenter"
|
|
142
|
-
data-id="containerComponent"
|
|
143
|
-
/>
|
|
144
|
-
</div>
|
|
145
|
-
<div
|
|
146
|
-
className="line borderColor_default"
|
|
147
|
-
/>
|
|
148
|
-
</div>
|
|
149
|
-
`;
|
|
150
|
-
|
|
151
|
-
exports[`TextBoxIcon component should display size small - secondary 1`] = `
|
|
152
|
-
<div
|
|
153
|
-
className="container effect flex rowdir"
|
|
154
|
-
data-id="containerComponent"
|
|
155
|
-
data-title=""
|
|
156
|
-
>
|
|
157
|
-
<div
|
|
158
|
-
className="grow basis shrinkOff"
|
|
159
|
-
data-id="boxComponent"
|
|
160
|
-
>
|
|
161
|
-
<input
|
|
162
|
-
className=" container small secondary effect borderColor_default"
|
|
163
|
-
data-id="textBoxIcon"
|
|
164
|
-
maxLength="100"
|
|
165
|
-
onBlur={[Function]}
|
|
166
|
-
onChange={[Function]}
|
|
167
|
-
onFocus={[Function]}
|
|
168
|
-
placeholder="Text Area"
|
|
169
|
-
type="text"
|
|
170
|
-
value=""
|
|
171
|
-
/>
|
|
172
|
-
</div>
|
|
173
|
-
<div
|
|
174
|
-
className="iconContainer shrinkOff"
|
|
175
|
-
data-id="boxComponent"
|
|
176
|
-
>
|
|
177
|
-
<div
|
|
178
|
-
className="flex cover rowdir vCenter"
|
|
179
|
-
data-id="containerComponent"
|
|
180
|
-
/>
|
|
181
|
-
</div>
|
|
182
|
-
<div
|
|
183
|
-
className="line borderColor_default"
|
|
184
|
-
/>
|
|
185
|
-
</div>
|
|
186
|
-
`;
|
|
187
|
-
|
|
188
|
-
exports[`TextBoxIcon component should display size small 1`] = `
|
|
189
|
-
<div
|
|
190
|
-
className="container effect flex rowdir"
|
|
191
|
-
data-id="containerComponent"
|
|
192
|
-
data-title=""
|
|
193
|
-
>
|
|
194
|
-
<div
|
|
195
|
-
className="grow basis shrinkOff"
|
|
196
|
-
data-id="boxComponent"
|
|
197
|
-
>
|
|
198
|
-
<input
|
|
199
|
-
className=" container small default effect borderColor_default"
|
|
200
|
-
data-id="textBoxIcon"
|
|
201
|
-
maxLength="100"
|
|
202
|
-
onBlur={[Function]}
|
|
203
|
-
onChange={[Function]}
|
|
204
|
-
onFocus={[Function]}
|
|
205
|
-
placeholder="Text Box Icon"
|
|
206
|
-
type="text"
|
|
207
|
-
value=""
|
|
208
|
-
/>
|
|
209
|
-
</div>
|
|
210
|
-
<div
|
|
211
|
-
className="iconContainer shrinkOff"
|
|
212
|
-
data-id="boxComponent"
|
|
213
|
-
>
|
|
214
|
-
<div
|
|
215
|
-
className="flex cover rowdir vCenter"
|
|
216
|
-
data-id="containerComponent"
|
|
217
|
-
/>
|
|
218
|
-
</div>
|
|
219
|
-
<div
|
|
220
|
-
className="line borderColor_default"
|
|
221
|
-
/>
|
|
222
|
-
</div>
|
|
223
|
-
`;
|
|
224
|
-
|
|
225
|
-
exports[`TextBoxIcon component should display size xmedium - primary 1`] = `
|
|
226
|
-
<div
|
|
227
|
-
className="container effect flex rowdir"
|
|
228
|
-
data-id="containerComponent"
|
|
229
|
-
data-title=""
|
|
230
|
-
>
|
|
231
|
-
<div
|
|
232
|
-
className="grow basis shrinkOff"
|
|
233
|
-
data-id="boxComponent"
|
|
234
|
-
>
|
|
235
|
-
<input
|
|
236
|
-
className=" container xmedium primary effect borderColor_default"
|
|
237
|
-
data-id="textBoxIcon"
|
|
238
|
-
maxLength="100"
|
|
239
|
-
onBlur={[Function]}
|
|
240
|
-
onChange={[Function]}
|
|
241
|
-
onFocus={[Function]}
|
|
242
|
-
placeholder="Text Area"
|
|
243
|
-
type="text"
|
|
244
|
-
value=""
|
|
245
|
-
/>
|
|
246
|
-
</div>
|
|
247
|
-
<div
|
|
248
|
-
className="iconContainer shrinkOff"
|
|
249
|
-
data-id="boxComponent"
|
|
250
|
-
>
|
|
251
|
-
<div
|
|
252
|
-
className="flex cover rowdir vCenter"
|
|
253
|
-
data-id="containerComponent"
|
|
254
|
-
/>
|
|
255
|
-
</div>
|
|
256
|
-
<div
|
|
257
|
-
className="line borderColor_default"
|
|
258
|
-
/>
|
|
259
|
-
</div>
|
|
260
|
-
`;
|
|
261
|
-
|
|
262
|
-
exports[`TextBoxIcon component should display size xmedium - secondary 1`] = `
|
|
263
|
-
<div
|
|
264
|
-
className="container effect flex rowdir"
|
|
265
|
-
data-id="containerComponent"
|
|
266
|
-
data-title=""
|
|
267
|
-
>
|
|
268
|
-
<div
|
|
269
|
-
className="grow basis shrinkOff"
|
|
270
|
-
data-id="boxComponent"
|
|
271
|
-
>
|
|
272
|
-
<input
|
|
273
|
-
className=" container xmedium secondary effect borderColor_default"
|
|
274
|
-
data-id="textBoxIcon"
|
|
275
|
-
maxLength="100"
|
|
276
|
-
onBlur={[Function]}
|
|
277
|
-
onChange={[Function]}
|
|
278
|
-
onFocus={[Function]}
|
|
279
|
-
placeholder="Text Area"
|
|
280
|
-
type="text"
|
|
281
|
-
value=""
|
|
282
|
-
/>
|
|
283
|
-
</div>
|
|
284
|
-
<div
|
|
285
|
-
className="iconContainer shrinkOff"
|
|
286
|
-
data-id="boxComponent"
|
|
287
|
-
>
|
|
288
|
-
<div
|
|
289
|
-
className="flex cover rowdir vCenter"
|
|
290
|
-
data-id="containerComponent"
|
|
291
|
-
/>
|
|
292
|
-
</div>
|
|
293
|
-
<div
|
|
294
|
-
className="line borderColor_default"
|
|
295
|
-
/>
|
|
296
|
-
</div>
|
|
297
|
-
`;
|
|
298
|
-
|
|
299
|
-
exports[`TextBoxIcon component should display size xmedium 1`] = `
|
|
300
|
-
<div
|
|
301
|
-
className="container effect flex rowdir"
|
|
302
|
-
data-id="containerComponent"
|
|
303
|
-
data-title=""
|
|
304
|
-
>
|
|
305
|
-
<div
|
|
306
|
-
className="grow basis shrinkOff"
|
|
307
|
-
data-id="boxComponent"
|
|
308
|
-
>
|
|
309
|
-
<input
|
|
310
|
-
className=" container xmedium default effect borderColor_default"
|
|
311
|
-
data-id="textBoxIcon"
|
|
312
|
-
maxLength="100"
|
|
313
|
-
onBlur={[Function]}
|
|
314
|
-
onChange={[Function]}
|
|
315
|
-
onFocus={[Function]}
|
|
316
|
-
placeholder="Text Area"
|
|
317
|
-
type="text"
|
|
318
|
-
value=""
|
|
319
|
-
/>
|
|
320
|
-
</div>
|
|
321
|
-
<div
|
|
322
|
-
className="iconContainer shrinkOff"
|
|
323
|
-
data-id="boxComponent"
|
|
324
|
-
>
|
|
325
|
-
<div
|
|
326
|
-
className="flex cover rowdir vCenter"
|
|
327
|
-
data-id="containerComponent"
|
|
328
|
-
/>
|
|
329
|
-
</div>
|
|
330
|
-
<div
|
|
331
|
-
className="line borderColor_default"
|
|
332
|
-
/>
|
|
333
|
-
</div>
|
|
334
|
-
`;
|