@zohodesk/components 1.2.23 → 1.2.24

package/lib/Ribbon/Ribbon.module.css

@@ -3,7 +3,7 @@
   --ribbon_padding: 0;
   --ribbon_text_color: var(--zdt_ribbon_default_text);
   --ribbon_text_transform: none;
-  --ribbon_font_size: 13px;
+  --ribbon_font_size: var(--zd_font_size13);
   --ribbon_bg_color: var(--zdt_ribbon_default_bg);
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
@@ -13,12 +13,12 @@
   /* flag ribbon default variable */
 
   /* tag ribbon default variables */
-  --ribbon_tag_before_top: 3px;
+  --ribbon_tag_before_top: var(--zd_size3);
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
-  --ribbon_tag_before_width: 20px;
-  --ribbon_tag_before_height: 20px;
-  --ribbon_tag_before_left: -10px;
+  --ribbon_tag_before_width: var(--zd_size20);
+  --ribbon_tag_before_height: var(--zd_size20);
+  --ribbon_tag_before_left: calc( var(--zd_size10) * -1 );
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
   --ribbon_flag_border_width: 14px 12px 14px 0
@@ -64,26 +64,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: 5px 20px;
+  --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: 9px;
+  --ribbon_font_size: var(--zd_font_size9);
 }
 
 .medium {
-  --ribbon_font_size: 11px;
+  --ribbon_font_size: var(--zd_font_size11);
 }
 
 .large {
-  --ribbon_font_size: 13px;
+  --ribbon_font_size: var(--zd_font_size13);
 }
 
 .xlarge {
-  --ribbon_font_size: 14px;
+  --ribbon_font_size: var(--zd_font_size14);
 }
 
 .palette_default {
@@ -220,13 +220,11 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: 4px 24px 4px 6px
-    /*rtl: 4px 6px 4px 24px*/
-  ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: 4px 24px 4px 6px  ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
 .flag.small {
@@ -253,19 +251,19 @@
   /*  Variable:Ignore  */
   bottom: -1px;
   content: '';
-  width: 12px;
+  width: var(--zd_size12) ;
   border-style: solid;
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
 }
 
 [dir=ltr] .flag::after {
-  right: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
 }
 
 [dir=rtl] .flag::after {
-  left: -1px;
+  left: calc( var(--zd_size1) * -1 ) ;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
 }
 
@@ -279,7 +277,7 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: 6px 10px;
+  --ribbon_padding: var(--zd_size6) var(--zd_size10);
   text-align: center;
 }
 
@@ -303,9 +301,9 @@
 .ribbon::before {
   position: absolute;
   content: '';
-  top: 100%;
-  height: 10px;
-  width: 10px;
+  top: 100% ;
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
 }
 
 .ribbon::after, .ribbon::before {
@@ -323,27 +321,27 @@
 }
 
 [dir=ltr] .ribbon::after {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .ribbon::after {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=ltr] .ribbon::before {
-  left: 0;
+  left: 0 ;
   transform: rotateY(180deg);
 }
 
 [dir=rtl] .ribbon::before {
-  right: 0;
+  right: 0 ;
   transform: rotateY(-180deg);
 }
 
 .tag {
   composes: semibold from '../common/common.module.css';
   display: inline-block;
-  height: 28px;
+  height: var(--zd_size28) ;
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 }
@@ -355,16 +353,15 @@
   border-radius: 0 3px 3px 0
     /*rtl: 3px 0 0 3px*/
   ;
-  margin-left: 13px;
-  padding: 6px 8px 6px 5px
-;
+  margin-left: var(--zd_size13) ;
+  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5) ;
 }
 
 [dir=rtl] .tag {
   border-width: 1px 0 1px 1px  ;
   border-radius: 3px 0 0 3px  ;
-  margin-right: 13px;
-  padding: 6px 5px 6px 8px;
+  margin-right: var(--zd_size13) ;
+  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
 }
 
 .tag::before {
@@ -394,26 +391,26 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: 5px 8px;
+  --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: 3px 5px;
+  --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
   display: block;
-  height: 18px;
+  height: var(--zd_size18) ;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: 3px 10px;
+  padding: var(--zd_size3) var(--zd_size10) ;
 }
 
 .sticker.small {
@@ -435,25 +432,25 @@
 .after,
 .before {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size10) ;
 }
 
 [dir=ltr] .after {
-  right: -2px;
+  right: calc( var(--zd_size2) * -1 ) ;
 }
 
 [dir=rtl] .after {
-  left: -2px;
+  left: calc( var(--zd_size2) * -1 ) ;
 }
 
 [dir=ltr] .before {
-  left: -8px;
+  left: calc( var(--zd_size8) * -1 ) ;
 }
 
 [dir=rtl] .before {
-  right: -8px;
+  right: calc( var(--zd_size8) * -1 ) ;
 }
 
 .after::after,
@@ -461,8 +458,8 @@
 .before::after,
 .before::before {
   position: absolute;
-  height: 7px;
-  width: 7px;
+  height: var(--zd_size7) ;
+  width: var(--zd_size7) ;
   content: '';
 }
 
@@ -480,12 +477,12 @@
 
 .after::after,
 .before::after {
-  top: 0;
+  top: 0 ;
 }
 
 .after::before,
 .before::before {
-  bottom: 0;
+  bottom: 0 ;
 }
 
 .children {
@@ -495,11 +492,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: 4px;
+  margin-right: var(--zd_size4) ;
 }
 
 [dir=rtl] .children {
-  margin-left: 4px;
+  margin-left: var(--zd_size4) ;
 }
 
 .childText {

package/lib/Ribbon/__tests__/Ribbon.spec.js

@@ -1,49 +1,59 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _react2 = require("@testing-library/react");
+
 var _Ribbon = _interopRequireDefault(require("../Ribbon.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('Label', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], null)),
-      asFragment = _render.asFragment;
+        asFragment = _render.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   var palette = ['default', 'danger', 'primary', 'secondary', 'info', 'dark'];
   test.each(palette)('rendering the palette of- %s', function (palette) {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-        palette: palette
-      })),
-      asFragment = _render2.asFragment;
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   var type = ['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag'];
   test.each(type)('rendering the type - %s', function (type) {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-        type: type
-      })),
-      asFragment = _render3.asFragment;
+      type: type
+    })),
+        asFragment = _render3.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering children ', function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, " Ribbon 1 "))),
-      asFragment = _render4.asFragment;
+        asFragment = _render4.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   var size = ['small', 'medium', 'large', 'xlarge'];
   test.each(size)('rendering the size - %s', function (size) {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-        size: size
-      })),
-      asFragment = _render5.asFragment;
+      size: size
+    })),
+        asFragment = _render5.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering the customClass', function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
-        customClass: "ribbonCustomClass"
-      })),
-      asFragment = _render6.asFragment;
+      customClass: "ribbonCustomClass"
+    })),
+        asFragment = _render6.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/Ribbon/props/propTypes.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var propTypes = {
   children: _propTypes["default"].element,
   dataId: _propTypes["default"].string,

package/lib/RippleEffect/RippleEffect.js

@@ -4,31 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = RippleEffect;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _defaultProps = require("./props/defaultProps");
+
 var _propTypes = require("./props/propTypes");
+
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
+
 var _RippleEffectModule = _interopRequireDefault(require("./RippleEffect.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function RippleEffect(props) {
   var children = props.children,
-    isActive = props.isActive,
-    isDisabled = props.isDisabled,
-    palette = props.palette,
-    hoverType = props.hoverType,
-    isNeedEffect = props.isNeedEffect,
-    needBorder = props.needBorder,
-    isCopyTextEnabled = props.isCopyTextEnabled;
+      isActive = props.isActive,
+      isDisabled = props.isDisabled,
+      palette = props.palette,
+      hoverType = props.hoverType,
+      isNeedEffect = props.isNeedEffect,
+      needBorder = props.needBorder,
+      isCopyTextEnabled = props.isCopyTextEnabled;
   var className = isNeedEffect ? "".concat(_RippleEffectModule["default"].effect, " ").concat(_RippleEffectModule["default"][palette], " ").concat(needBorder ? _RippleEffectModule["default"].border : '', " ").concat(_RippleEffectModule["default"]["".concat(hoverType, "Hover")] ? _RippleEffectModule["default"]["".concat(hoverType, "Hover")] : '', " ").concat(isActive && !isDisabled ? _RippleEffectModule["default"].active : '', " ").concat(isDisabled ? '' : _RippleEffectModule["default"].hoverEffect, " ").concat(isCopyTextEnabled ? _RippleEffectModule["default"].notAllowed : isDisabled ? (0, _CssProvider["default"])('isDisabled') : '') : '';
+
   var child = _react["default"].Children.only(children);
+
   return /*#__PURE__*/_react["default"].cloneElement(child, {
     className: "".concat(child.props.className || '', " ").concat(className)
   });
 }
-RippleEffect.defaultProps = _defaultProps.defaultProps;
-RippleEffect.propTypes = _propTypes.propTypes;
 
-// if (__DOCS__) {
+RippleEffect.defaultProps = _defaultProps.defaultProps;
+RippleEffect.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //   RippleEffect.docs = {
 //     componentGroup: 'RippleEffect',
 //     folderName: 'Style Guide'

package/lib/RippleEffect/__tests__/RippleEffect.spec.js

@@ -1,64 +1,76 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _react2 = require("@testing-library/react");
+
 var _RippleEffect = _interopRequireDefault(require("../RippleEffect.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('RippleEffect', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render.asFragment;
+        asFragment = _render.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering isActive is true', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        isActive: true
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render2.asFragment;
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render2.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering isDisabled is true', function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        isDisabled: true
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render3.asFragment;
+      isDisabled: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render3.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   var palette = ['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'];
   test.each(palette)('rendering the palette of- %s', function (palette) {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        palette: palette
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render4.asFragment;
+      palette: palette
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render4.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   var hoverTypes = ['default', 'border', 'bg', 'test'];
   test.each(hoverTypes)('rendering hoverType of- %s', function (hoverType) {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        hoverType: hoverType
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render5.asFragment;
+      hoverType: hoverType
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render5.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering isNeedEffect is false', function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        isNeedEffect: false
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render6.asFragment;
+      isNeedEffect: false
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render6.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering needBorder is false', function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        needBorder: false
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render7.asFragment;
+      needBorder: false
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render7.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering isCopyTextEnabled is false', function () {
     var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
-        isCopyTextEnabled: true
-      }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
-      asFragment = _render8.asFragment;
+      isCopyTextEnabled: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render8.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/RippleEffect/props/propTypes.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var propTypes = {
   children: _propTypes["default"].node,
   hoverType: _propTypes["default"].oneOf(['default', 'border', 'bg']),