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

package/lib/Tab/Tabs.module.css

@@ -0,0 +1,140 @@
+.tab {
+  position: relative;
+  composes: offSelection from '../common/common.module.css';
+  z-index: 1;
+  --tab_position_gap: var(--zd_size22);
+}
+.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: 0 -2px 9px var(--zdt_tabs_alpha_box_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);
+  composes: oflowy from '../common/common.module.css';
+}
+
+[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);
+}
+[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;
+}

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

@@ -0,0 +1,130 @@
+"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;
+
+    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;
+
+    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;
+
+    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;
+
+    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 special class', () => {
+  //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
+  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);
+  //
+  // });
+
+  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;
+
+    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;
+
+    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 tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
+    TestUtils.Simulate.click(tabElement, {
+      currentTarget: {
+        offsetLeft: 0,
+        offsetWidth: 0
+      }
+    });
+    expect(props.onClick).toHaveBeenCalled();
+    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 tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab1_Tab');
+    expect(tabElement.getAttribute('data-id')).toBe('taskSubtab1_Tab');
+  });
+});

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

@@ -0,0 +1,22 @@
+"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;
+
+    var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabcontent');
+    expect(component.getAttribute('data-id')).toBe('tabcontent');
+  });
+});

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

@@ -0,0 +1,59 @@
+"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;
+
+    var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'child1');
+    expect(component.getAttribute('data-id')).toBe('child1');
+  });
+  it('is only selected TabContent rendered ', function () {
+    var Tab1 = /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      id: '0',
+      key: 0
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      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;
+
+    var component = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'not-render');
+    expect(component.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,100 @@
+"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();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
+      defaultTab: "0",
+      type: "alpha",
+      onSelect: onSelect
+    }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      isResponsive: false
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: '0',
+      id: "0"
+    }))));
+    var tabChild = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
+    expect(tabChild.getAttribute('data-id')).toBe('tabMenu_Tab');
+  });
+  it('is onSelect called', function () {
+    var onSelect = jest.fn();
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
+      defaultTab: "0",
+      type: "alpha",
+      onSelect: onSelect
+    }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      isResponsive: false
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: '0',
+      id: "0"
+    }))));
+    var tabChild = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
+    TestUtils.Simulate.click(tabChild, {
+      currentTarget: {
+        offsetLeft: 0,
+        offsetWidth: 0
+      }
+    });
+    expect(onSelect).toHaveBeenCalled();
+  });
+  it('is disable State internally', function () {
+    var renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/_react["default"].createElement(_TabWrapper["default"], {
+      defaultTab: "0",
+      type: "alpha"
+    }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      isResponsive: false
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: '0',
+      id: "0"
+    }, "One"), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: '1',
+      id: "1"
+    }, "Two"))));
+    expect(renderedDOM.state.selectedTabInternal).toBe('0');
+  });
+  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"], {
+      key: '0',
+      id: "0"
+    }, "One"), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      key: '1',
+      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

@@ -0,0 +1,123 @@
+"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',
+  children: [/*#__PURE__*/_react["default"].createElement("div", {
+    key: 0,
+    "data-id": "customtab"
+  }, "Not tab component")],
+  isResponsive: false
+};
+var tabChildrenProps = {
+  type: 'alpha',
+  isResponsive: false,
+  selectedTab: '0',
+  children: [/*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+    style: {
+      width: '200px'
+    },
+    key: 0,
+    id: '0'
+  }, "Tab component")]
+};
+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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    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;
+
+    var component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'taskSubtab');
+    expect(component.length).toBe(0);
+  });
+});

package/lib/Tab/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _TabWrapper["default"];
+  }
+});
+Object.defineProperty(exports, "TabContentWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _TabContentWrapper["default"];
+  }
+});
+Object.defineProperty(exports, "TabContent", {
+  enumerable: true,
+  get: function get() {
+    return _TabContent["default"];
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs["default"];
+  }
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tab["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 }; }