@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-239

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

@@ -0,0 +1,435 @@
+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_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_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_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_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_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_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_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_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

@@ -0,0 +1,149 @@
+/**** 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

@@ -0,0 +1,97 @@
+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'
+  };
+}