@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.232

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

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { ContactName, AccountName, DepartmentText, Email, HappinessRating, PhoneNumber, PriorityText, SecondaryText, StatusText, TicketId, Website } from '../index';
+export default class SecondaryText__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const boxStyle = {
+      padding: '10px',
+      border: '2px solid #000',
+      width: '30%',
+      margin: '5px'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      wrap: "wrap",
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "ContactName"), /*#__PURE__*/React.createElement(ContactName, {
+      text: "Antro Contact",
+      isPaidUser: true,
+      sentimentType: "positive"
+    }), /*#__PURE__*/React.createElement(ContactName, {
+      text: "Antro Contact",
+      isPaidUser: true,
+      sentimentType: "negative"
+    }), /*#__PURE__*/React.createElement(ContactName, {
+      text: "Antro Contact",
+      isPaidUser: true,
+      sentimentType: "neutral"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "AccountName"), /*#__PURE__*/React.createElement(AccountName, {
+      text: "Antro Contact ",
+      secondaryAccountText: " secondaryAccountText",
+      fontWeight: "semibold"
+    }), /*#__PURE__*/React.createElement(AccountName, {
+      text: "Antro Contact ",
+      secondaryAccountText: " secondaryAccountText",
+      fontWeight: "bold"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "DepartmentText"), /*#__PURE__*/React.createElement(DepartmentText, {
+      text: "Antro Contact"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "Email"), /*#__PURE__*/React.createElement(Email, {
+      text: "Antro Contact"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "HappinessRating"), /*#__PURE__*/React.createElement(HappinessRating, {
+      text: "100",
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "PhoneNumber"), /*#__PURE__*/React.createElement(PhoneNumber, {
+      text: "1243123434543"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "PriorityText"), /*#__PURE__*/React.createElement(PriorityText, {
+      text: "Antro Contact",
+      color: "red"
+    }), /*#__PURE__*/React.createElement(PriorityText, {
+      text: "Antro Contact",
+      color: "green"
+    }), /*#__PURE__*/React.createElement(PriorityText, {
+      text: "Antro Contact",
+      color: "gray"
+    }), /*#__PURE__*/React.createElement(PriorityText, {
+      text: "Antro Contact",
+      color: "orange"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "SecondaryText"), /*#__PURE__*/React.createElement(SecondaryText, {
+      text: "Antro Contact"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "StatusText"), /*#__PURE__*/React.createElement(StatusText, {
+      text: "Antro Contact",
+      color: "red"
+    }), /*#__PURE__*/React.createElement(StatusText, {
+      text: "Antro Contact",
+      color: "green"
+    }), /*#__PURE__*/React.createElement(StatusText, {
+      text: "Antro Contact",
+      color: "gray"
+    }), /*#__PURE__*/React.createElement(StatusText, {
+      text: "Antro Contact",
+      color: "orange"
+    }), /*#__PURE__*/React.createElement(StatusText, {
+      text: "Antro Contact",
+      color: "black"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "TicketId"), /*#__PURE__*/React.createElement(TicketId, {
+      text: "124213234"
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", null, "Website"), /*#__PURE__*/React.createElement(Website, {
+      text: "https://www.zoho.com/"
+    }))));
+  }
+
+}
+
+if (false) {
+  SecondaryText__default.docs = {
+    folderName: 'List',
+    componentGroup: 'SecondaryText'
+  };
+}

package/es/list/SecondryPanel/SecondryPanel.js

@@ -1,180 +1,121 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 /**** Libraries ****/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 /**** Components ****/
-import { ResponsiveBox, Box } from '@zohodesk/components/lib/Layout';
-import Dot from '../Dot/Dot';
 
+import { Box } from '@zohodesk/components/lib/Layout';
+import Dot from '../Dot/Dot';
+import Container from '@zohodesk/components/lib/Layout/Container';
 /**** CSS ****/
-import style from './SecondryPanel.module.css';
 
-var SecondryPanel = function (_Component) {
-  _inherits(SecondryPanel, _Component);
-
-  function SecondryPanel() {
-    _classCallCheck(this, SecondryPanel);
-
-    return _possibleConstructorReturn(this, (SecondryPanel.__proto__ || _Object$getPrototypeOf(SecondryPanel)).apply(this, arguments));
+import style from './SecondryPanel.module.css';
+export default class SecondryPanel extends Component {
+  render() {
+    let {
+      children,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, children);
   }
 
-  _createClass(SecondryPanel, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          className = _props.className;
-
-      return React.createElement(
-        'div',
-        { className: className ? className : '' },
-        children
-      );
-    }
-  }]);
-
-  return SecondryPanel;
-}(Component);
-
-export default SecondryPanel;
-
+}
 SecondryPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string
 };
-
-export var SecondryPanelUL = function (_Component2) {
-  _inherits(SecondryPanelUL, _Component2);
-
-  function SecondryPanelUL() {
-    _classCallCheck(this, SecondryPanelUL);
-
-    return _possibleConstructorReturn(this, (SecondryPanelUL.__proto__ || _Object$getPrototypeOf(SecondryPanelUL)).apply(this, arguments));
+SecondryPanel.defaultProps = {
+  className: ''
+};
+export class SecondryPanelUL extends Component {
+  render() {
+    let {
+      children,
+      className,
+      dataId,
+      align
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
+      alignBox: "row",
+      align: align,
+      className: `${style.listItemContainer} ${className}`,
+      dataId: dataId
+    }, children);
   }
 
-  _createClass(SecondryPanelUL, [{
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          children = _props2.children,
-          className = _props2.className,
-          dataId = _props2.dataId;
-
-      return React.createElement(
-        'div',
-        {
-          className: style.listItemContainer + ' ' + (className ? className : ''),
-          'data-id': dataId
-        },
-        children
-      );
-    }
-  }]);
-
-  return SecondryPanelUL;
-}(Component);
+}
 SecondryPanelUL.propTypes = {
+  align: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string
 };
-
-export var SecondryPanelLI = function (_Component3) {
-  _inherits(SecondryPanelLI, _Component3);
-
-  function SecondryPanelLI() {
-    _classCallCheck(this, SecondryPanelLI);
-
-    return _possibleConstructorReturn(this, (SecondryPanelLI.__proto__ || _Object$getPrototypeOf(SecondryPanelLI)).apply(this, arguments));
+SecondryPanelUL.defaultProps = {
+  className: '',
+  align: 'baseline'
+};
+export class SecondryPanelLI extends Component {
+  render() {
+    let {
+      children,
+      className,
+      isShrink,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      dataId: dataId // eslint-disable-next-line react/forbid-component-props
+      ,
+      className: className,
+      adjust: true,
+      shrink: isShrink ? true : false
+    }, children);
   }
 
-  _createClass(SecondryPanelLI, [{
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          children = _props3.children,
-          className = _props3.className,
-          isHiddenSizes = _props3.isHiddenSizes,
-          isShrink = _props3.isShrink;
-
-      return React.createElement(
-        Box,
-        {
-          flexible: true
-          // eslint-disable-next-line react/forbid-component-props
-          , className: '' + (className ? className : ''),
-          adjust: true,
-          shrink: isShrink ? true : false,
-          isHiddenSizes: isHiddenSizes
-        },
-        children
-      );
-    }
-  }]);
-
-  return SecondryPanelLI;
-}(Component);
+}
 SecondryPanelLI.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  isHiddenSizes: PropTypes.array,
+  dataId: PropTypes.string,
   isShrink: PropTypes.bool
 };
 SecondryPanelLI.defaultProps = {
-  isShrink: true
+  isShrink: true,
+  className: ''
 };
-
-export var SecondryPanelItem = function (_Component4) {
-  _inherits(SecondryPanelItem, _Component4);
-
-  function SecondryPanelItem() {
-    _classCallCheck(this, SecondryPanelItem);
-
-    return _possibleConstructorReturn(this, (SecondryPanelItem.__proto__ || _Object$getPrototypeOf(SecondryPanelItem)).apply(this, arguments));
+export class SecondryPanelItem extends Component {
+  render() {
+    let {
+      children,
+      className,
+      dotClass,
+      isDot,
+      flex,
+      clipped,
+      dotSpacingType,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      align: "baseline",
+      isInline: flex ? false : true,
+      className: className,
+      "data-title": title,
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: clipped,
+      className: `${clipped ? style.dottedStyle : ''}`
+    }, children), isDot ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dot // eslint-disable-next-line react/forbid-component-props
+    , {
+      className: `${dotClass ? dotClass : ''}`,
+      spacingType: dotSpacingType
+    })) : null);
   }
 
-  _createClass(SecondryPanelItem, [{
-    key: 'render',
-    value: function render() {
-      var _props4 = this.props,
-          children = _props4.children,
-          className = _props4.className,
-          dotClass = _props4.dotClass,
-          isDot = _props4.isDot,
-          flex = _props4.flex,
-          clipped = _props4.clipped,
-          dotSpacingType = _props4.dotSpacingType;
-
-      return React.createElement(
-        'div',
-        {
-          className: (clipped ? style.dottedStyle : '') + ' ' + (flex ? style.panelListItemFlex : style.panelListItem) + ' ' + (className ? className : '')
-        },
-        React.createElement(
-          Box,
-          { flexible: true },
-          children
-        ),
-        isDot ? React.createElement(
-          Box,
-          null,
-          React.createElement(Dot
-          // eslint-disable-next-line react/forbid-component-props
-          , { className: style.dot + ' ' + (dotClass ? dotClass : ''),
-            spacingType: dotSpacingType
-          })
-        ) : null
-      );
-    }
-  }]);
-
-  return SecondryPanelItem;
-}(Component);
+}
 SecondryPanelItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -182,14 +123,17 @@ SecondryPanelItem.propTypes = {
   dotClass: PropTypes.string,
   dotSpacingType: PropTypes.oneOf(['minimalList', 'list']),
   flex: PropTypes.bool,
-  isDot: PropTypes.bool
+  isDot: PropTypes.bool,
+  title: PropTypes.string
 };
 SecondryPanelItem.defaultProps = {
   clipped: true,
   dotSpacingType: 'list',
   flex: true,
-  isDot: true
+  isDot: true,
+  className: ''
 };
+
 if (false) {
   SecondryPanel.docs = {
     folderName: 'List',

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

@@ -1,27 +1,6 @@
 .listItemContainer {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  align-items: baseline;
-  max-width: 100%;
-}
-.panelListItem {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItem,
-.panelListItemFlex {
-  align-items: baseline;
   max-width: 100%;
 }
 .dottedStyle {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemFlex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemBox {
-  composes: flexgrow from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexbasis from '~@zohodesk/components/lib/common/common.module.css';
-}
-.dot {
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-}
+}

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

@@ -3,29 +3,25 @@
   margin-bottom: 20px;
   padding: 10px;
 }
-@media only screen and (max-width: 500px) {
-  .layoutContainer {
-    flex-direction: column;
-  }
+
+.minilayoutContainer {
+  flex-direction: column;
 }
 .container {
   background: gray;
 }
 .itemId {
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
+  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
 }
 .itemInner {
-  composes: dflex from "~@zohodesk/components/lib/common/common.module.css";
-  composes: alignVertical from "~@zohodesk/components/lib/common/common.module.css";
-  max-width: 15rem;
+  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 from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexbasis from "~@zohodesk/components/lib/common/common.module.css";
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

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

@@ -1,127 +1,77 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import SecondryPanel, { SecondryPanelUL, SecondryPanelLI } from '../SecondryPanel';
-
 import style from './SecondryPanelDocs.module.css';
-
-var SecondryPanel__default = function (_Component) {
-  _inherits(SecondryPanel__default, _Component);
-
-  function SecondryPanel__default(props) {
-    _classCallCheck(this, SecondryPanel__default);
-
-    return _possibleConstructorReturn(this, (SecondryPanel__default.__proto__ || _Object$getPrototypeOf(SecondryPanel__default)).call(this, props));
+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);
   }
 
-  _createClass(SecondryPanel__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        SecondryPanel,
-        { className: style.layoutWrapper },
-        React.createElement(
-          SecondryPanelUL,
-          { className: style.layoutContainer },
-          React.createElement(
-            SecondryPanelLI,
-            null,
-            React.createElement(
-              SecondryPanelUL,
-              { className: style.container },
-              React.createElement(
-                SecondryPanelLI,
-                { className: '' + style.itemId },
-                React.createElement(
-                  'span',
-                  { className: style.itemInner },
-                  React.createElement(
-                    'span',
-                    { className: style.itemText },
-                    '#12303456789'
-                  ),
-                  React.createElement('span', { className: style.itemDot })
-                )
-              ),
-              React.createElement(
-                SecondryPanelLI,
-                null,
-                React.createElement(
-                  'span',
-                  { className: style.itemInner },
-                  React.createElement(
-                    'span',
-                    { className: style.itemText },
-                    'Nicole Hawkins'
-                  ),
-                  React.createElement('span', { className: style.itemDot })
-                )
-              ),
-              React.createElement(
-                SecondryPanelLI,
-                null,
-                React.createElement(
-                  'span',
-                  { className: style.itemInner },
-                  React.createElement(
-                    'span',
-                    { className: style.itemText },
-                    'Welcome to Diffchecker'
-                  ),
-                  React.createElement('span', { className: style.itemDot })
-                )
-              )
-            )
-          ),
-          React.createElement(
-            SecondryPanelLI,
-            null,
-            React.createElement(
-              SecondryPanelUL,
-              { className: style.container },
-              React.createElement(
-                SecondryPanelLI,
-                null,
-                React.createElement(
-                  'span',
-                  { className: style.itemInner },
-                  React.createElement(
-                    'span',
-                    { className: style.itemText },
-                    '28 Jun 2019'
-                  ),
-                  React.createElement('span', { className: style.itemDot })
-                )
-              ),
-              React.createElement(
-                SecondryPanelLI,
-                null,
-                React.createElement(
-                  'span',
-                  { className: style.itemInner },
-                  React.createElement(
-                    'span',
-                    { className: style.itemText },
-                    '28 May 2019 07:41 PM'
-                  ),
-                  React.createElement('span', { className: style.itemDot })
-                )
-              )
-            )
-          )
-        )
-      );
-    }
-  }]);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 640
+      }])
+    };
+  }
 
-  return SecondryPanel__default;
-}(Component);
+  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
+      })))))));
+    });
+  }
 
-export default SecondryPanel__default;
+}
 
 if (false) {
   SecondryPanel__default.docs = {