@zohodesk/components 1.0.0-temp-67 → 1.0.0-temp-350

package/es/ListItem/docs/ListItemWithAvatar__default.docs.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import ListItemWithAvatar from '../ListItemWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithAvatar__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bharathi kannan",
+      autoHover: true,
+      needAvatarTitle: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      highlight: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem",
+      name: "Bk",
+      isTeam: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      value: "ListItem Disabled",
+      name: "Bk",
+      isTeam: true,
+      isDisabled: true,
+      imgSrc: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithAvatar__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithCheckBox__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      customClass: {
+        customListItem: style.listItem,
+        customCheckBox: style.customCbox,
+        customLabel: style.customLbl
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithCheckBox from '../ListItemWithCheckBox';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithCheckBox__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithCheckBox__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithIcon__custom.docs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithIcon__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithIcon__default.docs.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithIcon__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithRadio__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithRadio__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__custom.docs.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import ListItem from '../ListItem';
+import style from '../../common/docStyle.module.css';
+export default class ListItem__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list",
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}