@zohodesk/components 1.0.0-temp-199 → 1.0.0-temp-200

package/es/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
-/* $Id$ */
-.container {
-  position: relative;
-}
+/* $Id$ */
+.container {
+  position: relative;
+}

package/es/Tab/Tabs.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/forbid-component-props */
 
-/* eslint css-modules/no-unused-class: [2, {
-      markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
-        ]
-    }]
+/* eslint css-modules/no-unused-class: [2, {
+      markAsUsed: [
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
+        ]
+    }]
 */
 import React from 'react';
 import Tab from './Tab';
@@ -139,9 +139,9 @@ class Tabs extends React.Component {
     } = this.state;
 
     if (prevProps.children && children) {
-      /**
-       * To recalculate the dimensions of tabs we are checking the children length.
-       * and also checking the tab id and their order.
+      /**
+       * To recalculate the dimensions of tabs we are checking the children length.
+       * and also checking the tab id and their order.
        */
       let newTabKeys = [];
       React.Children.toArray(children).forEach(child => {
@@ -314,14 +314,14 @@ class Tabs extends React.Component {
       });
 
       if (selectedTabDimension > totalDimension) {
-        /* let { align } = this.props;
-        let newDim = `${remConvert(totalDimension)}rem`;
-        let newTabs;
-        if (align === 'vertical') {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-        } else {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-        }
+        /* let { align } = this.props;
+        let newDim = `${remConvert(totalDimension)}rem`;
+        let newTabs;
+        if (align === 'vertical') {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+        } else {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+        }
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }
@@ -508,13 +508,15 @@ class Tabs extends React.Component {
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup
+        onClose: this.togglePopup,
+        dataId: `${dataId}_dropbox`
       }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll
+        onScroll: this.onScroll,
+        dataId: `${dataId}_Tabs`
       }, React.Children.map(moreTabs, child => {
         if (!child) {
           return null;

package/es/Tab/__tests__/Tab.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tab from '../Tab';
+describe('Tab', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tab, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TabContent from '../TabContent';
+describe('TabContent', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContent, null, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TabContentWrapper from '../TabContentWrapper';
+describe('TabContentWrapper', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabContentWrapper, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TabWrapper from '../TabWrapper';
+describe('TabWrapper', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tabs from '../Tabs';
+describe('Tabs', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tabs, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tab rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabContent rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover coldir"
+    data-id="tabContent_TabContent"
+    data-scroll="true"
+    data-selector-id="tabContent"
+    data-test-id="tabContent_TabContent"
+    role="tabpanel"
+    tabindex="-1"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabContentWrapper rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="tabContentWrapper"
+    data-test-id="boxComponent"
+  />
+</DocumentFragment>
+`;

package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabWrapper rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="tabWrapper"
+    data-test-id="containerComponent"
+  >
+    <div
+      align="vertical"
+      selectedtab="0"
+      type="alpha"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="tabs"
+    data-test-id="boxComponent"
+  >
+    <div
+      class="tab flex cover coldir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Tag/Tag.js

@@ -7,16 +7,16 @@ import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';
 import { getUniqueId } from '../Provider/IdProvider';
 import style from './Tag.module.css';
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
 export default class Tag extends PureComponent {

package/es/Tag/__tests__/Tag.spec.js

@@ -56,9 +56,9 @@ describe('Tag component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test.each(palette)('Should render active - %s', palette => {
-    size.map(sz => {
-      closePalette.map(cp => {
+  size.map(sz => {
+    closePalette.map(cp => {
+      test.each(palette)(`Should render active - palette %s, size ${sz} , closePalette ${cp}`, palette => {
         const mockOnRemove = jest.fn();
         const {
           asFragment