@zohodesk/components 1.6.0 → 1.6.2

package/es/TextBoxIcon/TextBoxIcon.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';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -142,7 +144,7 @@ export default class TextBoxIcon extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
+    }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {
       dataId: dataId,
       size: size,
       variant: variant,
@@ -170,7 +172,7 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent: isScrollPrevent,
       customClass: customTextBox,
       customProps: TextBoxProps
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* textboxicon icon default variables */
-  --textboxicon_icon_margin: 0 var(--zd_size5);
+  --textboxicon_icon_margin: 0 5px;
   --textboxicon_icon_cursor: pointer;
   --textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
 }

package/es/Textarea/Textarea.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';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -90,12 +92,12 @@ export default class Textarea extends React.Component {
 
     const isEditable = !(isReadOnly || isDisabled);
     let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${!rows && size === 'default' ? style.defaultHeight : ''} ${!cols ? style.defaultWidth : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
-    return /*#__PURE__*/React.createElement("textarea", {
+    return /*#__PURE__*/React.createElement("textarea", _extends({
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
-      placeholder: placeHolder,
-      ...options,
+      placeholder: placeHolder
+    }, options, {
       "data-id": dataId,
       "data-test-id": dataId,
       maxLength: maxLength,
@@ -108,9 +110,8 @@ export default class Textarea extends React.Component {
       id: htmlId,
       "data-selector-id": dataSelectorId,
       rows: rows,
-      cols: cols,
-      ...customAttributes
-    });
+      cols: cols
+    }, customAttributes));
   }
 
 }

package/es/Textarea/Textarea.module.css

@@ -4,9 +4,9 @@
   --textarea_border_color: none;
   --textarea_cursor: text;
   --textarea_text_color: var(--zdt_textarea_default_text);
-  --textarea_font_size: var(--zd_font_size14);
+  --textarea_font_size: 14px;
   --textarea_line_height: 1.5712;
-  --textarea_padding: var(--zd_size2) 0;
+  --textarea_padding: 2px 0;
   --textarea_height: auto;
   --textarea_width: auto;
 
@@ -94,7 +94,7 @@
 }
 
 .defaultHeight{
-  --textarea_height: var(--zd_size30);
+  --textarea_height: 30px;
 } 
 .defaultWidth {
   --textarea_width: 100%;
@@ -104,39 +104,39 @@
   vertical-align: middle;
 }
 .xsmall {
-  --textarea_font_size: var(--zd_font_size14);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size28);
+  --textarea_font_size: 14px;
+  --textarea_padding: 4px 0 2px;
+  --textarea_height: 28px;
   --textarea_line_height: 1.3572;
 }
 .xmedium {
-  --textarea_font_size: var(--zd_font_size13);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size25);
+  --textarea_font_size: 13px;
+  --textarea_padding: 4px 0 2px;
+  --textarea_height: 25px;
   --textarea_line_height: 1.3077;
 }
  .small{
-  --textarea_height: var(--zd_size30);
-  --textarea_padding: var(--zd_size2) 0;
+  --textarea_height: 30px;
+  --textarea_padding: 2px 0;
 }
 .smallanimated:focus,
 .xsmallanimated:focus,
 .xmediumanimated:focus {
-  --textarea_height: var(--zd_size70);
+  --textarea_height: 70px;
 }
 .medium {
-  --textarea_height: var(--zd_size88);
-  --textarea_padding: var(--zd_size2);
+  --textarea_height: 88px;
+  --textarea_padding: 2px;
 }
 .large {
-  --textarea_height: var(--zd_size45);
-  --textarea_padding: var(--zd_size2);
+  --textarea_height: 45px;
+  --textarea_padding: 2px;
 }
 .largeanimated:focus {
-  --textarea_height: var(--zd_size220);
+  --textarea_height: 220px;
 }
 .xlarge {
-  --textarea_height: var(--zd_size184);
+  --textarea_height: 184px;
 }
 .default {
   font-weight: var(--zd-fw-normal);

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.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';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -121,15 +123,14 @@ export default class VelocityAnimationGroup extends React.Component {
       display: 'none',
       complete: onExitComplete ? this.handleExitComplete : undefined
     };
-    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
+    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
       enter: enterAnimation,
       leave: exitAnimation,
       component: component && component,
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
-      enterShowStyle: enterShowStyle,
-      ...childProps
-    }, isActive ? children : null);
+      enterShowStyle: enterShowStyle
+    }, childProps), isActive ? children : null);
   }
 
 }

package/es/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: var(--zd_size34);
-  --avatar_height: var(--zd_size34);
+  --avatar_width: 34px;
+  --avatar_height: 34px;
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: var(--zd_size22);
-  --avatar_width: var(--zd_size22);
+  --avatar_height: 22px;
+  --avatar_width: 22px;
 }
 .xxsmall {
-  --avatar_height: var(--zd_size18);
-  --avatar_width: var(--zd_size18);
+  --avatar_height: 18px;
+  --avatar_width: 18px;
 }
 .xsmall {
-  --avatar_height: var(--zd_size30);
-  --avatar_width: var(--zd_size30);
+  --avatar_height: 30px;
+  --avatar_width: 30px;
 }
 
 .medium {
-  --avatar_height: var(--zd_size34);
-  --avatar_width: var(--zd_size34);
+  --avatar_height: 34px;
+  --avatar_width: 34px;
 }
 
 .xmedium {
-  --avatar_height: var(--zd_size40);
-  --avatar_width: var(--zd_size40);
+  --avatar_height: 40px;
+  --avatar_width: 40px;
 }
 
 .large {
-  --avatar_height: var(--zd_size60);
-  --avatar_width: var(--zd_size60);
+  --avatar_height: 60px;
+  --avatar_width: 60px;
 }
 
 .xlarge {
-  --avatar_height: var(--zd_size80);
-  --avatar_width: var(--zd_size80);
+  --avatar_height: 80px;
+  --avatar_width: 80px;
 }

package/es/common/common.module.css

@@ -526,12 +526,12 @@
 
 .fitContWidth {
   width: fit-content ;
-  width: -moz-fit-content ;
+  width: undefined ;
 }
 
 .fitContHeight {
   height: fit-content ;
-  height: -moz-fit-content ;
+  height: undefined ;
 }
 
 .whiteSpace_normal {

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -11,14 +11,12 @@ let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     isChildrenRestrictionNeeded = true,
     isActive
   } = props;
-  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      forwardRef: ref
-    })
-  }) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      isActive,
-      forwardRef: ref
-    })
-  });
+  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    forwardRef: ref
+  })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    isActive,
+    forwardRef: ref
+  }));
 });
 RefElement.propTypes = RefElement_propTypes;
 export { RefElement };

package/es/deprecated/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';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -43,7 +45,7 @@ const Switch = props => {
     customLabel = ''
   } = customClass;
   size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     align: "vertical",
     isCover: false,
     alignBox: "row",
@@ -52,9 +54,8 @@ const Switch = props => {
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
-    dataSelectorId: dataSelectorId,
-    ...SwitchProps
-  }, /*#__PURE__*/React.createElement(Box, {
+    dataSelectorId: dataSelectorId
+  }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
     className: `${style[size]} ${customSwitchSize}`
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -72,16 +73,15 @@ const Switch = props => {
     "data-test-id": dataId,
     className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
     tabIndex: isReadOnly || disabled ? '-1' : '0'
-  })), text && /*#__PURE__*/React.createElement(Label, {
+  })), text && /*#__PURE__*/React.createElement(Label, _extends({
     text: text,
     palette: labelPalette,
     id: id,
     size: labelSize,
     type: "subtitle",
     onClick: !disabled || !isReadOnly ? onChange : null,
-    customClass: customLabel,
-    ...LabelProps
-  }));
+    customClass: customLabel
+  }, LabelProps)));
 };
 
 Switch.defaultProps = defaultProps;

package/es/shared/ArrowIcon/ArrowIcon.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';
 import { Container } from "../../Layout";
 import Icon from '@zohodesk/icons/es/Icon';
@@ -29,17 +31,15 @@ const ArrowIcon = props => {
     isActive,
     isReadOnly,
     isDisabled
-  }) : /*#__PURE__*/React.createElement(Container, {
+  }) : /*#__PURE__*/React.createElement(Container, _extends({
     isInline: true,
     isCover: false,
     align: "both",
-    "aria-hidden": true,
-    ...tagAttributes,
-    ...a11yAttributes,
-    ...customProps,
+    "aria-hidden": true
+  }, tagAttributes, a11yAttributes, customProps, {
     dataId: `${dataId}_downIcon`,
     className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${isActive ? style.active : ''} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readonly : ''} ${containerClass}`
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-down",
     size: iconSize,
     iconClass: iconClass

package/es/shared/InputFieldLine/InputFieldLine.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';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
@@ -26,19 +28,17 @@ function InputFieldLine(props) {
   } = props;
   const borderClass = style[`border_${border}`] || '';
   const borderColorClass = style[`borderColor_${borderColor}`] || '';
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     alignBox: "row",
-    isCover: false,
-    ...tagAttributes,
-    ...a11yAttributes,
-    ...customProps,
+    isCover: false
+  }, tagAttributes, a11yAttributes, customProps, {
     "data-title": title,
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
     scroll: size != 'auto' ? 'vertical' : undefined,
     className: `${style.varClass} ${style.customContainer} ${size != 'auto' ? style[size] : ''} ${hasPadding && size != 'auto' ? style[`padding_${size}`] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
-  }, children);
+  }), children);
 }
 
 InputFieldLine.propTypes = propTypes;

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -59,12 +59,12 @@
 
 .padding_small,
 .padding_xmedium {
-    --local_padding: var(--zd_size3);
+    --local_padding: 3px;
 }
 
 .padding_medium,
 .padding_large {
-    --local_padding: var(--zd_size8);
+    --local_padding: 8px;
 }
 
 .xmedium {

package/es/v1/Label/Label.js

@@ -1,40 +1,105 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+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";
+import propTypes from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { renderNode } from '@zohodesk/utils'; // hoc
+
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // constants
+
+import { DISPLAY_MODE, FONT_SIZE } from "./constants"; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import style from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
-    customClass,
-    id,
-    a11y = {}
+    text,
+    customId,
+    testId,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    requiredType,
+    isClipped,
+    size,
+    fontWeight,
+    layout,
+    renderRightPlaceholderNode,
+    renderLeftPlaceholderNode,
+    i18nKeys
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__PURE__*/React.createElement("label", {
-    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const {
+    requiredText: i18n_requiredText = 'Required'
+  } = i18nKeys;
+  const {
+    labelClass,
+    requiredClass,
+    containerClass
+  } = cssJSLogic({
+    props,
+    style
+  });
+  const a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  const renderRequired = () => /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass,
+    $a11yAttributes_text: a11yAttributes_requiredText,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: fontWeight,
+    $i18n_dataTitle: ""
+  }, requiredType === 'text' ? `(${i18n_requiredText})` : '*');
+
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
+    $tagAttributes_container: { ...tagAttributes_container,
+      'data-selector-id': customId
+    },
+    $ui_displayMode: DISPLAY_MODE[layout],
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass
+  }), renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, _extends({}, customProps_label, {
+    $tagAttributes_text: { ...tagAttributes_label,
+      htmlFor,
+      onClick
+    },
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: fontWeight,
+    $flag_dotted: isClipped
+  }), text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, renderNode(renderRightPlaceholderNode));
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_V1_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;