@zohodesk/components 1.0.0-alpha-248 → 1.0.0-alpha-249

package/lib/DropBox/DropBox.module.css

@@ -1,406 +0,0 @@
-.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

@@ -1,145 +0,0 @@
-{
-    "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

@@ -1,87 +0,0 @@
-"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);
-  });
-});