@zohodesk/components 1.0.0-test-252 → 1.0.0

package/lib/Ribbon/Ribbon.module.css

@@ -18,15 +18,20 @@
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
   --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_left: calc( var(--zd_size10) * -1 );
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
-  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
+  --ribbon_flag_border_width: 14px 12px 14px 0
+    /*rtl: 14px 0 14px 12px*/
+  ;
+  --ribbon_tag_before_border_width: 1px 0 0 1px
+    /*rtl: 1px 1px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12);
-  --ribbon_tag_before_border_width: 1px 1px 0 0;
+  --ribbon_flag_border_width: 14px 12px 14px 0  ;
+  --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
+
 .basic {
   composes: varClass;
   position: relative;
@@ -41,6 +46,7 @@
   border-style: solid;
   border-color: var(--ribbon_border_color);
 }
+
 .default,
 .flag,
 .plain,
@@ -59,15 +65,19 @@
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
+
 .small {
   --ribbon_font_size: var(--zd_font_size9);
 }
+
 .medium {
   --ribbon_font_size: var(--zd_font_size11);
 }
+
 .large {
   --ribbon_font_size: var(--zd_font_size13);
 }
+
 .xlarge {
   --ribbon_font_size: var(--zd_font_size14);
 }
@@ -75,96 +85,125 @@
 .palette_default {
   --ribbon_bg_color: var(--zdt_ribbon_palette_bg);
 }
+
 .palette_danger {
   --ribbon_bg_color: var(--zdt_ribbon_danger_bg);
 }
+
 .palette_primary {
   --ribbon_bg_color: var(--zdt_ribbon_primary_bg);
 }
+
 .palette_secondary {
   --ribbon_bg_color: var(--zdt_ribbon_secondary_bg);
 }
+
 .palette_info {
   --ribbon_bg_color: var(--zdt_ribbon_info_bg);
 }
+
 .palette_dark {
   --ribbon_bg_color: var(--zdt_ribbon_dark_bg);
 }
+
 .plain_default {
   --ribbon_text_color: var(--zdt_ribbon_plain_text);
 }
+
 .plain_danger {
   --ribbon_text_color: var(--zdt_ribbon_danger_text);
 }
+
 .plain_primary {
   --ribbon_text_color: var(--zdt_ribbon_primary_text);
 }
+
 .plain_secondary {
   --ribbon_text_color: var(--zdt_ribbon_secondary_text);
 }
+
 .plain_info {
   --ribbon_text_color: var(--zdt_ribbon_info_text);
 }
+
 .plain_dark {
   --ribbon_text_color: var(--zdt_ribbon_default_text);
 }
+
 .default_default {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_default_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_default);
 }
+
 .default_danger {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_danger_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_danger);
 }
+
 .default_primary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_primary_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_primary);
 }
+
 .default_secondary {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_secondary_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_secondary);
 }
+
 .default_info {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_info_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_info);
 }
+
 .default_dark {
-  --ribbon_box_shadow: 0 5px 10px var(--zdt_ribbon_dark_shadow);
+  --ribbon_box_shadow: var(--zd_bs_ribbon_dark);
 }
+
 .box_default {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_default_border);
 }
+
 .box_danger {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_danger_border);
 }
+
 .box_primary {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_primary_border);
 }
+
 .box_secondary {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_secondary_border);
 }
+
 .box_info {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_info_border);
 }
+
 .box_dark {
   --ribbon_border_width: 1px;
   --ribbon_border_color: var(--zdt_ribbon_dark_border);
 }
+
 .stamp_default {
   --ribbon_bg_color: var(--zdt_ribbon_default_stamp_bg);
 }
+
 .stamp_danger {
   --ribbon_bg_color: var(--zdt_ribbon_danger_stamp_bg);
 }
+
 .stamp_primary {
   --ribbon_bg_color: var(--zdt_ribbon_primary_stamp_bg);
 }
+
 .stamp_secondary {
   --ribbon_bg_color: var(--zdt_ribbon_secondary_stamp_bg);
 }
+
 .stamp_info {
   --ribbon_bg_color: var(--zdt_ribbon_info_stamp_bg);
 }
+
 .stamp_dark {
   --ribbon_bg_color: var(--zdt_ribbon_dark_stamp_bg);
 }
@@ -173,105 +212,125 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: var(--zd_size20);
+  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6
+)    ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
+
 .flag::after {
   position: absolute;
+  /*  Variable:Ignore  */
   top: -1px;
+  /*  Variable:Ignore  */
+  /*  Variable:Ignore  */
   bottom: -1px;
   content: '';
-  width: var(--zd_size12);
+  width: var(--zd_size12) ;
   border-style: solid;
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
 }
+
 [dir=ltr] .flag::after {
-  right: -1px;
-  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);
+  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;
-  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);
+  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);
 }
+
 .plain {
   display: inline-block;
   composes: semibold from '../common/common.module.css';
 }
+
 .ribbon {
   composes: semibold from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: var(--zd_size20);
+  --ribbon_line_height: 20px;
   text-align: center;
 }
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
   content: '';
-  top: 100%;
-  height: var(--zd_size10);
-  width: var(--zd_size10);
+  top: 100% ;
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
 }
+
 .ribbon::after, .ribbon::before {
   border-style: solid;
   border-width: 5px;
   background-color: inherit;
 }
+
 [dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
-  border-color: transparent transparent var(--zdt_ribbon_flag_white_border)
-    var(--zdt_ribbon_flag_white_border);
+  border-color: transparent transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border);
 }
+
 [dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
-  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border)    transparent;
+  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border) transparent;
 }
+
 [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: var(--zd_size28);
+  height: var(--zd_size28) ;
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 }
 
 [dir=ltr] .tag {
-  border-width: 1px 1px 1px 0/*rtl: 1px 0 1px 1px*/;
-  border-radius: 0 3px 3px 0/*rtl: 3px 0 0 3px*/;
-  margin-left: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)/*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/;
+  border-width: 1px 1px 1px 0
+    /*rtl: 1px 0 1px 1px*/
+  ;
+  border-radius: 0 3px 3px 0
+    /*rtl: 3px 0 0 3px*/
+  ;
+  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: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8);
+  border-width: 1px 0 1px 1px  ;
+  border-radius: 3px 0 0 3px  ;
+  margin-right: var(--zd_size13) ;
+  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
 }
+
 .tag::before {
   position: absolute;
   content: '';
@@ -284,10 +343,12 @@
   border-width: var(--ribbon_tag_before_border_width);
   border-radius: var(--ribbon_tag_before_border_radius);
 }
+
 [dir=ltr] .tag::before {
   transform: rotate(-45deg);
   left: var(--ribbon_tag_before_left);
 }
+
 [dir=rtl] .tag::before {
   transform: rotate(45deg);
   right: var(--ribbon_tag_before_left);
@@ -299,14 +360,16 @@
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
+
 .stamp {
   display: inline-block;
   --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
+
 .sticker {
   display: block;
-  height: var(--zd_size18);
+  height: var(--zd_size18) ;
   line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
@@ -314,64 +377,79 @@
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: var(--zd_size3) var(--zd_size10);
+  padding: var(--zd_size3) var(--zd_size10) ;
 }
+
 .after,
 .before {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size10);
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size10) ;
 }
+
 [dir=ltr] .after {
-  right: calc(var(--zd_size2) * -1);
+  right: calc( var(--zd_size2) * -1 ) ;
 }
+
 [dir=rtl] .after {
-  left: calc(var(--zd_size2) * -1);
+  left: calc( var(--zd_size2) * -1 ) ;
 }
+
 [dir=ltr] .before {
-  left: calc(var(--zd_size8) * -1);
+  left: calc( var(--zd_size8) * -1 ) ;
 }
+
 [dir=rtl] .before {
-  right: calc(var(--zd_size8) * -1);
+  right: calc( var(--zd_size8) * -1 ) ;
 }
+
 .after::after,
 .after::before,
 .before::after,
 .before::before {
   position: absolute;
-  height: var(--zd_size7);
-  width: var(--zd_size7);
+  height: var(--zd_size7) ;
+  width: var(--zd_size7) ;
   content: '';
 }
+
 .after::after, .after::before, .before::after, .before::before {
   background-color: var(--zdt_ribbon_white_bg);
 }
+
 [dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
   transform: rotate(45deg);
 }
+
 [dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
   transform: rotate(-45deg);
 }
+
 .after::after,
 .before::after {
-  top: 0;
+  top: 0 ;
 }
+
 .after::before,
 .before::before {
-  bottom: 0;
+  bottom: 0 ;
 }
+
 .children {
   display: inline-block;
   vertical-align: top;
   line-height: 0;
 }
+
 [dir=ltr] .children {
-  margin-right: var(--zd_size4);
+  margin-right: var(--zd_size4) ;
 }
+
 [dir=rtl] .children {
-  margin-left: var(--zd_size4);
+  margin-left: var(--zd_size4) ;
 }
+
 .childText {
   position: relative;
 }

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

@@ -1,15 +1,20 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _Ribbon = _interopRequireDefault(require("../Ribbon"));
+
 var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 describe('Ribbon component', function () {
   it('should the palette is default', function () {
     var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
       palette: "default",
       text: "default"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -18,6 +23,7 @@ describe('Ribbon component', function () {
       palette: "danger",
       text: "danger"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -26,6 +32,7 @@ describe('Ribbon component', function () {
       palette: "secondary",
       text: "secondary"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -34,6 +41,7 @@ describe('Ribbon component', function () {
       palette: "info",
       text: "info"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -42,6 +50,7 @@ describe('Ribbon component', function () {
       palette: "primary",
       text: "primary"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -50,6 +59,7 @@ describe('Ribbon component', function () {
       palette: "dark",
       text: "dark"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -59,6 +69,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "small"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -68,6 +79,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "small"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -77,6 +89,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "large"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -86,6 +99,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -95,6 +109,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -104,6 +119,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -113,6 +129,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -122,6 +139,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -131,6 +149,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -140,6 +159,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -149,6 +169,7 @@ describe('Ribbon component', function () {
       text: "default",
       size: "xlarge"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -158,6 +179,7 @@ describe('Ribbon component', function () {
       text: "default",
       type: "tag"
     }));
+
     var tree = ele.toJSON();
     expect(tree).toMatchSnapshot();
   });

package/lib/Ribbon/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   text: 'Ribbon',
   type: 'default',
   dataId: 'ribbonComp',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'ribbon'
 };
 exports.defaultProps = defaultProps;

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,
@@ -13,6 +16,7 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/RippleEffect/RippleEffect.js

@@ -4,32 +4,41 @@ 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 (false) {
-  RippleEffect.docs = {
-    componentGroup: 'RippleEffect',
-    folderName: 'Style Guide'
-  };
-}
+RippleEffect.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+//   RippleEffect.docs = {
+//     componentGroup: 'RippleEffect',
+//     folderName: 'Style Guide'
+//   };
+// }