@zohodesk/components 1.3.2 → 1.3.3

package/es/Stencils/Stencils.js

@@ -10,22 +10,15 @@ export default class Stencils extends React.PureComponent {
       shape,
       size,
       palette,
-      customClass
+      customClass,
+      isAnimated
     } = this.props;
-    size = shape === 'rect' ? style[size] : style[`c${size}`];
-    shape = shape === 'rect' ? style.rectangular : style.circle;
+    size = shape === 'rect' ? style[size] : style[`size_${size}`];
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
+      className: `${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`
     });
   }
 
 }
 Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps; // if (__DOCS__) {
-//   Stencils.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     description: ' ',
-//     external: true
-//   };
-// }
+Stencils.defaultProps = defaultProps;

package/es/Stencils/Stencils.module.css

@@ -13,14 +13,14 @@
 .stencil {
   background-size: 800px 1px;
 }
-[dir=ltr] .stencil {
+[dir=ltr] .animate{
   animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
-[dir=rtl] .stencil {
+[dir=rtl] .animate{
   animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
@@ -46,7 +46,7 @@
   }
 }
 
-.rectangular {
+.rect {
   composes: stencil;
   --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
@@ -81,16 +81,20 @@
   composes: stencil;
   --stencil_border_radius: 50%;
 }
-.clarge {
+.square {
+  composes: stencil;
+  --stencil_border_radius: 4px;
+}
+.size_large {
   --stencil_width: var(--zd_size42);
   --stencil_height: var(--zd_size42);
 }
-.cmedium,
-.cdefault {
+.size_medium,
+.size_default {
   --stencil_width: var(--zd_size30);
   --stencil_height: var(--zd_size30);
 }
-.csmall {
+.size_small {
   --stencil_width: var(--zd_size20);
   --stencil_height: var(--zd_size20);
 }

package/es/Stencils/__tests__/Stencils.spec.js

@@ -17,7 +17,7 @@ describe('Stencils', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const shape = ['rect', 'circle'];
+  const shape = ['rect', 'circle', 'square'];
   test.each(shape)('rendering the shape of- %s', shape => {
     const {
       asFragment
@@ -35,6 +35,14 @@ describe('Stencils', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering without animation', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Stencils, {
+      isAnimated: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering the customClass', () => {
     const {
       asFragment

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

@@ -3,7 +3,7 @@
 exports[`Stencils rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium primary StencilsCustomClass"
+    class="container animate rect medium primary StencilsCustomClass"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`Stencils rendering the customClass 1`] = `
 exports[`Stencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium primary "
+    class="container animate rect medium primary "
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Stencils rendering the defult props 1`] = `
 exports[`Stencils rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium dark "
+    class="container animate rect medium dark "
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Stencils rendering the palette of- dark 1`] = `
 exports[`Stencils rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium primary "
+    class="container animate rect medium primary "
   />
 </DocumentFragment>
 `;
@@ -35,7 +35,7 @@ exports[`Stencils rendering the palette of- primary 1`] = `
 exports[`Stencils rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium secondary "
+    class="container animate rect medium secondary "
   />
 </DocumentFragment>
 `;
@@ -43,7 +43,7 @@ exports[`Stencils rendering the palette of- secondary 1`] = `
 exports[`Stencils rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="container circle cmedium primary "
+    class="container animate circle size_medium primary "
   />
 </DocumentFragment>
 `;
@@ -51,7 +51,15 @@ exports[`Stencils rendering the shape of- circle 1`] = `
 exports[`Stencils rendering the shape of- rect 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium primary "
+    class="container animate rect medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the shape of- square 1`] = `
+<DocumentFragment>
+  <div
+    class="container animate square size_medium primary "
   />
 </DocumentFragment>
 `;
@@ -59,7 +67,7 @@ exports[`Stencils rendering the shape of- rect 1`] = `
 exports[`Stencils rendering the size of- default 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular default primary "
+    class="container animate rect default primary "
   />
 </DocumentFragment>
 `;
@@ -67,7 +75,7 @@ exports[`Stencils rendering the size of- default 1`] = `
 exports[`Stencils rendering the size of- large 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular large primary "
+    class="container animate rect large primary "
   />
 </DocumentFragment>
 `;
@@ -75,7 +83,7 @@ exports[`Stencils rendering the size of- large 1`] = `
 exports[`Stencils rendering the size of- medium 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular medium primary "
+    class="container animate rect medium primary "
   />
 </DocumentFragment>
 `;
@@ -83,7 +91,15 @@ exports[`Stencils rendering the size of- medium 1`] = `
 exports[`Stencils rendering the size of- small 1`] = `
 <DocumentFragment>
   <div
-    class="container rectangular small primary "
+    class="container animate rect small primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering without animation 1`] = `
+<DocumentFragment>
+  <div
+    class="container  rect medium primary "
   />
 </DocumentFragment>
 `;

package/es/Stencils/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   palette: 'primary',
   shape: 'rect',
   size: 'medium',
-  customClass: ''
+  customClass: '',
+  isAnimated: true
 };

package/es/Stencils/props/propTypes.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
-  shape: PropTypes.oneOf(['rect', 'circle']),
+  shape: PropTypes.oneOf(['rect', 'circle', 'square']),
   size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  isAnimated: PropTypes.bool
 };

package/es/Tab/Tab.js

@@ -6,6 +6,7 @@ import { Tab_defaultProps } from "./props/defaultProps";
 import { Tab_propTypes } from "./props/propTypes";
 import { Box, Container } from "../Layout";
 import { cs } from "../utils/Common";
+import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
 import styles from "./Tab.module.css";
 const tabTypes = {
   alpha: {
@@ -67,7 +68,7 @@ export default function Tab(_ref) {
   let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
   let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
   return /*#__PURE__*/React.createElement(Box, {
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',

package/es/Tab/TabWrapper.js

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { TabWrapper_defaultProps } from "./props/defaultProps";
 import { TabWrapper_propTypes } from "./props/propTypes";
 import { Container } from "../Layout";
+import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";
 
 function TabWrapper(_ref) {
   let {
@@ -28,7 +29,7 @@ function TabWrapper(_ref) {
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'column' : 'row',
+    alignBox: TAB_ALIGN_MAPPING[align],
     dataId: dataId,
     dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => {

package/es/Tab/Tabs.js

@@ -22,6 +22,7 @@ import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
+import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
 import btnstyle from "../semantic/Button/semanticButton.module.css";
 
 class Tabs extends React.Component {
@@ -118,7 +119,7 @@ class Tabs extends React.Component {
         align
       } = this.props;
       let newDim = `${remConvert(totalDimension)}rem`;
-      align === 'vertical' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
+      TAB_DIRECTION_MAPPING[align] === 'column' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
     }
   }
 
@@ -126,7 +127,7 @@ class Tabs extends React.Component {
     let {
       align
     } = this.props;
-    return align === 'vertical' ? this.highlight.offsetLeft : this.highlight.offsetTop;
+    return TAB_DIRECTION_MAPPING[align] === 'column' ? this.highlight.offsetLeft : this.highlight.offsetTop;
   }
 
   componentDidUpdate(prevProps) {
@@ -199,12 +200,12 @@ class Tabs extends React.Component {
       if (tabActive) {
         let position, dimension;
 
-        if (align === 'vertical') {
+        if (TAB_DIRECTION_MAPPING[align] === 'column') {
           position = tabActive.offsetLeft;
           dimension = tabActive.offsetWidth;
           node.style.transform = `translateX(${remConvert(position - highlightInitialDimension)}rem)`;
           node.style.width = `${remConvert(dimension)}rem`;
-        } else if (align === 'horizontal') {
+        } else if (TAB_DIRECTION_MAPPING[align] === 'row') {
           position = tabActive.offsetTop;
           dimension = tabActive.offsetHeight;
           node.style.transform = `translateY(${remConvert(position - highlightInitialDimension)}rem)`;
@@ -402,8 +403,7 @@ class Tabs extends React.Component {
       removeClose
     } = this.props;
     removeClose && removeClose(e);
-    let popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
-    boxPosition = boxPosition ? boxPosition : popupPosition;
+    boxPosition = boxPosition ? boxPosition : TAB_POPUP_POSITION_MAPPING[align];
     togglePopup(e, boxPosition);
   }
 
@@ -527,7 +527,7 @@ class Tabs extends React.Component {
       MoreButtonProps = {},
       TextBoxIconProps = {}
     } = customProps;
-    let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    let popupClass = TAB_DIRECTION_MAPPING[align] === 'column' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
     const moreTabsListItems = this.handleFilterSuggestions({
       moreTabs
     });
@@ -695,17 +695,17 @@ class Tabs extends React.Component {
       className: containerClass,
       dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column',
+      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
       className: tabsClass,
       style: style
     }, /*#__PURE__*/React.createElement(Box, {
       eleRef: this.getTabsRef,
       flexible: true
     }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column',
+      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
       className: tabsStyle.hidden
     }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
-      alignBox: align === 'vertical' ? 'row' : 'column'
+      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: hlClass,
       ref: this.getHighlightRef,

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { TabWrapper, Tabs, Tab, TabContentWrapper, TabContent } from "../index";
+describe('TabWrapper', () => {
+  const alignments = ['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse'];
+  test.each(alignments)('rendering the align prop of - %s', alignments => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TabWrapper, {
+      type: "alpha",
+      align: alignments,
+      defaultTab: "page1"
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+      id: "page1",
+      text: "Page 1"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "page2",
+      text: "Page 2"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "page3",
+      text: "Page 3"
+    })), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+      id: "page1",
+      text: "Page 1"
+    }, /*#__PURE__*/React.createElement("div", null, "Page 1 Content")), /*#__PURE__*/React.createElement(TabContent, {
+      id: "page2",
+      text: "Page 2"
+    }, /*#__PURE__*/React.createElement("div", null, "Page 2 Content")), /*#__PURE__*/React.createElement(TabContent, {
+      id: "page3",
+      text: "Page 3"
+    }, /*#__PURE__*/React.createElement("div", null, "Page 3 Content")))));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});