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

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>
@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons basic icon-plus customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -220,7 +220,7 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -264,7 +264,7 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="tick "
+        class="tick"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -470,7 +470,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -515,7 +515,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -559,7 +559,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"

package/es/v1/Button/css/cssJSLogic.js

@@ -5,15 +5,11 @@ import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
 
-const capitalize = function () {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return value.charAt(0).toUpperCase() + value.slice(1);
-};
+const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
-export default function cssJSLogic(_ref) {
-  let {
-    props
-  } = _ref;
+export default function cssJSLogic({
+  props
+}) {
   const {
     palette,
     bgAppearance,

package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/es/v1/Label/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 import commonStyle from "../../../common/common.module.css";
-export default function cssJSLogic(_ref) {
-  let {
-    style,
-    props
-  } = _ref;
+export default function cssJSLogic({
+  style,
+  props
+}) {
   const {
     shouldHighlightRequired,
     isRequired,

package/es/v1/Switch/Switch.js

@@ -15,6 +15,7 @@ import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Label from "../../Label/Label"; // css
 
+import { cn } from "@dot-system/css-utility";
 import defaultStyle from "./css/Switch_v1.module.css";
 
 const Switch = props => {
@@ -108,20 +109,20 @@ const Switch = props => {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: cn(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/React.createElement("svg", {
-    className: thumbClass,
+    className: cn(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
-    className: labelIndicationClass,
+    className: cn(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/React.createElement("rect", {
     width: "100%",

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/es/v1/Switch/css/cssJSLogic.js

@@ -1,9 +1,8 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   const {
     size,
     isChecked,

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -48,37 +48,27 @@ const toBorderIntensity = (tone, hasState, isLighter) => {
   return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
 };
 
-export const getBgClass = _ref => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref;
-  return paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-};
-export const getTextClass = _ref2 => {
-  let {
-    state,
-    textTone
-  } = _ref2;
-  return paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-};
-export const getBorderClass = _ref3 => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref3;
-  return paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
-};
-
-const buildPaletteClasses = (config, _ref4) => {
-  let {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref4;
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const {
     tone,
     textTone,
@@ -159,14 +149,13 @@ const buildPaletteClasses = (config, _ref4) => {
   };
 };
 
-const getPaletteClasses = _ref5 => {
-  let {
-    palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref5;
+const getPaletteClasses = ({
+  palette,
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const config = PALETTE_CONFIG[palette];
   return config ? buildPaletteClasses(config, {
     bgAppearance,

package/es/v1/shared/Loader/Loader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./Loader_v1.module.css";
 
 const Loader = props => {
@@ -11,17 +12,17 @@ const Loader = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${wrapper}`,
+    className: cn(`${style.spinner} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerTrack,
+    className: cn(style.spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerHead,
+    className: cn(style.spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

package/es/v1/shared/SuccessTick/SuccessTick.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
@@ -11,7 +12,7 @@ const SuccessTick = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${wrapper}`,
+    className: cn(`${style.tick} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/Accordion/Accordion.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -107,7 +109,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaHaspopup = a11y.ariaHaspopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         style: {
           height: height
         },

package/lib/Accordion/AccordionItem.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -80,13 +82,13 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       unMountItem = unMountItem !== undefined ? unMountItem : unMount;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         "data-id": dataId,
         "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerClass ? innerClass : '',
+        className: (0, _cssUtility.cn)(innerClass ? innerClass : ''),
         onClick: selectMenu.bind(this, id)
       }, children[0]), unMountItem ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
         name: "slideDown",

package/lib/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Accordion rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AccordionItem rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/Animation/__tests__/__snapshots__/Animation.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Animation rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/AppContainer/AppContainer.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 require("../common/basic.module.css");
 
 require("@zohodesk/variables/assets/colorVariables.module.css");
@@ -188,7 +190,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
+        className: (0, _cssUtility.cn)("".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass)),
         "data-id": "".concat(dataId, "_tooltip"),
         "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")

package/lib/AppContainer/AppContainer.module.css

@@ -8,12 +8,18 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
+
+.container,
+.container button,
+.container input,
+.container textarea,
+.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family), var(--zd_fallback_font, Lato);
 }
+
 .tooltip {
   height: 0 ;
   font-size: 0 ;
   /* contain:strict */
-}
+}

package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,14 +11,14 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-props="true"
     data-selector-id="appContainer_tooltip"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`AppContainer rendering the childern as element 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -89,20 +89,20 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -113,20 +113,20 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,20 +155,20 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"