@zohodesk/components 1.0.0-alpha-264 → 1.0.0-alpha-266

package/lib/Ribbon/Ribbon.module.css

@@ -21,12 +21,17 @@
   --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: 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*/
+  ;
 }[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: var(--zd_size14) var(--zd_size12) var(--zd_size14) 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);
 }
@@ -178,12 +217,15 @@
 }
 
 [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)
+    /*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/
+  ;
 }
 
 [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;
   top: -1px;
@@ -194,19 +236,22 @@
   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);
+  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);
+  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;
@@ -216,6 +261,7 @@
   --ribbon_line_height: var(--zd_size20);
   text-align: center;
 }
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -224,28 +270,34 @@
   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;
 }
+
 [dir=rtl] .ribbon::after {
   left: 0;
 }
+
 [dir=ltr] .ribbon::before {
   left: 0;
   transform: rotateY(180deg);
 }
+
 [dir=rtl] .ribbon::before {
   right: 0;
   transform: rotateY(-180deg);
@@ -260,18 +312,25 @@
 }
 
 [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*/;
+  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)*/;
+  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)*/
+  ;
 }
 
 [dir=rtl] .tag {
-  border-width: 1px 0 1px 1px;
-  border-radius: 3px 0 0 3px;
+  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);
+  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,11 +360,13 @@
   --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);
@@ -316,6 +379,7 @@
   border-color: var(--zdt_ribbon_flag_white_border);
   padding: var(--zd_size3) var(--zd_size10);
 }
+
 .after,
 .before {
   position: absolute;
@@ -323,18 +387,23 @@
   bottom: 0;
   width: var(--zd_size10);
 }
+
 [dir=ltr] .after {
   right: calc(var(--zd_size2) * -1);
 }
+
 [dir=rtl] .after {
   left: calc(var(--zd_size2) * -1);
 }
+
 [dir=ltr] .before {
   left: calc(var(--zd_size8) * -1);
 }
+
 [dir=rtl] .before {
   right: calc(var(--zd_size8) * -1);
 }
+
 .after::after,
 .after::before,
 .before::after,
@@ -344,34 +413,43 @@
   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;
 }
+
 .after::before,
 .before::before {
   bottom: 0;
 }
+
 .children {
   display: inline-block;
   vertical-align: top;
   line-height: 0;
 }
+
 [dir=ltr] .children {
   margin-right: var(--zd_size4);
 }
+
 [dir=rtl] .children {
   margin-left: var(--zd_size4);
 }
+
 .childText {
   position: relative;
 }

package/lib/Switch/Switch.module.css

@@ -2,22 +2,26 @@
   /* switch default variables */
   --switch_off_bg_color: var(--zdt_switch_default_off_bg);
   --switch_on_bg_color: var(--zdt_switch_default_on_bg);
-  
+
   /* switch circle default variables */
   --switch_circle_bg_color: var(--zdt_switch_circle_bg);
   --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: 0 1px 4px 0 var(--zdt_switch_circle_shadow);
+  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
 }
+
 .container {
   composes: varClass;
   vertical-align: middle;
 }
+
 .disabled {
   composes: disabled from '../common/common.module.css';
 }
+
 .readonly {
   composes: readonly from '../common/common.module.css';
 }
+
 .label {
   display: inline-block;
   position: relative;
@@ -26,9 +30,11 @@
   border-radius: 20px;
   cursor: pointer;
 }
+
 .effect:hover .label
+
 /* .effect:focus .label */
- {
+  {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
 .label:after {
@@ -41,16 +47,19 @@
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }
-.checked + .label {
+
+.checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-.checked + .label:after {
+
+.checked+.label:after {
   right: calc(var(--zd_size1) * -1);
 }
 
 .input {
   display: none;
 }
+
 .small {
   height: var(--zd_size14);
   width: var(--zd_size28);
@@ -66,6 +75,7 @@
   height: var(--zd_size12);
   top: calc(var(--zd_size2) * -1);
 }
+
 .medium {
   height: var(--zd_size18);
   width: var(--zd_size34);
@@ -81,31 +91,38 @@
   height: var(--zd_size18);
   top: calc(var(--zd_size3) * -1);
 }
-.input:disabled + .label {
+
+.input:disabled+.label {
   opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
 }
+
 .switch {
   display: inline-block;
   composes: offSelection from '../common/common.module.css';
   vertical-align: middle;
 }
+
 .switch_small {
   composes: small;
   composes: switch;
 }
+
 .switch_medium {
   composes: medium;
   composes: switch;
 }
-.switch + label {
+
+.switch+label {
   position: relative;
   top: calc(var(--zd_size1) * -1);
 }
-[dir=ltr] .switch + label {
+
+[dir=ltr] .switch+label {
   margin-left: var(--zd_size12);
 }
-[dir=rtl] .switch + label {
+
+[dir=rtl] .switch+label {
   margin-right: var(--zd_size12);
 }

package/lib/Tab/Tabs.js

@@ -79,9 +79,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var totalDimension = this.getTotalDimension();
       var tabDimensions = this.getTabDimensions();
       var tabKeys = [];
+      var restrictedKeys = ['state', 'props', 'refs', 'context'];
       _react["default"].Children.toArray(children).forEach(function (child) {
         if (child && child.props.id && child.type === childType) {
-          tabKeys.push(child.props.id);
+          if (restrictedKeys.includes(child.props.id)) {
+            throw new Error('Restricted id name found in Tabs, Please avoid these names => ' + restrictedKeys.toString());
+          } else {
+            tabKeys.push(child.props.id);
+          }
         }
       });
       this.setState({
@@ -362,7 +367,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function moreTabSelect(tab, value, index, e) {
       var onSelect = this.props.onSelect;
       if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-        e && e.stopPropagation();
+        (0, _Common.cancelBubblingEffect)(e);
         return;
       }
       e.preventDefault();

package/lib/Tab/Tabs.module.css

@@ -3,6 +3,7 @@
   z-index: 1;
   --tab_position_gap: var(--zd_size22);
 }
+
 .alpha {
   height: var(--zd_size35);
   background-color: var(--zdt_tabs_alpha_bg);
@@ -30,7 +31,7 @@
   bottom: 0;
   height: var(--zd_size10);
   border-radius: 100px / 5px;
-  box-shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
+  box-shadow: var(--zd_bs_tabs_shadow);
 }
 
 [dir=ltr] .alpha::after {
@@ -115,6 +116,7 @@
   position: relative;
   cursor: pointer;
 }
+
 .menuBox {
   max-height: var(--zd_size220);
 }
@@ -128,13 +130,15 @@
 [dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
   left: calc(var(--tab_position_gap) * -1);
 }
+
 [dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }
+
 [dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
   right: calc(var(--tab_position_gap) * -1);
 }
 
-.hidden{
+.hidden {
   visibility: hidden;
 }

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

@@ -44,16 +44,11 @@ describe('Tab Component', function () {
       renderedDOM = _setup4.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabDelta')).toBe(true);
   });
-  it('Is Contains zeta class', function () {
-    var _setup5 = setup(_Tab["default"], {
-        type: 'zeta',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  });
+  // it('Is Contains zeta class', () => {
+  //   const { props, renderedDOM } = setup(Tab, { type: 'zeta', needAppearance: true, getActiveRef: () => { } });
+  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
+
+  // });
   // it('Is Contains special class', () => {
   //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
   //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);
@@ -61,7 +56,7 @@ describe('Tab Component', function () {
   // });
 
   it('Is Contains active class', function () {
-    var _setup6 = setup(_Tab["default"], {
+    var _setup5 = setup(_Tab["default"], {
         type: 'alpha',
         needAppearance: true,
         id: '0',
@@ -69,31 +64,31 @@ describe('Tab Component', function () {
         isActive: true,
         getActiveRef: function getActiveRef() {}
       }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+      props = _setup5.props,
+      renderedDOM = _setup5.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive')).toBe(true);
   });
   it('Is Contains border class', function () {
-    var _setup7 = setup(_Tab["default"], {
+    var _setup6 = setup(_Tab["default"], {
         isActive: true,
         type: 'alpha',
         needAppearance: true,
         needBorder: true,
         getActiveRef: function getActiveRef() {}
       }),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+      props = _setup6.props,
+      renderedDOM = _setup6.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive_border')).toBe(true);
   });
   it('Is call onClick', function () {
-    var _setup8 = setup(_Tab["default"], {
+    var _setup7 = setup(_Tab["default"], {
         id: '2',
         onClick: jest.fn(),
         onSelect: jest.fn(),
         getActiveRef: function getActiveRef() {}
       }),
-      renderedDOM = _setup8.renderedDOM,
-      props = _setup8.props;
+      renderedDOM = _setup7.renderedDOM,
+      props = _setup7.props;
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
     TestUtils.Simulate.click(tabElement, {
       currentTarget: {
@@ -105,14 +100,14 @@ describe('Tab Component', function () {
     expect(props.onSelect).toHaveBeenLastCalledWith('2');
   });
   it('is render text span', function () {
-    var _setup9 = setup(_Tab["default"], {
+    var _setup8 = setup(_Tab["default"], {
         type: 'alpha',
         dataId: 'taskSubtab1',
         text: 'Tab1',
         getActiveRef: function getActiveRef() {}
       }),
-      renderedDOM = _setup9.renderedDOM,
-      props = _setup9.props;
+      renderedDOM = _setup8.renderedDOM,
+      props = _setup8.props;
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab1_Tab');
     expect(tabElement.getAttribute('data-id')).toBe('taskSubtab1_Tab');
   });

package/lib/Tab/props/propTypes.js

@@ -113,7 +113,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;