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

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/FlipCard.module.css

@@ -1,7 +1,8 @@
 .flip,
 .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
   color: var(--zdt_flipcard_default_text);
+}.flip, .flipNone {
+  background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
   position: relative;
@@ -20,16 +21,24 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-.front {
+[dir=ltr] .front {
   transform: rotateY(180deg) perspective(1px);
 }
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-.notFlip .container {
+[dir=ltr] .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container,
-.hoverContainer:hover .container {
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}

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/FormAction.module.css

@@ -25,33 +25,58 @@
   padding-bottom: var(--zd_size10);
 }
 
-.largePadding {
+[dir=ltr] .largePadding {
   padding-left: var(--zd_size60);
 }
-.mediumPadding {
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60);
+}
+[dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50);
 }
-.xmediumPadding {
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30);
 }
-.smallPadding {
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallPadding {
   padding-left: var(--zd_size25);
 }
-.xsmallPadding {
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .xsmallPadding {
   padding-left: var(--zd_size20);
 }
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20);
+}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-.largeFooter .marginRight,
-.mediumFooter .marginRight {
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-.smallFooter .marginRight {
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15);
+}
+[dir=ltr] .smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12);
+}
 
-.marginRight:last-child {
+[dir=ltr] .marginRight:last-child {
   margin-right: 0;
 }
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0;
+}

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/FreezeLayer.module.css

@@ -1,10 +1,14 @@
 .container {
   top: 0;
-  left: 0;
   bottom: 0;
-  right: 0;
   position: absolute;
   overflow: hidden;
+}[dir=ltr] .container {
+  left: 0;
+  right: 0;
+}[dir=rtl] .container {
+  right: 0;
+  left: 0;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

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
 };

package/es/IconButton/IconButton.module.css

@@ -3,11 +3,11 @@
 }
 .wrapper {
   height: var(--zd_size28);
-  cursor: pointer;
   width: var(--zd_size28);
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
+  cursor: pointer;
 }
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);