@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

package/lib/Tab/Tabs.module.css

@@ -1,155 +1,137 @@
-.tab {
-  position: relative;
-  z-index: 1;
-  --tab_position_gap: 22px;
-}
-
-.alpha {
-  height: 35px;
-  background-color: var(--zdt_tabs_alpha_bg);
-}
-
-[dir=ltr] .alpha_padding {
-  padding-left: 15px;
-}
-
-[dir=rtl] .alpha_padding {
-  padding-right: 15px;
-}
-
-.alpha_border {
-  border-width: 0 0 1px 0;
-  border-color: var(--zdt_tabs_alpha_border);
-  border-style: solid;
-}
-
-.alpha::after {
-  content: '';
-  position: absolute;
-  z-index: -2;
-  width: 76%;
-  bottom: 0;
-  height: 10px;
-  border-radius: 100px / 5px;
-  box-shadow: var(--zd_bs_tabs_shadow);
-}
-
-[dir=ltr] .alpha::after {
-  left: 12%;
-}
-
-[dir=rtl] .alpha::after {
-  right: 12%;
-}
-
-.alpha:before {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  background: inherit;
-}
-
-[dir=ltr] .alpha:before {
-  left: 0;
-}
-
-[dir=rtl] .alpha:before {
-  right: 0;
-}
-
-.beta {
-  height: 61px;
-  background-color: var(--zdt_tabs_alpha_bg);
-}
-
-[dir=ltr] .beta_padding {
-  padding-left: 13px;
-}
-
-[dir=rtl] .beta_padding {
-  padding-right: 13px;
-}
-
-.beta_border {
-  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
-}
-
-.delta {
-  height: 35px;
-  background-color: var(--zdt_tabs_alpha_bg);
-}
-
-[dir=ltr] .delta_padding {
-  padding-left: 10px;
-}
-
-[dir=rtl] .delta_padding {
-  padding-right: 10px;
-}
-
-.delta_border {
-  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
-}
-
-.delta .highlight {
-  border-color: var(--zdt_tabs_delta_border);
-}
-
-.maxWidth {
-  max-width: 100%;
-}
-
-.highlight {
-  position: absolute;
-  bottom: 0;
-  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
-}
-
-.lineAnimate {
-  transition: transform var(--zd_transition3) linear;
-}
-
-.menu {
-  position: relative;
-  cursor: pointer;
-}
-
-.menuBox {
-  max-height: 220px;
-}
-
-
-.bottomRightToLeft,
-.topRightToLeft,
-.bottomCenterToLeft {
-}
-
-
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
-}
-
-
-[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
-  left: calc(var(--tab_position_gap) * -1);
-}
-
-.bottomLeftToRight,
-.topLeftToRight,
-.bottomCenterToRight {
-}
-
-[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);
-}
-
-.hidden {
-  visibility: hidden;
+.tab {
+  position: relative;
+  z-index: 1;
+  --tab_position_gap: 22px;
+}
+
+.alpha {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .alpha_padding {
+  padding-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15) ;
+}
+
+.alpha_border {
+  border-width: 0 0 1px 0;
+  border-color: var(--zdt_tabs_alpha_border);
+  border-style: solid;
+}
+
+.alpha::after {
+  content: '';
+  position: absolute;
+  z-index: -2;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
+  border-radius: 100px / 5px;
+  box-shadow: var(--zd_bs_tabs_shadow);
+}
+
+[dir=ltr] .alpha::after {
+  left: 12% ;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12% ;
+}
+
+.alpha:before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
+  background: inherit;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
+}
+
+.beta {
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .beta_padding {
+  padding-left: var(--zd_size13) ;
+}
+
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13) ;
+}
+
+.beta_border {
+  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
+}
+
+.delta {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .delta_padding {
+  padding-left: var(--zd_size10) ;
+}
+
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10) ;
+}
+
+.delta_border {
+  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
+}
+
+.delta .highlight {
+  border-color: var(--zdt_tabs_delta_border);
+}
+
+.maxWidth {
+  max-width: 100% ;
+}
+
+.highlight {
+  position: absolute;
+  bottom: 0 ;
+  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
+}
+
+.lineAnimate {
+  transition: transform var(--zd_transition3) linear;
+}
+
+.menu {
+  position: relative;
+  cursor: pointer;
+}
+
+.menuBox {
+  max-height: var(--zd_size220) ;
+}
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+  right: calc(var(--tab_position_gap) * -1); 
+}
+
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+  left: calc(var(--tab_position_gap) * -1); 
+}
+
+.hidden {
+  visibility: hidden;
 }

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

@@ -1,53 +1,58 @@
 "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', () => {
+  }); // 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: () => {} });
@@ -57,38 +62,41 @@ describe('Tab Component', function () {
 
   it('Is Contains active class', function () {
     var _setup5 = setup(_Tab["default"], {
-        type: 'alpha',
-        needAppearance: true,
-        id: '0',
-        selectedTab: '0',
-        isActive: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
+      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 _setup6 = setup(_Tab["default"], {
-        isActive: true,
-        type: 'alpha',
-        needAppearance: true,
-        needBorder: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+      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 _setup7 = setup(_Tab["default"], {
-        id: '2',
-        onClick: jest.fn(),
-        onSelect: jest.fn(),
-        getActiveRef: function getActiveRef() {}
-      }),
-      renderedDOM = _setup7.renderedDOM,
-      props = _setup7.props;
+      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: {
@@ -101,13 +109,14 @@ describe('Tab Component', function () {
   });
   it('is render text span', function () {
     var _setup8 = setup(_Tab["default"], {
-        type: 'alpha',
-        dataId: 'taskSubtab1',
-        text: 'Tab1',
-        getActiveRef: function getActiveRef() {}
-      }),
-      renderedDOM = _setup8.renderedDOM,
-      props = _setup8.props;
+      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);
   });