@zohodesk/components 1.0.0-temp-195.1 → 1.0.0-temp-197

package/es/Tab/Tab.js

@@ -2,11 +2,11 @@
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../utils/Common";
-import styles from "./Tab.module.css";
+import { Tab_defaultProps } from './props/defaultProps';
+import { Tab_propTypes } from './props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../utils/Common';
+import styles from './Tab.module.css';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',

package/es/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./TabContent.module.css";
+import { TabContent_defaultProps } from './props/defaultProps';
+import { TabContent_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
+import { TabContentWrapper_defaultProps } from './props/defaultProps';
+import { TabContentWrapper_propTypes } from './props/propTypes';
+import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/Tab/TabWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
+import { TabWrapper_defaultProps } from './props/defaultProps';
+import { TabWrapper_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
 
 function TabWrapper(_ref) {
   let {

package/es/Tab/Tabs.js

@@ -8,19 +8,19 @@
     }]
 */
 import React from 'react';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from "../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./Tabs.module.css";
-import Popup from "../Popup/Popup";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import btnstyle from "../semantic/Button/semanticButton.module.css";
+import tabsStyle from './Tabs.module.css';
+import Popup from '../Popup/Popup';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 
 class Tabs extends React.Component {
   constructor(props) {

package/es/Tab/Tabs.module.css

@@ -31,7 +31,7 @@
   bottom: 0 ;
   height: var(--zd_size10) ;
   border-radius: 100px / 5px;
-  box-shadow: var(--zd_bs_tabs_shadow);
+  box-shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
 }
 
 [dir=ltr] .alpha::after {
@@ -123,13 +123,13 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1); 
+  right: calc(var(--tab_position_gap) * -1);
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1); 
+  left: calc(var(--tab_position_gap) * -1);
 }
 
 .hidden {

package/es/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/Tag/Tag.js

@@ -1,22 +1,22 @@
 import React, { PureComponent } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-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'] }]
+import Avatar from '../Avatar/Avatar';
+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'] }]
  */
 
 export default class Tag extends PureComponent {

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

@@ -0,0 +1,235 @@
+import React from 'react';
+import Tag from '../Tag';
+import { render } from "@testing-library/react";
+describe('Tag component', () => {
+  const size = ['small', 'medium'];
+  const palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];
+  const closePalette = ['danger', 'primary'];
+  test('Should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render imageURL and hasAvatar', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      imageURL: "https://www.w3schools.com/images/w3schools_green.jpg"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      text: "TagTest"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render initial', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      initial: "avatarIntial"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render onRemove - %s', size => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      active: true,
+      size: size,
+      onRemove: mockOnRemove
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render active - %s', palette => {
+    size.map(sz => {
+      closePalette.map(cp => {
+        const mockOnRemove = jest.fn();
+        const {
+          asFragment
+        } = render( /*#__PURE__*/React.createElement(Tag, {
+          active: true,
+          size: sz,
+          palette: palette,
+          onRemove: mockOnRemove,
+          closePalette: cp
+        }));
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
+  });
+  test('Should be render rounded is false', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      rounded: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render palette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      active: true,
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      disabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      disabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(closePalette)('Should render closePalette - %s', closePalette => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      active: true,
+      closePalette: closePalette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render onSelectTag', () => {
+    const mockonSelectTag = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onSelectTag: mockonSelectTag
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render closeTitle', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      closeTitle: "TagCloseTitle"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if false', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if true', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      active: true,
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconName and iconSize', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      iconName: "ZD-androidd",
+      iconSize: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render tooltip', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      tooltip: "Tagtooltip"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render avatarPalette - %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      hasAvatar: true,
+      palette: palette,
+      avatarPalette: "primary"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom class', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      iconName: "ZD-androidd",
+      hasAvatar: true,
+      customClass: {
+        customTag: 'customCustomTag',
+        customTagClose: 'customCustomTagClose',
+        customTagIcon: 'customCustomTagIcon',
+        customAvatar: 'customCustomAvatar'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally clearLabel', () => {
+    const mockOnRemove = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      onRemove: mockOnRemove,
+      a11y: {
+        clearLabel: 'TagClearLabel'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});