@zohodesk/components 1.6.0 → 1.6.2

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

@@ -0,0 +1,44 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+import commonStyle from "../../../common/common.module.css";
+export default function cssJSLogic(_ref) {
+  let {
+    style,
+    props
+  } = _ref;
+  const {
+    shouldHighlightRequired,
+    isRequired,
+    isDisabled,
+    customClass,
+    requiredType,
+    palette,
+    isReadOnly
+  } = props;
+  const {
+    label: customClass_label,
+    container: customClass_container
+  } = customClass;
+  const labelClass = compileClassNames({
+    [style.label]: true,
+    [customClass_label]: !!customClass_label
+  });
+  const requiredClass = compileClassNames({
+    [style.requiredCommon]: true,
+    [commonStyle.flexshrink]: true,
+    [style.requiredText]: requiredType === 'text',
+    [style.asterisk]: requiredType === 'asterisk'
+  });
+  const containerClass = compileClassNames({
+    [style.container]: true,
+    [style.required]: isRequired && shouldHighlightRequired,
+    [style.readonly]: isReadOnly,
+    [style.disabled]: isDisabled,
+    [style[palette]]: palette && !(isRequired && shouldHighlightRequired) && !isDisabled,
+    [customClass_container]: !!customClass_container
+  });
+  return {
+    labelClass,
+    requiredClass,
+    containerClass
+  };
+}

package/es/v1/Label/props/defaultProps.js

@@ -1,11 +1,16 @@
-export const defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
+export default {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customClass: {},
+  shouldHighlightRequired: false,
+  isDisabled: false,
+  isClipped: false,
+  isReadOnly: false,
+  requiredType: 'asterisk',
   size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+  palette: 'default',
+  fontWeight: 'regular',
+  layout: 'inline',
+  i18nKeys: {}
 };

package/es/v1/Label/props/propTypes.js

@@ -1,19 +1,39 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  clipped: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
+export default {
   htmlFor: PropTypes.string,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['title', 'subtitle']),
-  variant: PropTypes.oneOf(['primary', 'default']),
-  customClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    tabIndex: PropTypes.string
+  onClick: PropTypes.func,
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customClass: PropTypes.shape({
+    container: PropTypes.string,
+    label: PropTypes.string
+  }),
+  requiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequired: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium']),
+  palette: PropTypes.oneOf(['default', 'secondary']),
+  renderLeftPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  fontWeight: PropTypes.oneOf(['regular', 'semibold']),
+  i18nKeys: PropTypes.shape({
+    requiredText: PropTypes.string
   }),
-  id: PropTypes.string
+  layout: PropTypes.oneOf(['inline', 'block'])
 };

package/es/v1/Switch/Switch.js

@@ -1,3 +1,5 @@
+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 from 'react'; // props
 
 import defaultProps from "./props/defaultProps";
@@ -76,7 +78,7 @@ const Switch = props => {
     },
     style
   });
-  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
     $ui_displayMode: "inline",
     $ui_direction: ITEMS_DIRECTION[labelPlacement],
     $ui_alignItems: ALIGN_ITEMS[labelPlacement],
@@ -87,7 +89,7 @@ const Switch = props => {
     customId: customId,
     $ui_className: containerClass,
     $a11yAttributes_container: a11yAttributes_container
-  }, label && /*#__PURE__*/React.createElement(Label, { ...customProps_label,
+  }), label && /*#__PURE__*/React.createElement(Label, _extends({}, customProps_label, {
     text: label,
     palette: isDisabled ? 'primary' : 'default',
     size: labelSize,
@@ -96,11 +98,10 @@ const Switch = props => {
     a11y: a11yAttributes_label,
     clipped: true,
     title: label
-  }), /*#__PURE__*/React.createElement(Flex, {
+  })), /*#__PURE__*/React.createElement(Flex, {
     $flag_shrink: false,
     $ui_className: trackWrapperClass
-  }, /*#__PURE__*/React.createElement("input", { ...tagAttributes_switch,
-    ...restA11yAttributes_switch,
+  }, /*#__PURE__*/React.createElement("input", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
     type: "checkbox",
     id: id,
     name: name,
@@ -112,7 +113,7 @@ const Switch = props => {
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
-  }), /*#__PURE__*/React.createElement("svg", {
+  })), /*#__PURE__*/React.createElement("svg", {
     className: thumbClass,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("circle", {

package/es/v1/Switch/css/Switch_v1.module.css

@@ -4,47 +4,47 @@
     gap: var(--zd_size6) ;
 }
 .small {
-    --local-switch-track-width: var(--zd_size22);
-    --local-switch-track-height: var(--zd_size12);
+    --local-switch-track-width: 22px;
+    --local-switch-track-height: 12px;
     --local-switch-track-border-radius: 8px;
-    --local-switch-thumb-size: var(--zd_size10);
-    --local-switch-onLabel-height: var(--zd_size6);
-    --local-switch-onLabel-left: var(--zd_size5);
-    --local-switch-offLabel-size: var(--zd_size7);
-    --local-switch-offLabel-right: var(--zd_size2);
+    --local-switch-thumb-size: 10px;
+    --local-switch-onLabel-height: 6px;
+    --local-switch-onLabel-left: 5px;
+    --local-switch-offLabel-size: 7px;
+    --local-switch-offLabel-right: 2px;
     --local-switch-onLabel-scaleX: 1.2;
 }
 .medium {
-    --local-switch-track-width: var(--zd_size28);
-    --local-switch-track-height: var(--zd_size16);
+    --local-switch-track-width: 28px;
+    --local-switch-track-height: 16px;
     --local-switch-track-border-radius: 16px;
-    --local-switch-thumb-size: var(--zd_size14);
-    --local-switch-onLabel-height: var(--zd_size8);
-    --local-switch-onLabel-left: var(--zd_size6);
-    --local-switch-offLabel-size: var(--zd_size8);
-    --local-switch-offLabel-right: var(--zd_size3);
+    --local-switch-thumb-size: 14px;
+    --local-switch-onLabel-height: 8px;
+    --local-switch-onLabel-left: 6px;
+    --local-switch-offLabel-size: 8px;
+    --local-switch-offLabel-right: 3px;
     --local-switch-onLabel-scaleX: 1.4;
 }
 .large {
-    --local-switch-track-width: var(--zd_size34);
-    --local-switch-track-height: var(--zd_size20);
+    --local-switch-track-width: 34px;
+    --local-switch-track-height: 20px;
     --local-switch-track-border-radius: 10px;
-    --local-switch-thumb-size: var(--zd_size18);
-    --local-switch-onLabel-height: var(--zd_size10);
-    --local-switch-onLabel-left: var(--zd_size7);
-    --local-switch-offLabel-size: var(--zd_size9);
-    --local-switch-offLabel-right: var(--zd_size4);
+    --local-switch-thumb-size: 18px;
+    --local-switch-onLabel-height: 10px;
+    --local-switch-onLabel-left: 7px;
+    --local-switch-offLabel-size: 9px;
+    --local-switch-offLabel-right: 4px;
     --local-switch-onLabel-scaleX: 1.6;
 }
 .xlarge {
-    --local-switch-track-width: var(--zd_size40);
-    --local-switch-track-height: var(--zd_size24);
+    --local-switch-track-width: 40px;
+    --local-switch-track-height: 24px;
     --local-switch-track-border-radius: 12px;
-    --local-switch-thumb-size: var(--zd_size22);
-    --local-switch-onLabel-height: var(--zd_size12);
-    --local-switch-onLabel-left: var(--zd_size8);
-    --local-switch-offLabel-size: var(--zd_size10);
-    --local-switch-offLabel-right: var(--zd_size5);
+    --local-switch-thumb-size: 22px;
+    --local-switch-onLabel-height: 12px;
+    --local-switch-onLabel-left: 8px;
+    --local-switch-offLabel-size: 10px;
+    --local-switch-offLabel-right: 5px;
     --local-switch-onLabel-scaleX: 1.8;
 }
 .disabled, .readonly {

package/lib/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -141,31 +141,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: var(--zd_font_size8);
+  --avatar_font_size: 8px;
 }
 
 .small {
-  --avatar_font_size: var(--zd_font_size9);
+  --avatar_font_size: 9px;
 }
 
 .xsmall {
-  --avatar_font_size: var(--zd_font_size12);
+  --avatar_font_size: 12px;
 }
 
 .medium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .xmedium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .large {
-  --avatar_font_size: var(--zd_font_size18);
+  --avatar_font_size: 18px;
 }
 
 .xlarge {
-  --avatar_font_size: var(--zd_font_size28);
+  --avatar_font_size: 28px;
 }
 
 .white {

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -7,13 +7,13 @@
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: var(--zd_size5);
-  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: 5px;
+  --avatarteam_height: 5px;
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: var(--zd_size1);
+  --avatarteam_top_top: 1px;
 }
 .container {
   position: relative;
@@ -92,18 +92,18 @@
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: var(--zd_size3);
-  --avatarteam_width: var(--zd_size3);
+  --avatarteam_height: 3px;
+  --avatarteam_width: 3px;
 }
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: var(--zd_size5);
-  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: 5px;
+  --avatarteam_width: 5px;
 }
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: var(--zd_size7);
-  --avatarteam_width: var(--zd_size7);
+  --avatarteam_height: 7px;
+  --avatarteam_width: 7px;
 }
 
 .xxsmallteam {
@@ -112,78 +112,78 @@
 }
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size13);
+  --avatarteam_bottom_top: 13px;
 }
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: var(--zd_size17);
+  --avatarteam_bottom_top: 17px;
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size24);
+  --avatarteam_bottom_top: 24px;
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_left: -10px;
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_right: -10px;
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size26);
+  --avatarteam_bottom_top: 26px;
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_left: -13px;
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_right: -13px;
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size30);
+  --avatarteam_bottom_top: 30px;
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_left: -16px;
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_right: -16px;
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: var(--zd_size46);
+  --avatarteam_bottom_top: 46px;
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_left: -24px;
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_right: -24px;
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: var(--zd_size65);
+  --avatarteam_bottom_top: 65px;
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_left: -29px;
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_right: -29px;
 }

package/lib/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
+  --button_font_size: 13px;
   --button_text_color: var(--zdt_button_default_text);
   --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
+  --button_min_width: 90px;
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -72,38 +72,38 @@
 }
 
 .small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
+  --button_padding: 4px 7px;
+  --button_min_width: 50px;
+  --button_font_size: 10px;
 }
 
 .medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
+  --button_padding: 6px 15px;
 }
 
 .large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
+  --button_padding: 9px 14px;
+  --button_min_width: 80px;
+  --button_font_size: 12px;
 }
 
 .xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
+  --button_padding: 12px 25px;
+  --button_min_width: 90px;
+  --button_font_size: 13px;
 }
 
 .mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
+  --button_height: 42px;
+  --button_min_width: 42px;
+  --button_font_size: 10px;
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
+  --button_height: 22px;
+  --button_min_width: 22px;
+  --button_font_size: 13px;
   text-align: center;
 }
 
@@ -134,7 +134,7 @@
 .plaindanger,
 .plainsuccess,
 .plainsecondary {
-  --button_padding: var(--zd_size5);
+  --button_padding: 5px;
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }

package/lib/Buttongroup/Buttongroup.module.css

@@ -24,15 +24,17 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 0 20px 60px
+    /*rtl: 20px 60px 20px 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 60px 20px 0;
 }
 
 .header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_padding: 12px 20px;
   --buttongroup_border_width: 0 0 1px 0;
 }
 

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,6 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    --local-colorIndicator-height: 10px;
+    --local-colorIndicator-width: 10px;
     --local-colorIndicator-border-radius: 10px;
 }
 

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -33,7 +33,7 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
@@ -201,7 +201,10 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
+    clip: rect(var(--zd_size3),
+ var(--zd_size29),
+ var(--zd_size17),
+ var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
@@ -434,7 +437,7 @@
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/lib/DropDown/DropDownHeading.module.css

@@ -2,14 +2,14 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_padding: 10px 20px;
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
-  --dropdownheading_underline_height: var(--zd_size1);
+  --dropdownheading_underline_width: 20px;
+  --dropdownheading_underline_height: 1px;
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
+  --dropdownheading_underline_left: 20px;
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';