@zohodesk/dot 1.0.0-temp-187.11 → 1.0.0-temp-208.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/.cli/propValidation_report.html +1 -1
- package/README.md +5 -0
- package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +29 -0
- package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +7 -0
- package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +7 -0
- package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +7 -0
- package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +7 -0
- package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +7 -0
- package/assets/Appearance/light/mode/Dot_LightMode.module.css +29 -0
- package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +7 -0
- package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +7 -0
- package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +7 -0
- package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +7 -0
- package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +7 -0
- package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +29 -0
- package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +7 -0
- package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +7 -0
- package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +7 -0
- package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +7 -0
- package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +7 -0
- package/es/DotProvider/libraryChunks/appearance/component/Dark_Component.js +2 -0
- package/es/DotProvider/libraryChunks/appearance/component/Light_Component.js +2 -0
- package/es/DotProvider/libraryChunks/appearance/component/PureDark_Component.js +2 -0
- package/es/DotProvider/utils/themeAppearanceAssetsConfig.js +3 -3
- package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js +34 -0
- package/es/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js +43 -0
- package/es/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap +51 -0
- package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css +83 -0
- package/es/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js +6 -0
- package/es/Onboarding/CarouselDots/CarouselDot/props/propTypes.js +9 -0
- package/es/Onboarding/CarouselDots/CarouselDots.js +43 -0
- package/es/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js +64 -0
- package/es/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap +94 -0
- package/es/Onboarding/CarouselDots/css/CarouselDots.module.css +6 -0
- package/es/Onboarding/CarouselDots/props/defaultProps.js +7 -0
- package/es/Onboarding/CarouselDots/props/propTypes.js +13 -0
- package/es/Onboarding/Onboarding.js +303 -0
- package/es/Onboarding/__tests__/Onboarding.spec.js +428 -0
- package/es/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap +3573 -0
- package/es/Onboarding/css/Onboarding.module.css +460 -0
- package/es/Onboarding/hooks/useOnboarding.js +34 -0
- package/es/Onboarding/hooks/useOnboardingSlider.js +55 -0
- package/es/Onboarding/props/defaultProps.js +13 -0
- package/es/Onboarding/props/propTypes.js +55 -0
- package/es/VideoLookup/VideoLookup.js +81 -0
- package/es/VideoLookup/__tests__/VideoLookup.spec.js +86 -0
- package/es/VideoLookup/__tests__/__snapshots__/VideoLookup.spec.js.snap +434 -0
- package/es/VideoLookup/css/VideoLookup.module.css +67 -0
- package/es/VideoLookup/props/defaultProps.js +8 -0
- package/es/VideoLookup/props/propTypes.js +12 -0
- package/es/common/dot_boxShadow.module.css +6 -0
- package/es/form/fields/Fields.module.css +0 -4
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +2 -4
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +116 -116
- package/es/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
- package/es/index.js +1 -0
- package/es/list/DepartmentDropDown/DepartmentDropDown.js +2 -7
- package/es/list/DepartmentDropDown/props/defaultProps.js +1 -2
- package/es/list/DepartmentDropDown/props/propTypes.js +0 -3
- package/es/list/status/StatusListItem/StatusListItem.module.css +4 -2
- package/es/utils/General.js +2 -1
- package/lib/DotProvider/libraryChunks/appearance/component/Dark_Component.js +5 -0
- package/lib/DotProvider/libraryChunks/appearance/component/Light_Component.js +5 -0
- package/lib/DotProvider/libraryChunks/appearance/component/PureDark_Component.js +5 -0
- package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js +3 -3
- package/lib/Onboarding/CarouselDots/CarouselDot/CarouselDot.js +44 -0
- package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js +50 -0
- package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap +51 -0
- package/lib/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css +83 -0
- package/lib/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js +13 -0
- package/lib/Onboarding/CarouselDots/CarouselDot/props/propTypes.js +20 -0
- package/lib/Onboarding/CarouselDots/CarouselDots.js +66 -0
- package/lib/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js +71 -0
- package/lib/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap +94 -0
- package/lib/Onboarding/CarouselDots/css/CarouselDots.module.css +6 -0
- package/lib/Onboarding/CarouselDots/props/defaultProps.js +14 -0
- package/lib/Onboarding/CarouselDots/props/propTypes.js +24 -0
- package/lib/Onboarding/Onboarding.js +316 -0
- package/lib/Onboarding/__tests__/Onboarding.spec.js +435 -0
- package/lib/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap +3573 -0
- package/lib/Onboarding/css/Onboarding.module.css +460 -0
- package/lib/Onboarding/hooks/useOnboarding.js +59 -0
- package/lib/Onboarding/hooks/useOnboardingSlider.js +85 -0
- package/lib/Onboarding/props/defaultProps.js +20 -0
- package/lib/Onboarding/props/propTypes.js +72 -0
- package/lib/VideoLookup/VideoLookup.js +104 -0
- package/lib/VideoLookup/__tests__/VideoLookup.spec.js +93 -0
- package/lib/VideoLookup/__tests__/__snapshots__/VideoLookup.spec.js.snap +434 -0
- package/lib/VideoLookup/css/VideoLookup.module.css +67 -0
- package/lib/VideoLookup/props/defaultProps.js +15 -0
- package/lib/VideoLookup/props/propTypes.js +23 -0
- package/lib/common/dot_boxShadow.module.css +6 -0
- package/lib/form/fields/Fields.module.css +0 -4
- package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -5
- package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +116 -116
- package/lib/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
- package/lib/index.js +9 -0
- package/lib/list/DepartmentDropDown/DepartmentDropDown.js +3 -8
- package/lib/list/DepartmentDropDown/props/defaultProps.js +1 -2
- package/lib/list/DepartmentDropDown/props/propTypes.js +0 -2
- package/lib/list/status/StatusListItem/StatusListItem.module.css +4 -2
- package/lib/utils/General.js +5 -1
- package/package.json +7 -5
- package/result.json +1 -1
- package/unittest/index.html +6 -2
|
@@ -1,116 +1,116 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
position: relative;
|
|
3
|
-
}
|
|
4
|
-
.tag {
|
|
5
|
-
max-width: 100% ;
|
|
6
|
-
}
|
|
7
|
-
[dir=ltr] .moreLess, [dir=ltr] .tag {
|
|
8
|
-
margin: 0 var(--zd_size6) var(--zd_size6) 0 ;
|
|
9
|
-
}
|
|
10
|
-
[dir=rtl] .moreLess, [dir=rtl] .tag {
|
|
11
|
-
margin: 0 0 var(--zd_size6) var(--zd_size6) ;
|
|
12
|
-
}
|
|
13
|
-
.input {
|
|
14
|
-
height: var(--zd_size20) ;
|
|
15
|
-
width: 100% ;
|
|
16
|
-
margin-bottom: var(--zd_size4) ;
|
|
17
|
-
}
|
|
18
|
-
.viewpopNew {
|
|
19
|
-
max-height: var(--zd_size250) ;
|
|
20
|
-
}
|
|
21
|
-
.tagDiv {
|
|
22
|
-
max-height: var(--zd_size160) ;
|
|
23
|
-
margin-top: var(--zd_size5) ;
|
|
24
|
-
}
|
|
25
|
-
.hasBorder {
|
|
26
|
-
transition: border var(--zd_transition2) linear 0s;
|
|
27
|
-
border-bottom-style: solid;
|
|
28
|
-
border-bottom-width: 1px;
|
|
29
|
-
}
|
|
30
|
-
.borderColor_transparent {
|
|
31
|
-
border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
|
|
32
|
-
}
|
|
33
|
-
.borderColor_transparent:hover {
|
|
34
|
-
border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
|
|
35
|
-
}
|
|
36
|
-
.borderColor_transparent.active {
|
|
37
|
-
border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
|
|
38
|
-
}
|
|
39
|
-
.borderColor_default {
|
|
40
|
-
border-bottom-color: var(--zdt_tagsmultiselect_default_border);
|
|
41
|
-
}
|
|
42
|
-
.borderColor_default:hover {
|
|
43
|
-
border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
|
|
44
|
-
}
|
|
45
|
-
.borderColor_default.active {
|
|
46
|
-
border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
|
|
47
|
-
}
|
|
48
|
-
.borderColor_dark {
|
|
49
|
-
border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
|
|
50
|
-
}
|
|
51
|
-
.borderColor_dark:hover {
|
|
52
|
-
border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
|
|
53
|
-
}
|
|
54
|
-
.borderColor_dark.active {
|
|
55
|
-
border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
|
|
56
|
-
}
|
|
57
|
-
.moreLess {
|
|
58
|
-
color: var(--zdt_tagsmultiselect_more_text);
|
|
59
|
-
font-size: var(--zd_font_size13) ;
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
}
|
|
62
|
-
.moreLess:hover {
|
|
63
|
-
color: var(--zdt_tagsmultiselect_more_hover_text);
|
|
64
|
-
}
|
|
65
|
-
.inputWrapper {
|
|
66
|
-
position: relative;
|
|
67
|
-
max-width: 100% ;
|
|
68
|
-
min-width: var(--zd_size5) ;
|
|
69
|
-
font-size: 0 ;
|
|
70
|
-
}
|
|
71
|
-
.newTagLabel {
|
|
72
|
-
color: var(--zdt_tagsmultiselect_labelt_text);
|
|
73
|
-
composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
|
|
74
|
-
}
|
|
75
|
-
[dir=ltr] .newTagLabel {
|
|
76
|
-
margin-right: var(--zd_size5) ;
|
|
77
|
-
}
|
|
78
|
-
[dir=rtl] .newTagLabel {
|
|
79
|
-
margin-left: var(--zd_size5) ;
|
|
80
|
-
}
|
|
81
|
-
.dotted {
|
|
82
|
-
composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
|
|
83
|
-
}
|
|
84
|
-
.dropdown {
|
|
85
|
-
margin-top: var(--zd_size1) ;
|
|
86
|
-
}
|
|
87
|
-
.custmSpan {
|
|
88
|
-
height: var(--zd_size25) ;
|
|
89
|
-
display: inline-block;
|
|
90
|
-
vertical-align: middle;
|
|
91
|
-
opacity: 0;
|
|
92
|
-
overflow: hidden;
|
|
93
|
-
white-space: nowrap;
|
|
94
|
-
max-width: 100% ;
|
|
95
|
-
visibility: hidden;
|
|
96
|
-
}
|
|
97
|
-
[dir=ltr] .custmSpan {
|
|
98
|
-
padding-right: var(--zd_size28) ;
|
|
99
|
-
}
|
|
100
|
-
[dir=rtl] .custmSpan {
|
|
101
|
-
padding-left: var(--zd_size28) ;
|
|
102
|
-
}
|
|
103
|
-
.custmInp {
|
|
104
|
-
position: absolute;
|
|
105
|
-
top: 0 ;
|
|
106
|
-
width: 100% ;
|
|
107
|
-
}
|
|
108
|
-
[dir=ltr] .custmInp {
|
|
109
|
-
left: 0 ;
|
|
110
|
-
}
|
|
111
|
-
[dir=rtl] .custmInp {
|
|
112
|
-
right: 0 ;
|
|
113
|
-
}
|
|
114
|
-
.newTagText {
|
|
115
|
-
color: var(--zdt_tagsmultiselect_more_text);
|
|
116
|
-
}
|
|
1
|
+
.container {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
.tag {
|
|
5
|
+
max-width: 100% ;
|
|
6
|
+
}
|
|
7
|
+
[dir=ltr] .moreLess, [dir=ltr] .tag {
|
|
8
|
+
margin: 0 var(--zd_size6) var(--zd_size6) 0 ;
|
|
9
|
+
}
|
|
10
|
+
[dir=rtl] .moreLess, [dir=rtl] .tag {
|
|
11
|
+
margin: 0 0 var(--zd_size6) var(--zd_size6) ;
|
|
12
|
+
}
|
|
13
|
+
.input {
|
|
14
|
+
height: var(--zd_size20) ;
|
|
15
|
+
width: 100% ;
|
|
16
|
+
margin-bottom: var(--zd_size4) ;
|
|
17
|
+
}
|
|
18
|
+
.viewpopNew {
|
|
19
|
+
max-height: var(--zd_size250) ;
|
|
20
|
+
}
|
|
21
|
+
.tagDiv {
|
|
22
|
+
max-height: var(--zd_size160) ;
|
|
23
|
+
margin-top: var(--zd_size5) ;
|
|
24
|
+
}
|
|
25
|
+
.hasBorder {
|
|
26
|
+
transition: border var(--zd_transition2) linear 0s;
|
|
27
|
+
border-bottom-style: solid;
|
|
28
|
+
border-bottom-width: 1px;
|
|
29
|
+
}
|
|
30
|
+
.borderColor_transparent {
|
|
31
|
+
border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
|
|
32
|
+
}
|
|
33
|
+
.borderColor_transparent:hover {
|
|
34
|
+
border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
|
|
35
|
+
}
|
|
36
|
+
.borderColor_transparent.active {
|
|
37
|
+
border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
|
|
38
|
+
}
|
|
39
|
+
.borderColor_default {
|
|
40
|
+
border-bottom-color: var(--zdt_tagsmultiselect_default_border);
|
|
41
|
+
}
|
|
42
|
+
.borderColor_default:hover {
|
|
43
|
+
border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
|
|
44
|
+
}
|
|
45
|
+
.borderColor_default.active {
|
|
46
|
+
border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
|
|
47
|
+
}
|
|
48
|
+
.borderColor_dark {
|
|
49
|
+
border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
|
|
50
|
+
}
|
|
51
|
+
.borderColor_dark:hover {
|
|
52
|
+
border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
|
|
53
|
+
}
|
|
54
|
+
.borderColor_dark.active {
|
|
55
|
+
border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
|
|
56
|
+
}
|
|
57
|
+
.moreLess {
|
|
58
|
+
color: var(--zdt_tagsmultiselect_more_text);
|
|
59
|
+
font-size: var(--zd_font_size13) ;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
}
|
|
62
|
+
.moreLess:hover {
|
|
63
|
+
color: var(--zdt_tagsmultiselect_more_hover_text);
|
|
64
|
+
}
|
|
65
|
+
.inputWrapper {
|
|
66
|
+
position: relative;
|
|
67
|
+
max-width: 100% ;
|
|
68
|
+
min-width: var(--zd_size5) ;
|
|
69
|
+
font-size: 0 ;
|
|
70
|
+
}
|
|
71
|
+
.newTagLabel {
|
|
72
|
+
color: var(--zdt_tagsmultiselect_labelt_text);
|
|
73
|
+
composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
|
|
74
|
+
}
|
|
75
|
+
[dir=ltr] .newTagLabel {
|
|
76
|
+
margin-right: var(--zd_size5) ;
|
|
77
|
+
}
|
|
78
|
+
[dir=rtl] .newTagLabel {
|
|
79
|
+
margin-left: var(--zd_size5) ;
|
|
80
|
+
}
|
|
81
|
+
.dotted {
|
|
82
|
+
composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
|
|
83
|
+
}
|
|
84
|
+
.dropdown {
|
|
85
|
+
margin-top: var(--zd_size1) ;
|
|
86
|
+
}
|
|
87
|
+
.custmSpan {
|
|
88
|
+
height: var(--zd_size25) ;
|
|
89
|
+
display: inline-block;
|
|
90
|
+
vertical-align: middle;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
max-width: 100% ;
|
|
95
|
+
visibility: hidden;
|
|
96
|
+
}
|
|
97
|
+
[dir=ltr] .custmSpan {
|
|
98
|
+
padding-right: var(--zd_size28) ;
|
|
99
|
+
}
|
|
100
|
+
[dir=rtl] .custmSpan {
|
|
101
|
+
padding-left: var(--zd_size28) ;
|
|
102
|
+
}
|
|
103
|
+
.custmInp {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 0 ;
|
|
106
|
+
width: 100% ;
|
|
107
|
+
}
|
|
108
|
+
[dir=ltr] .custmInp {
|
|
109
|
+
left: 0 ;
|
|
110
|
+
}
|
|
111
|
+
[dir=rtl] .custmInp {
|
|
112
|
+
right: 0 ;
|
|
113
|
+
}
|
|
114
|
+
.newTagText {
|
|
115
|
+
color: var(--zdt_tagsmultiselect_more_text);
|
|
116
|
+
}
|
|
@@ -52,8 +52,7 @@ export const propTypes = {
|
|
|
52
52
|
customProps: PropTypes.shape({
|
|
53
53
|
TextBoxIconProps: PropTypes.object,
|
|
54
54
|
TagWrapperProps: PropTypes.object,
|
|
55
|
-
TagProps: PropTypes.object
|
|
56
|
-
ListItemProps: PropTypes.object
|
|
55
|
+
TagProps: PropTypes.object
|
|
57
56
|
}),
|
|
58
57
|
isFocus: PropTypes.bool
|
|
59
58
|
};
|
package/es/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { default as Loader } from "./Loader/Loader";
|
|
|
35
35
|
export { default as Message, MessageUI, MessageNew } from "./Message/Message";
|
|
36
36
|
export { default as MessageBanner } from "./MessageBanner/MessageBanner";
|
|
37
37
|
export { default as NewStar } from "./NewStar/NewStar";
|
|
38
|
+
export { default as Onboarding } from "./Onboarding/Onboarding";
|
|
38
39
|
export { default as PlusIcon } from "./PlusIcon/PlusIcon";
|
|
39
40
|
import * as _Provider from "./Provider/Config";
|
|
40
41
|
export { _Provider as Provider };
|
|
@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
|
|
|
48
48
|
onSearch,
|
|
49
49
|
needSearchFetching,
|
|
50
50
|
searchStr,
|
|
51
|
-
i18nKeys
|
|
52
|
-
customProps
|
|
51
|
+
i18nKeys
|
|
53
52
|
} = this.props;
|
|
54
|
-
const {
|
|
55
|
-
ToggleDropDownProps = {}
|
|
56
|
-
} = customProps;
|
|
57
53
|
let {
|
|
58
54
|
title = 'Move Department',
|
|
59
55
|
searchEmptyText = 'No results found',
|
|
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
|
|
|
88
84
|
getNextOptions: getNextOptions,
|
|
89
85
|
isNextOptions: isNextOptions,
|
|
90
86
|
onSearch: onSearch,
|
|
91
|
-
needSearchFetching: needSearchFetching
|
|
92
|
-
...ToggleDropDownProps
|
|
87
|
+
needSearchFetching: needSearchFetching
|
|
93
88
|
});
|
|
94
89
|
}
|
|
95
90
|
|
|
@@ -36,8 +36,9 @@
|
|
|
36
36
|
.value {
|
|
37
37
|
composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
|
|
38
38
|
}
|
|
39
|
-
.multiLineValue
|
|
40
|
-
|
|
39
|
+
.multiLineValue{
|
|
40
|
+
word-break: break-word;
|
|
41
|
+
composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
|
|
41
42
|
}
|
|
42
43
|
[dir=ltr] .withBorder.active {
|
|
43
44
|
border-left-color: var(--zdt_statuslistitem_default_active_border);
|
|
@@ -45,6 +46,7 @@
|
|
|
45
46
|
[dir=rtl] .withBorder.active {
|
|
46
47
|
border-right-color: var(--zdt_statuslistitem_default_active_border);
|
|
47
48
|
}
|
|
49
|
+
|
|
48
50
|
.default.hover, .default.effect:hover {
|
|
49
51
|
background-color: var(--zdt_statuslistitem_default_effect_bg);
|
|
50
52
|
}
|
package/es/utils/General.js
CHANGED
|
@@ -20,17 +20,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
20
20
|
var themeAppearanceImports = {
|
|
21
21
|
Lib_LightMode_Component: function Lib_LightMode_Component() {
|
|
22
22
|
return Promise.resolve().then(function () {
|
|
23
|
-
return _interopRequireWildcard(require(
|
|
23
|
+
return _interopRequireWildcard(require("../libraryChunks/appearance/component/Light_Component"));
|
|
24
24
|
});
|
|
25
25
|
},
|
|
26
26
|
Lib_DarkMode_Component: function Lib_DarkMode_Component() {
|
|
27
27
|
return Promise.resolve().then(function () {
|
|
28
|
-
return _interopRequireWildcard(require(
|
|
28
|
+
return _interopRequireWildcard(require("../libraryChunks/appearance/component/Dark_Component"));
|
|
29
29
|
});
|
|
30
30
|
},
|
|
31
31
|
Lib_PureDarkMode_Component: function Lib_PureDarkMode_Component() {
|
|
32
32
|
return Promise.resolve().then(function () {
|
|
33
|
-
return _interopRequireWildcard(require(
|
|
33
|
+
return _interopRequireWildcard(require("../libraryChunks/appearance/component/PureDark_Component"));
|
|
34
34
|
});
|
|
35
35
|
},
|
|
36
36
|
Lib_LightMode_Dot: function Lib_LightMode_Dot() {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = require("./props/propTypes.js");
|
|
11
|
+
|
|
12
|
+
var _defaultProps = require("./props/defaultProps.js");
|
|
13
|
+
|
|
14
|
+
var _CarouselDotModule = _interopRequireDefault(require("./css/CarouselDot.module.css"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
|
|
18
|
+
/* Props */
|
|
19
|
+
|
|
20
|
+
/* Style */
|
|
21
|
+
function CarouselDot(props) {
|
|
22
|
+
var onClick = props.onClick,
|
|
23
|
+
isActive = props.isActive,
|
|
24
|
+
index = props.index,
|
|
25
|
+
isAnimationPaused = props.isAnimationPaused,
|
|
26
|
+
testId = props.testId,
|
|
27
|
+
customId = props.customId;
|
|
28
|
+
|
|
29
|
+
function handleClick() {
|
|
30
|
+
typeof onClick === "function" && onClick(index);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
34
|
+
className: "".concat(_CarouselDotModule["default"].bullet, " ").concat(isAnimationPaused ? _CarouselDotModule["default"].animationPaused : '', " ").concat(isActive ? _CarouselDotModule["default"].bulletActive : _CarouselDotModule["default"].bulletNormal),
|
|
35
|
+
onClick: handleClick,
|
|
36
|
+
"data-id": customId,
|
|
37
|
+
"data-test-id": testId
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
CarouselDot.propTypes = _propTypes.propTypes;
|
|
42
|
+
CarouselDot.defaultProps = _defaultProps.defaultProps;
|
|
43
|
+
var _default = CarouselDot;
|
|
44
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
var _CarouselDot = _interopRequireDefault(require("../CarouselDot"));
|
|
8
|
+
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
|
|
11
|
+
describe('CarouselDot', function () {
|
|
12
|
+
test('rendering the defult props', function () {
|
|
13
|
+
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], null)),
|
|
14
|
+
asFragment = _render.asFragment;
|
|
15
|
+
|
|
16
|
+
expect(asFragment()).toMatchSnapshot();
|
|
17
|
+
});
|
|
18
|
+
test('rendering of isActive', function () {
|
|
19
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
|
|
20
|
+
isActive: true
|
|
21
|
+
})),
|
|
22
|
+
asFragment = _render2.asFragment;
|
|
23
|
+
|
|
24
|
+
expect(asFragment()).toMatchSnapshot();
|
|
25
|
+
});
|
|
26
|
+
test('rendering of isAnimationPaused', function () {
|
|
27
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
|
|
28
|
+
isAnimationPaused: true
|
|
29
|
+
})),
|
|
30
|
+
asFragment = _render3.asFragment;
|
|
31
|
+
|
|
32
|
+
expect(asFragment()).toMatchSnapshot();
|
|
33
|
+
});
|
|
34
|
+
test('rendering with customId', function () {
|
|
35
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
|
|
36
|
+
customId: "radar"
|
|
37
|
+
})),
|
|
38
|
+
asFragment = _render4.asFragment;
|
|
39
|
+
|
|
40
|
+
expect(asFragment()).toMatchSnapshot();
|
|
41
|
+
});
|
|
42
|
+
test('rendering with testId', function () {
|
|
43
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
|
|
44
|
+
testId: "radar_test"
|
|
45
|
+
})),
|
|
46
|
+
asFragment = _render5.asFragment;
|
|
47
|
+
|
|
48
|
+
expect(asFragment()).toMatchSnapshot();
|
|
49
|
+
});
|
|
50
|
+
});
|
package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`CarouselDot rendering of isActive 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
class="bullet bulletActive"
|
|
7
|
+
data-id="carouselDot"
|
|
8
|
+
data-test-id="carouselDot"
|
|
9
|
+
/>
|
|
10
|
+
</DocumentFragment>
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
exports[`CarouselDot rendering of isAnimationPaused 1`] = `
|
|
14
|
+
<DocumentFragment>
|
|
15
|
+
<div
|
|
16
|
+
class="bullet animationPaused bulletNormal"
|
|
17
|
+
data-id="carouselDot"
|
|
18
|
+
data-test-id="carouselDot"
|
|
19
|
+
/>
|
|
20
|
+
</DocumentFragment>
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
exports[`CarouselDot rendering the defult props 1`] = `
|
|
24
|
+
<DocumentFragment>
|
|
25
|
+
<div
|
|
26
|
+
class="bullet bulletNormal"
|
|
27
|
+
data-id="carouselDot"
|
|
28
|
+
data-test-id="carouselDot"
|
|
29
|
+
/>
|
|
30
|
+
</DocumentFragment>
|
|
31
|
+
`;
|
|
32
|
+
|
|
33
|
+
exports[`CarouselDot rendering with customId 1`] = `
|
|
34
|
+
<DocumentFragment>
|
|
35
|
+
<div
|
|
36
|
+
class="bullet bulletNormal"
|
|
37
|
+
data-id="radar"
|
|
38
|
+
data-test-id="carouselDot"
|
|
39
|
+
/>
|
|
40
|
+
</DocumentFragment>
|
|
41
|
+
`;
|
|
42
|
+
|
|
43
|
+
exports[`CarouselDot rendering with testId 1`] = `
|
|
44
|
+
<DocumentFragment>
|
|
45
|
+
<div
|
|
46
|
+
class="bullet bulletNormal"
|
|
47
|
+
data-id="carouselDot"
|
|
48
|
+
data-test-id="radar_test"
|
|
49
|
+
/>
|
|
50
|
+
</DocumentFragment>
|
|
51
|
+
`;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
.bulletNormal{
|
|
2
|
+
composes: pointer from '~@zohodesk/components/lib/common/common.module.css';
|
|
3
|
+
}
|
|
4
|
+
.bulletNormal:hover {
|
|
5
|
+
transform: scale(1.4);
|
|
6
|
+
}
|
|
7
|
+
.bullet {
|
|
8
|
+
/* padding: 4px 3px; */
|
|
9
|
+
position: relative;
|
|
10
|
+
width: var(--zd_size8) ;
|
|
11
|
+
height: var(--zd_size8) ;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
border-radius: 20px;
|
|
14
|
+
}
|
|
15
|
+
.bullet,
|
|
16
|
+
.bullet::after {
|
|
17
|
+
transition: opacity var(--zd_transition2), background-color var(--zd_transition2), width var(--zd_transition6) cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.2s ease-in-out;
|
|
18
|
+
}
|
|
19
|
+
.bullet::before,
|
|
20
|
+
.bullet::after {
|
|
21
|
+
content: '';
|
|
22
|
+
width: inherit ;
|
|
23
|
+
height: inherit ;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 50% ;
|
|
26
|
+
}
|
|
27
|
+
.bullet::before, .bullet::after {
|
|
28
|
+
border-radius: inherit;
|
|
29
|
+
transform: translateY(-50%);
|
|
30
|
+
}
|
|
31
|
+
[dir=ltr] .bullet::before, [dir=ltr] .bullet::after {
|
|
32
|
+
left: 0 ;
|
|
33
|
+
}
|
|
34
|
+
[dir=rtl] .bullet::before, [dir=rtl] .bullet::after {
|
|
35
|
+
right: 0 ;
|
|
36
|
+
}
|
|
37
|
+
.bullet::before {
|
|
38
|
+
opacity: .4;
|
|
39
|
+
}
|
|
40
|
+
.bullet::before, .bulletActive::after {
|
|
41
|
+
background-color: var(--zdt_button_primaryfill_bg);
|
|
42
|
+
}
|
|
43
|
+
.bulletActive {
|
|
44
|
+
width: var(--zd_size30) ;
|
|
45
|
+
}
|
|
46
|
+
.bulletActive::before,
|
|
47
|
+
.bulletActive::after {
|
|
48
|
+
width: 100% ;
|
|
49
|
+
}
|
|
50
|
+
.bulletActive::after {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
[dir=ltr] .bulletActive::after {
|
|
54
|
+
left:-100% ;
|
|
55
|
+
animation: progressLoading-ltr 5s linear infinite;
|
|
56
|
+
}
|
|
57
|
+
[dir=rtl] .bulletActive::after {
|
|
58
|
+
right:-100% ;
|
|
59
|
+
animation: progressLoading-rtl 5s linear infinite;
|
|
60
|
+
}
|
|
61
|
+
[dir=ltr] .animationPaused::after {
|
|
62
|
+
animation-play-state: paused;
|
|
63
|
+
}
|
|
64
|
+
[dir=rtl] .animationPaused::after {
|
|
65
|
+
animation-play-state: paused;
|
|
66
|
+
}
|
|
67
|
+
@keyframes progressLoading-ltr {
|
|
68
|
+
0% {
|
|
69
|
+
left: -100% ;
|
|
70
|
+
}
|
|
71
|
+
100% {
|
|
72
|
+
left: 0% ;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
@keyframes progressLoading-rtl {
|
|
76
|
+
0% {
|
|
77
|
+
left: -100% ;
|
|
78
|
+
}
|
|
79
|
+
100% {
|
|
80
|
+
left: 0% ;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.defaultProps = void 0;
|
|
7
|
+
var defaultProps = {
|
|
8
|
+
isActive: false,
|
|
9
|
+
isAnimationPaused: false,
|
|
10
|
+
customId: "carouselDot",
|
|
11
|
+
testId: 'carouselDot'
|
|
12
|
+
};
|
|
13
|
+
exports.defaultProps = defaultProps;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.propTypes = void 0;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var propTypes = {
|
|
13
|
+
isAnimationPaused: _propTypes["default"].bool,
|
|
14
|
+
isActive: _propTypes["default"].bool,
|
|
15
|
+
onClick: _propTypes["default"].func.isRequired,
|
|
16
|
+
index: _propTypes["default"].number,
|
|
17
|
+
testId: _propTypes["default"].string,
|
|
18
|
+
customId: _propTypes["default"].string
|
|
19
|
+
};
|
|
20
|
+
exports.propTypes = propTypes;
|