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

package/es/lookup/header/TicketHeader/docs/TicketHeader__default.docs.js

@@ -0,0 +1,83 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Componets ***/
+
+import TicketHeader from '../TicketHeader';
+export default class TicketHeader__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchStr: '',
+      selectedViewId: '1'
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleSelectView = this.handleSelectView.bind(this);
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchStr: value
+    });
+  }
+
+  handleSelectView(value) {
+    this.setState({
+      selectedViewId: value
+    });
+  }
+
+  render() {
+    let {
+      searchStr,
+      selectedViewId
+    } = this.state;
+    let allViews = [{
+      displayLabel: 'All Tickets',
+      id: '1'
+    }, {
+      displayLabel: 'Tickets for review',
+      id: '2'
+    }, {
+      displayLabel: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      displayLabel: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      displayLabel: 'Spam Tickets',
+      id: '5'
+    }, {
+      displayLabel: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      displayLabel: 'Overdue Tickets',
+      id: '7'
+    }, {
+      displayLabel: 'My Tickets',
+      id: '8'
+    }, {
+      displayLabel: 'My Open Tickets',
+      id: '9'
+    }, {
+      displayLabel: 'My Overdue Tickets',
+      id: '10'
+    }];
+    return /*#__PURE__*/React.createElement(TicketHeader, {
+      title: "Select Ticket",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      selectedViewId: selectedViewId,
+      onSelectView: this.handleSelectView,
+      allViews: allViews
+    });
+  }
+
+}
+
+if (false) {
+  TicketHeader__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/Title/docs/Title__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Title from '../Title';
+export default class Title__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Title, {
+      text: "Select Product"
+    });
+  }
+
+}
+
+if (false) {
+  Title__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/header/ViewDropDown/docs/ViewDropDown__default.docs.js

@@ -0,0 +1,75 @@
+/**** Libraries ****/
+import React from 'react';
+/**** Components ****/
+
+import ViewDropDown from '../ViewDropDown';
+export default class ViewDropDown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '1'
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'All Tickets',
+      id: '1'
+    }, {
+      text: 'Tickets for review',
+      id: '2'
+    }, {
+      text: 'Customer Responded Tickets',
+      id: '3'
+    }, {
+      text: 'Unassigned Open Tickets',
+      id: '4'
+    }, {
+      text: 'Spam Tickets',
+      id: '5'
+    }, {
+      text: 'SLA Violated Tickets',
+      id: '6'
+    }, {
+      text: 'Overdue Tickets',
+      id: '7'
+    }, {
+      text: 'My Tickets',
+      id: '8'
+    }, {
+      text: 'My Open Tickets',
+      id: '9'
+    }, {
+      text: 'My Overdue Tickets',
+      id: '10'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(ViewDropDown, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found"
+    }));
+  }
+
+}
+
+if (false) {
+  ViewDropDown__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/setup/header/Button/docs/Button__default.docs.js

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

package/es/setup/header/Link/docs/Link__default.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Link, {
+      text: "View Page",
+      url: "https://zoho.com"
+    });
+  }
+
+}
+
+if (false) {
+  Link__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Search/docs/Search__default.docs.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Search from '../Search';
+export default class Search__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '200px',
+        margin: '50px'
+      }
+    }, /*#__PURE__*/React.createElement(Search, {
+      value: this.state.value,
+      placeHolder: "Search",
+      onChange: value => {
+        this.setState({
+          value: value
+        });
+      },
+      onBlur: () => {
+        this.setState({
+          value: ''
+        });
+      }
+    }));
+  }
+
+}
+
+if (false) {
+  Search__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/header/Views/docs/Views__default.docs.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Views from '../Views';
+export default class Views__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        'margin': '50px'
+      }
+    }, /*#__PURE__*/React.createElement(Views, null));
+  }
+
+}
+
+if (false) {
+  Views__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/Description/docs/Description__default.docs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Description from '../Description';
+export default class Description__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '1.25rem'
+      }
+    }, /*#__PURE__*/React.createElement(Description, {
+      text: "Create templates to customize email notifications and ticket details according to your specific needs. You can use email templates while replying to ticket, sending notification e-mails and for alerts associated with workflows, SLAs & escalations. These templates are specific to each module. Using ticket templates, you can automatically populate some pre-defined values into some ticket fields while adding new ticket. It saves you a lot of time and effort each time."
+    }));
+  }
+
+}
+
+if (false) {
+  Description__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/Link/docs/Link__default.docs.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '2rem'
+      }
+    }, /*#__PURE__*/React.createElement(Link, {
+      url: 'https://help.zoho.com/portal/kb/articles/creating-and-managing-email-templates',
+      text: "All you need to know about email templates "
+    }));
+  }
+
+}
+
+if (false) {
+  Link__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/ListGroup/docs/ListGroup__default.docs.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListGroup from '../ListGroup';
+export default class ListGroup__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '1.125rem'
+      }
+    }, /*#__PURE__*/React.createElement(ListGroup, {
+      data: ['Receive automated bot notifications about ticket due-times, status updates, and comments', 'Receive automated bot notifications about ticket due-times, status updates, and comments'],
+      unOrderData: ['Receive automated bot notifications about ticket due-times, status updates, and comments.', 'Receive automated bot notifications about ticket due-times, status updates, and comments.']
+    }), /*#__PURE__*/React.createElement(ListGroup, {
+      isOrder: true,
+      data: ['Receive automated bot notifications about ticket due-times, status updates, and comments', 'Receive automated bot notifications about ticket due-times, status updates, and comments']
+    }));
+  }
+
+}
+
+if (false) {
+  ListGroup__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/helptips/Title/docs/Title__default.docs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Title from '../Title';
+export default class Title__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '1.25rem'
+      }
+    }, /*#__PURE__*/React.createElement(Title, {
+      text: "Zoho Desk"
+    }));
+  }
+
+}
+
+if (false) {
+  Title__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/es/setup/table/Table/docs/Table__default.docs.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import Table from '../Table';
+import TableHead from '../../TableHead/TableHead';
+import TableData from '../../TableData/TableData';
+import TableBody from '../../TableBody/TableBody';
+import TableRow from '../../TableRow/TableRow';
+import Text from '../../Text/Text';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import hoverCss from '../../TableData/Tablehover.module.css';
+export default class Table__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.over = this.over.bind(this);
+    this.out = this.out.bind(this);
+  }
+
+  over() {
+    console.log('over');
+  }
+
+  out() {
+    console.log('out');
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header3"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header4"
+    }))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, {
+      onMouseEnter: this.over,
+      onMouseLeave: this.out
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: `Not Verified - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Verify`,
+      type: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        'margin-left': '4px'
+      },
+      text: "-"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, {
+      className: `${hoverCss.container}`
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "verified"
+    })), /*#__PURE__*/React.createElement(Box, {
+      shrink: "true",
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: hoverCss.opac0,
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Details`,
+      palette: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    })))));
+  }
+
+}
+
+if (false) {
+  Table__default.docs = {
+    componentGroup: 'Table',
+    folderName: 'Setup'
+  };
+}

package/es/setup/table/Text/docs/Text__default.docs.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Text from '../Text';
+export default class Text__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "Default Text"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "bold",
+      type: "bold",
+      url: "#",
+      palette: "primary"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "semiBold",
+      type: "semiBold",
+      palette: "primary",
+      url: "#"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "link Regular",
+      palette: "primary",
+      url: "#"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "Medium Text",
+      size: "medium",
+      onClick: "dummy()"
+    })));
+  }
+
+}
+
+if (false) {
+  Text__default.docs = {
+    componentGroup: 'Text',
+    folderName: 'Setup'
+  };
+}

package/es/svg/docs/SVG__default.docs.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PlusIcon from '../PlusIcon';
+import SnippetIcon from '../SnippetIcon';
+import TemplateIcon from '../TemplateIcon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class SVG__default extends React.Component {
+  render() {
+    let boxStyle = {
+      minWidth: '15%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px'
+    };
+    let textStyle = {
+      textAlign: 'center',
+      padding: '10px 0',
+      background: ' #f9f9f9',
+      marginTop: '10px',
+      color: '#000'
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(PlusIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "PlusIcon")), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(SnippetIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "SnippetIcon")), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(TemplateIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "TemplateIcon"))));
+  }
+
+}
+
+if (false) {
+  SVG__default.docs = {
+    componentGroup: 'SVG'
+  };
+}