@zohodesk/dot 1.0.0-temp-82 → 1.0.0-temp-85

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 (18) hide show
  1. package/README.md +1 -1
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +1 -0
  3. package/assets/Appearance/default/mode/dotDefaultMode.module.css +1 -0
  4. package/es/AttachmentViewer/AttachmentImage.js +5 -1
  5. package/es/AttachmentViewer/AttachmentViewer.js +3 -2
  6. package/es/FlipCard/FlipCard.js +15 -3
  7. package/es/FlipCard/FlipCard.module.css +84 -13
  8. package/es/list/SecondaryText/AccountName.js +34 -38
  9. package/es/list/SecondaryText/ContactName.js +18 -13
  10. package/es/list/SecondaryText/SecondaryText.module.css +13 -28
  11. package/lib/AttachmentViewer/AttachmentImage.js +5 -1
  12. package/lib/AttachmentViewer/AttachmentViewer.js +3 -2
  13. package/lib/FlipCard/FlipCard.js +14 -3
  14. package/lib/FlipCard/FlipCard.module.css +84 -13
  15. package/lib/list/SecondaryText/AccountName.js +34 -38
  16. package/lib/list/SecondaryText/ContactName.js +18 -13
  17. package/lib/list/SecondaryText/SecondaryText.module.css +13 -28
  18. package/package.json +1 -1
package/README.md CHANGED
@@ -4,7 +4,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
5
  # 1.0.0-beta.226
6
6
 
7
- - Attachment Viewer Footer Scroll Ui Fix
7
+ - Attachment Viewer Footer Scroll Ui Fix, dataId fix
8
8
 
9
9
  # 1.0.0-beta.225
10
10
 
package/assets/Appearance/dark/mode/dotDarkMode.module.css CHANGED
@@ -134,6 +134,7 @@
134
134
 
135
135
  /* flip card */
136
136
  --zdt_flipcard_default_bg: var(--dot_mirror);
137
+ --zdt_flipcard_default_hover_bg: var(--zdt_cta_grey_15_bg);
137
138
  --zdt_flipcard_default_text: var(--zd_smoke21);
138
139
 
139
140
  /* form fields */
package/assets/Appearance/default/mode/dotDefaultMode.module.css CHANGED
@@ -134,6 +134,7 @@
134
134
 
135
135
  /* flip card */
136
136
  --zdt_flipcard_default_bg: var(--dot_mirror);
137
+ --zdt_flipcard_default_hover_bg: var(--zdt_cta_grey_15_bg);
137
138
  --zdt_flipcard_default_text: var(--zd_smoke21);
138
139
 
139
140
  /* form fields */
package/es/AttachmentViewer/AttachmentImage.js CHANGED
@@ -56,7 +56,8 @@ export default class AttachmentImage extends Component {
56
56
  isLoading
57
57
  } = this.state;
58
58
  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
59
- className: `${style.spinLoad}`
59
+ className: `${style.spinLoad}`,
60
+ "data-id": `${dataId}_loader`
60
61
  }, /*#__PURE__*/React.createElement("div", {
61
62
  className: style.loader
62
63
  })) : null, /*#__PURE__*/React.createElement(Image, {
@@ -82,4 +83,7 @@ AttachmentImage.propTypes = {
82
83
  onClick: PropTypes.func,
83
84
  onLoad: PropTypes.func,
84
85
  src: PropTypes.string
86
+ };
87
+ AttachmentImage.defaultProps = {
88
+ dataId: 'AttachmentImage'
85
89
  };
package/es/AttachmentViewer/AttachmentViewer.js CHANGED
@@ -275,7 +275,7 @@ export default class AttachmentViewer extends Component {
275
275
  _this.zoomIn(e, i, true);
276
276
  },
277
277
  alt: "Preview",
278
- dataId: "attachViewed",
278
+ dataId: "attachViewer",
279
279
  id: `img${i}`,
280
280
  isImage: true,
281
281
  isCover: false
@@ -509,7 +509,8 @@ export default class AttachmentViewer extends Component {
509
509
  size: "small",
510
510
  alt: name,
511
511
  className: style.image,
512
- isImage: !isAudio
512
+ isImage: !isAudio,
513
+ dataId: "AttachmentImage"
513
514
  }));
514
515
  }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
515
516
  dataId: "attachToggle",
package/es/FlipCard/FlipCard.js CHANGED
@@ -15,6 +15,7 @@ export default class FlipCard extends Component {
15
15
  super(props);
16
16
  this.onChange = this.onChange.bind(this);
17
17
  this.onClick = this.onClick.bind(this);
18
+ this.toggleClick = this.toggleClick.bind(this);
18
19
  }
19
20
 
20
21
  onClick(e) {
@@ -38,6 +39,13 @@ export default class FlipCard extends Component {
38
39
  onChange(id, isChecked, e);
39
40
  }
40
41
 
42
+ toggleClick(e) {
43
+ const {
44
+ isChecked
45
+ } = this.props;
46
+ this.onChange(!isChecked, e);
47
+ }
48
+
41
49
  render() {
42
50
  let {
43
51
  id,
@@ -76,7 +84,7 @@ export default class FlipCard extends Component {
76
84
  AvatarUserProps = {}
77
85
  } = customProps;
78
86
  return /*#__PURE__*/React.createElement("div", {
79
- className: `${AvatarSize(size)} ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
87
+ className: `${AvatarSize(size)} ${style.flipContainer} ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
80
88
  onClick: this.onClick,
81
89
  "data-id": ticListContainer,
82
90
  "data-tour": tourId
@@ -85,13 +93,17 @@ export default class FlipCard extends Component {
85
93
  "data-id": ticList
86
94
  }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
87
95
  align: "both",
88
- className: `${style.front} ${frontClass ? frontClass : ''}`
96
+ className: `${style.front} ${style.checkboxCnt} ${frontClass ? frontClass : ''}`,
97
+ onClick: this.toggleClick
89
98
  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
90
99
  isFilled: isFilledCheckbox,
91
100
  checked: isChecked,
92
101
  onChange: this.onChange,
93
102
  id: `checkbox_${id}`,
94
- dataId: `listViewCheckBox_${id}`
103
+ dataId: `listViewCheckBox_${id}`,
104
+ customClass: {
105
+ customCheckBox: style.checkboxStyle
106
+ }
95
107
  }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
96
108
  align: "both",
97
109
  className: style.back
package/es/FlipCard/FlipCard.module.css CHANGED
@@ -1,7 +1,11 @@
1
+ .flipContainer {
2
+ --flip_cubic: cubic-bezier(0.25, 0.8, 0.25, 1);
3
+ }
1
4
  .flip,
2
5
  .flipNone {
3
6
  color: var(--zdt_flipcard_default_text);
4
- }.flip, .flipNone {
7
+ }
8
+ .flip, .flipNone {
5
9
  background-color: var(--zdt_flipcard_default_bg);
6
10
  }
7
11
  .container {
@@ -16,29 +20,96 @@
16
20
  height: inherit;
17
21
  }
18
22
  .front,
23
+ .back {
24
+ position: absolute;
25
+ }
26
+ .front {
27
+ transition: transform var(--zd_transition2) var(--flip_cubic);
28
+ transform: scale(.8) perspective(1px);
29
+ }
30
+ .front,
31
+ .container .front:before {
32
+ opacity: 0;
33
+ visibility: hidden;
34
+ }
35
+ .back {
36
+ transition: transform var(--zd_transition3) var(--flip_cubic);
37
+ transform: scale(1) perspective(1px);
38
+ }
39
+ .notFlip .container .front {
40
+ transition: 0ms;
41
+ }
42
+ .flip:hover .container .front,
43
+ .hoverContainer:hover .container .front {
44
+ transition: transform var(--zd_transition2) var(--flip_cubic);
45
+ }
46
+ .container .front:before {
47
+ content: '';
48
+ position: absolute;
49
+ top: 0;
50
+ bottom: 0;
51
+ pointer-events: none;
52
+ border-radius: 50%;
53
+ background-color: var(--zdt_listHeader_border);
54
+ transform: scale(.6);
55
+ }
56
+ [dir=ltr] .container .front:before {
57
+ left: 0;
58
+ right: 0;
59
+ }
60
+ [dir=rtl] .container .front:before {
61
+ right: 0;
62
+ left: 0;
63
+ }
64
+ .notFlip:hover .container .front:before,
65
+ .flip:hover .container .front:before {
66
+ transition: transform var(--zd_transition1) var(--flip_cubic);
67
+ }
68
+ .notFlip .container .front,
69
+ .flip:hover .container .front,
70
+ .hoverContainer:hover .container .front,
71
+ .notFlip:hover .container .front:before,
72
+ .flip:hover .container .front:before {
73
+ opacity: 1;
74
+ visibility: visible;
75
+ }
76
+ .notFlip .container .front, .flip:hover .container .front, .hoverContainer:hover .container .front, .notFlip:hover .container .front:before, .flip:hover .container .front:before {
77
+ transform: scale(1);
78
+ }
79
+ .notFlip .container .back {
80
+ transition: 0ms;
81
+ }
82
+ .notFlip .container .back,
83
+ .flip:hover .container .back,
84
+ .hoverContainer:hover .container .back {
85
+ opacity: 0;
86
+ visibility: hidden;
87
+ }
88
+ .notFlip .container .back, .flip:hover .container .back, .hoverContainer:hover .container .back {
89
+ transform: scale(.3);
90
+ }
91
+ .checkboxCnt:hover .checkboxStyle {
92
+ --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
93
+ }
94
+ /* .front,
19
95
  .back {
20
96
  position: absolute;
21
97
  backface-visibility: hidden;
22
98
  -webkit-backface-visibility: hidden;
23
99
  }
24
- [dir=ltr] .front {
100
+ .front {
25
101
  transform: rotateY(180deg) perspective(1px);
26
102
  }
27
- [dir=rtl] .front {
28
- transform: rotateY(-180deg) perspective(1px);
29
- }
30
103
  .back {
31
104
  transform: rotateY(0deg) perspective(1px);
32
105
  }
33
- [dir=ltr] .notFlip .container {
106
+ .notFlip .container {
34
107
  transform: rotateY(180deg);
35
108
  }
36
- [dir=rtl] .notFlip .container {
37
- transform: rotateY(-180deg);
38
- }
39
- [dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
109
+ .flip:hover .container,
110
+ .hoverContainer:hover .container {
40
111
  transform: rotateY(180deg);
41
112
  }
42
- [dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
43
- transform: rotateY(-180deg);
44
- }
113
+ .checkboxCnt:hover .checkboxStyle {
114
+ --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
115
+ } */
package/es/list/SecondaryText/AccountName.js CHANGED
@@ -36,44 +36,40 @@ export default class AccountName extends Component {
36
36
  TextProps = {},
37
37
  SecondaryTextProps = {}
38
38
  } = customProps;
39
- return (
40
- /*#__PURE__*/
41
- // <Container
42
- // alignBox='row'
43
- // align='baseline'
44
- // isCover={false}
45
- // data-title={dataTitle}
46
- // dataId={dataId}
47
- // >
48
- // <Box flexible>
49
- React.createElement("div", {
50
- className: style.primaryAccountNameCnt,
51
- "data-title": dataTitle,
52
- "data-id": dataId
53
- }, /*#__PURE__*/React.createElement(React.Fragment, {
54
- className: style.primaryAccountName,
55
- shrink: true
56
- }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
57
- href: href,
58
- urlName: urlName,
59
- urlData: urlData,
60
- onClick: onClick,
61
- dataId: `${dataId}_link`,
62
- className: `${style.gridItem} ${style.link}`
63
- }, LinkProps), /*#__PURE__*/React.createElement("div", {
64
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
65
- }, text)) : /*#__PURE__*/React.createElement("div", _extends({
66
- className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
67
- }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Link, {
68
- href: secondaryAccountHref,
69
- onClick: secondaryAccountClick,
70
- className: `${style.gridItem} ${style.link}`
71
- }, /*#__PURE__*/React.createElement("div", _extends({
72
- className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
73
- }, SecondaryTextProps), secondaryAccountText))) // </Box>
74
- // </Container>
75
-
76
- );
39
+ return /*#__PURE__*/React.createElement(Container, {
40
+ alignBox: "row",
41
+ align: "baseline",
42
+ isCover: false,
43
+ "data-title": dataTitle,
44
+ dataId: dataId
45
+ }, /*#__PURE__*/React.createElement(Box, {
46
+ flexible: true
47
+ }, /*#__PURE__*/React.createElement(Container, {
48
+ alignBox: "row",
49
+ align: "baseline",
50
+ isCover: false,
51
+ className: style.primaryAccountNameCnt
52
+ }, /*#__PURE__*/React.createElement(Box, {
53
+ className: style.primaryAccountName,
54
+ shrink: true
55
+ }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
56
+ href: href,
57
+ urlName: urlName,
58
+ urlData: urlData,
59
+ onClick: onClick,
60
+ dataId: `${dataId}_link`,
61
+ className: style.link
62
+ }, LinkProps), /*#__PURE__*/React.createElement("div", {
63
+ className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
64
+ }, text)) : /*#__PURE__*/React.createElement("div", _extends({
65
+ className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
66
+ }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
67
+ href: secondaryAccountHref,
68
+ onClick: secondaryAccountClick,
69
+ className: style.link
70
+ }, /*#__PURE__*/React.createElement("div", _extends({
71
+ className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
72
+ }, SecondaryTextProps), secondaryAccountText))))));
77
73
  }
78
74
 
79
75
  }
package/es/list/SecondaryText/ContactName.js CHANGED
@@ -39,30 +39,36 @@ export default class ContactName extends Component {
39
39
  LinkProps = {},
40
40
  TextProps = {}
41
41
  } = customProps;
42
- return /*#__PURE__*/React.createElement("div", {
43
- className: style.contactNameCnt,
44
- "data-id": dataId
45
- }, isPaidUser && /*#__PURE__*/React.createElement(Icon, {
46
- name: "ZD-paiduser",
47
- iconClass: style.paidUserIcon,
42
+ return /*#__PURE__*/React.createElement(Container, {
43
+ alignBox: "row",
44
+ align: "baseline",
45
+ isCover: false,
46
+ dataId: dataId
47
+ }, isPaidUser && /*#__PURE__*/React.createElement(Box, {
48
+ className: style.paidUserIcon,
48
49
  title: paidTitle
49
- }), /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
50
+ }, /*#__PURE__*/React.createElement(Icon, {
51
+ name: "ZD-paiduser",
52
+ iconClass: style.icon
53
+ })), /*#__PURE__*/React.createElement(Box, {
54
+ flexible: true
55
+ }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
50
56
  urlName: urlName,
51
57
  href: href,
52
58
  urlData: urlData,
53
59
  onClick: onClick,
54
60
  title: dataTitle,
55
61
  dataId: `${dataId}_link`,
56
- className: `${style.gridItem} ${style.link}`
62
+ className: style.link
57
63
  }, LinkProps), /*#__PURE__*/React.createElement("div", {
58
64
  className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
59
65
  }, text)) : /*#__PURE__*/React.createElement("div", _extends({
60
- className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
66
+ className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
61
67
  "data-title": dataTitle
62
- }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(SentimentStatus, {
68
+ }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
63
69
  type: sentimentType,
64
70
  dataTitle: sentimentDataTitle
65
- }));
71
+ })));
66
72
  }
67
73
 
68
74
  }
@@ -100,8 +106,7 @@ ContactName.defaultProps = {
100
106
  dataId: 'contactName',
101
107
  fontWeight: 'regular',
102
108
  i18nKeys: {},
103
- customProps: {},
104
- sentimentType: 'positive'
109
+ customProps: {}
105
110
  };
106
111
 
107
112
  if (false) {
package/es/list/SecondaryText/SecondaryText.module.css CHANGED
@@ -1,3 +1,13 @@
1
+ .paidUserIcon {
2
+ vertical-align: middle;
3
+ bottom: var(--zd_size1);
4
+ position: relative;
5
+ font-size: var(--zd_font_size8);
6
+ }[dir=ltr] .paidUserIcon {
7
+ margin-right: var(--zd_size5);
8
+ }[dir=rtl] .paidUserIcon {
9
+ margin-left: var(--zd_size5);
10
+ }
1
11
  .icon {
2
12
  display: block;
3
13
  }
@@ -57,6 +67,9 @@ display: block
57
67
  .ticketIdLink:hover, .ticketIdLink:focus {
58
68
  color: var(--zdt_secondaryText_blue_hover_text);
59
69
  }
70
+ .primaryAccountNameCnt {
71
+ max-width: 100%;
72
+ }
60
73
  /* status */
61
74
  .font_regular {
62
75
  font-family: var(--zd_regular);
@@ -121,31 +134,3 @@ display: block
121
134
  .black {
122
135
  color: var(--zdt_secondaryText_black_text);
123
136
  }
124
- /* Contact Name */
125
- .contactNameCnt {
126
- display: inline-grid;
127
- grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
128
- align-items: baseline;
129
- }
130
- .paidUserIcon {
131
- vertical-align: middle;
132
- bottom: var(--zd_size1);
133
- position: relative;
134
- font-size: var(--zd_font_size8);
135
- }
136
- [dir=ltr] .paidUserIcon {
137
- margin-right: var(--zd_size5);
138
- }
139
- [dir=rtl] .paidUserIcon {
140
- margin-left: var(--zd_size5);
141
- }
142
- .gridItem {
143
- min-width: 0;
144
- }
145
- /* Account Name */
146
- .primaryAccountNameCnt {
147
- max-width: 100%;
148
- display: grid;
149
- grid-template-columns: 1fr minmax(auto,max-content);
150
- align-items: baseline;
151
- }
package/lib/AttachmentViewer/AttachmentImage.js CHANGED
@@ -96,7 +96,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
96
96
  isCover = _this$props.isCover;
97
97
  var isLoading = this.state.isLoading;
98
98
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
99
- className: "".concat(_AttachmentViewerModule["default"].spinLoad)
99
+ className: "".concat(_AttachmentViewerModule["default"].spinLoad),
100
+ "data-id": "".concat(dataId, "_loader")
100
101
  }, /*#__PURE__*/_react["default"].createElement("div", {
101
102
  className: _AttachmentViewerModule["default"].loader
102
103
  })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
@@ -126,4 +127,7 @@ AttachmentImage.propTypes = {
126
127
  onClick: _propTypes["default"].func,
127
128
  onLoad: _propTypes["default"].func,
128
129
  src: _propTypes["default"].string
130
+ };
131
+ AttachmentImage.defaultProps = {
132
+ dataId: 'AttachmentImage'
129
133
  };
package/lib/AttachmentViewer/AttachmentViewer.js CHANGED
@@ -351,7 +351,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
351
351
  _this4.zoomIn(e, i, true);
352
352
  },
353
353
  alt: "Preview",
354
- dataId: "attachViewed",
354
+ dataId: "attachViewer",
355
355
  id: "img".concat(i),
356
356
  isImage: true,
357
357
  isCover: false
@@ -588,7 +588,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
588
588
  size: "small",
589
589
  alt: name,
590
590
  className: _AttachmentViewerModule["default"].image,
591
- isImage: !isAudio
591
+ isImage: !isAudio,
592
+ dataId: "AttachmentImage"
592
593
  }));
593
594
  }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
594
595
  dataId: "attachToggle",
package/lib/FlipCard/FlipCard.js CHANGED
@@ -68,6 +68,7 @@ var FlipCard = /*#__PURE__*/function (_Component) {
68
68
  _this = _super.call(this, props);
69
69
  _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
70
70
  _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
71
+ _this.toggleClick = _this.toggleClick.bind(_assertThisInitialized(_this));
71
72
  return _this;
72
73
  }
73
74
 
@@ -88,6 +89,12 @@ var FlipCard = /*#__PURE__*/function (_Component) {
88
89
  var id = this.props.id;
89
90
  onChange(id, isChecked, e);
90
91
  }
92
+ }, {
93
+ key: "toggleClick",
94
+ value: function toggleClick(e) {
95
+ var isChecked = this.props.isChecked;
96
+ this.onChange(!isChecked, e);
97
+ }
91
98
  }, {
92
99
  key: "render",
93
100
  value: function render() {
@@ -129,7 +136,7 @@ var FlipCard = /*#__PURE__*/function (_Component) {
129
136
  _customProps$AvatarUs = customProps.AvatarUserProps,
130
137
  AvatarUserProps = _customProps$AvatarUs === void 0 ? {} : _customProps$AvatarUs;
131
138
  return /*#__PURE__*/_react["default"].createElement("div", {
132
- className: "".concat((0, _AvatarSize["default"])(size), " ").concat(noNeedFlip ? _FlipCardModule["default"].flipNone : isChecked ? _FlipCardModule["default"].notFlip : _FlipCardModule["default"].flip),
139
+ className: "".concat((0, _AvatarSize["default"])(size), " ").concat(_FlipCardModule["default"].flipContainer, " ").concat(noNeedFlip ? _FlipCardModule["default"].flipNone : isChecked ? _FlipCardModule["default"].notFlip : _FlipCardModule["default"].flip),
133
140
  onClick: this.onClick,
134
141
  "data-id": ticListContainer,
135
142
  "data-tour": tourId
@@ -138,13 +145,17 @@ var FlipCard = /*#__PURE__*/function (_Component) {
138
145
  "data-id": ticList
139
146
  }, !noNeedFlip ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
140
147
  align: "both",
141
- className: "".concat(_FlipCardModule["default"].front, " ").concat(frontClass ? frontClass : '')
148
+ className: "".concat(_FlipCardModule["default"].front, " ").concat(_FlipCardModule["default"].checkboxCnt, " ").concat(frontClass ? frontClass : ''),
149
+ onClick: this.toggleClick
142
150
  }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], _extends({
143
151
  isFilled: isFilledCheckbox,
144
152
  checked: isChecked,
145
153
  onChange: this.onChange,
146
154
  id: "checkbox_".concat(id),
147
- dataId: "listViewCheckBox_".concat(id)
155
+ dataId: "listViewCheckBox_".concat(id),
156
+ customClass: {
157
+ customCheckBox: _FlipCardModule["default"].checkboxStyle
158
+ }
148
159
  }, CheckBoxProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
149
160
  align: "both",
150
161
  className: _FlipCardModule["default"].back
package/lib/FlipCard/FlipCard.module.css CHANGED
@@ -1,7 +1,11 @@
1
+ .flipContainer {
2
+ --flip_cubic: cubic-bezier(0.25, 0.8, 0.25, 1);
3
+ }
1
4
  .flip,
2
5
  .flipNone {
3
6
  color: var(--zdt_flipcard_default_text);
4
- }.flip, .flipNone {
7
+ }
8
+ .flip, .flipNone {
5
9
  background-color: var(--zdt_flipcard_default_bg);
6
10
  }
7
11
  .container {
@@ -16,29 +20,96 @@
16
20
  height: inherit;
17
21
  }
18
22
  .front,
23
+ .back {
24
+ position: absolute;
25
+ }
26
+ .front {
27
+ transition: transform var(--zd_transition2) var(--flip_cubic);
28
+ transform: scale(.8) perspective(1px);
29
+ }
30
+ .front,
31
+ .container .front:before {
32
+ opacity: 0;
33
+ visibility: hidden;
34
+ }
35
+ .back {
36
+ transition: transform var(--zd_transition3) var(--flip_cubic);
37
+ transform: scale(1) perspective(1px);
38
+ }
39
+ .notFlip .container .front {
40
+ transition: 0ms;
41
+ }
42
+ .flip:hover .container .front,
43
+ .hoverContainer:hover .container .front {
44
+ transition: transform var(--zd_transition2) var(--flip_cubic);
45
+ }
46
+ .container .front:before {
47
+ content: '';
48
+ position: absolute;
49
+ top: 0;
50
+ bottom: 0;
51
+ pointer-events: none;
52
+ border-radius: 50%;
53
+ background-color: var(--zdt_listHeader_border);
54
+ transform: scale(.6);
55
+ }
56
+ [dir=ltr] .container .front:before {
57
+ left: 0;
58
+ right: 0;
59
+ }
60
+ [dir=rtl] .container .front:before {
61
+ right: 0;
62
+ left: 0;
63
+ }
64
+ .notFlip:hover .container .front:before,
65
+ .flip:hover .container .front:before {
66
+ transition: transform var(--zd_transition1) var(--flip_cubic);
67
+ }
68
+ .notFlip .container .front,
69
+ .flip:hover .container .front,
70
+ .hoverContainer:hover .container .front,
71
+ .notFlip:hover .container .front:before,
72
+ .flip:hover .container .front:before {
73
+ opacity: 1;
74
+ visibility: visible;
75
+ }
76
+ .notFlip .container .front, .flip:hover .container .front, .hoverContainer:hover .container .front, .notFlip:hover .container .front:before, .flip:hover .container .front:before {
77
+ transform: scale(1);
78
+ }
79
+ .notFlip .container .back {
80
+ transition: 0ms;
81
+ }
82
+ .notFlip .container .back,
83
+ .flip:hover .container .back,
84
+ .hoverContainer:hover .container .back {
85
+ opacity: 0;
86
+ visibility: hidden;
87
+ }
88
+ .notFlip .container .back, .flip:hover .container .back, .hoverContainer:hover .container .back {
89
+ transform: scale(.3);
90
+ }
91
+ .checkboxCnt:hover .checkboxStyle {
92
+ --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
93
+ }
94
+ /* .front,
19
95
  .back {
20
96
  position: absolute;
21
97
  backface-visibility: hidden;
22
98
  -webkit-backface-visibility: hidden;
23
99
  }
24
- [dir=ltr] .front {
100
+ .front {
25
101
  transform: rotateY(180deg) perspective(1px);
26
102
  }
27
- [dir=rtl] .front {
28
- transform: rotateY(-180deg) perspective(1px);
29
- }
30
103
  .back {
31
104
  transform: rotateY(0deg) perspective(1px);
32
105
  }
33
- [dir=ltr] .notFlip .container {
106
+ .notFlip .container {
34
107
  transform: rotateY(180deg);
35
108
  }
36
- [dir=rtl] .notFlip .container {
37
- transform: rotateY(-180deg);
38
- }
39
- [dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
109
+ .flip:hover .container,
110
+ .hoverContainer:hover .container {
40
111
  transform: rotateY(180deg);
41
112
  }
42
- [dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
43
- transform: rotateY(-180deg);
44
- }
113
+ .checkboxCnt:hover .checkboxStyle {
114
+ --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
115
+ } */
package/lib/list/SecondaryText/AccountName.js CHANGED
@@ -82,44 +82,40 @@ var AccountName = /*#__PURE__*/function (_Component) {
82
82
  TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp,
83
83
  _customProps$Secondar = customProps.SecondaryTextProps,
84
84
  SecondaryTextProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
85
- return (
86
- /*#__PURE__*/
87
- // <Container
88
- // alignBox='row'
89
- // align='baseline'
90
- // isCover={false}
91
- // data-title={dataTitle}
92
- // dataId={dataId}
93
- // >
94
- // <Box flexible>
95
- _react["default"].createElement("div", {
96
- className: _SecondaryTextModule["default"].primaryAccountNameCnt,
97
- "data-title": dataTitle,
98
- "data-id": dataId
99
- }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
100
- className: _SecondaryTextModule["default"].primaryAccountName,
101
- shrink: true
102
- }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
103
- href: href,
104
- urlName: urlName,
105
- urlData: urlData,
106
- onClick: onClick,
107
- dataId: "".concat(dataId, "_link"),
108
- className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
109
- }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
110
- className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
111
- }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
112
- className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
113
- }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
114
- href: secondaryAccountHref,
115
- onClick: secondaryAccountClick,
116
- className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
117
- }, /*#__PURE__*/_react["default"].createElement("div", _extends({
118
- className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
119
- }, SecondaryTextProps), secondaryAccountText))) // </Box>
120
- // </Container>
121
-
122
- );
85
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
86
+ alignBox: "row",
87
+ align: "baseline",
88
+ isCover: false,
89
+ "data-title": dataTitle,
90
+ dataId: dataId
91
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
92
+ flexible: true
93
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
94
+ alignBox: "row",
95
+ align: "baseline",
96
+ isCover: false,
97
+ className: _SecondaryTextModule["default"].primaryAccountNameCnt
98
+ }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
99
+ className: _SecondaryTextModule["default"].primaryAccountName,
100
+ shrink: true
101
+ }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
102
+ href: href,
103
+ urlName: urlName,
104
+ urlData: urlData,
105
+ onClick: onClick,
106
+ dataId: "".concat(dataId, "_link"),
107
+ className: _SecondaryTextModule["default"].link
108
+ }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
109
+ className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
110
+ }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
111
+ className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
112
+ }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
113
+ href: secondaryAccountHref,
114
+ onClick: secondaryAccountClick,
115
+ className: _SecondaryTextModule["default"].link
116
+ }, /*#__PURE__*/_react["default"].createElement("div", _extends({
117
+ className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
118
+ }, SecondaryTextProps), secondaryAccountText))))));
123
119
  }
124
120
  }]);
125
121
 
package/lib/list/SecondaryText/ContactName.js CHANGED
@@ -93,30 +93,36 @@ var ContactName = /*#__PURE__*/function (_Component) {
93
93
  LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
94
94
  _customProps$TextProp = customProps.TextProps,
95
95
  TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp;
96
- return /*#__PURE__*/_react["default"].createElement("div", {
97
- className: _SecondaryTextModule["default"].contactNameCnt,
98
- "data-id": dataId
99
- }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
100
- name: "ZD-paiduser",
101
- iconClass: _SecondaryTextModule["default"].paidUserIcon,
96
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
97
+ alignBox: "row",
98
+ align: "baseline",
99
+ isCover: false,
100
+ dataId: dataId
101
+ }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
102
+ className: _SecondaryTextModule["default"].paidUserIcon,
102
103
  title: paidTitle
103
- }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
104
+ }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
105
+ name: "ZD-paiduser",
106
+ iconClass: _SecondaryTextModule["default"].icon
107
+ })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
108
+ flexible: true
109
+ }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
104
110
  urlName: urlName,
105
111
  href: href,
106
112
  urlData: urlData,
107
113
  onClick: onClick,
108
114
  title: dataTitle,
109
115
  dataId: "".concat(dataId, "_link"),
110
- className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
116
+ className: _SecondaryTextModule["default"].link
111
117
  }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
112
118
  className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
113
119
  }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
114
- className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
120
+ className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
115
121
  "data-title": dataTitle
116
- }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
122
+ }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
117
123
  type: sentimentType,
118
124
  dataTitle: sentimentDataTitle
119
- }));
125
+ })));
120
126
  }
121
127
  }]);
122
128
 
@@ -158,8 +164,7 @@ ContactName.defaultProps = {
158
164
  dataId: 'contactName',
159
165
  fontWeight: 'regular',
160
166
  i18nKeys: {},
161
- customProps: {},
162
- sentimentType: 'positive'
167
+ customProps: {}
163
168
  };
164
169
 
165
170
  if (false) {
package/lib/list/SecondaryText/SecondaryText.module.css CHANGED
@@ -1,3 +1,13 @@
1
+ .paidUserIcon {
2
+ vertical-align: middle;
3
+ bottom: var(--zd_size1);
4
+ position: relative;
5
+ font-size: var(--zd_font_size8);
6
+ }[dir=ltr] .paidUserIcon {
7
+ margin-right: var(--zd_size5);
8
+ }[dir=rtl] .paidUserIcon {
9
+ margin-left: var(--zd_size5);
10
+ }
1
11
  .icon {
2
12
  display: block;
3
13
  }
@@ -57,6 +67,9 @@ display: block
57
67
  .ticketIdLink:hover, .ticketIdLink:focus {
58
68
  color: var(--zdt_secondaryText_blue_hover_text);
59
69
  }
70
+ .primaryAccountNameCnt {
71
+ max-width: 100%;
72
+ }
60
73
  /* status */
61
74
  .font_regular {
62
75
  font-family: var(--zd_regular);
@@ -121,31 +134,3 @@ display: block
121
134
  .black {
122
135
  color: var(--zdt_secondaryText_black_text);
123
136
  }
124
- /* Contact Name */
125
- .contactNameCnt {
126
- display: inline-grid;
127
- grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
128
- align-items: baseline;
129
- }
130
- .paidUserIcon {
131
- vertical-align: middle;
132
- bottom: var(--zd_size1);
133
- position: relative;
134
- font-size: var(--zd_font_size8);
135
- }
136
- [dir=ltr] .paidUserIcon {
137
- margin-right: var(--zd_size5);
138
- }
139
- [dir=rtl] .paidUserIcon {
140
- margin-left: var(--zd_size5);
141
- }
142
- .gridItem {
143
- min-width: 0;
144
- }
145
- /* Account Name */
146
- .primaryAccountNameCnt {
147
- max-width: 100%;
148
- display: grid;
149
- grid-template-columns: 1fr minmax(auto,max-content);
150
- align-items: baseline;
151
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.0.0-temp-82",
3
+ "version": "1.0.0-temp-85",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "jsnext:main": "es/index.js",