@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.
Files changed (105) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +5 -0
  3. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +29 -0
  4. package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +7 -0
  5. package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +7 -0
  6. package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +7 -0
  7. package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +7 -0
  8. package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +7 -0
  9. package/assets/Appearance/light/mode/Dot_LightMode.module.css +29 -0
  10. package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +7 -0
  11. package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +7 -0
  12. package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +7 -0
  13. package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +7 -0
  14. package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +7 -0
  15. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +29 -0
  16. package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +7 -0
  17. package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +7 -0
  18. package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +7 -0
  19. package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +7 -0
  20. package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +7 -0
  21. package/es/DotProvider/libraryChunks/appearance/component/Dark_Component.js +2 -0
  22. package/es/DotProvider/libraryChunks/appearance/component/Light_Component.js +2 -0
  23. package/es/DotProvider/libraryChunks/appearance/component/PureDark_Component.js +2 -0
  24. package/es/DotProvider/utils/themeAppearanceAssetsConfig.js +3 -3
  25. package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js +34 -0
  26. package/es/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js +43 -0
  27. package/es/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap +51 -0
  28. package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css +83 -0
  29. package/es/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js +6 -0
  30. package/es/Onboarding/CarouselDots/CarouselDot/props/propTypes.js +9 -0
  31. package/es/Onboarding/CarouselDots/CarouselDots.js +43 -0
  32. package/es/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js +64 -0
  33. package/es/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap +94 -0
  34. package/es/Onboarding/CarouselDots/css/CarouselDots.module.css +6 -0
  35. package/es/Onboarding/CarouselDots/props/defaultProps.js +7 -0
  36. package/es/Onboarding/CarouselDots/props/propTypes.js +13 -0
  37. package/es/Onboarding/Onboarding.js +303 -0
  38. package/es/Onboarding/__tests__/Onboarding.spec.js +428 -0
  39. package/es/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap +3573 -0
  40. package/es/Onboarding/css/Onboarding.module.css +460 -0
  41. package/es/Onboarding/hooks/useOnboarding.js +34 -0
  42. package/es/Onboarding/hooks/useOnboardingSlider.js +55 -0
  43. package/es/Onboarding/props/defaultProps.js +13 -0
  44. package/es/Onboarding/props/propTypes.js +55 -0
  45. package/es/VideoLookup/VideoLookup.js +81 -0
  46. package/es/VideoLookup/__tests__/VideoLookup.spec.js +86 -0
  47. package/es/VideoLookup/__tests__/__snapshots__/VideoLookup.spec.js.snap +434 -0
  48. package/es/VideoLookup/css/VideoLookup.module.css +67 -0
  49. package/es/VideoLookup/props/defaultProps.js +8 -0
  50. package/es/VideoLookup/props/propTypes.js +12 -0
  51. package/es/common/dot_boxShadow.module.css +6 -0
  52. package/es/form/fields/Fields.module.css +0 -4
  53. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +2 -4
  54. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +116 -116
  55. package/es/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  56. package/es/index.js +1 -0
  57. package/es/list/DepartmentDropDown/DepartmentDropDown.js +2 -7
  58. package/es/list/DepartmentDropDown/props/defaultProps.js +1 -2
  59. package/es/list/DepartmentDropDown/props/propTypes.js +0 -3
  60. package/es/list/status/StatusListItem/StatusListItem.module.css +4 -2
  61. package/es/utils/General.js +2 -1
  62. package/lib/DotProvider/libraryChunks/appearance/component/Dark_Component.js +5 -0
  63. package/lib/DotProvider/libraryChunks/appearance/component/Light_Component.js +5 -0
  64. package/lib/DotProvider/libraryChunks/appearance/component/PureDark_Component.js +5 -0
  65. package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js +3 -3
  66. package/lib/Onboarding/CarouselDots/CarouselDot/CarouselDot.js +44 -0
  67. package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js +50 -0
  68. package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap +51 -0
  69. package/lib/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css +83 -0
  70. package/lib/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js +13 -0
  71. package/lib/Onboarding/CarouselDots/CarouselDot/props/propTypes.js +20 -0
  72. package/lib/Onboarding/CarouselDots/CarouselDots.js +66 -0
  73. package/lib/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js +71 -0
  74. package/lib/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap +94 -0
  75. package/lib/Onboarding/CarouselDots/css/CarouselDots.module.css +6 -0
  76. package/lib/Onboarding/CarouselDots/props/defaultProps.js +14 -0
  77. package/lib/Onboarding/CarouselDots/props/propTypes.js +24 -0
  78. package/lib/Onboarding/Onboarding.js +316 -0
  79. package/lib/Onboarding/__tests__/Onboarding.spec.js +435 -0
  80. package/lib/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap +3573 -0
  81. package/lib/Onboarding/css/Onboarding.module.css +460 -0
  82. package/lib/Onboarding/hooks/useOnboarding.js +59 -0
  83. package/lib/Onboarding/hooks/useOnboardingSlider.js +85 -0
  84. package/lib/Onboarding/props/defaultProps.js +20 -0
  85. package/lib/Onboarding/props/propTypes.js +72 -0
  86. package/lib/VideoLookup/VideoLookup.js +104 -0
  87. package/lib/VideoLookup/__tests__/VideoLookup.spec.js +93 -0
  88. package/lib/VideoLookup/__tests__/__snapshots__/VideoLookup.spec.js.snap +434 -0
  89. package/lib/VideoLookup/css/VideoLookup.module.css +67 -0
  90. package/lib/VideoLookup/props/defaultProps.js +15 -0
  91. package/lib/VideoLookup/props/propTypes.js +23 -0
  92. package/lib/common/dot_boxShadow.module.css +6 -0
  93. package/lib/form/fields/Fields.module.css +0 -4
  94. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +3 -5
  95. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +116 -116
  96. package/lib/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  97. package/lib/index.js +9 -0
  98. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +3 -8
  99. package/lib/list/DepartmentDropDown/props/defaultProps.js +1 -2
  100. package/lib/list/DepartmentDropDown/props/propTypes.js +0 -2
  101. package/lib/list/status/StatusListItem/StatusListItem.module.css +4 -2
  102. package/lib/utils/General.js +5 -1
  103. package/package.json +7 -5
  104. package/result.json +1 -1
  105. 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
 
@@ -3,6 +3,5 @@ export const defaultProps = {
3
3
  isPopupActive: true,
4
4
  isNextOptions: false,
5
5
  searchStr: '',
6
- i18nKeys: {},
7
- customProps: {}
6
+ i18nKeys: {}
8
7
  };
@@ -20,8 +20,5 @@ export const propTypes = {
20
20
  searchEmptyText: PropTypes.string,
21
21
  searchErrorText: PropTypes.string,
22
22
  placeholder: PropTypes.string
23
- }),
24
- customProps: PropTypes.shape({
25
- ToggleDropDownProps: PropTypes.object
26
23
  })
27
24
  };
@@ -36,8 +36,9 @@
36
36
  .value {
37
37
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
38
38
  }
39
- .multiLineValue {
40
- composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
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
  }
@@ -42,4 +42,5 @@ export function formatPhoneUrl(phone) {
42
42
  }
43
43
 
44
44
  return phone;
45
- }
45
+ }
46
+ export const DUMMY_OBJECT = Object.freeze({});
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css");
4
+
5
+ require("@zohodesk/components/assets/Appearance/dark/mode/Component_v2_DarkMode.module.css");
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css");
4
+
5
+ require("@zohodesk/components/assets/Appearance/light/mode/Component_v2_LightMode.module.css");
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css");
4
+
5
+ require("@zohodesk/components/assets/Appearance/pureDark/mode/Component_v2_PureDarkMode.module.css");
@@ -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('@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'));
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('@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'));
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('@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'));
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
+ });
@@ -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;