@zohodesk/dot 1.4.0 → 1.4.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 (122) hide show
  1. package/.cli/AppearanceThemeValidationExcludeFiles.js +1 -0
  2. package/.cli/PropLessFiles.html +1 -1
  3. package/.cli/propValidation_report.html +1 -1
  4. package/README.md +6 -0
  5. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +3 -0
  6. package/assets/Appearance/light/mode/Dot_LightMode.module.css +3 -0
  7. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +3 -0
  8. package/coverage/ExternalLink/ExternalLink.js.html +1 -1
  9. package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
  10. package/coverage/ExternalLink/index.html +1 -1
  11. package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
  12. package/coverage/ExternalLink/props/index.html +1 -1
  13. package/coverage/ExternalLink/props/propTypes.js.html +1 -1
  14. package/coverage/IconButton/IconButton.js.html +1 -1
  15. package/coverage/IconButton/IconButton.module.css.html +5 -2
  16. package/coverage/IconButton/index.html +1 -1
  17. package/coverage/IconButton/props/defaultProps.js.html +1 -1
  18. package/coverage/IconButton/props/index.html +1 -1
  19. package/coverage/IconButton/props/propTypes.js.html +1 -1
  20. package/coverage/Image/Image.js.html +1 -1
  21. package/coverage/Image/Image.module.css.html +1 -1
  22. package/coverage/Image/index.html +1 -1
  23. package/coverage/Image/props/defaultProps.js.html +1 -1
  24. package/coverage/Image/props/index.html +1 -1
  25. package/coverage/Image/props/propTypes.js.html +1 -1
  26. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
  27. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
  28. package/coverage/avatar/AvatarWithTeam/index.html +1 -1
  29. package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
  30. package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
  31. package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
  32. package/coverage/coverage-final.json +16 -16
  33. package/coverage/coverage-summary.json +16 -16
  34. package/coverage/index.html +1 -1
  35. package/es/ActionButton/ActionButton.module.css +7 -0
  36. package/es/AlphabeticList/AlphabeticList.module.css +2 -0
  37. package/es/AttachmentViewer/AttachmentViewer.module.css +2 -0
  38. package/es/ChannelIcon/ChannelIcon.module.css +4 -0
  39. package/es/FormAction/FormAction.module.css +2 -0
  40. package/es/IconButton/IconButton.module.css +1 -0
  41. package/es/Provider/Config.js +2 -1
  42. package/es/TagWithIcon/TagWithIcon.module.css +19 -5
  43. package/es/avatar/AvatarIcon/AvatarIcon.module.css +6 -0
  44. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -0
  45. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
  46. package/es/layout/SubtabLayout/SubtabLayout.module.css +2 -0
  47. package/es/list/Comment/Comment.module.css +1 -0
  48. package/es/list/Dot/Dot.module.css +1 -0
  49. package/es/list/ListLayout/ListLayout.module.css +12 -0
  50. package/es/list/Subject/Subject.module.css +1 -0
  51. package/es/list/Thread/Thread.module.css +1 -0
  52. package/es/setup/header/Search/Search.module.css +1 -0
  53. package/es/setup/table/TableRow/SetupTableRow.module.css +3 -2
  54. package/es/v1/notification/DesktopNotification/DesktopNotification.js +79 -55
  55. package/es/v1/notification/DesktopNotification/props/defaultProps.js +3 -1
  56. package/es/v1/notification/DesktopNotification/props/propTypes.js +2 -1
  57. package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +59 -23
  58. package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js +3 -1
  59. package/es/v1/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
  60. package/es/v1/setup/header/Button/Button.js +17 -29
  61. package/es/v1/setup/header/Link/Link.js +23 -35
  62. package/es/v1/setup/header/Search/Search.js +43 -69
  63. package/es/v1/setup/header/Views/Views.js +27 -39
  64. package/es/v1/setup/helptips/Description/Description.js +8 -20
  65. package/es/v1/setup/helptips/Link/Link.js +20 -32
  66. package/es/v1/setup/helptips/ListGroup/ListGroup.js +18 -30
  67. package/es/v1/setup/helptips/Title/Title.js +8 -20
  68. package/es/version2/GlobalNotification/GlobalNotification.module.css +3 -0
  69. package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +1 -0
  70. package/es/version2/notification/DesktopNotification/DesktopNotification.js +78 -55
  71. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -4
  72. package/es/version2/notification/DesktopNotification/props/defaultProps.js +3 -1
  73. package/es/version2/notification/DesktopNotification/props/propTypes.js +2 -1
  74. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +59 -23
  75. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +14 -17
  76. package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js +3 -1
  77. package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
  78. package/lib/ActionButton/ActionButton.module.css +7 -0
  79. package/lib/AlphabeticList/AlphabeticList.module.css +2 -0
  80. package/lib/AttachmentViewer/AttachmentViewer.module.css +2 -0
  81. package/lib/ChannelIcon/ChannelIcon.module.css +4 -0
  82. package/lib/FormAction/FormAction.module.css +2 -0
  83. package/lib/IconButton/IconButton.module.css +1 -0
  84. package/lib/Provider/Config.js +2 -1
  85. package/lib/TagWithIcon/TagWithIcon.module.css +19 -5
  86. package/lib/avatar/AvatarIcon/AvatarIcon.module.css +6 -0
  87. package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -0
  88. package/lib/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
  89. package/lib/layout/SubtabLayout/SubtabLayout.module.css +2 -0
  90. package/lib/list/Comment/Comment.module.css +1 -0
  91. package/lib/list/Dot/Dot.module.css +1 -0
  92. package/lib/list/ListLayout/ListLayout.module.css +12 -0
  93. package/lib/list/Subject/Subject.module.css +1 -0
  94. package/lib/list/Thread/Thread.module.css +1 -0
  95. package/lib/setup/header/Search/Search.module.css +1 -0
  96. package/lib/setup/table/TableRow/SetupTableRow.module.css +3 -2
  97. package/lib/v1/notification/DesktopNotification/DesktopNotification.js +74 -55
  98. package/lib/v1/notification/DesktopNotification/props/defaultProps.js +5 -1
  99. package/lib/v1/notification/DesktopNotification/props/propTypes.js +2 -1
  100. package/lib/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +57 -23
  101. package/lib/v1/notification/DesktopNotificationHeader/props/defaultProps.js +5 -1
  102. package/lib/v1/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
  103. package/lib/v1/setup/header/Button/Button.js +17 -63
  104. package/lib/v1/setup/header/Link/Link.js +23 -69
  105. package/lib/v1/setup/header/Search/Search.js +57 -89
  106. package/lib/v1/setup/header/Views/Views.js +27 -73
  107. package/lib/v1/setup/helptips/Description/Description.js +8 -53
  108. package/lib/v1/setup/helptips/Link/Link.js +23 -69
  109. package/lib/v1/setup/helptips/ListGroup/ListGroup.js +26 -72
  110. package/lib/v1/setup/helptips/Title/Title.js +8 -53
  111. package/lib/version2/GlobalNotification/GlobalNotification.module.css +3 -0
  112. package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +1 -0
  113. package/lib/version2/notification/DesktopNotification/DesktopNotification.js +74 -55
  114. package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -4
  115. package/lib/version2/notification/DesktopNotification/props/defaultProps.js +5 -1
  116. package/lib/version2/notification/DesktopNotification/props/propTypes.js +2 -1
  117. package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +57 -23
  118. package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +14 -17
  119. package/lib/version2/notification/DesktopNotificationHeader/props/defaultProps.js +5 -1
  120. package/lib/version2/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
  121. package/package.json +11 -9
  122. package/result.json +1 -1
@@ -6,11 +6,16 @@
6
6
  .container {
7
7
  vertical-align: middle;
8
8
  composes: varClass;
9
+ /* css:theme-validation:ignore */
9
10
  border-width: 1px;
10
11
  border-style: solid;
11
12
  border-radius: 50%;
12
13
  border-color: var(--border_color)
13
14
  }
15
+ .borderOnHover:hover,
16
+ .borderOnActive {
17
+ /* css:theme-validation:ignore */
18
+ }
14
19
  .borderOnHover:hover, .borderOnActive {
15
20
  border-color: var(--border_hoverColor)
16
21
  }
@@ -35,6 +40,7 @@
35
40
  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
36
41
  }
37
42
  .iconColor {
43
+ /* css:theme-validation:ignore */
38
44
  color: var(--icon_color);
39
45
  }
40
46
  .icon_danger {
@@ -21,6 +21,7 @@
21
21
  }
22
22
  .title {
23
23
  font-family: var(--zd_semibold);
24
+ /* css:theme-validation:ignore */
24
25
  color: var(--titleColor);
25
26
  }
26
27
  .small .title {
@@ -31,6 +32,7 @@
31
32
  }
32
33
  .linkWrapper,
33
34
  .linkDescWrapper {
35
+ /* css:theme-validation:ignore */
34
36
  color: var(--descriptionColor);
35
37
  }
36
38
  .small .linkWrapper,
@@ -60,11 +62,13 @@
60
62
  line-height: var(--zd_size19);
61
63
  }
62
64
  .link {
65
+ /* css:theme-validation:ignore */
63
66
  color: var(--linkColor);
64
67
  display: inline-block;
65
68
  cursor: pointer;
66
69
  }
67
70
  .link:hover {
71
+ /* css:theme-validation:ignore */
68
72
  color: var(--linkHoverColor);
69
73
  }
70
74
  .children {
@@ -5,6 +5,7 @@
5
5
  display: inline;
6
6
  }
7
7
  .icon{
8
+ /* css:theme-validation:ignore */
8
9
  color:var(--label_text_color);
9
10
  display: inline-block;
10
11
  margin: 0 var(--zd_size5) ;
@@ -48,6 +48,7 @@
48
48
  }
49
49
 
50
50
  .tertiary_borderStyle {
51
+ /* css:theme-validation:ignore */
51
52
  border-bottom: 1px solid var(--borderColor);
52
53
  }
53
54
 
@@ -149,6 +150,7 @@
149
150
 
150
151
  .footer {
151
152
  composes: varClass;
153
+ /* css:theme-validation:ignore */
152
154
  border-top: 1px solid var(--borderColor);
153
155
  }
154
156
 
@@ -5,6 +5,7 @@
5
5
  composes: varClass;
6
6
  composes: inlineBlockMiddle from '../listCommon.module.css';
7
7
  position: relative;
8
+ /* css:theme-validation:ignore */
8
9
  color: var(--icon_color);
9
10
  padding: 0 var(--zd_size2) ;
10
11
  cursor: pointer;
@@ -4,6 +4,7 @@
4
4
  .dot {
5
5
  composes: varClass;
6
6
  font-size: var(--zd_font_size16) ;
7
+ /* css:theme-validation:ignore */
7
8
  color: var(--dotColor);
8
9
  transform: perspective(1px);
9
10
  }
@@ -35,10 +35,22 @@
35
35
  padding: var(--zd_size2) 0 ;
36
36
  }
37
37
 
38
+ .compact .innerContainer,
39
+ .classic .innerContainer,
40
+ .superCompact .innerContainer {
41
+ /* css:theme-validation:ignore */
42
+ }
43
+
38
44
  .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
39
45
  border-bottom: 1px dotted var(--listBorder);
40
46
  }
41
47
 
48
+ .compact,
49
+ .classic,
50
+ .superCompact {
51
+ /* css:theme-validation:ignore */
52
+ }
53
+
42
54
  [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
43
55
  border-left: var(--zd_size2) solid transparent;
44
56
  }
@@ -3,6 +3,7 @@
3
3
  }
4
4
  .subject {
5
5
  composes: varClass;
6
+ /* css:theme-validation:ignore */
6
7
  color: var(--subject_text);
7
8
  display: block;
8
9
  }
@@ -4,6 +4,7 @@
4
4
  .container {
5
5
  composes: varClass;
6
6
  position: relative;
7
+ /* css:theme-validation:ignore */
7
8
  color: var(--icon_color);
8
9
  cursor: pointer;
9
10
  }
@@ -35,6 +35,7 @@
35
35
  font-size: var(--zd_font_size13) ;
36
36
  width: 100% ;
37
37
  letter-spacing: 0.2px;
38
+ /* css:theme-validation:ignore */
38
39
  transition: all var(--zd_transition3) ease;
39
40
  color: var(--zdt_search_input_text);
40
41
  font-family: var(--zd_regular);
@@ -9,6 +9,7 @@
9
9
  margin-left: var(--zd_size40) ;
10
10
  margin-right: var(--zd_size40) ;
11
11
  }
12
+
12
13
  .container:hover {
13
- background-color: var( --zdt_setuptablerow_hover_bg);
14
- }
14
+ background-color: var(--zdt_setuptablerow_hover_bg);
15
+ }
@@ -24,6 +24,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
24
24
 
25
25
  var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
26
26
 
27
+ var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
28
+
27
29
  var _DesktopNotificationModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotification/DesktopNotification.module.css"));
28
30
 
29
31
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -84,7 +86,8 @@ function DesktopNotificationUI(props) {
84
86
  customClass = _props$customClass === void 0 ? {} : _props$customClass,
85
87
  _props$i18nKeys = props.i18nKeys,
86
88
  i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
87
- customProps = props.customProps;
89
+ customProps = props.customProps,
90
+ responsiveId = props.responsiveId;
88
91
  var _i18nKeys$closeTitle = i18nKeys.closeTitle,
89
92
  closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
90
93
  var containerClass = customClass.containerClass;
@@ -110,66 +113,82 @@ function DesktopNotificationUI(props) {
110
113
  var Zindex = isAnimate ? getNextIndex() : null;
111
114
  var uiVariantOne = title && (info || secondaryInfo);
112
115
  var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
116
+
117
+ function responsiveFunc(_ref2) {
118
+ var mediaQueryOR = _ref2.mediaQueryOR;
119
+ return {
120
+ uptoTablet: mediaQueryOR([{
121
+ maxWidth: 760
122
+ }])
123
+ };
124
+ }
125
+
113
126
  return /*#__PURE__*/_react["default"].createElement("div", {
114
127
  className: _DesktopNotificationModule["default"].parentElement,
115
128
  style: needAutoZindex && isAnimate ? {
116
129
  zIndex: "".concat(Zindex)
117
130
  } : {},
118
131
  "data-selector-id": dataSelectorId
119
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
120
- className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
121
- isCover: false,
122
- dataId: dataId,
123
- isInline: uiVariantTwo
124
- }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
125
- type: type,
126
- title: title,
127
- variant: titleVariant,
128
- needIcon: needIcon,
129
- onClose: onClose,
130
- closeTitle: closeTitle,
131
- renderAlertIcon: renderAlertIcon,
132
- dataId: "".concat(dataId, "_close"),
133
- needClose: needClose
134
- })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
135
- alignBox: "column"
136
- }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
137
- flexible: true
138
- }, /*#__PURE__*/_react["default"].createElement("div", {
139
- className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
140
- }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
141
- className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
142
- }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
143
- className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
144
- }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
145
- flexible: true
146
- }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
147
- className: _DesktopNotificationModule["default"].footer
148
- }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
149
- className: "".concat(_DesktopNotificationModule["default"].message)
150
- }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
151
- size: "small",
152
- paddingLeftSize: "xmedium"
153
- }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
154
- onClick: onClickSubmit,
155
- "data-id": "".concat(dataId, "_submitButton"),
156
- "data-test-id": "".concat(dataId, "_submitButton")
157
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
158
- align: "vertical",
159
- alignBox: "row"
160
- }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
161
- flexible: true
162
- }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
163
- flexible: true
164
- }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
165
- text: submitText,
166
- palette: submitType ? submitType : buttonPalette
167
- })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
168
- text: cancelText,
169
- palette: "secondary",
170
- dataId: "".concat(dataId, "_cancelButton"),
171
- onClick: onClickCancel
172
- })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null));
132
+ }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
133
+ query: responsiveFunc,
134
+ responsiveId: responsiveId
135
+ }, function (_ref3) {
136
+ var uptoTablet = _ref3.uptoTablet;
137
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
138
+ className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "\n ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
139
+ isCover: false,
140
+ dataId: dataId,
141
+ isInline: uiVariantTwo
142
+ }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
143
+ type: type,
144
+ title: title,
145
+ variant: titleVariant,
146
+ needIcon: needIcon,
147
+ onClose: onClose,
148
+ closeTitle: closeTitle,
149
+ renderAlertIcon: renderAlertIcon,
150
+ dataId: "".concat(dataId, "_close"),
151
+ needClose: needClose
152
+ })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
153
+ alignBox: "column"
154
+ }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
155
+ flexible: true
156
+ }, /*#__PURE__*/_react["default"].createElement("div", {
157
+ className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
158
+ }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
159
+ className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
160
+ }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
161
+ className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
162
+ }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
163
+ flexible: true
164
+ }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
165
+ className: _DesktopNotificationModule["default"].footer
166
+ }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
167
+ className: "".concat(_DesktopNotificationModule["default"].message)
168
+ }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
169
+ size: "small",
170
+ paddingLeftSize: "xmedium"
171
+ }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
172
+ onClick: onClickSubmit,
173
+ "data-id": "".concat(dataId, "_submitButton"),
174
+ "data-test-id": "".concat(dataId, "_submitButton")
175
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
176
+ align: "vertical",
177
+ alignBox: "row"
178
+ }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
179
+ flexible: true
180
+ }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
181
+ flexible: true
182
+ }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
183
+ text: submitText,
184
+ palette: submitType ? submitType : buttonPalette
185
+ })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
186
+ text: cancelText,
187
+ palette: "secondary",
188
+ dataId: "".concat(dataId, "_cancelButton"),
189
+ onClick: onClickCancel
190
+ })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
191
+ }));
173
192
  }
174
193
 
175
194
  DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;
@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
+
8
+ var _Config = require("../../../../Provider/Config");
9
+
7
10
  var _default = {
8
11
  isMore: false,
9
12
  isAnimate: true,
@@ -17,6 +20,7 @@ var _default = {
17
20
  isShrinkView: false,
18
21
  needClose: true,
19
22
  customProps: {},
20
- dataSelectorId: 'desktopNotification'
23
+ dataSelectorId: 'desktopNotification',
24
+ responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
21
25
  };
22
26
  exports["default"] = _default;
@@ -14,7 +14,8 @@ var propTypes = {
14
14
  onPortalClose: _propTypes["default"].func,
15
15
  autoClose: _propTypes["default"].bool,
16
16
  hideTime: _propTypes["default"].string,
17
- Element: _propTypes["default"].element
17
+ Element: _propTypes["default"].element,
18
+ responsiveId: _propTypes["default"].string
18
19
  };
19
20
  exports.propTypes = propTypes;
20
21
  var DesktopNotificationUI_propTypes = {
@@ -17,6 +17,10 @@ var _AlertClose = _interopRequireDefault(require("../../alert/AlertClose/AlertCl
17
17
 
18
18
  var _AlertIcons = _interopRequireDefault(require("../../alert/alertIcons/AlertIcons"));
19
19
 
20
+ var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
21
+
22
+ var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
23
+
20
24
  var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));
21
25
 
22
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,35 +35,65 @@ function DesktopNotificationHeader(props) {
31
35
  needIcon = props.needIcon,
32
36
  title = props.title,
33
37
  renderAlertIcon = props.renderAlertIcon,
34
- needClose = props.needClose;
38
+ needClose = props.needClose,
39
+ responsiveId = props.responsiveId;
40
+
41
+ function responsiveFunc(_ref) {
42
+ var mediaQueryOR = _ref.mediaQueryOR;
43
+ return {
44
+ uptoTablet: mediaQueryOR([{
45
+ maxWidth: 760
46
+ }])
47
+ };
48
+ }
49
+
35
50
  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
36
51
  align: "vertical",
37
52
  alignBox: "row",
38
53
  className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
39
54
  isCover: false,
40
55
  wrap: "wrap"
41
- }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
42
- className: _DesktopNotificationHeaderModule["default"].iconContainer
43
- }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
44
- type: type
45
- })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
46
- flexible: true
47
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
48
- alignBox: "row",
49
- align: "center"
50
- }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
51
- className: _DesktopNotificationHeaderModule["default"].title,
52
- shrink: true
53
- }, title) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
54
- className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
55
- }, title))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
56
- className: _DesktopNotificationHeaderModule["default"].close
57
- }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
58
- onClose: onClose,
59
- dataTitle: closeTitle,
60
- dataId: dataId,
61
- type: "light"
62
- })) : null);
56
+ }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
57
+ query: responsiveFunc,
58
+ responsiveId: responsiveId
59
+ }, function (_ref2) {
60
+ var uptoTablet = _ref2.uptoTablet;
61
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
62
+ className: _DesktopNotificationHeaderModule["default"].iconContainer
63
+ }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
64
+ type: type
65
+ })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
66
+ flexible: true
67
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
68
+ alignBox: "row",
69
+ align: "center"
70
+ }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
71
+ shrink: true
72
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
73
+ $i18n_dataTitle: title,
74
+ $ui_className: _DesktopNotificationHeaderModule["default"].title,
75
+ $ui_tagName: "h1",
76
+ $ui_size: uptoTablet ? '16' : '18',
77
+ $ui_lineHeight: "20",
78
+ $ui_weight: "bold",
79
+ $flag_reset: true,
80
+ $ui_wordBreak: "breakWord"
81
+ }, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
82
+ className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
83
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
84
+ $i18n_dataTitle: title,
85
+ $ui_className: _DesktopNotificationHeaderModule["default"].title,
86
+ $ui_size: "14",
87
+ $ui_wordBreak: "breakWord"
88
+ }, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
89
+ className: _DesktopNotificationHeaderModule["default"].close
90
+ }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
91
+ onClose: onClose,
92
+ dataTitle: closeTitle,
93
+ dataId: dataId,
94
+ type: "light"
95
+ })) : null);
96
+ }));
63
97
  }
64
98
 
65
99
  DesktopNotificationHeader.propTypes = _propTypes["default"];
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
+
8
+ var _Config = require("../../../../Provider/Config");
9
+
7
10
  var _default = {
8
11
  needIcon: true,
9
12
  variant: 'primary',
10
- needClose: true
13
+ needClose: true,
14
+ responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
11
15
  };
12
16
  exports["default"] = _default;
@@ -18,6 +18,7 @@ var _default = {
18
18
  title: _propTypes["default"].string,
19
19
  renderAlertIcon: _propTypes["default"].func,
20
20
  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
21
- variant: _propTypes["default"].oneOf(['primary', 'secondary'])
21
+ variant: _propTypes["default"].oneOf(['primary', 'secondary']),
22
+ responsiveId: _propTypes["default"].string
22
23
  };
23
24
  exports["default"] = _default;
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- exports["default"] = void 0;
6
+ exports["default"] = Button;
9
7
 
10
8
  var _react = _interopRequireDefault(require("react"));
11
9
 
@@ -19,65 +17,21 @@ var _HeaderButtonModule = _interopRequireDefault(require("../../../../setup/head
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
19
 
22
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23
-
24
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
25
-
26
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
27
-
28
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
29
-
30
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
31
-
32
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
33
-
34
- function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
35
-
36
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
20
+ function Button(props) {
21
+ var palette = props.palette,
22
+ text = props.text,
23
+ onClick = props.onClick,
24
+ id = props.id;
25
+ return /*#__PURE__*/_react["default"].createElement("div", {
26
+ className: _HeaderButtonModule["default"].container
27
+ }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
28
+ id: id,
29
+ onClick: onClick,
30
+ palette: palette,
31
+ size: "medium",
32
+ text: text
33
+ }));
34
+ }
37
35
 
38
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
39
-
40
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
41
-
42
- var Button = /*#__PURE__*/function (_React$Component) {
43
- _inherits(Button, _React$Component);
44
-
45
- var _super = _createSuper(Button);
46
-
47
- function Button(props) {
48
- _classCallCheck(this, Button);
49
-
50
- return _super.call(this, props);
51
- }
52
-
53
- _createClass(Button, [{
54
- key: "render",
55
- value: function render() {
56
- var _this$props = this.props,
57
- palette = _this$props.palette,
58
- text = _this$props.text,
59
- onClick = _this$props.onClick,
60
- id = _this$props.id;
61
- return /*#__PURE__*/_react["default"].createElement("div", {
62
- className: _HeaderButtonModule["default"].container
63
- }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
64
- id: id,
65
- onClick: onClick,
66
- palette: palette,
67
- size: "medium",
68
- text: text
69
- }));
70
- }
71
- }]);
72
-
73
- return Button;
74
- }(_react["default"].Component);
75
-
76
- exports["default"] = Button;
77
36
  Button.defaultProps = _defaultProps.defaultProps;
78
- Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
79
- // Button.docs = {
80
- // componentGroup: 'Header',
81
- // folderName: 'Setup'
82
- // };
83
- // }
37
+ Button.propTypes = _propTypes.propTypes;