@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -1,435 +0,0 @@
-import React from 'react';
-import RippleEffect from '../RippleEffect';
-export default class RippleEffect__default extends React.Component {
-  render() {
-    let style = {
-      margin: '20px 20px 0'
-    },
-        boxStyle = {
-      border: '1px solid #e3e6eb',
-      padding: '15px 20px 25px',
-      marginBottom: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      paddingBottom: '25px',
-      textTransform: 'upperCase'
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      style: boxStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Hover Default"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, null, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer'
-      }
-    }, "Default"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primary"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_hover_text)'
-      }
-    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryLight"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryFilled"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_secondary_text)'
-      }
-    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "green"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
-      }
-    }, "Green"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "danger"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
-      }
-    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
-      style: boxStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Hover Border"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: "border"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer'
-      }
-    }, "Default"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primary",
-      hoverType: "border"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_hover_text)'
-      }
-    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryLight",
-      hoverType: "border"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "green",
-      hoverType: "border"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
-      }
-    }, "Green"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "danger",
-      hoverType: "border"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
-      }
-    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
-      style: boxStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Hover Bg Color"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      hoverType: "bg"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px'
-      }
-    }, "Default"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryLight",
-      hoverType: "bg"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "green",
-      hoverType: "bg"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
-      }
-    }, "Green"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "danger",
-      hoverType: "bg"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
-      }
-    }, "Danger"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryDark",
-      hoverType: "bg"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Dark")))), /*#__PURE__*/React.createElement("div", {
-      style: boxStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Disabled"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      isDisabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px'
-      }
-    }, "Default"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primary",
-      isDisabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_hover_text)'
-      }
-    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryLight",
-      isDisabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryFilled",
-      isDisabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_secondary_text)'
-      }
-    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "green",
-      isDisabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        color: 'var(--dot_text_strongGreen)'
-      }
-    }, "Green")))), /*#__PURE__*/React.createElement("div", {
-      style: boxStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Active"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer'
-      }
-    }, "Default"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primary",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_secondary_text)'
-      }
-    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryLight",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryFilled",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_secondary_text)'
-      }
-    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "green",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
-      }
-    }, "Green"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(RippleEffect, {
-      palette: "primaryDark",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: '13px',
-        padding: '4px 9px 7px',
-        cursor: 'pointer',
-        color: 'var(--zdt_cta_primary_text)'
-      }
-    }, "Primary Dark")))));
-  }
-
-}
-
-if (false) {
-  RippleEffect__default.docs = {
-    componentGroup: 'RippleEffect',
-    folderName: 'Style Guide'
-  };
-}

package/es/Select/docs/GroupSelect__default.docs.js

@@ -1,149 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-/**** Components ****/
-
-import GroupSelect from '../GroupSelect';
-let groupedOptions = [{
-  id: 'tickets',
-  name: 'Tickets',
-  options: [{
-    id: '001',
-    subject: 'Ticket001'
-  }, {
-    id: '002',
-    subject: 'Ticket002'
-  }, {
-    id: '003',
-    subject: 'Ticket003'
-  }, {
-    id: '004',
-    subject: 'Ticket004'
-  }, {
-    id: '005',
-    subject: 'Ticket005'
-  }],
-  valueField: 'id',
-  textField: 'subject'
-}, {
-  id: 'tasks',
-  name: 'Tasks',
-  options: [{
-    id: '001',
-    subject: 'Task001'
-  }, {
-    id: '002',
-    subject: 'Task002'
-  }, {
-    id: '003',
-    subject: 'Task003'
-  }, {
-    id: '004',
-    subject: 'Task004'
-  }, {
-    id: '005',
-    subject: 'Task005'
-  }],
-  valueField: 'id',
-  textField: 'subject'
-}, {
-  id: 'accounts',
-  name: 'Accounts',
-  options: [{
-    id: '001',
-    name: 'Account001'
-  }, {
-    id: '002',
-    name: 'Account002'
-  }, {
-    id: '003',
-    name: 'Account003'
-  }, {
-    id: '004',
-    name: 'Account004'
-  }, {
-    id: '005',
-    name: 'Account005'
-  }],
-  valueField: 'id',
-  textField: 'name'
-}, {
-  id: 'contacts',
-  name: 'Contacts',
-  options: [{
-    id: '001',
-    name: 'Contact001'
-  }, {
-    id: '002',
-    name: 'Contact002'
-  }, {
-    id: '003',
-    name: 'Contact003'
-  }, {
-    id: '004',
-    name: 'Contact004'
-  }, {
-    id: '005',
-    name: 'Contact005'
-  }],
-  valueField: 'id',
-  textField: 'name'
-}];
-export default class GroupSelect__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedOption: {
-        groupId: 'tickets',
-        selected: '001'
-      }
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.groupFooter = this.groupFooter.bind(this);
-  }
-
-  handleChange(selectedOption) {
-    this.setState({
-      selectedOption
-    });
-  }
-
-  groupFooter() {
-    return /*#__PURE__*/React.createElement("div", null, "Footer");
-  }
-
-  render() {
-    let {
-      selectedOption
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GroupSelect, {
-      groupedOptions: groupedOptions,
-      selectedOption: selectedOption,
-      onChange: this.handleChange,
-      needSearch: true,
-      searchEmptyMessage: "No matches found",
-      emptyMessage: "No Options",
-      isDefaultSelectValue: false,
-      placeHolder: "Select Option",
-      needLocalSearch: true
-    }), /*#__PURE__*/React.createElement(GroupSelect, {
-      groupedOptions: groupedOptions,
-      selectedOption: selectedOption,
-      onChange: this.handleChange,
-      needSearch: true,
-      searchEmptyMessage: "No matches found",
-      emptyMessage: "No Options",
-      isDefaultSelectValue: false,
-      placeHolder: "Select Option",
-      needLocalSearch: true,
-      getFooter: this.groupFooter
-    }, "Children"));
-  }
-
-}
-
-if (false) {
-  GroupSelect__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}

package/es/Select/docs/SelectWithAvatar__default.docs.js

@@ -1,97 +0,0 @@
-import React, { Component } from 'react';
-import SelectWithAvatar from '../SelectWithAvatar';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-let option = [{
-  text: 'Option 1',
-  id: '1'
-}, {
-  text: 'Option 2',
-  id: '2'
-}, {
-  text: 'Option 3',
-  id: '3'
-}, {
-  text: 'Option 4',
-  id: '4'
-}, {
-  text: 'Option 5',
-  id: '5'
-}, {
-  text: 'Option 6',
-  id: '6'
-}, {
-  text: 'Option 7',
-  id: '7'
-}, {
-  text: 'Option 8',
-  id: '8'
-}, {
-  text: 'Option 9',
-  id: '9'
-}, {
-  text: 'Option 10',
-  id: '10'
-}];
-export default class SelectWithAvatar__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(value) {
-    this.setState({
-      value
-    });
-  }
-
-  render() {
-    let {
-      value
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '360px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(SelectWithAvatar, {
-      options: option,
-      onChange: this.handleChange,
-      selectedValue: value,
-      needSearch: true,
-      emptyMessage: "No matches found",
-      placeHolder: "PlaceHolder",
-      isDefaultSelectValue: false,
-      onRemove: () => {
-        this.handleChange('');
-      }
-    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
-      options: option,
-      onChange: this.handleChange,
-      selectedValue: value,
-      needSearch: true,
-      emptyMessage: "No matches found",
-      placeHolder: "PlaceHolder",
-      isDefaultSelectValue: false,
-      isReadOnly: true
-    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
-      options: option,
-      onChange: this.handleChange,
-      selectedValue: value,
-      needSearch: true,
-      emptyMessage: "No matches found",
-      placeHolder: "PlaceHolder",
-      isDefaultSelectValue: false,
-      isDisabled: true
-    })));
-  }
-
-}
-
-if (false) {
-  SelectWithAvatar__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}