@zohodesk/components 1.3.2 → 1.3.3

package/lib/Stencils/Stencils.js

@@ -55,11 +55,11 @@ var Stencils = /*#__PURE__*/function (_React$PureComponent) {
           shape = _this$props.shape,
           size = _this$props.size,
           palette = _this$props.palette,
-          customClass = _this$props.customClass;
-      size = shape === 'rect' ? _StencilsModule["default"][size] : _StencilsModule["default"]["c".concat(size)];
-      shape = shape === 'rect' ? _StencilsModule["default"].rectangular : _StencilsModule["default"].circle;
+          customClass = _this$props.customClass,
+          isAnimated = _this$props.isAnimated;
+      size = shape === 'rect' ? _StencilsModule["default"][size] : _StencilsModule["default"]["size_".concat(size)];
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_StencilsModule["default"].container, " ").concat(shape, " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass)
+        className: "".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass)
       });
     }
   }]);
@@ -69,11 +69,4 @@ var Stencils = /*#__PURE__*/function (_React$PureComponent) {
 
 exports["default"] = Stencils;
 Stencils.propTypes = _propTypes.propTypes;
-Stencils.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Stencils.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     description: ' ',
-//     external: true
-//   };
-// }
+Stencils.defaultProps = _defaultProps.defaultProps;

package/lib/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/lib/Stencils/__tests__/Stencils.spec.js

@@ -24,7 +24,7 @@ describe('Stencils', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var shape = ['rect', 'circle'];
+  var shape = ['rect', 'circle', 'square'];
   test.each(shape)('rendering the shape of- %s', function (shape) {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
       shape: shape
@@ -42,12 +42,20 @@ describe('Stencils', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the customClass', function () {
+  test('rendering without animation', function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
-      customClass: "StencilsCustomClass"
+      isAnimated: false
     })),
         asFragment = _render5.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the customClass', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
+      customClass: "StencilsCustomClass"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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/lib/Stencils/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   palette: 'primary',
   shape: 'rect',
   size: 'medium',
-  customClass: ''
+  customClass: '',
+  isAnimated: true
 };
 exports.defaultProps = defaultProps;

package/lib/Stencils/props/propTypes.js

@@ -11,8 +11,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'dark']),
-  shape: _propTypes["default"].oneOf(['rect', 'circle']),
+  shape: _propTypes["default"].oneOf(['rect', 'circle', 'square']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'default']),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  isAnimated: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/Tab/Tab.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Common = require("../utils/Common");
 
+var _tabConfigs = require("./utils/tabConfigs");
+
 var _TabModule = _interopRequireDefault(require("./Tab.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,7 +92,7 @@ function Tab(_ref) {
   var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
   var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat("".concat(type, "Hover"))]]);
-  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, align === 'vertical' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
+  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',

package/lib/Tab/TabWrapper.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
+var _tabConfigs = require("./utils/tabConfigs");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -61,7 +63,7 @@ function TabWrapper(_ref) {
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: align === 'vertical' ? 'column' : 'row',
+    alignBox: _tabConfigs.TAB_ALIGN_MAPPING[align],
     dataId: dataId,
     dataSelectorId: dataSelectorId
   }, _react["default"].Children.map(children, function (child) {

package/lib/Tab/Tabs.js

@@ -37,6 +37,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/Re
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
+var _tabConfigs = require("./utils/tabConfigs");
+
 var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -176,14 +178,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       if (totalDimension && this[selectedTab]) {
         var align = this.props.align;
         var newDim = "".concat((0, _Common.remConvert)(totalDimension), "rem");
-        align === 'vertical' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
+        _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
       }
     }
   }, {
     key: "getHighlightDim",
     value: function getHighlightDim() {
       var align = this.props.align;
-      return align === 'vertical' ? this.highlight.offsetLeft : this.highlight.offsetTop;
+      return _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? this.highlight.offsetLeft : this.highlight.offsetTop;
     }
   }, {
     key: "componentDidUpdate",
@@ -260,12 +262,12 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         if (tabActive) {
           var position, dimension;
 
-          if (align === 'vertical') {
+          if (_tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column') {
             position = tabActive.offsetLeft;
             dimension = tabActive.offsetWidth;
             node.style.transform = "translateX(".concat((0, _Common.remConvert)(position - highlightInitialDimension), "rem)");
             node.style.width = "".concat((0, _Common.remConvert)(dimension), "rem");
-          } else if (align === 'horizontal') {
+          } else if (_tabConfigs.TAB_DIRECTION_MAPPING[align] === 'row') {
             position = tabActive.offsetTop;
             dimension = tabActive.offsetHeight;
             node.style.transform = "translateY(".concat((0, _Common.remConvert)(position - highlightInitialDimension), "rem)");
@@ -471,8 +473,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           align = _this$props8.align,
           removeClose = _this$props8.removeClose;
       removeClose && removeClose(e);
-      var popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
-      boxPosition = boxPosition ? boxPosition : popupPosition;
+      boxPosition = boxPosition ? boxPosition : _tabConfigs.TAB_POPUP_POSITION_MAPPING[align];
       togglePopup(e, boxPosition);
     }
   }, {
@@ -592,7 +593,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           MoreButtonProps = _customProps$MoreButt === void 0 ? {} : _customProps$MoreButt,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
-      var popupClass = align === 'vertical' ? _TabsModule["default"][position] ? _TabsModule["default"][position] : '' : '';
+      var popupClass = _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabsModule["default"][position] ? _TabsModule["default"][position] : '' : '';
       var moreTabsListItems = this.handleFilterSuggestions({
         moreTabs: moreTabs
       });
@@ -753,17 +754,17 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         className: containerClass,
         dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: align === 'vertical' ? 'row' : 'column',
+        alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
         className: tabsClass,
         style: style
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         eleRef: this.getTabsRef,
         flexible: true
       }, renderVirtualTabs && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: align === 'vertical' ? 'row' : 'column',
+        alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
         className: _TabsModule["default"].hidden
       }, this.renderTabs(children, [], true)), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: align === 'vertical' ? 'row' : 'column'
+        alignBox: _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
       }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: hlClass,
         ref: this.getHighlightRef,

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('TabWrapper', function () {
+  var alignments = ['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse'];
+  test.each(alignments)('rendering the align prop of - %s', function (alignments) {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index.TabWrapper, {
+      type: "alpha",
+      align: alignments,
+      defaultTab: "page1"
+    }, /*#__PURE__*/_react["default"].createElement(_index.Tabs, null, /*#__PURE__*/_react["default"].createElement(_index.Tab, {
+      id: "page1",
+      text: "Page 1"
+    }), /*#__PURE__*/_react["default"].createElement(_index.Tab, {
+      id: "page2",
+      text: "Page 2"
+    }), /*#__PURE__*/_react["default"].createElement(_index.Tab, {
+      id: "page3",
+      text: "Page 3"
+    })), /*#__PURE__*/_react["default"].createElement(_index.TabContentWrapper, null, /*#__PURE__*/_react["default"].createElement(_index.TabContent, {
+      id: "page1",
+      text: "Page 1"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 1 Content")), /*#__PURE__*/_react["default"].createElement(_index.TabContent, {
+      id: "page2",
+      text: "Page 2"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 2 Content")), /*#__PURE__*/_react["default"].createElement(_index.TabContent, {
+      id: "page3",
+      text: "Page 3"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Page 3 Content"))))),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});