@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/Responsive/CustomResponsive.js

@@ -94,9 +94,7 @@ ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
 };
 ResponsiveSender.contextType = ResponsiveContext;
 ResponsiveSender.propTypes = CustomResponsiveSender_propTypes;
-export function useResponsiveReceiver() {
-  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
-  let query = arguments.length > 1 ? arguments[1] : undefined;
+export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query) {
   const [, forceUpdate] = useState();
   const totalContextData = useContext(ResponsiveContext);
   const validSizeContextData = totalContextData[validSizeResponsiveId];
@@ -174,14 +172,13 @@ export function useResponsiveReceiver() {
   updateLatestData();
   return data.current;
 }
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    query,
-    eleRef,
-    domRefKey
-  } = _ref;
+export function ResponsiveReceiver({
+  children,
+  responsiveId,
+  query,
+  eleRef,
+  domRefKey
+}) {
   const data = useResponsiveReceiver(responsiveId, query);
   const child = children(data);
   return eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {

package/es/Responsive/ResizeComponent.js

@@ -163,9 +163,7 @@ export default class ResizeComponent extends React.Component {
     }
   }
 
-  constructChildren() {
-    let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let responsive = arguments.length > 1 ? arguments[1] : undefined;
+  constructChildren(dataCount = 0, responsive) {
     const {
       childrenList,
       getData

package/es/Responsive/Responsive.js

@@ -96,8 +96,7 @@ ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
 };
 ResponsiveSender.contextType = ResponsiveContext;
 ResponsiveSender.propTypes = ResponsiveSender_propTypes;
-export function useResponsiveReceiver() {
-  let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
+export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
   const [_, forceUpdate] = useState();
   let totalContextData = useContext(ResponsiveContext);
   let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
@@ -144,8 +143,7 @@ export function useResponsiveReceiver() {
         return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
       },
 
-      deviceOnly() {
-        let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      deviceOnly(breakPoints = []) {
         return breakPoints.includes(breakPoint);
       },
 
@@ -170,14 +168,13 @@ export function useResponsiveReceiver() {
 //   ) : null;
 // }
 
-export function ResponsiveReceiver(_ref) {
-  let {
-    children,
-    responsiveId,
-    hiddenSizes,
-    eleRef,
-    domRefKey
-  } = _ref;
+export function ResponsiveReceiver({
+  children,
+  responsiveId,
+  hiddenSizes,
+  eleRef,
+  domRefKey
+}) {
   const data = useResponsiveReceiver(responsiveId);
   const {
     breakPoint

package/es/Responsive/sizeObservers.js

@@ -75,11 +75,7 @@ export class Subscribale {
     this.subscribers.length && this.disconnect();
   }
 
-  dispatch() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  dispatch(...args) {
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -13,10 +13,9 @@ export default class ResponsiveDropBox extends Component {
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -50,16 +49,13 @@ export default class ResponsiveDropBox extends Component {
     }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        alignBox: alignBox,
-        isCover: false,
-        className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
-      }, children);
-    }));
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(Container, {
+      alignBox: alignBox,
+      isCover: false,
+      className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
+    }, children)));
   }
 
 }

package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ResponsiveDropBox rendering the defult props 1`] = `
 <DocumentFragment>
@@ -31,7 +31,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
         />
       </div>
       <div
-        class="flex coldir"
+        class="flex column"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/Ribbon/Ribbon.js

@@ -3,6 +3,7 @@ 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 { cn } from "@dot-system/css-utility";
 import style from "./Ribbon.module.css";
 export default class Ribbon extends React.Component {
   render() {
@@ -17,35 +18,22 @@ export default class Ribbon extends React.Component {
       dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
-                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
+      className: cn(`${style.basic} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
+                 ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]} ${customClass} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.after
+      className: cn(style.after)
     }) : null, children ? /*#__PURE__*/React.createElement("span", {
-      className: style.children
+      className: cn(style.children)
     }, children) : null, /*#__PURE__*/React.createElement("span", {
-      className: style.childText
+      className: cn(style.childText)
     }, text), type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
-      className: style.before
+      className: cn(style.before)
     }) : null);
   }
 
 }
 Ribbon.propTypes = propTypes;
-Ribbon.defaultProps = defaultProps; // if (__DOCS__) {
-//   Ribbon.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' ',
-//     images: [
-//       {
-//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
-//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
-//       }
-//     ]
-//   };
-// }
+Ribbon.defaultProps = defaultProps;

package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label rendering children  1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -27,7 +27,7 @@ exports[`Label rendering children  1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <span
-    class="basic ribbonCustomClass palette_default default_default large default"
+    class="basic palette_default default_default large default ribbonCustomClass"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -44,7 +44,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -61,7 +61,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_danger default_danger large default"
+    class="basic palette_danger default_danger large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -78,7 +78,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_dark default_dark large default"
+    class="basic palette_dark default_dark large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -95,7 +95,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -112,7 +112,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- info 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_info default_info large default"
+    class="basic palette_info default_info large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -129,7 +129,7 @@ exports[`Label rendering the palette of- info 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_primary default_primary large default"
+    class="basic palette_primary default_primary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -146,7 +146,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_secondary default_secondary large default"
+    class="basic palette_secondary default_secondary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -163,7 +163,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size - large 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -180,7 +180,7 @@ exports[`Label rendering the size - large 1`] = `
 exports[`Label rendering the size - medium 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default medium default"
+    class="basic palette_default default_default medium default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -197,7 +197,7 @@ exports[`Label rendering the size - medium 1`] = `
 exports[`Label rendering the size - small 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default small default"
+    class="basic palette_default default_default small default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -214,7 +214,7 @@ exports[`Label rendering the size - small 1`] = `
 exports[`Label rendering the size - xlarge 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default xlarge default"
+    class="basic palette_default default_default xlarge default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -231,8 +231,7 @@ exports[`Label rendering the size - xlarge 1`] = `
 exports[`Label rendering the type - box 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                 box_default  large box"
+    class="basic plain_default box_default large box"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -249,7 +248,7 @@ exports[`Label rendering the type - box 1`] = `
 exports[`Label rendering the type - default 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default default_default large default"
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -266,7 +265,7 @@ exports[`Label rendering the type - default 1`] = `
 exports[`Label rendering the type - flag 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large flag"
+    class="basic palette_default large flag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -283,8 +282,7 @@ exports[`Label rendering the type - flag 1`] = `
 exports[`Label rendering the type - plain 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                   large plain"
+    class="basic plain_default large plain"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -301,7 +299,7 @@ exports[`Label rendering the type - plain 1`] = `
 exports[`Label rendering the type - ribbon 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large ribbon"
+    class="basic palette_default large ribbon"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -318,8 +316,7 @@ exports[`Label rendering the type - ribbon 1`] = `
 exports[`Label rendering the type - stamp 1`] = `
 <DocumentFragment>
   <span
-    class="basic  plain_default 
-                  stamp_default large stamp"
+    class="basic plain_default stamp_default large stamp"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -336,7 +333,7 @@ exports[`Label rendering the type - stamp 1`] = `
 exports[`Label rendering the type - sticker 1`] = `
 <DocumentFragment>
   <span
-    class="basic  palette_default  large sticker"
+    class="basic palette_default large sticker"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -359,7 +356,7 @@ exports[`Label rendering the type - sticker 1`] = `
 exports[`Label rendering the type - tag 1`] = `
 <DocumentFragment>
   <span
-    class="basic   large tag"
+    class="basic large tag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"

package/es/RippleEffect/RippleEffect.js

@@ -18,7 +18,7 @@ export default function RippleEffect(props) {
   let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
-    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
+    [cssClassPropOfChild]: `${className} ${child.props[cssClassPropOfChild] || ''}`
   });
 }
 RippleEffect.defaultProps = defaultProps;

package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RippleEffect rendering hoverType of- bg 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border bgHover  hoverEffect "
+    class="effect default border bgHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -13,7 +13,7 @@ exports[`RippleEffect rendering hoverType of- bg 1`] = `
 exports[`RippleEffect rendering hoverType of- border 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border borderHover  hoverEffect "
+    class="effect default border borderHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -23,7 +23,7 @@ exports[`RippleEffect rendering hoverType of- border 1`] = `
 exports[`RippleEffect rendering hoverType of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -33,7 +33,7 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover active hoverEffect "
+    class="effect default border defaultHover active hoverEffect"
   >
     RippleEffect
   </div>
@@ -43,7 +43,7 @@ exports[`RippleEffect rendering isActive is true 1`] = `
 exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect notAllowed"
+    class="effect default border defaultHover hoverEffect notAllowed"
   >
     RippleEffect
   </div>
@@ -53,7 +53,7 @@ exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
 exports[`RippleEffect rendering isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover   disabled"
+    class="effect default border defaultHover disabled"
   >
     RippleEffect
   </div>
@@ -63,7 +63,7 @@ exports[`RippleEffect rendering isDisabled is true 1`] = `
 exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class=" "
+    class=""
   >
     RippleEffect
   </div>
@@ -73,7 +73,7 @@ exports[`RippleEffect rendering isNeedEffect is false 1`] = `
 exports[`RippleEffect rendering needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default  defaultHover  hoverEffect "
+    class="effect default defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -83,7 +83,7 @@ exports[`RippleEffect rendering needBorder is false 1`] = `
 exports[`RippleEffect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -93,7 +93,7 @@ exports[`RippleEffect rendering the defult props 1`] = `
 exports[`RippleEffect rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <div
-    class=" effect danger border defaultHover  hoverEffect "
+    class="effect danger border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -103,7 +103,7 @@ exports[`RippleEffect rendering the palette of- danger 1`] = `
 exports[`RippleEffect rendering the palette of- default 1`] = `
 <DocumentFragment>
   <div
-    class=" effect default border defaultHover  hoverEffect "
+    class="effect default border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -113,7 +113,7 @@ exports[`RippleEffect rendering the palette of- default 1`] = `
 exports[`RippleEffect rendering the palette of- green 1`] = `
 <DocumentFragment>
   <div
-    class=" effect green border defaultHover  hoverEffect "
+    class="effect green border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -123,7 +123,7 @@ exports[`RippleEffect rendering the palette of- green 1`] = `
 exports[`RippleEffect rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primary border defaultHover  hoverEffect "
+    class="effect primary border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -133,7 +133,7 @@ exports[`RippleEffect rendering the palette of- primary 1`] = `
 exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryDark border defaultHover  hoverEffect "
+    class="effect primaryDark border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -143,7 +143,7 @@ exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
 exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryFilled border defaultHover  hoverEffect "
+    class="effect primaryFilled border defaultHover hoverEffect"
   >
     RippleEffect
   </div>
@@ -153,7 +153,7 @@ exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
 exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
 <DocumentFragment>
   <div
-    class=" effect primaryLight border defaultHover  hoverEffect "
+    class="effect primaryLight border defaultHover hoverEffect"
   >
     RippleEffect
   </div>