@zohodesk/components 1.0.0-alpha-269 → 1.0.0-alpha-271

package/es/Responsive/utils/shallowCompare.js

@@ -1,7 +1,6 @@
 function isSame(a, b) {
   return a === b;
 }
-
 const {
   hasOwnProperty
 } = Object.prototype;
@@ -9,20 +8,16 @@ export default function shallowCompare(objA, objB) {
   if (objA && objB && typeof objA === 'object' && typeof objB === 'object') {
     const keysA = Object.keys(objA);
     const keysB = Object.keys(objB);
-
     if (keysA.length !== keysB.length) {
       return false;
-    } // Test for A's keys different from B.
-
-
+    }
+    // Test for A's keys different from B.
     for (let key of keysA) {
       if (!hasOwnProperty.call(objB, key) || !isSame(objA[key], objB[key])) {
         return false;
       }
     }
-
     return true;
   }
-
   return isSame(objA, objB);
 }

package/es/Responsive/windowResizeObserver.js

@@ -6,7 +6,6 @@ export const windowResizeObserver = (() => {
     width: 0
   };
   let breackPoint = null;
-
   function handleResize() {
     const newSize = {
       height: window.innerHeight,
@@ -14,32 +13,26 @@ export const windowResizeObserver = (() => {
     };
     size = newSize;
     const newBreackPoint = defaultMatcher(size);
-
     if (newBreackPoint !== breackPoint) {
       breackPoint = newBreackPoint;
       listeners.forEach(listener => listener(newBreackPoint));
     }
   }
-
   function addResizeListener() {
     window.addEventListener('resize', handleResize);
     handleResize();
   }
-
   function removeResizeListener() {
     window.removeEventListener('resize', handleResize);
   }
-
   return {
     observe: function (listener) {
       listeners.push(listener);
       listener.length === 1 && addResizeListener();
     },
-
     getBreackPoint() {
       return breackPoint;
     },
-
     getSize: function () {
       return size;
     },

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -12,7 +11,6 @@ export default class ResponsiveDropBox extends Component {
     super(props);
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -23,7 +21,6 @@ export default class ResponsiveDropBox extends Component {
       }])
     };
   }
-
   render() {
     const {
       children,
@@ -61,7 +58,6 @@ export default class ResponsiveDropBox extends Component {
       }, children);
     }));
   }
-
 }
 ResponsiveDropBox.propTypes = propTypes;
 ResponsiveDropBox.defaultProps = defaultProps;

package/es/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -1,6 +1,6 @@
 .dropBoxContainer {
-  max-height: 70vh ;
+  max-height: 70vh;
 }
 .boxPadding{
-  padding-bottom: var(--zd_size10) ;
+  padding-bottom: 10px;
 }

package/es/Ribbon/Ribbon.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
-
 import style from './Ribbon.module.css';
 export default class Ribbon extends React.Component {
   render() {
@@ -31,10 +30,10 @@ export default class Ribbon extends React.Component {
       className: style.before
     }) : null);
   }
-
 }
 Ribbon.propTypes = propTypes;
-Ribbon.defaultProps = defaultProps; // if (__DOCS__) {
+Ribbon.defaultProps = defaultProps;
+// if (__DOCS__) {
 //   Ribbon.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'Style Guide',

package/es/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: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
   --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: var(--zd_size3);
+  --ribbon_tag_before_top: 3px;
   --ribbon_tag_before_border_style: solid;
   --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_width: 20px;
+  --ribbon_tag_before_height: 20px;
+  --ribbon_tag_before_left: -10px;
   --ribbon_tag_before_border_radius: 3px 0 0 0;
 }[dir=ltr] .varClass {
   --ribbon_flag_border_width: 14px 12px 14px 0
@@ -60,26 +60,26 @@
 .default {
   composes: semibold from '../common/common.module.css';
   display: block;
-  --ribbon_padding: var(--zd_size5) var(--zd_size20);
+  --ribbon_padding: 5px 20px;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
 }
 
 .small {
-  --ribbon_font_size: var(--zd_font_size9);
+  --ribbon_font_size: 9px;
 }
 
 .medium {
-  --ribbon_font_size: var(--zd_font_size11);
+  --ribbon_font_size: 11px;
 }
 
 .large {
-  --ribbon_font_size: var(--zd_font_size13);
+  --ribbon_font_size: 13px;
 }
 
 .xlarge {
-  --ribbon_font_size: var(--zd_font_size14);
+  --ribbon_font_size: 14px;
 }
 
 .palette_default {
@@ -217,12 +217,13 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6
-)    ;
+  --ribbon_padding: 4px 24px 4px 6px
+    /*rtl: 4px 6px 4px 24px*/
+  ;
 }
 
 [dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
+  --ribbon_padding: 4px 24px 4px 6px  ;
 }
 
 .flag::after {
@@ -233,19 +234,19 @@
   /*  Variable:Ignore  */
   bottom: -1px;
   content: '';
-  width: var(--zd_size12) ;
+  width: 12px;
   border-style: solid;
   transform: translateZ(0);
   border-width: var(--ribbon_flag_border_width);
 }
 
 [dir=ltr] .flag::after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  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);
 }
 
 [dir=rtl] .flag::after {
-  left: calc( var(--zd_size1) * -1 ) ;
+  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);
 }
 
@@ -259,7 +260,7 @@
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  --ribbon_padding: var(--zd_size6) var(--zd_size10);
+  --ribbon_padding: 6px 10px;
   --ribbon_line_height: 20px;
   text-align: center;
 }
@@ -268,9 +269,9 @@
 .ribbon::before {
   position: absolute;
   content: '';
-  top: 100% ;
-  height: var(--zd_size10) ;
-  width: var(--zd_size10) ;
+  top: 100%;
+  height: 10px;
+  width: 10px;
 }
 
 .ribbon::after, .ribbon::before {
@@ -288,27 +289,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: var(--zd_size28) ;
+  height: 28px;
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 }
@@ -320,15 +321,16 @@
   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) ;
+  margin-left: 13px;
+  padding: 6px 8px 6px 5px
+;
 }
 
 [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) ;
+  margin-right: 13px;
+  padding: 6px 5px 6px 8px;
 }
 
 .tag::before {
@@ -357,19 +359,19 @@
 .box {
   display: inline-block;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
-  --ribbon_padding: var(--zd_size5) var(--zd_size8);
+  --ribbon_padding: 5px 8px;
   border-radius: 3px;
 }
 
 .stamp {
   display: inline-block;
-  --ribbon_padding: var(--zd_size3) var(--zd_size5);
+  --ribbon_padding: 3px 5px;
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
   display: block;
-  height: var(--zd_size18) ;
+  height: 18px;
   line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
@@ -377,31 +379,31 @@
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: var(--zd_size3) var(--zd_size10) ;
+  padding: 3px 10px;
 }
 
 .after,
 .before {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size10) ;
+  top: 0;
+  bottom: 0;
+  width: 10px;
 }
 
 [dir=ltr] .after {
-  right: calc( var(--zd_size2) * -1 ) ;
+  right: -2px;
 }
 
 [dir=rtl] .after {
-  left: calc( var(--zd_size2) * -1 ) ;
+  left: -2px;
 }
 
 [dir=ltr] .before {
-  left: calc( var(--zd_size8) * -1 ) ;
+  left: -8px;
 }
 
 [dir=rtl] .before {
-  right: calc( var(--zd_size8) * -1 ) ;
+  right: -8px;
 }
 
 .after::after,
@@ -409,8 +411,8 @@
 .before::after,
 .before::before {
   position: absolute;
-  height: var(--zd_size7) ;
-  width: var(--zd_size7) ;
+  height: 7px;
+  width: 7px;
   content: '';
 }
 
@@ -428,12 +430,12 @@
 
 .after::after,
 .before::after {
-  top: 0 ;
+  top: 0;
 }
 
 .after::before,
 .before::before {
-  bottom: 0 ;
+  bottom: 0;
 }
 
 .children {
@@ -443,11 +445,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: var(--zd_size4) ;
+  margin-right: 4px;
 }
 
 [dir=rtl] .children {
-  margin-left: var(--zd_size4) ;
+  margin-left: 4px;
 }
 
 .childText {

package/es/RippleEffect/RippleEffect.js

@@ -21,7 +21,9 @@ export default function RippleEffect(props) {
   });
 }
 RippleEffect.defaultProps = defaultProps;
-RippleEffect.propTypes = propTypes; // if (__DOCS__) {
+RippleEffect.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   RippleEffect.docs = {
 //     componentGroup: 'RippleEffect',
 //     folderName: 'Style Guide'