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

package/es/form/fields/SelectField/docs/SelectField__default.docs.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SelectField from '../SelectField';
+export default class SelectField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'None',
+      id: '1'
+    }, {
+      text: 'Low',
+      id: '2'
+    }, {
+      text: 'Medium',
+      id: '3'
+    }, {
+      text: 'High',
+      id: '4'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SelectField, {
+      labelName: "Priority",
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  SelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TagsMultiSelect/docs/TagsMultiSelect__default.docs.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import TagsMultiSelect from '../TagsMultiSelect';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TagsMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopupOpen: false
+    };
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.getCustomChildren = this.getCustomChildren.bind(this);
+  }
+
+  handleTogglePopup() {
+    this.setState({
+      isPopupOpen: !this.state.isPopupOpen
+    });
+  }
+
+  getCustomChildren() {
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    });
+  }
+
+  render() {
+    let {
+      isPopupOpen
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(TagsMultiSelect, {
+      addTag: () => {},
+      closeSearch: () => {},
+      deleteTag: () => {},
+      handleChange: () => {},
+      handleKeyUp: () => {},
+      isReadOnly: false,
+      name: "",
+      noMoreData: true,
+      searchList: [],
+      searchTags: () => {},
+      selectSearchIndex: "-1",
+      tagsList: [{
+        name: 'Tag1',
+        tagType: 'MANUAL',
+        id: '5853000007033049'
+      }, {
+        name: 'Tag2',
+        tagType: 'MANUAL',
+        id: '5853000007033069'
+      }],
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupOpen,
+      i18nKeys: {
+        newTagText: 'New Tag',
+        emptyTitleText: 'OOPS',
+        emptyDescription: 'No tag available',
+        deleteText: 'Delete tag',
+        lessText: 'Less',
+        moreText: 'More'
+      },
+      getTextBoxChildren: this.getCustomChildren
+    }));
+  }
+
+}
+
+if (false) {
+  TagsMultiSelect__default.docs = {
+    componentGroup: 'TagsMultiSelect'
+  };
+}

package/es/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import TagsMultiSelectField from '../TagsMultiSelectField';
+import Icon from '@zohodesk/icons/lib/Icon';
+
+const TagsMultiSelectField__default = () => {
+  let value = [{
+    name: 'Tag1',
+    tagType: 'MANUAL',
+    id: '5853000007033049'
+  }, {
+    name: 'Tag2',
+    tagType: 'MANUAL',
+    id: '5853000007033069'
+  }, {
+    name: 'Tag3',
+    tagType: 'MANUAL',
+    id: '5853000007033080'
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '20px 20px 0'
+    }
+  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
+    ePhiData: {
+      ePhiTitle: 'ehhweh',
+      ePhiText: 'ephi',
+      ePhiStatus: true
+    },
+    fieldProperties: {
+      id: 'tag',
+      name: 'tag',
+      labelName: 'Tags MultiSelect',
+      isReadOnly: false,
+      isDisabled: false,
+      value,
+      options: [],
+      selectedValueCount: '10'
+    },
+    styleProperties: {
+      labelPalette: 'secondary'
+    },
+    i18nKeys: {
+      newTagText: 'New Tag',
+      emptyTitleText: 'OOPS',
+      emptyDescription: 'No tag available',
+      deleteText: 'Delete tag',
+      lessText: 'Less',
+      moreText: 'More'
+    },
+    actions: {
+      onAdd: (tag, event) => {
+        console.log('Add Event=====', tag);
+      },
+      onDelete: (tag, event) => {
+        console.log('Delete Event=====', tag);
+      },
+      onChange: searchValue => {
+        console.log('Value Change Event------>>', searchValue);
+      },
+      onScroll: () => {}
+    },
+    isNewNeeded: true,
+    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '13px',
+      marginLeft: '5px',
+      color: 'var(--dot_shuttleGrey)'
+    }
+  }, "shift+t")));
+};
+
+export default TagsMultiSelectField__default;
+
+if (false) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextBoxField from '../TextBoxField';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TextBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px 0 10px',
+        fontFamily: 'var(--zd_semibold)'
+      }
+    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import TextEditorField from '../TextEditorField';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default class TextEditorField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.handleEditorStyleOptions = this.handleEditorStyleOptions.bind(this);
+  }
+
+  handleEditorStyleOptions(ZohoDeskEditor_Init, hookToOrganize) {
+    ZohoDeskEditor_Init.toolbarOrder = [['bold', 'Bold (Ctrl+B)', '#KBEditortools_txtbold', 'KBEditortools-txtbold'], ['italic', 'Italic (Ctrl+I)', '#KBEditortools_txtitalic', 'KBEditortools-txtitalic'], ['underline', 'Underline (Ctrl+U)', '#KBEditortools_txtunderline', 'KBEditortools-txtunderline']];
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextEditorField, {
+      needEditor: false,
+      labelName: "TextArea"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: {
+        fontSize: '12px',
+        color: 'var(--dot_primary)',
+        textAlign: 'right'
+      }
+    }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {
+      id: "editor",
+      labelName: "TextEditor",
+      EDITORURL: "https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js",
+      initCallback: this.handleEditorStyleOptions,
+      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    }));
+  }
+
+}
+
+if (false) {
+  TextEditorField__default.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/es/form/fields/TextareaField/docs/TextareaField__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextareaField from '../TextareaField';
+export default class TextareaField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(TextareaField, {
+      labelName: "Textarea",
+      onChange: () => {},
+      textBoxSize: "xsmall",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  TextareaField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/ValidationMessage/docs/ValidationMessage__default.docs.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import ValidationMessage from '../ValidationMessage';
+export default class ValidationMessage__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "default",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "primary",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "secondary",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "danger",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "mandatory",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "dark",
+      size: "small",
+      type: "secondary"
+    }), /*#__PURE__*/React.createElement(ValidationMessage, {
+      text: "validation",
+      palette: "disable",
+      size: "small",
+      type: "secondary",
+      tooltip: "Information"
+    }));
+  }
+
+}
+
+if (false) {
+  ValidationMessage__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'Style Guide'
+  };
+}

package/es/form/layout/Field/docs/Field__default.docs.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Field from '../Field';
+export default class Field__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Field, {
+      column: "two",
+      rowBreak: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, "Chidren"));
+  }
+
+}
+
+if (false) {
+  Field__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

package/es/form/layout/Section/docs/Section__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Section from '../Section';
+export default class Section__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Section, {
+      title: "SectionTitle"
+    }, /*#__PURE__*/React.createElement("div", null, "Section children"));
+  }
+
+}
+
+if (false) {
+  Section__default.docs = {
+    componentGroup: 'ModuleAddForm'
+  };
+}

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