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

package/es/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__multiDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      subDrawerActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.openSecondDrawer = this.openSecondDrawer.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.closeSubDrawer = this.closeSubDrawer.bind(this);
+    this.subDrawerChildren = this.subDrawerChildren.bind(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openSecondDrawer() {
+    this.setState({
+      subDrawerActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  closeSubDrawer() {
+    this.setState({
+      subDrawerActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  subDrawerChildren() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+      title: "Second Drawer",
+      onClose: this.closeSubDrawer
+    }), /*#__PURE__*/React.createElement(Content, {
+      paddingSize: "small"
+    }, /*#__PURE__*/React.createElement("div", null, "Hi, I am Second Drawer Content Area")));
+  }
+
+  render() {
+    let {
+      isActive,
+      subDrawerActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: true,
+      paddingSize: "small",
+      subDrawerActive: subDrawerActive,
+      subDrawerSize: "small",
+      onClose: this.closeDrawers,
+      subDrawerChildren: this.subDrawerChildren(),
+      size: size,
+      needAutoZindex: true
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "First Drawer",
+      onClose: this.onClose
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.openSecondDrawer
+    }, "Click here to Open Second Drawer ..:-)"), /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__multiDrawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__noFreeze.docs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Drawer from '../Drawer';
+export default class Drawer__noFreeze extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Children"));
+  }
+
+}
+
+if (false) {
+  Drawer__noFreeze.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__withModal.docs.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Modal from '@zohodesk/components/lib/Modal/Modal';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import style from '../Drawer.module.css';
+export default class Drawer__withModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      modalActive: true
+    };
+    this.onClose = this.onClose.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.getNextId = getUniqueId(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openModal() {
+    this.setState({
+      modalActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  render() {
+    let {
+      isActive,
+      modalActive
+    } = this.state;
+    let uniqueId = this.getNextId();
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: true,
+      paddingSize: "small",
+      onClose: this.closeDrawers,
+      innerPortalName: uniqueId
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Drawer with Modal",
+      onClose: this.onClose
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.openModal
+    }, "Click here to Open Modal ..:-)"), modalActive ? /*#__PURE__*/React.createElement(Modal, {
+      portalId: uniqueId
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '90%',
+        height: '400px',
+        background: '#fff',
+        margin: '50px auto'
+      }
+    }, "Drawer Modal")) : null));
+  }
+
+}
+
+if (false) {
+  Drawer__withModal.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/ExternalLink/docs/ExternalLink__default.docs.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import ExternalLink from '../ExternalLink';
+export default class ExternalLink__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    ///agent/:orgName/:deptName/:moduleName/details/:moduleId
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExternalLink, null));
+  }
+
+}
+
+if (false) {
+  ExternalLink__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/FlipCard/docs/FlipCard__default.docs.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import FlipCard from '../FlipCard';
+export default class FlipCard__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: false
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "email",
+      action: "incoming",
+      id: "test1",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      noNeedFlip: true,
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test2",
+      name: "phone",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test3",
+      name: "EL",
+      isPaidUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test4",
+      name: "BK",
+      isPortalUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })));
+  }
+
+}
+
+if (false) {
+  FlipCard__default.docs = {
+    componentGroup: 'Molecule'
+  };
+}

package/es/FormAction/docs/FormAction__default.docs.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import Button from '@zohodesk/components/lib/Button/Button';
+import Icon from '@zohodesk/icons/lib/Icon';
+import FormAction, { LeftSide, RightSide, Center } from '../FormAction';
+export default class FormAction__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("p", null, "Left"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium"
+    }, /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Right"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("p", null, "Left")), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Right"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small"
+    }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("p", null, "Center"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Large"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Medium"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium",
+      paddingLeftSize: "xmedium"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XMedium"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled",
+      size: "small"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Small"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xsmall"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled",
+      size: "small"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XSmall"))));
+  }
+
+}
+
+if (false) {
+  FormAction__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import FreezeLayer from '../FreezeLayer';
+import Button from '@zohodesk/components/lib/Button/Button';
+export default class FreezeLayer__dark extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      view: false
+    };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      view: !this.state.view
+    });
+  }
+
+  render() {
+    let {
+      view
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: "Click to view FreezeLayer",
+      palette: "secondary",
+      onClick: this.toggle
+    }), /*#__PURE__*/React.createElement(FreezeLayer, {
+      align: "both",
+      palette: "dark",
+      isActive: view,
+      onClick: this.toggle,
+      animationName: "fade",
+      childAnimationName: "expand",
+      needAutoZindex: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: 'var(--dot_black)',
+        fontSize: '40px',
+        padding: '100px',
+        background: 'var(--dot_white)'
+      }
+    }, "Im children")));
+  }
+
+}
+
+if (false) {
+  FreezeLayer__dark.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import FreezeLayer from '../FreezeLayer';
+import Button from '@zohodesk/components/lib/Button/Button';
+export default class FreezeLayer__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      view: false
+    };
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      view: !this.state.view
+    });
+  }
+
+  render() {
+    let {
+      view
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: "Click to view FreezeLayer",
+      palette: "secondary",
+      onClick: this.toggle
+    }), /*#__PURE__*/React.createElement(FreezeLayer, {
+      align: "both",
+      isActive: view,
+      onClick: this.toggle,
+      animationName: "expand"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--dot_black)',
+        fontSize: '40px',
+        padding: '100px',
+        background: 'var(--dot_white)'
+      }
+    }, "Im children")));
+  }
+
+}
+
+if (false) {
+  FreezeLayer__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/IconButton/docs/IconButton__default.docs.js

@@ -0,0 +1,219 @@
+import React, { Component } from 'react';
+import IconButton from '../IconButton';
+export default class IconButton__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isBold"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isBold: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      isBold: true,
+      iconSize: "12",
+      iconName: "ZD-more",
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isBold: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      onClick: () => {
+        console.log('click');
+      },
+      onMouseDown: () => {
+        console.log('Down');
+      },
+      onMouseOver: () => {
+        console.log('over');
+      }
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isActive"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isActive: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Border On Hover"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      hoverType: "border"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      hoverType: "border"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isDisabled"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Tooltip"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true,
+      title: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true,
+      title: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true,
+      title: "primaryFilled"
+    }))));
+  }
+
+}
+
+if (false) {
+  IconButton__default.docs = {
+    componentGroup: 'Atom'
+  };
+}