@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-49

package/lib/DropBox/DropBox.module.css

@@ -0,0 +1,406 @@
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+.main {
+  z-index: 3;
+  composes: varClass;
+}
+.container {
+  position: absolute;
+}
+.fixedContainer {
+  position: fixed;
+}
+.subContainer {
+  position: relative;
+  border-radius: var(--dropbox_border_radius);
+  padding: var(--dropbox_padding);
+  box-shadow: var(--dropbox_box_shadow);
+}
+.defaultPalette, .darkPalette {
+  background-color: var(--dropbox_bg_color);
+}
+.radius {
+  --dropbox_border_radius: 3px;
+}
+.mobRadius {
+  --dropbox_border_radius: 30px 30px 0 0;
+  --dropbox_padding: var(--zd_size10) 0 0 0;
+}
+/* sizes */
+.mini {
+  width: var(--zd_size140);
+}
+.xmini {
+  width: var(--zd_size160);
+}
+.xsmall {
+  width: var(--zd_size180);
+}
+.small {
+  width: var(--zd_size200);
+}
+.medium {
+  width: var(--zd_size220);
+}
+.large {
+  width: var(--zd_size260);
+}
+.mlarge {
+  width: var(--zd_size280);
+}
+.xlarge {
+  width: var(--zd_size304);
+}
+.xxlarge {
+  width: var(--zd_size364);
+  max-width: var(--zd_size364);
+}
+.default {
+  width: 100%;
+}
+/* shadow */
+.top_shadow {
+  --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+.left_shadow {
+  --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+}
+.right_shadow {
+  --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+}
+.bottom_shadow {
+  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+[dir=ltr] .defaultShadow {
+  box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+[dir=rtl] .defaultShadow {
+  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+/* box direction styles */
+.topStart {
+  bottom: 100%;
+  right: 0;
+}
+.topEnd {
+  bottom: 100%;
+  left: 0;
+}
+.topMid {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottomStart {
+  top: 100%;
+  right: 0;
+}
+.bottomEnd {
+  top: 100%;
+  left: 0;
+}
+.bottomMid {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rightStart {
+  left: 100%;
+  bottom: 0;
+}
+.rightEnd {
+  left: 100%;
+  top: 0;
+}
+.rightMid {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.leftStart {
+  right: 100%;
+  bottom: 0;
+}
+.leftEnd {
+  right: 100%;
+  top: 0;
+}
+.leftMid {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+/* space for arrow */
+.arrowtop {
+  padding-bottom: var(--zd_size10);
+}
+.arrowright {
+  padding-left: var(--zd_size10);
+}
+.arrowleft {
+  padding-right: var(--zd_size10);
+}
+.arrowbottom {
+  padding-top: var(--zd_size10);
+}
+/* space from target */
+.paddingSpace_top {
+  padding-bottom: var(--zd_size5);
+}
+.paddingSpace_right {
+  padding-left: var(--zd_size5);
+}
+.paddingSpace_left {
+  padding-right: var(--zd_size5);
+}
+.paddingSpace_bottom {
+  padding-top: var(--zd_size5);
+}
+.arrow {
+  position: absolute;
+  height: var(--zd_size34);
+  width: var(--zd_size34);
+  clip: rect(
+    var(--zd_size3),
+    var(--zd_size29),
+    var(--zd_size17),
+    var(--zd_size8)
+  );
+  padding: var(--zd_size4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrowShape {
+  height: var(--zd_size10);
+  width: var(--zd_size10);
+  box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+  background-color: var(--dropbox_bg_color);
+  -webkit-transform: rotateZ(-45deg);
+  transform: rotateZ(-45deg);
+}
+/* arrow placement styles */
+.start,
+.end,
+.mid {
+  composes: arrow;
+}
+.top .start,
+.top .end,
+.top .mid {
+  bottom: calc(var(--zd_size17) * -1);
+}
+.top .start {
+  left: var(--zd_size28);
+}
+.top .end {
+  right: var(--zd_size28);
+  transform: rotate(180deg) translateX(-50%);
+}
+.top .mid {
+  left: 50%;
+}
+.top .start,
+.top .mid {
+  transform: rotate(180deg) translateX(50%);
+}
+.bottom .start,
+.bottom .end,
+.bottom .mid {
+  top: calc(var(--zd_size17) * -1);
+}
+.bottom .start {
+  left: var(--zd_size28);
+}
+.bottom .mid {
+  left: 50%;
+}
+.bottom .end {
+  right: var(--zd_size28);
+  transform: translateX(50%);
+}
+.bottom .mid,
+.bottom .start {
+  transform: translateX(-50%);
+}
+.left .start,
+.left .mid,
+.left .end {
+  right: calc(var(--zd_size17) * -1);
+}
+.left .start {
+  top: var(--zd_size28);
+}
+.left .end {
+  transform: rotate(90deg) translateX(50%);
+  bottom: var(--zd_size28);
+}
+.left .mid {
+  top: 50%;
+}
+.left .start,
+.left .mid {
+  transform: rotate(90deg) translateX(-50%);
+}
+.right .start,
+.right .mid,
+.right .end {
+  left: calc(var(--zd_size17) * -1);
+}
+.right .start {
+  top: var(--zd_size28);
+}
+.right .mid {
+  top: 50%;
+}
+.right .start,
+.right .mid {
+  transform: rotate(-90deg) translateX(50%);
+}
+.right .end {
+  bottom: var(--zd_size28);
+  transform: rotate(-90deg) translateX(-50%);
+}
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+.hidden .subContainer {
+  box-shadow: none;
+}
+[dir=ltr] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+.fadeIn {
+  composes: animationBasic;
+  composes: fadeInScale modeForward from '../common/animation.module.css';
+}
+.bounce {
+  composes: animationBasic;
+}
+[dir=ltr] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+.slideUp {
+  composes: modeForward from '../common/animation.module.css';
+}
+[dir=ltr] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+[dir=rtl] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+
+@keyframes animation {
+  0% {
+    transform: scaleY(0.6) perspective(1px);
+    opacity: 0;
+    transform-origin: top center;
+  }
+  100% {
+    transform-origin: top center;
+    opacity: 1;
+    transform: scaleY(1) perspective(1px);
+  }
+}
+@keyframes slideUp {
+  0% {
+    transform: translateY(90%) perspective(1px);
+  }
+  100% {
+    transform: translateY(0%) perspective(1px);
+  }
+}
+
+.responsive {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  max-height: 90%;
+}
+
+[dir=ltr] .responsive {
+  left: 0;
+}
+
+[dir=rtl] .responsive {
+  right: 0;
+}
+
+.closeBar {
+  height: 6px;
+  width: 20%;
+  border-radius: 5px;
+  background-color: var(--dropbox_mob_close_bg_color);
+  cursor: pointer;
+  margin: 0 auto var(--zd_size10);
+}
+.boxPadding {
+  --dropbox_padding: var(--zd_size10) 0;
+}
+.darkPalette {
+  --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
+}
+.activateInDelay {
+  composes: modeForward from '../common/animation.module.css';
+  pointer-events: none;
+}
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+[dir=rtl] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+.freezeLayer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  composes: activateInDelay;
+}
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
+.freeze {
+  composes: varClass;
+  background: var(--dropbox_mob_bg_color);
+}
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
+}

package/lib/DropBox/DropBoxPositionMapping.json

@@ -0,0 +1,145 @@
+{
+    "positionMapping": {
+        "bottomCenter": {
+            "direction": "bottom",
+            "arrowPosition": "mid",
+            "positionStyle": "bottomMid"
+        },
+        "bottomLeftToRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomCenterToRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomRightToLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "bottomCenterToLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "topCenter": {
+            "direction": "top",
+            "arrowPosition": "mid",
+            "positionStyle": "topMid"
+        },
+        "topLeftToRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topCenterToRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topRightToLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "topCenterToLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "rightCenter": {
+            "direction": "right",
+            "arrowPosition": "mid",
+            "positionStyle": "rightMid"
+        },
+        "rightTopToBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightCenterToBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightBottomToTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "rightCenterToTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "leftCenter": {
+            "direction": "left",
+            "arrowPosition": "mid",
+            "positionStyle": "leftMid"
+        },
+        "leftTopToBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftCenterToBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftBottomToTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        },
+        "leftCenterToTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        },
+        "bottomRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "topRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "rightBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "leftBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        }
+    }
+}
+  

package/lib/DropBox/__tests__/DropBox.spec.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DropBox = _interopRequireDefault(require("../DropBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var defaultProps = {
+  onClick: jest.fn()
+};
+describe('DropBox component', function () {
+  it('Should Arrow element visible', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      onClick: jest.fn(),
+      isArrow: true
+    }));
+    var x = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dropBox_arrow');
+    expect(x.length).toBe(1);
+  });
+  it('Should Arrow element disable', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      onClick: jest.fn(),
+      isArrow: false
+    }));
+    var x = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'dropbox_arrow');
+    expect(x.length).toBe(0);
+  });
+  it('Should call onclick container function', function () {
+    var _setup = setup(_DropBox["default"], defaultProps),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
+    var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'dropBox_subcontainer');
+    TestUtils.Simulate.click(component);
+    expect(props.onClick).toHaveBeenCalled();
+  });
+  it('Should check render proper class name(hidden)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      isActive: false,
+      isArrow: true
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'hidden');
+    expect(x.length).toBe(1);
+  });
+  it('Should check render proper class name(size)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      isArrow: true,
+      size: 'xsmall'
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'xsmall');
+    expect(x.length).toBe(1);
+  });
+  it('Should check render proper class name(boxPosition)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      boxPosition: 'bottomRight'
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'bottomEnd');
+    expect(x.length).toBe(1);
+  });
+  it('Should check render proper class name(isAnimate & isActive)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      isArrow: true,
+      isAnimate: true,
+      isActive: true
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    expect(x.length).toBe(1);
+  });
+  it('Should check render proper class name(isAnimate & isActive)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      isArrow: true,
+      isAnimate: true,
+      isActive: true
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    expect(x.length).toBe(1);
+  });
+  it('Should check render proper class name(arrowPosition)', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      isArrow: true,
+      arrowPosition: 'end'
+    }));
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'end');
+    expect(x.length).toBe(1);
+  });
+});