@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ChannelIcon from '../ChannelIcon';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ChannelIcon__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let boxStyle = {},
+        style = {
+      border: '1px solid #c3c1c1',
+      padding: '10px',
+      margin: '1px 10px',
+      textAlign: 'center'
+    },
+        titleStyle = {
+      'font-size': '13px',
+      'padding-bottom': '5px',
+      'border-bottom': '1px solid #c3c1c1',
+      margin: '10px 0 5px',
+      textAlign: 'center'
+    };
+    let channels = getChannelMappingObj();
+    return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      scroll: "none",
+      style: {
+        padding: '5px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: titleStyle
+    }, item), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      wrap: "wrap"
+    }, Object.keys(channels[item]).map((channel, j) => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: style,
+      key: j
+    }, /*#__PURE__*/React.createElement("h6", null, channel), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelIcon, {
+      name: item,
+      action: channel,
+      iconSize: "21",
+      size: "medium"
+    }))))))), /*#__PURE__*/React.createElement("br", null));
+  }
+
+}
+
+if (false) {
+  ChannelIcon__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Drawer/docs/Drawer__default.docs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Drawer, { Header, Content, Footer } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("p", null, "getChildren");
+  }
+
+  render() {
+    let {
+      isActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: false,
+      paddingSize: "small",
+      size: size
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Add Component",
+      onClose: this.onClose,
+      iconName: "ZD-zdDuetimeQueueNew",
+      iconSize: "15",
+      align: "column",
+      getChildren: this.getFooter
+    }, /*#__PURE__*/React.createElement("span", null, "children")), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__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')
+    })), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
+      text: "Save",
+      palette: "primaryFilled"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "Cancel",
+      palette: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}

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_text_black)',
+        fontSize: '40px',
+        padding: '100px',
+        background: 'var(--dot_bg_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_text_black)',
+        fontSize: '40px',
+        padding: '100px',
+        background: 'var(--dot_bg_white)'
+      }
+    }, "Im children")));
+  }
+
+}
+
+if (false) {
+  FreezeLayer__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/IconButton/IconButton.js

@@ -94,7 +94,8 @@ export default class IconButton extends React.Component {
       ariaExpanded,
       ariaLabel,
       ariaControls,
-      ariaLabelledby
+      ariaLabelledby,
+      role
     } = a11y;
     return /*#__PURE__*/React.createElement(RippleEffect, {
       palette: palette,
@@ -108,6 +109,7 @@ export default class IconButton extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-controls": ariaControls,
       "aria-labelledby": ariaLabelledby,
+      role: role,
       tagName: needButtonTag ? 'button' : 'div',
       isInline: true,
       tourId: tourId,
@@ -161,7 +163,8 @@ IconButton.propTypes = {
     ariaExpanded: PropTypes.bool,
     ariaLabel: PropTypes.string,
     ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    role: PropTypes.string
   }),
   dataIsHtml: PropTypes.bool
 };