@zohodesk/components 1.6.0 → 1.6.2

package/lib/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -48,7 +48,7 @@
 
 .rect {
   composes: stencil;
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -65,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: var(--zd_size110);
+  --stencil_width: 110px;
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: var(--zd_size170);
+  --stencil_width: 170px;
 }
 .large {
-  --stencil_width: var(--zd_size220);
+  --stencil_width: 220px;
 }
 
 .circle {
@@ -86,15 +86,15 @@
   --stencil_border_radius: 4px;
 }
 .size_large {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
+  --stencil_width: 42px;
+  --stencil_height: 42px;
 }
 .size_medium,
 .size_default {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
+  --stencil_width: 30px;
+  --stencil_height: 30px;
 }
 .size_small {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
+  --stencil_width: 20px;
+  --stencil_height: 20px;
 }

package/lib/Tag/Tag.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* tag default variables */
   --tag_text_color: var(--zdt_tag_default_text);
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
   --tag_letter_spacing: normal;
   --tag_bg_color: var(--zdt_tag_default_bg);
   --tag_border_radius: 25px;
@@ -9,8 +9,8 @@
   --tag_border_width: 0;
   --tag_border_style: dashed;
   --tag_border_color: var(--zdt_tag_default_border);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
   --tag_cursor: default;
 
   /* tag close icon default variables */
@@ -22,12 +22,13 @@
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
-  --tag_icon_margin: 0 0 0 var(--zd_size5);
+  --tag_closeicon_padding: 0 7px 0 6px
+    /*rtl: 0 6px 0 7px*/;
+  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
 }[dir=rtl] .varClass {
   --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_closeicon_padding: 0 6px 0 7px;
+  --tag_icon_margin: 0 5px 0 0;
 }
 .container {
   composes: varClass;
@@ -75,9 +76,9 @@
   padding: var(--tag_inner_text_padding);
 }
 .small {
-  --tag_height: var(--zd_size20);
-  --tag_padding: var(--zd_size1);
-  --tag_inner_text_padding: 0 var(--zd_size7);
+  --tag_height: 20px;
+  --tag_padding: 1px;
+  --tag_inner_text_padding: 0 7px;
 }
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
@@ -88,22 +89,22 @@
   margin-left: calc( var(--zd_size8) * -1 ) ;
 }
 .smalltext {
-  --tag_font_size: var(--zd_font_size12);
+  --tag_font_size: 12px;
 }
 .activesmallEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size7);
+  --tag_inner_text_padding: 0 25px 0 7px;
 }
 
 .medium {
-  --tag_height: var(--zd_size26);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_height: 26px;
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
 }
 .mediumtext {
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
 }
 .activemediumEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size6);
+  --tag_inner_text_padding: 0 25px 0 6px;
 }
 
 .selected .close {

package/lib/TextBox/TextBox.module.css

@@ -5,9 +5,9 @@
   --textbox_border_width: 0;
   --textbox_border_style: solid;
   --textbox_border_color: var(--zdt_textbox_default_border);
-  --textbox_font_size: var(--zd_font_size14);
+  --textbox_font_size: 14px;
   --textbox_width: 100%;
-  --textbox_height: var(--zd_size35);
+  --textbox_height: 35px;
   --textbox_border_radius: none;
   --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
@@ -137,28 +137,28 @@
 /* Size */
 .xmedium,
 .medium {
-  --textbox_font_size: var(--zd_font_size14);
+  --textbox_font_size: 14px;
 }
 
 .xmedium {
-  --textbox_height: var(--zd_size28);
+  --textbox_height: 28px;
   --textbox_line_height: 2;
 }
 
 .medium {
-  --textbox_height: var(--zd_size35);
+  --textbox_height: 35px;
   --textbox_line_height: 2.5;
 }
 
 .small {
-  --textbox_font_size: var(--zd_font_size12);
-  --textbox_height: var(--zd_size28);
+  --textbox_font_size: 12px;
+  --textbox_height: 28px;
   --textbox_line_height: 2.3334;
 }
 
 .xsmall {
-  --textbox_font_size: var(--zd_font_size13);
-  --textbox_height: var(--zd_size25);
+  --textbox_font_size: 13px;
+  --textbox_height: 25px;
   --textbox_line_height: 1.9231;
 }
 

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/v1/Label/Label.js

@@ -3,49 +3,117 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Label;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
-var _LabelModule = _interopRequireDefault(require("../../Label/Label.module.css"));
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _LabelColorsModule = _interopRequireDefault(require("../../Label/LabelColors.module.css"));
+var _utils = require("@zohodesk/utils");
+
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
+var _constants = require("./constants");
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _Label_v1Module = _interopRequireDefault(require("./css/Label_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function Label(props) {
-  var text = props.text,
-      type = props.type,
-      palette = props.palette,
-      size = props.size,
-      clipped = props.clipped,
-      htmlFor = props.htmlFor,
-      title = props.title,
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Label = function Label(props) {
+  var htmlFor = props.htmlFor,
       onClick = props.onClick,
-      dataId = props.dataId,
-      dataSelectorId = props.dataSelectorId,
-      variant = props.variant,
-      customClass = props.customClass,
-      id = props.id,
-      _props$a11y = props.a11y,
-      a11y = _props$a11y === void 0 ? {} : _props$a11y;
-  var tabIndex = a11y.tabIndex;
-  return /*#__PURE__*/_react["default"].createElement("label", {
-    className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
-
-Label.defaultProps = _defaultProps.defaultProps;
-Label.propTypes = _propTypes.propTypes;
+      text = props.text,
+      customId = props.customId,
+      testId = props.testId,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customProps = props.customProps,
+      isRequired = props.isRequired,
+      requiredType = props.requiredType,
+      isClipped = props.isClipped,
+      size = props.size,
+      fontWeight = props.fontWeight,
+      layout = props.layout,
+      renderRightPlaceholderNode = props.renderRightPlaceholderNode,
+      renderLeftPlaceholderNode = props.renderLeftPlaceholderNode,
+      i18nKeys = props.i18nKeys;
+  var tagAttributes_container = tagAttributes.container,
+      tagAttributes_label = tagAttributes.label;
+  var a11yAttributes_container = a11yAttributes.container,
+      a11yAttributes_label = a11yAttributes.label;
+  var customProps_container = customProps.container,
+      customProps_label = customProps.label;
+  var _i18nKeys$requiredTex = i18nKeys.requiredText,
+      i18n_requiredText = _i18nKeys$requiredTex === void 0 ? 'Required' : _i18nKeys$requiredTex;
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: props,
+    style: _Label_v1Module["default"]
+  }),
+      labelClass = _cssJSLogic.labelClass,
+      requiredClass = _cssJSLogic.requiredClass,
+      containerClass = _cssJSLogic.containerClass;
+
+  var a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  var renderRequired = function renderRequired() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_tagName: "span",
+      $ui_className: requiredClass,
+      $a11yAttributes_text: a11yAttributes_requiredText,
+      $ui_size: _constants.FONT_SIZE[size],
+      $ui_weight: fontWeight,
+      $i18n_dataTitle: ""
+    }, requiredType === 'text' ? "(".concat(i18n_requiredText, ")") : '*');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, customProps_container, {
+    $tagAttributes_container: _objectSpread(_objectSpread({}, tagAttributes_container), {}, {
+      'data-selector-id': customId
+    }),
+    $ui_displayMode: _constants.DISPLAY_MODE[layout],
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass
+  }), (0, _utils.renderNode)(renderLeftPlaceholderNode), /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, customProps_label, {
+    $tagAttributes_text: _objectSpread(_objectSpread({}, tagAttributes_label), {}, {
+      htmlFor: htmlFor,
+      onClick: onClick
+    }),
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: _constants.FONT_SIZE[size],
+    $ui_weight: fontWeight,
+    $flag_dotted: isClipped
+  }), text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, (0, _utils.renderNode)(renderRightPlaceholderNode));
+};
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)(Label, {
+  name: 'ZDC_V1_Label'
+});
+
+exports["default"] = _default;
+Label.defaultProps = _defaultProps["default"];
+Label.propTypes = _propTypes["default"];