@zohodesk/dot 1.0.0-beta.226 → 1.0.0-beta.227

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/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: ''
+  };
+}

package/es/list/Subject/docs/Subject__default.docs.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Subject from '../Subject';
+export default class Subject__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "Font Variant"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius",
+      fontWeight: "semibold"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Subject, {
+      text: "MacBook Pro - A touch of genius",
+      fontWeight: "bold"
+    })));
+  }
+
+}
+
+if (false) {
+  Subject__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Subject'
+  };
+}

package/es/list/TagNew/docs/TagNew__default.docs.js

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

package/es/list/Thread/docs/Thread__default.docs.js

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

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import UserTime from '../UserTime';
+export default class UserTime__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "closedTime",
+      format: _ref => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "overdue",
+      iconColor: "red",
+      format: _ref2 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref2;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "createdtime",
+      iconColor: "green",
+      format: _ref3 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref3;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "completedTask",
+      format: _ref4 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref4;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "dueTime",
+      iconColor: "orange",
+      format: _ref5 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref5;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })));
+  }
+
+}
+
+if (false) {
+  UserTime__default.docs = {
+    folderName: 'List',
+    componentGroup: 'UserTime'
+  };
+}