@zohodesk/dot 1.0.0-temp-85 → 1.0.0-temp-88

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.js

@@ -15,7 +15,6 @@ export default class FlipCard extends Component {
     super(props);
     this.onChange = this.onChange.bind(this);
     this.onClick = this.onClick.bind(this);
-    this.toggleClick = this.toggleClick.bind(this);
   }
 
   onClick(e) {
@@ -39,13 +38,6 @@ export default class FlipCard extends Component {
     onChange(id, isChecked, e);
   }
 
-  toggleClick(e) {
-    const {
-      isChecked
-    } = this.props;
-    this.onChange(!isChecked, e);
-  }
-
   render() {
     let {
       id,
@@ -84,7 +76,7 @@ export default class FlipCard extends Component {
       AvatarUserProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${AvatarSize(size)} ${style.flipContainer} ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+      className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
       onClick: this.onClick,
       "data-id": ticListContainer,
       "data-tour": tourId
@@ -93,17 +85,13 @@ export default class FlipCard extends Component {
       "data-id": ticList
     }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
-      className: `${style.front} ${style.checkboxCnt} ${frontClass ? frontClass : ''}`,
-      onClick: this.toggleClick
+      className: `${style.front} ${frontClass ? frontClass : ''}`
     }, /*#__PURE__*/React.createElement(CheckBox, _extends({
       isFilled: isFilledCheckbox,
       checked: isChecked,
       onChange: this.onChange,
       id: `checkbox_${id}`,
-      dataId: `listViewCheckBox_${id}`,
-      customClass: {
-        customCheckBox: style.checkboxStyle
-      }
+      dataId: `listViewCheckBox_${id}`
     }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.back

package/es/FlipCard/FlipCard.module.css

@@ -1,11 +1,7 @@
-.flipContainer {
-  --flip_cubic: cubic-bezier(0.25, 0.8, 0.25, 1);
-}
 .flip,
 .flipNone {
   color: var(--zdt_flipcard_default_text);
-}
-.flip, .flipNone {
+}.flip, .flipNone {
   background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
@@ -20,96 +16,29 @@
   height: inherit;
 }
 .front,
-.back {
-  position: absolute;
-}
-.front {
-  transition: transform var(--zd_transition2) var(--flip_cubic);
-  transform: scale(.8) perspective(1px);
-}
-.front,
-.container .front:before {
-  opacity: 0;
-  visibility: hidden;
-}
-.back {
-  transition: transform var(--zd_transition3) var(--flip_cubic);
-  transform: scale(1) perspective(1px);
-}
-.notFlip .container .front {
-  transition: 0ms;
-}
-.flip:hover .container .front,
-.hoverContainer:hover .container .front {
-  transition: transform var(--zd_transition2) var(--flip_cubic);
-}
-.container .front:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  border-radius: 50%;
-  background-color: var(--zdt_listHeader_border);
-  transform: scale(.6);
-}
-[dir=ltr] .container .front:before {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .container .front:before {
-  right: 0;
-  left: 0;
-}
-.notFlip:hover .container .front:before,
-.flip:hover .container .front:before {
-    transition: transform var(--zd_transition1) var(--flip_cubic);
-}
-.notFlip .container .front,
-.flip:hover .container .front,
-.hoverContainer:hover .container .front,
-.notFlip:hover .container .front:before,
-.flip:hover .container .front:before {
-  opacity: 1;
-  visibility: visible;
-}
-.notFlip .container .front, .flip:hover .container .front, .hoverContainer:hover .container .front, .notFlip:hover .container .front:before, .flip:hover .container .front:before {
-  transform: scale(1);
-}
-.notFlip .container .back {
-  transition: 0ms;
-}
-.notFlip .container .back,
-.flip:hover .container .back,
-.hoverContainer:hover .container .back {
-  opacity: 0;
-  visibility: hidden;
-}
-.notFlip .container .back, .flip:hover .container .back, .hoverContainer:hover .container .back {
-  transform: scale(.3);
-}
-.checkboxCnt:hover .checkboxStyle {
-  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-}
-/* .front,
 .back {
   position: absolute;
   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);
 }
-.checkboxCnt:hover .checkboxStyle {
-  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
-} */
+[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/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'
+  };
+}