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

package/es/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
+import FormAction from '../../../FormAction/FormAction';
+export default class SetupDetailLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SetupDetailLayout, {
+      getHelpInfo: () => {},
+      needHelpInfo: true
+    }, /*#__PURE__*/React.createElement(SetupHeader, {
+      title: "Setup",
+      getLeftPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupLeft"),
+      getRightPlaceHolder: () => /*#__PURE__*/React.createElement("p", null, "setupRight")
+    }), /*#__PURE__*/React.createElement(SetupContent, null, /*#__PURE__*/React.createElement("span", null, "Content")), /*#__PURE__*/React.createElement(SetupFooter, null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement("p", null, "Footer"))));
+  }
+
+}
+
+if (false) {
+  SetupDetailLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,146 +1,146 @@
-.varClass {
-  --borderColor: var(--zdt_subtablayout_border);
-}
-.tabHead,
-.shadowStyle {
-  position: relative;
-  composes: varClass;
-}
-.tabHead, .shadowStyle {
-  background: var(--zdt_subtablayout_tabhead_bg);
-}
-
-[dir=ltr] .left {
-  margin-right: var(--zd_size15);
-}
-
-[dir=rtl] .left {
-  margin-left: var(--zd_size15);
-}
-
-.plusIconLine {
-  position: relative;
-  z-index: 2;
-}
-
-.plusIconLine::before {
-  position: absolute;
-  content: '';
-  width: var(--zd_size1);
-  height: var(--zd_size28);
-  top: var(--zd_size38);
-  z-index: -1;
-  background: var(--zdt_subtablayout_plusicon_bg);
-}
-
-[dir=ltr] .plusIconLine::before {
-  left: var(--zd_size20);
-}
-
-[dir=rtl] .plusIconLine::before {
-  right: var(--zd_size20);
-}
-
-.primary_borderStyle, .secondary_borderStyle {
-  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
-}
-.tertiary_borderStyle {
-  border-bottom: 1px solid var(--borderColor);
-}
-
-.shadowStyle::before {
-  bottom: 0;
-  content: '';
-  position: absolute;
-  top: var(--zd_size20);
-  z-index: -1;
-  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
-  border-radius: 100px/10px;
-}
-
-[dir=ltr] .shadowStyle::before {
-  left: var(--zd_size50);
-  right: var(--zd_size50);
-}
-
-[dir=rtl] .shadowStyle::before {
-  right: var(--zd_size50);
-  left: var(--zd_size50);
-}
-
-.aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.title {
-  color: var(--zdt_subtablayout_title_text);
-  font-size: var(--zd_font_size15);
-}
-
-.label {
-  font-size: var(--zd_font_size12);
-  color: var(--zdt_subtablayout_label_text);
-}
-
-.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
-  padding-top: var(--zd_size27);
-  padding-bottom: var(--zd_size26);
-}
-
-[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-left: var(--zd_size25);
-}
-
-[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .primary, [dir=ltr] .primary_peek {
-  padding-right: var(--zd_size25);
-}
-[dir=rtl] .primary, [dir=rtl] .primary_peek {
-  padding-left: var(--zd_size25);
-}
-[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
-  padding-right: var(--zd_size115);
-}
-[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
-  padding-left: var(--zd_size115);
-}
-[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
-  padding-right: var(--zd_size25);
-}
-[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
-  padding-left: var(--zd_size25);
-}
-[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-right: var(--zd_size115);
-}
-[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-left: var(--zd_size115);
-}
-.tertiary,
-.tertiary_peek {
-  height: var(--zd_size50);
-}
-.tertiary, .tertiary_detailFooter {
-  padding: 0 var(--zd_size65);
-}
-.tertiary_peek, .tertiary_peekFooter {
-  padding: 0 var(--zd_size42);
-}
-.cursor {
-  cursor: pointer;
-}
-.footer {
-  composes: varClass;
-  border-top: 1px solid var(--borderColor);
-}
-.medium {
-  height: var(--zd_size40);
-}
-.large {
-  height: var(--zd_size45);
-}
-.xlarge {
-  height: var(--zd_size50);
-}
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
+.tabHead,
+.shadowStyle {
+  position: relative;
+  composes: varClass;
+}
+.tabHead, .shadowStyle {
+  background: var(--zdt_subtablayout_tabhead_bg);
+}
+
+[dir=ltr] .left {
+  margin-right: var(--zd_size15);
+}
+
+[dir=rtl] .left {
+  margin-left: var(--zd_size15);
+}
+
+.plusIconLine {
+  position: relative;
+  z-index: 2;
+}
+
+.plusIconLine::before {
+  position: absolute;
+  content: '';
+  width: var(--zd_size1);
+  height: var(--zd_size28);
+  top: var(--zd_size38);
+  z-index: -1;
+  background: var(--zdt_subtablayout_plusicon_bg);
+}
+
+[dir=ltr] .plusIconLine::before {
+  left: var(--zd_size20);
+}
+
+[dir=rtl] .plusIconLine::before {
+  right: var(--zd_size20);
+}
+
+.primary_borderStyle, .secondary_borderStyle {
+  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
+}
+.tertiary_borderStyle {
+  border-bottom: 1px solid var(--borderColor);
+}
+
+.shadowStyle::before {
+  bottom: 0;
+  content: '';
+  position: absolute;
+  top: var(--zd_size20);
+  z-index: -1;
+  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
+  border-radius: 100px/10px;
+}
+
+[dir=ltr] .shadowStyle::before {
+  left: var(--zd_size50);
+  right: var(--zd_size50);
+}
+
+[dir=rtl] .shadowStyle::before {
+  right: var(--zd_size50);
+  left: var(--zd_size50);
+}
+
+.aside {
+  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.title {
+  color: var(--zdt_subtablayout_title_text);
+  font-size: var(--zd_font_size15);
+}
+
+.label {
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_subtablayout_label_text);
+}
+
+.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
+  padding-top: var(--zd_size27);
+  padding-bottom: var(--zd_size26);
+}
+
+[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-left: var(--zd_size25);
+}
+
+[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .primary, [dir=ltr] .primary_peek {
+  padding-right: var(--zd_size25);
+}
+[dir=rtl] .primary, [dir=rtl] .primary_peek {
+  padding-left: var(--zd_size25);
+}
+[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
+  padding-right: var(--zd_size115);
+}
+[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
+  padding-left: var(--zd_size115);
+}
+[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
+  padding-right: var(--zd_size25);
+}
+[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
+  padding-left: var(--zd_size25);
+}
+[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-right: var(--zd_size115);
+}
+[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-left: var(--zd_size115);
+}
+.tertiary,
+.tertiary_peek {
+  height: var(--zd_size50);
+}
+.tertiary, .tertiary_detailFooter {
+  padding: 0 var(--zd_size65);
+}
+.tertiary_peek, .tertiary_peekFooter {
+  padding: 0 var(--zd_size42);
+}
+.cursor {
+  cursor: pointer;
+}
+.footer {
+  composes: varClass;
+  border-top: 1px solid var(--borderColor);
+}
+.medium {
+  height: var(--zd_size40);
+}
+.large {
+  height: var(--zd_size45);
+}
+.xlarge {
+  height: var(--zd_size50);
+}

package/es/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
+export default class SubtabLayout__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      needBorder: true,
+      needShadow: false
+    };
+    this.onScroll = this.onScroll.bind(this);
+    this.interval = null;
+  }
+
+  onScroll() {
+    this.setState({
+      needBorder: true,
+      needShadow: true
+    });
+    this.interval = null;
+    let intern = setTimeout(() => {
+      clearInterval(this.interval);
+      this.setState({
+        needBorder: true,
+        needShadow: false
+      });
+    }, 500);
+    this.interval = intern;
+  }
+
+  render() {
+    let boxStyle = {
+      padding: 'var(--zd_size21)'
+    };
+    let {
+      needShadow,
+      needBorder
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100vh',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(SubtabLayout, null, /*#__PURE__*/React.createElement(SubtabHeader, {
+      needShadow: needShadow,
+      needBorder: needBorder
+    }), /*#__PURE__*/React.createElement(SubtabContent, null, /*#__PURE__*/React.createElement("div", {
+      onScroll: this.onScroll,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 1"), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, "box 2"))), /*#__PURE__*/React.createElement(SubtabFooter, null, "Footer")));
+  }
+
+}
+
+if (false) {
+  SubtabLayout__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/list/AvatarFlip/AvatarFlip.module.css

@@ -1,3 +1,3 @@
-.iconStyle {
-  color: var(--zdt_avatarflip_default_text);
-}
+.iconStyle {
+  color: var(--zdt_avatarflip_default_text);
+}

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/BluePrintStatus.module.css

@@ -1,17 +1,17 @@
-.container {
-  display: inherit;
-}[dir=ltr] .container {
-  padding-right: var(--zd_size5);
-}[dir=rtl] .container {
-  padding-left: var(--zd_size5);
-}
-/* .danger {
-  color: var(--dot_brightRed);
-}
-.default {
-  color: var(--dot_shuttleGrey);
-} */
-.iconStyle {
-  display: block;
-  font-size: var(--zd_font_size10);
-}
+.container {
+  display: inherit;
+}[dir=ltr] .container {
+  padding-right: var(--zd_size5);
+}[dir=rtl] .container {
+  padding-left: var(--zd_size5);
+}
+/* .danger {
+  color: var(--dot_brightRed);
+}
+.default {
+  color: var(--dot_shuttleGrey);
+} */
+.iconStyle {
+  display: block;
+  font-size: var(--zd_font_size10);
+}

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/Comment.module.css

@@ -1,29 +1,29 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1);
-  font-size: var(--zd_font_size9);
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100%;
-}
-[dir=rtl] .count {
-  right: 100%;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13);
-}
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
+.container {
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
+  position: relative;
+  color: var(--icon_color);
+  padding: 0 var(--zd_size2);
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
+.count {
+  position: absolute;
+  top: var(--zd_size1);
+  font-size: var(--zd_font_size9);
+  text-align: center;
+}
+[dir=ltr] .count {
+  left: 100%;
+}
+[dir=rtl] .count {
+  right: 100%;
+}
+.commentIcon {
+  font-size: var(--zd_font_size13);
+}

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/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,9 +1,9 @@
-.departmentBox {
-  max-width: 100%;
-}
-.departmentBox :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_text);
-}
-.departmentBox:hover :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_hover_text);
-}
+.departmentBox {
+  max-width: 100%;
+}
+.departmentBox :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_text);
+}
+.departmentBox:hover :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_hover_text);
+}

package/es/list/Dot/Dot.module.css

@@ -1,15 +1,15 @@
-.varClass {
-  --dotColor: var(--zdt_dot_text)
-}
-.dot {
-  composes: varClass;
-  font-size: var(--zd_font_size16);
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size6);
-}
-.minimalList {
-  margin: 0 var(--zd_size6);
-}
+.varClass {
+  --dotColor: var(--zdt_dot_text)
+}
+.dot {
+  composes: varClass;
+  font-size: var(--zd_font_size16);
+  color: var(--dotColor);
+  transform: perspective(1px);
+}
+.list {
+  margin: 0 var(--zd_size6);
+}
+.minimalList {
+  margin: 0 var(--zd_size6);
+}