@zohodesk/components 1.2.57 → 1.2.58
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 +4 -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/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/package.json +1 -1
- package/result.json +1 -1
package/README.md
CHANGED
|
@@ -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,
|
|
@@ -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,
|