@zohodesk/dot 1.0.0-temp-89 → 1.0.0-temp-94

package/lib/list/GridStencils/GridStencils.module.css

@@ -1,10 +1,9 @@
 .stenLoading {
   position: relative;
-  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
-  padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin: 0 auto var(--zd_size10) auto;
+  padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15);
+  margin-bottom: var(--zd_size10) ;
   border-radius: var(--zd_size5);
 }
 [dir=ltr] .stenLoadbody {
@@ -28,7 +27,6 @@
 [dir=rtl] .stenLoadbody::after {
   left: var(--zd_size20);
 }
-
 .lineBar {
   width: 90%;
 }
@@ -54,14 +52,14 @@
   background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
+  -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: placeHolderShimmer;
@@ -104,13 +102,11 @@
 [dir=rtl] .threeLayout .stenLoadbody::before {
   right: var(--zd_size16);
 }
-
 [dir=ltr] .threeLayout .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
 }
-
 [dir=rtl] .threeLayout .stenLoadbody {
-  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20);
 }
 .threeLayout .stenLoadbody::after {
   top: var(--zd_size15);
@@ -122,31 +118,24 @@
 [dir=rtl] .threeLayout .stenLoadbody::after {
   left: var(--zd_size20);
 }
-
 [dir=ltr] .leftCont .stenLoadbody::before {
   left: var(--zd_size33);
 }
-
 [dir=rtl] .leftCont .stenLoadbody::before {
   right: var(--zd_size33);
 }
-
 [dir=ltr] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
 }
-
 [dir=rtl] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20);
 }
-
 [dir=ltr] .leftCont .stenLoadbody::after {
   right: var(--zd_size40);
 }
-
 [dir=rtl] .leftCont .stenLoadbody::after {
   left: var(--zd_size40);
 }
-
 .leftCont .lineBar {
   width: 80%;
 }
@@ -155,4 +144,4 @@
 }
 .leftCont .lineBar3 {
   width: 40%;
-}
+}

package/lib/list/SecondaryText/AccountName.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Layout = require("@zohodesk/components/lib/Layout");
-
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
@@ -82,44 +80,28 @@ var AccountName = /*#__PURE__*/function (_Component) {
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp,
           _customProps$Secondar = customProps.SecondaryTextProps,
           SecondaryTextProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
-      return (
-        /*#__PURE__*/
-        // <Container
-        //   alignBox='row'
-        //   align='baseline'
-        //   isCover={false}
-        //   data-title={dataTitle}
-        //   dataId={dataId}
-        // >
-        // <Box flexible>
-        _react["default"].createElement("div", {
-          className: _SecondaryTextModule["default"].primaryAccountNameCnt,
-          "data-title": dataTitle,
-          "data-id": dataId
-        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          className: _SecondaryTextModule["default"].primaryAccountName,
-          shrink: true
-        }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
-          href: href,
-          urlName: urlName,
-          urlData: urlData,
-          onClick: onClick,
-          dataId: "".concat(dataId, "_link"),
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
-        }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-        }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
-        }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-          href: secondaryAccountHref,
-          onClick: secondaryAccountClick,
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
-        }, /*#__PURE__*/_react["default"].createElement("div", _extends({
-          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-        }, SecondaryTextProps), secondaryAccountText))) //   </Box>
-        // </Container>
-
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _SecondaryTextModule["default"].primaryAccountNameCnt,
+        "data-title": dataTitle,
+        "data-id": dataId
+      }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+        href: href,
+        urlName: urlName,
+        urlData: urlData,
+        onClick: onClick,
+        dataId: "".concat(dataId, "_link"),
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+      }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
+      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        href: secondaryAccountHref,
+        onClick: secondaryAccountClick,
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+      }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+      }, SecondaryTextProps), secondaryAccountText)));
     }
   }]);
 

package/lib/list/SecondaryText/ContactName.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Layout = require("@zohodesk/components/lib/Layout");
-
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _SentimentStatus = _interopRequireDefault(require("../SentimentStatus/SentimentStatus"));
@@ -158,8 +156,7 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {},
-  sentimentType: 'positive'
+  customProps: {}
 };
 
 if (false) {

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,20 +1,26 @@
 .icon {
   display: block;
 }
+
 .disable {
   cursor: not-allowed;
 }
+
 .textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
-.textStyle, .link{
-display: block
+
+.textStyle,
+.link {
+  display: block
 }
+
 .textStyle.textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
+
 .ticketId,
 .link,
 .textStyle,
@@ -23,15 +29,18 @@ display: block
 .phoneNumber {
   color: var(--zdt_secondaryText_secondaryText_text);
 }
+
 .textStyle,
 .secondaryText {
   font-size: var(--zd_font_size12);
 }
+
 .ticketId,
 .phoneNumber,
 .ratingText {
   font-size: var(--zd_font_size12);
 }
+
 .textStyle,
 .secondaryText,
 .phoneNumber {
@@ -39,39 +48,49 @@ display: block
   max-width: 100%;
   display: block;
 }
+
 .textStyle, .secondaryText, .phoneNumber {
   cursor: pointer;
 }
+
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
 .link:hover {
   color: var(--zdt_secondaryText_blue_text);
 }
-.link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
+
+/* .link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
   color: var(--zdt_secondaryText_blue_text);
-}
+} */
 .ticketIdLink {
   cursor: pointer;
 }
-.ticketIdLink:hover, .ticketIdLink:focus {
+
+.ticketIdLink:hover,
+.ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
+
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
 }
+
 .font_semibold {
   font-family: var(--zd_semibold);
 }
+
 .font_bold {
   font-family: var(--zd_bold);
 }
+
 .font_semibold,
 .font_bold,
 .textBold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .priorityText,
 .statusText {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
@@ -81,23 +100,28 @@ display: block
   font-size: var(--zd_font_size12);
   max-width: 100%;
 }
+
 .departmentText {
   font-size: var(--zd_font_size12);
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100%;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 /* HappinessRating Style */
 .happinessContainer {
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
+
 .happinessImg {
   width: var(--zd_size13);
   vertical-align: middle;
 }
+
 [dir=ltr] .happinessImg {
   margin: 0 var(--zd_size4) 0 0;
 }
+
 [dir=rtl] .happinessImg {
   margin: 0 0 0 var(--zd_size4);
 }
@@ -106,46 +130,52 @@ display: block
 .gray {
   color: var(--zdt_secondaryText_gray_text);
 }
+
 .orange {
   color: var(--zdt_secondaryText_orage_text);
 }
+
 .green {
   color: var(--zdt_secondaryText_green_text);
 }
+
 .red {
   color: var(--zdt_secondaryText_red_text);
 }
+
 .blue {
   color: var(--zdt_secondaryText_blue_text);
 }
+
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
+
 /* Contact Name */
-.contactNameCnt {
+.contactNameCnt,
+.primaryAccountNameCnt {
   display: inline-grid;
-  grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
   align-items: baseline;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, max-content);
+  max-width: 100%;
 }
+
 .paidUserIcon {
   vertical-align: middle;
   bottom: var(--zd_size1);
   position: relative;
   font-size: var(--zd_font_size8);
 }
+
 [dir=ltr] .paidUserIcon {
   margin-right: var(--zd_size5);
 }
+
 [dir=rtl] .paidUserIcon {
   margin-left: var(--zd_size5);
 }
+
 .gridItem {
   min-width: 0;
-}
-/* Account Name */
-.primaryAccountNameCnt {
-  max-width: 100%;
-  display: grid;
-  grid-template-columns: 1fr minmax(auto,max-content);
-  align-items: baseline;
-}
+}

package/lib/list/SecondaryText/docs/SecondaryText__default.docs.js

@@ -0,0 +1,162 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _index = require("../index");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+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); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); }; }
+
+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); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var SecondaryText__default = /*#__PURE__*/function (_Component) {
+  _inherits(SecondaryText__default, _Component);
+
+  var _super = _createSuper(SecondaryText__default);
+
+  function SecondaryText__default(props) {
+    _classCallCheck(this, SecondaryText__default);
+
+    return _super.call(this, props);
+  }
+
+  _createClass(SecondaryText__default, [{
+    key: "render",
+    value: function render() {
+      var boxStyle = {
+        padding: '10px',
+        border: '2px solid #000',
+        width: '30%',
+        margin: '5px'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column",
+        wrap: "wrap",
+        align: "both"
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "ContactName"), /*#__PURE__*/_react["default"].createElement(_index.ContactName, {
+        text: "Antro Contact",
+        isPaidUser: true,
+        sentimentType: "positive"
+      }), /*#__PURE__*/_react["default"].createElement(_index.ContactName, {
+        text: "Antro Contact",
+        isPaidUser: true,
+        sentimentType: "negative"
+      }), /*#__PURE__*/_react["default"].createElement(_index.ContactName, {
+        text: "Antro Contact",
+        isPaidUser: true,
+        sentimentType: "neutral"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "AccountName"), /*#__PURE__*/_react["default"].createElement(_index.AccountName, {
+        text: "Antro Contact ",
+        secondaryAccountText: " secondaryAccountText",
+        fontWeight: "semibold"
+      }), /*#__PURE__*/_react["default"].createElement(_index.AccountName, {
+        text: "Antro Contact ",
+        secondaryAccountText: " secondaryAccountText",
+        fontWeight: "bold"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "DepartmentText"), /*#__PURE__*/_react["default"].createElement(_index.DepartmentText, {
+        text: "Antro Contact"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Email"), /*#__PURE__*/_react["default"].createElement(_index.Email, {
+        text: "Antro Contact"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "HappinessRating"), /*#__PURE__*/_react["default"].createElement(_index.HappinessRating, {
+        text: "100",
+        src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "PhoneNumber"), /*#__PURE__*/_react["default"].createElement(_index.PhoneNumber, {
+        text: "1243123434543"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "PriorityText"), /*#__PURE__*/_react["default"].createElement(_index.PriorityText, {
+        text: "Antro Contact",
+        color: "red"
+      }), /*#__PURE__*/_react["default"].createElement(_index.PriorityText, {
+        text: "Antro Contact",
+        color: "green"
+      }), /*#__PURE__*/_react["default"].createElement(_index.PriorityText, {
+        text: "Antro Contact",
+        color: "gray"
+      }), /*#__PURE__*/_react["default"].createElement(_index.PriorityText, {
+        text: "Antro Contact",
+        color: "orange"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "SecondaryText"), /*#__PURE__*/_react["default"].createElement(_index.SecondaryText, {
+        text: "Antro Contact"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "StatusText"), /*#__PURE__*/_react["default"].createElement(_index.StatusText, {
+        text: "Antro Contact",
+        color: "red"
+      }), /*#__PURE__*/_react["default"].createElement(_index.StatusText, {
+        text: "Antro Contact",
+        color: "green"
+      }), /*#__PURE__*/_react["default"].createElement(_index.StatusText, {
+        text: "Antro Contact",
+        color: "gray"
+      }), /*#__PURE__*/_react["default"].createElement(_index.StatusText, {
+        text: "Antro Contact",
+        color: "orange"
+      }), /*#__PURE__*/_react["default"].createElement(_index.StatusText, {
+        text: "Antro Contact",
+        color: "black"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "TicketId"), /*#__PURE__*/_react["default"].createElement(_index.TicketId, {
+        text: "124213234"
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "Website"), /*#__PURE__*/_react["default"].createElement(_index.Website, {
+        text: "https://www.zoho.com/"
+      }))));
+    }
+  }]);
+
+  return SecondaryText__default;
+}(_react.Component);
+
+exports["default"] = SecondaryText__default;
+
+if (false) {
+  SecondaryText__default.docs = {
+    folderName: 'List',
+    componentGroup: 'SecondaryText'
+  };
+}

package/lib/list/SentimentStatus/SentimentStatus.js

@@ -59,13 +59,11 @@ var SentimentStatus = /*#__PURE__*/function (_React$Component) {
         negative: 'ZD-botNegative',
         positive: 'ZD-botPositive'
       };
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SentimentStatusModule["default"].container,
-        "data-title": dataTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: icons[type],
-        iconClass: _SentimentStatusModule["default"].sentimentIcon
-      }));
+        iconClass: _SentimentStatusModule["default"].sentimentIcon,
+        title: dataTitle
+      });
     }
   }]);
 

package/lib/list/SentimentStatus/SentimentStatus.module.css

@@ -1,12 +1,7 @@
-.container {
-  vertical-align: middle;
+.sentimentIcon {
   font-size: var(--zd_font_size10);
-}[dir=ltr] .container {
+}[dir=ltr] .sentimentIcon {
   margin: 0 0 0 var(--zd_size5);
-}[dir=rtl] .container {
+}[dir=rtl] .sentimentIcon {
   margin: 0 var(--zd_size5) 0 0;
-}
-
-.sentimentIcon {
-  display: block;
-}
+}

package/lib/list/UserTime/UserTime.js

@@ -79,7 +79,7 @@ var UserTime = /*#__PURE__*/function (_Component) {
         className: "".concat(_UserTimeModule["default"].container, " ").concat(containerClass ? containerClass : ''),
         "data-title": title,
         "data-id": dataId
-      }, icon && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, icon && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_UserTimeModule["default"].iconColor, " ").concat(_UserTimeModule["default"][iconColor] ? _UserTimeModule["default"][iconColor] : '')
       }, icon === 'closedTime' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconClass: "".concat(_UserTimeModule["default"].iconStyle, " ").concat(_UserTimeModule["default"].closedTime, " ").concat(_UserTimeModule["default"].f8, " ").concat(iconClass ? iconClass : ''),
@@ -102,9 +102,7 @@ var UserTime = /*#__PURE__*/function (_Component) {
       }) : /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-dueTime",
         iconClass: "".concat(_UserTimeModule["default"].iconStyle, " ").concat(_UserTimeModule["default"].f8, " ").concat(iconClass ? iconClass : '')
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_i18n.UserTimeDiffFormat, {
+      })), /*#__PURE__*/_react["default"].createElement(_i18n.UserTimeDiffFormat, {
         type: type,
         page: page,
         isNeedTime: isNeedTime,
@@ -114,7 +112,7 @@ var UserTime = /*#__PURE__*/function (_Component) {
         later: later,
         to: to,
         isOverdue: isOverdue
-      })));
+      }));
     }
   }]);