@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/lib/Tab/Tabs.module.css

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

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

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

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

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

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