@zohodesk/components 1.0.0-test-252 → 1.0.0

package/lib/Tab/Tabs.module.css

@@ -1,20 +1,20 @@
 .tab {
   position: relative;
-  composes: offSelection from '../common/common.module.css';
   z-index: 1;
-  --tab_position_gap: var(--zd_size22);
+  --tab_position_gap: 22px;
 }
+
 .alpha {
-  height: var(--zd_size35);
+  height: var(--zd_size35) ;
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
 [dir=ltr] .alpha_padding {
-  padding-left: var(--zd_size15);
+  padding-left: var(--zd_size15) ;
 }
 
 [dir=rtl] .alpha_padding {
-  padding-right: var(--zd_size15);
+  padding-right: var(--zd_size15) ;
 }
 
 .alpha_border {
@@ -27,50 +27,50 @@
   content: '';
   position: absolute;
   z-index: -2;
-  width: 76%;
-  bottom: 0;
-  height: var(--zd_size10);
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
   border-radius: 100px / 5px;
-  box-shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
+  box-shadow: var(--zd_bs_tabs_shadow);
 }
 
 [dir=ltr] .alpha::after {
-  left: 12%;
+  left: 12% ;
 }
 
 [dir=rtl] .alpha::after {
-  right: 12%;
+  right: 12% ;
 }
 
 .alpha:before {
   content: '';
   position: absolute;
   z-index: -1;
-  width: 100%;
-  height: 100%;
-  top: 0;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
   background: inherit;
 }
 
 [dir=ltr] .alpha:before {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .alpha:before {
-  right: 0;
+  right: 0 ;
 }
 
 .beta {
-  height: var(--zd_size61);
+  height: var(--zd_size61) ;
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
 [dir=ltr] .beta_padding {
-  padding-left: var(--zd_size13);
+  padding-left: var(--zd_size13) ;
 }
 
 [dir=rtl] .beta_padding {
-  padding-right: var(--zd_size13);
+  padding-right: var(--zd_size13) ;
 }
 
 .beta_border {
@@ -78,16 +78,16 @@
 }
 
 .delta {
-  height: var(--zd_size35);
+  height: var(--zd_size35) ;
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
 [dir=ltr] .delta_padding {
-  padding-left: var(--zd_size10);
+  padding-left: var(--zd_size10) ;
 }
 
 [dir=rtl] .delta_padding {
-  padding-right: var(--zd_size10);
+  padding-right: var(--zd_size10) ;
 }
 
 .delta_border {
@@ -99,12 +99,12 @@
 }
 
 .maxWidth {
-  max-width: 100%;
+  max-width: 100% ;
 }
 
 .highlight {
   position: absolute;
-  bottom: 0;
+  bottom: 0 ;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
 
@@ -116,26 +116,22 @@
   position: relative;
   cursor: pointer;
 }
+
 .menuBox {
-  max-height: var(--zd_size220);
+  max-height: var(--zd_size220) ;
 }
-
-
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
-
-[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
-  left: calc(var(--tab_position_gap) * -1);
-}
-[dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
-}
-[dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
-  right: calc(var(--tab_position_gap) * -1);
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
-.hidden{
+.hidden {
   visibility: hidden;
-}
+}

package/lib/Tab/__tests__/Tab.spec.js

@@ -1,59 +1,59 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _Tab = _interopRequireDefault(require("../Tab"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('Tab Component', function () {
   it('Is Contains alpha class', function () {
     var _setup = setup(_Tab["default"], {
-        type: 'alpha',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      type: 'alpha',
+      needAppearance: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabAlpha')).toBe(true);
   });
   it('Is Contains beta class', function () {
     var _setup2 = setup(_Tab["default"], {
-        type: 'beta',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup2.props,
-      renderedDOM = _setup2.renderedDOM;
+      type: 'beta',
+      needAppearance: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabBeta')).toBe(true);
   });
   it('Is Contains gamma class', function () {
     var _setup3 = setup(_Tab["default"], {
-        type: 'gamma',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup3.props,
-      renderedDOM = _setup3.renderedDOM;
+      type: 'gamma',
+      needAppearance: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup3.props,
+        renderedDOM = _setup3.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
   });
   it('Is Contains delta class', function () {
     var _setup4 = setup(_Tab["default"], {
-        type: 'delta',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup4.props,
-      renderedDOM = _setup4.renderedDOM;
+      type: 'delta',
+      needAppearance: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup4.props,
+        renderedDOM = _setup4.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabDelta')).toBe(true);
-  });
-  it('Is Contains zeta class', function () {
-    var _setup5 = setup(_Tab["default"], {
-        type: 'zeta',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  });
+  }); // it('Is Contains zeta class', () => {
+  //   const { props, renderedDOM } = setup(Tab, { type: 'zeta', needAppearance: true, getActiveRef: () => { } });
+  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
+  // });
   // it('Is Contains special class', () => {
   //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
   //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);
@@ -61,39 +61,42 @@ describe('Tab Component', function () {
   // });
 
   it('Is Contains active class', function () {
-    var _setup6 = setup(_Tab["default"], {
-        type: 'alpha',
-        needAppearance: true,
-        id: '0',
-        selectedTab: '0',
-        isActive: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+    var _setup5 = setup(_Tab["default"], {
+      type: 'alpha',
+      needAppearance: true,
+      id: '0',
+      selectedTab: '0',
+      isActive: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup5.props,
+        renderedDOM = _setup5.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive')).toBe(true);
   });
   it('Is Contains border class', function () {
-    var _setup7 = setup(_Tab["default"], {
-        isActive: true,
-        type: 'alpha',
-        needAppearance: true,
-        needBorder: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+    var _setup6 = setup(_Tab["default"], {
+      isActive: true,
+      type: 'alpha',
+      needAppearance: true,
+      needBorder: true,
+      getActiveRef: function getActiveRef() {}
+    }),
+        props = _setup6.props,
+        renderedDOM = _setup6.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive_border')).toBe(true);
   });
   it('Is call onClick', function () {
-    var _setup8 = setup(_Tab["default"], {
-        id: '2',
-        onClick: jest.fn(),
-        onSelect: jest.fn(),
-        getActiveRef: function getActiveRef() {}
-      }),
-      renderedDOM = _setup8.renderedDOM,
-      props = _setup8.props;
+    var _setup7 = setup(_Tab["default"], {
+      id: '2',
+      onClick: jest.fn(),
+      onSelect: jest.fn(),
+      getActiveRef: function getActiveRef() {}
+    }),
+        renderedDOM = _setup7.renderedDOM,
+        props = _setup7.props;
+
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
     TestUtils.Simulate.click(tabElement, {
       currentTarget: {
@@ -105,14 +108,15 @@ describe('Tab Component', function () {
     expect(props.onSelect).toHaveBeenLastCalledWith('2');
   });
   it('is render text span', function () {
-    var _setup9 = setup(_Tab["default"], {
-        type: 'alpha',
-        dataId: 'taskSubtab1',
-        text: 'Tab1',
-        getActiveRef: function getActiveRef() {}
-      }),
-      renderedDOM = _setup9.renderedDOM,
-      props = _setup9.props;
+    var _setup8 = setup(_Tab["default"], {
+      type: 'alpha',
+      dataId: 'taskSubtab1',
+      text: 'Tab1',
+      getActiveRef: function getActiveRef() {}
+    }),
+        renderedDOM = _setup8.renderedDOM,
+        props = _setup8.props;
+
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab1_Tab');
     expect(tabElement.getAttribute('data-id')).toBe('taskSubtab1_Tab');
   });

package/lib/Tab/__tests__/TabContent.spec.js

@@ -1,17 +1,21 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _TabContent = _interopRequireDefault(require("../TabContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('TabContent Component', function () {
   it('render TabContent', function () {
     var _setup = setup(_TabContent["default"], {
-        children: /*#__PURE__*/_react["default"].createElement("div", {
-          "data-id": "tabcontent"
-        }, "Tab Content")
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      children: /*#__PURE__*/_react["default"].createElement("div", {
+        "data-id": "tabcontent"
+      }, "Tab Content")
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabcontent');
     expect(component.getAttribute('data-id')).toBe('tabcontent');
   });

package/lib/Tab/__tests__/TabContentWrapper.spec.js

@@ -1,27 +1,32 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _TabContentWrapper = _interopRequireDefault(require("../TabContentWrapper"));
+
 var _TabContent = _interopRequireDefault(require("../TabContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('TabContentWrapper Component', function () {
   it('is children rendered class', function () {
     var _setup = setup(_TabContentWrapper["default"], {
-        selectedTab: '0',
-        children: [/*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
-          id: '0',
-          key: 0
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          "data-id": "child1"
-        }, " Tab 1")), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
-          id: '1',
-          key: 1
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          "data-id": "child2"
-        }, " Tab 2"))]
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      selectedTab: '0',
+      children: [/*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+        id: '0',
+        key: 0
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        "data-id": "child1"
+      }, " Tab 1")), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+        id: '1',
+        key: 1
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        "data-id": "child2"
+      }, " Tab 2"))]
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'child1');
     expect(component.getAttribute('data-id')).toBe('child1');
   });
@@ -33,18 +38,21 @@ describe('TabContentWrapper Component', function () {
       className: "not-render",
       "data-id": "child1"
     }, ' ', "Tab 1"));
+
     var Tab2 = /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
       id: '1',
       key: 1
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "not-render"
     }, " Tab 2"), "TabContent 2");
+
     var _setup2 = setup(_TabContentWrapper["default"], {
-        selectedTab: '0',
-        children: [Tab1, Tab2]
-      }),
-      props = _setup2.props,
-      renderedDOM = _setup2.renderedDOM;
+      selectedTab: '0',
+      children: [Tab1, Tab2]
+    }),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
     var component = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'not-render');
     expect(component.length).toBe(1);
   });

package/lib/Tab/__tests__/TabWrapper.spec.js

@@ -1,11 +1,17 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _TabWrapper = _interopRequireDefault(require("../TabWrapper"));
+
 var _Tab = _interopRequireDefault(require("../Tab"));
+
 var _Tabs = _interopRequireDefault(require("../Tabs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('TabWrapper Component', function () {
   it('is Tab rendered', function () {
     var onSelect = jest.fn();
@@ -60,6 +66,7 @@ describe('TabWrapper Component', function () {
   });
   it('change selectedTab id', function () {
     var node = document.createElement('div');
+
     var children = /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       isResponsive: false
     }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
@@ -70,18 +77,23 @@ describe('TabWrapper Component', function () {
       id: "1"
     }, "Two"));
     /*eslint-disable */
+
+
     var renderedDOM = _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
       defaultTab: '0',
       type: "alpha",
       hookToDisableInternalState: true
     }, children), node);
+
     var tab = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
     expect(tab[0].className.contains('Active')).toBe(true);
+
     _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
       defaultTab: '1',
       type: "alpha",
       hookToDisableInternalState: true
     }, children), node);
+
     expect(tab[0].className.contains('Active')).toBe(false);
     expect(tab[1].className.contains('Active')).toBe(true);
   });

package/lib/Tab/__tests__/Tabs.spec.js

@@ -1,10 +1,15 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _Tab = _interopRequireDefault(require("../Tab"));
+
 var _Tabs = _interopRequireDefault(require("../Tabs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var defaultProps = {
   type: 'alpha',
   selectedTab: '0',
@@ -29,80 +34,89 @@ var tabChildrenProps = {
 describe('Tabs Component', function () {
   it('is contains alpha class', function () {
     var _setup = setup(_Tabs["default"], {
-        type: 'alpha',
-        isResponsive: false
-      }),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+      type: 'alpha',
+      isResponsive: false
+    }),
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('alpha')).toBe(true);
   });
   it('is contains special class', function () {
     var _setup2 = setup(_Tabs["default"], {
-        type: 'special'
-      }),
-      props = _setup2.props,
-      renderedDOM = _setup2.renderedDOM;
+      type: 'special'
+    }),
+        props = _setup2.props,
+        renderedDOM = _setup2.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('special')).toBe(true);
   });
   it('is contains border class', function () {
     var _setup3 = setup(_Tabs["default"], {
-        type: 'alpha',
-        needBorder: true
-      }),
-      props = _setup3.props,
-      renderedDOM = _setup3.renderedDOM;
+      type: 'alpha',
+      needBorder: true
+    }),
+        props = _setup3.props,
+        renderedDOM = _setup3.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('border')).toBe(true);
   });
   it('is contains padding class', function () {
     var _setup4 = setup(_Tabs["default"], {
-        type: 'alpha',
-        needPadding: true
-      }),
-      props = _setup4.props,
-      renderedDOM = _setup4.renderedDOM;
+      type: 'alpha',
+      needPadding: true
+    }),
+        props = _setup4.props,
+        renderedDOM = _setup4.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('padding')).toBe(true);
   });
   it('is contains custom class', function () {
     var _setup5 = setup(_Tabs["default"], {
-        type: 'alpha',
-        className: 'customClass'
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
+      type: 'alpha',
+      className: 'customClass'
+    }),
+        props = _setup5.props,
+        renderedDOM = _setup5.renderedDOM;
+
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'containerComponent').className.contains('customClass')).toBe(true);
   });
   it('did render custom tab', function () {
     var _setup6 = setup(_Tabs["default"], defaultProps),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+        props = _setup6.props,
+        renderedDOM = _setup6.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'customtab');
     expect(component.getAttribute('data-id')).toBe('customtab');
   });
   it('did render Tab', function () {
     var _setup7 = setup(_Tabs["default"], tabChildrenProps),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+        props = _setup7.props,
+        renderedDOM = _setup7.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab');
     expect(component.getAttribute('data-id')).toBe('taskSubtab');
   });
   it('move Highlight called', function () {
     var _setup8 = setup(_Tabs["default"], Object.assign({}, tabChildrenProps, {
-        isAnimate: true,
-        needTabBorder: true
-      })),
-      props = _setup8.props,
-      renderedDOM = _setup8.renderedDOM;
+      isAnimate: true,
+      needTabBorder: true
+    })),
+        props = _setup8.props,
+        renderedDOM = _setup8.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'highlight');
     expect(component.getAttribute('style')).toBe('left: 0; width: 0;');
   });
   fit('isResponsive called', function () {
     var _setup9 = setup(_Tabs["default"], Object.assign({}, tabChildrenProps, {
-        isAnimate: true,
-        isResponsive: true,
-        needTabBorder: true
-      })),
-      props = _setup9.props,
-      renderedDOM = _setup9.renderedDOM;
+      isAnimate: true,
+      isResponsive: true,
+      needTabBorder: true
+    })),
+        props = _setup9.props,
+        renderedDOM = _setup9.renderedDOM;
+
     var component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'taskSubtab');
     expect(component.length).toBe(0);
   });

package/lib/Tab/index.js

@@ -33,9 +33,15 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs["default"];
   }
 });
+
 var _TabWrapper = _interopRequireDefault(require("./TabWrapper"));
+
 var _TabContentWrapper = _interopRequireDefault(require("./TabContentWrapper"));
+
 var _TabContent = _interopRequireDefault(require("./TabContent"));
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
+
 var _Tab = _interopRequireDefault(require("./Tab"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }