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

package/es/list/AvatarFlip/docs/AvatarFlip__default.docs.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import AvatarFlip from '../AvatarFlip';
+export default class AvatarFlip__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, "Task Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskIcon",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskNone"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskMeeting",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskMeeting"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskCall",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskCall"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "taskDemo",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "email",
+      icon: "ZD-taskDemo"
+    }))), /*#__PURE__*/React.createElement("h2", {
+      style: {
+        marginBottom: '10px',
+        marginTop: '10px'
+      }
+    }, "Customers Module Icon"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "portalUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPortalUser: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(AvatarFlip, {
+      id: "paidUser",
+      noNeedFlip: false,
+      size: "xmedium",
+      name: "Antro J",
+      isPaidUser: true
+    }))));
+  }
+
+}
+
+if (false) {
+  AvatarFlip__default.docs = {
+    folderName: 'List',
+    componentGroup: 'AvatarFlip'
+  };
+}

package/es/list/BluePrintStatus/docs/BluePrintStatus__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BluePrintStatus from '../BluePrintStatus';
+export default class BluePrintStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(BluePrintStatus, null);
+  }
+
+}
+
+if (false) {
+  BluePrintStatus__default.docs = {
+    componentGroup: ''
+  };
+}

package/es/list/Comment/docs/Comment__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Comment from '../Comment';
+export default class Comment__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(Comment, {
+      count: "2"
+    }));
+  }
+
+}
+
+if (false) {
+  Comment__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Comment'
+  };
+}

package/es/list/DotNew/docs/DotNew__default.docs.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import DotNew from '../DotNew';
+export default class DotNew__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(DotNew, null);
+  }
+
+}
+
+if (false) {
+  DotNew__default.docs = {
+    folderName: 'List',
+    componentGroup: 'DotNew'
+  };
+}

package/es/list/GridStencils/docs/GridStencils__default.docs.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import GridStencils from '../GridStencils';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class GridStencils__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+      className: style.w350
+    }, /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar",
+      from: "leftPanel",
+      isThreeLayout: true
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    })));
+  }
+
+}
+
+if (false) {
+  GridStencils__default.docs = {
+    folderName: 'List',
+    componentGroup: 'GridStencils'
+  };
+}

package/es/list/Icons/docs/FloatingIcons__default.docs.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import FloatingIcons from '../FloatingIcons';
+import EditIcon from '../EditIcon';
+import DeleteIcon from '../DeleteIcon';
+import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
+export default class FloatingIcons__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(FloatingIcons, null, /*#__PURE__*/React.createElement(ReadUnreadIcon, {
+      isRead: true,
+      iconSize: "15"
+    }), /*#__PURE__*/React.createElement(ReadUnreadIcon, {
+      iconSize: "15"
+    }), /*#__PURE__*/React.createElement(EditIcon, null), /*#__PURE__*/React.createElement(DeleteIcon, null), /*#__PURE__*/React.createElement(SmartIcon, null));
+  }
+
+}
+
+if (false) {
+  FloatingIcons__default.docs = {
+    folderName: 'List',
+    componentGroup: 'FloatingIcons'
+  };
+}

package/es/list/ListLayout/docs/ListLayout__default.docs.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ListLayout, { Column } from '../ListLayout';
+export default class ListLayout__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  generateFooter() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Footer Area..!");
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "We have to define at least 1 Column and maximum 3 column in ", /*#__PURE__*/React.createElement("b", null, "ListLayout"), " Component"), /*#__PURE__*/React.createElement("h4", null, "Variation1"), /*#__PURE__*/React.createElement(ListLayout, {
+      footer: this.generateFooter
+    }, /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column One")), /*#__PURE__*/React.createElement(Column, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column Two")), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column Three")), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column Four"))), /*#__PURE__*/React.createElement("h4", null, "Variation2"), /*#__PURE__*/React.createElement(ListLayout, {
+      needHover: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column One")), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Column Two"))));
+  }
+
+}
+
+if (false) {
+  ListLayout__default.docs = {
+    folderName: 'List',
+    componentGroup: 'ListLayout'
+  };
+}

package/es/list/ListStencils/docs/ListStencils__default.docs.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ListStencils from '../ListStencils';
+export default class ListStencils__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ListStencils, null);
+  }
+
+}
+
+if (false) {
+  ListStencils__default.docs = {
+    folderName: 'List',
+    componentGroup: 'ListStencils'
+  };
+}

package/es/list/SecondaryText/AccountName.js

@@ -36,40 +36,44 @@ export default class AccountName extends Component {
       TextProps = {},
       SecondaryTextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      "data-title": dataTitle,
-      dataId: dataId
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      className: style.primaryAccountNameCnt
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.primaryAccountName,
-      shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
-      href: href,
-      urlName: urlName,
-      urlData: urlData,
-      onClick: onClick,
-      dataId: `${dataId}_link`,
-      className: style.link
-    }, LinkProps), /*#__PURE__*/React.createElement("div", {
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
-      href: secondaryAccountHref,
-      onClick: secondaryAccountClick,
-      className: style.link
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, SecondaryTextProps), secondaryAccountText))))));
+    return (
+      /*#__PURE__*/
+      // <Container
+      //   alignBox='row'
+      //   align='baseline'
+      //   isCover={false}
+      //   data-title={dataTitle}
+      //   dataId={dataId}
+      // >
+      // <Box flexible>
+      React.createElement("div", {
+        className: style.primaryAccountNameCnt,
+        "data-title": dataTitle,
+        "data-id": dataId
+      }, /*#__PURE__*/React.createElement(React.Fragment, {
+        className: style.primaryAccountName,
+        shrink: true
+      }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+        href: href,
+        urlName: urlName,
+        urlData: urlData,
+        onClick: onClick,
+        dataId: `${dataId}_link`,
+        className: `${style.gridItem} ${style.link}`
+      }, LinkProps), /*#__PURE__*/React.createElement("div", {
+        className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      }, text)) : /*#__PURE__*/React.createElement("div", _extends({
+        className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
+      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Link, {
+        href: secondaryAccountHref,
+        onClick: secondaryAccountClick,
+        className: `${style.gridItem} ${style.link}`
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      }, SecondaryTextProps), secondaryAccountText))) //   </Box>
+      // </Container>
+
+    );
   }
 
 }

package/es/list/SecondaryText/ContactName.js

@@ -39,36 +39,30 @@ export default class ContactName extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      dataId: dataId
-    }, isPaidUser && /*#__PURE__*/React.createElement(Box, {
-      className: style.paidUserIcon,
-      title: paidTitle
-    }, /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.contactNameCnt,
+      "data-id": dataId
+    }, isPaidUser && /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser",
-      iconClass: style.icon
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+      iconClass: style.paidUserIcon,
+      title: paidTitle
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
       title: dataTitle,
       dataId: `${dataId}_link`,
-      className: style.link
+      className: `${style.gridItem} ${style.link}`
     }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
     }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle
-    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
-    })));
+    }));
   }
 
 }
@@ -106,7 +100,8 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  sentimentType: 'positive'
 };
 
 if (false) {

package/es/list/SecondaryText/SecondaryText.module.css

@@ -1,13 +1,3 @@
-.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);
-}
 .icon {
   display: block;
 }
@@ -67,9 +57,6 @@ display: block
 .ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
-.primaryAccountNameCnt {
-  max-width: 100%;
-}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
@@ -105,7 +92,7 @@ display: block
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
 .happinessImg {
-  width: var(--zd_size10);
+  width: var(--zd_size13);
   vertical-align: middle;
 }
 [dir=ltr] .happinessImg {
@@ -134,3 +121,31 @@ display: block
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
+/* Contact Name */
+.contactNameCnt {
+  display: inline-grid;
+  grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
+  align-items: baseline;
+}
+.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/es/list/SecondaryText/docs/ContactName__default.docs.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ContactName from '../ContactName';
+export default class ContactName__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ContactName, {
+      text: "Antro Contact",
+      isPaidUser: true
+    });
+  }
+
+}
+
+if (false) {
+  ContactName__default.docs = {
+    folderName: 'List',
+    componentGroup: 'ContactName'
+  };
+}

package/es/list/SecondryPanel/docs/SecondryPanelDocs.module.css

@@ -0,0 +1,37 @@
+.layoutWrapper {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 10px;
+}
+
+.minilayoutContainer {
+  flex-direction: column;
+}
+.container {
+  background: gray;
+}
+.itemId {
+  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
+}
+.itemInner {
+  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  max-width: var(--zd_size240);
+  font-size: 13px;
+  padding: 5px;
+  background: #fafafa;
+}
+.itemText {
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.itemDot {
+  display: inline-block;
+  vertical-align: middle;
+  width: 3px;
+  height: 3px;
+  background-color: red;
+  border-radius: 50%;
+  margin: 0 10px;
+}

package/es/list/SecondryPanel/docs/SecondryPanel__default.docs.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SecondryPanel, { SecondryPanelUL, SecondryPanelLI } from '../SecondryPanel';
+import style from './SecondryPanelDocs.module.css';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+export default class SecondryPanel__default extends Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 640
+      }])
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(SecondryPanel, {
+        className: style.layoutWrapper
+      }, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: `${uptoTablet ? style.minilayoutContainer : ''}`
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: style.container
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, {
+        className: `${style.itemId}`
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "#12303456789"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "Nicole Hawkins"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "Welcome to Diffchecker"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement(SecondryPanelUL, {
+        className: style.container
+      }, /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "28 Jun 2019"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      }))), /*#__PURE__*/React.createElement(SecondryPanelLI, null, /*#__PURE__*/React.createElement("span", {
+        className: style.itemInner
+      }, /*#__PURE__*/React.createElement("span", {
+        className: style.itemText
+      }, "28 May 2019 07:41 PM"), /*#__PURE__*/React.createElement("span", {
+        className: style.itemDot
+      })))))));
+    });
+  }
+
+}
+
+if (false) {
+  SecondryPanel__default.docs = {
+    folderName: 'List',
+    componentGroup: 'SecondaryLayout'
+  };
+}

package/es/list/SentimentStatus/docs/SentimentStatus__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SentimentStatus from '../SentimentStatus';
+export default class SentimentStatus__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SentimentStatus, null);
+  }
+
+}
+
+if (false) {
+  SentimentStatus__default.docs = {
+    componentGroup: ''
+  };
+}