@zohodesk/components 1.0.0-temp-246 → 1.0.0-temp-247

package/lib/CheckBox/props/propTypes.js

@@ -7,8 +7,6 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = require("../../Typography/props/propTypes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -17,7 +15,6 @@ var propTypes = {
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
-  secondaryText: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
@@ -49,8 +46,7 @@ var propTypes = {
   }),
   customProps: _propTypes["default"].shape({
     CheckBoxProps: _propTypes["default"].object,
-    LabelProps: _propTypes["default"].object,
-    secondaryTextProps: _propTypes["default"].exact(_propTypes2.propTypes)
+    LabelProps: _propTypes["default"].object
   }),
   renderRightPlaceholderNode: _propTypes["default"].node
 };

package/lib/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 [dir=ltr] .boxPadding {
@@ -29,7 +29,7 @@
 }
 
 .datesStr {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .grid {
@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.holiday,.inActiveDate.holiday:hover {
+.invalidDate.holiday,
+.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.holiday:hover{
+
+.inActiveDate:hover, .inActiveDate.holiday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/lib/DateTime/YearView.module.css

@@ -61,7 +61,7 @@
 }
 
 .isActive .yearText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_yearview_year_hover_text);
   font-size: var(--zd_font_size11) ;
 }

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
   font-size: inherit ;
-  font-weight: initial;
+  font-weight: var(--zd-fw-semibold);
   margin: initial ;
 }

package/lib/Label/Label.js

@@ -13,18 +13,12 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
-
-var _utils = require("@zohodesk/utils");
-
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -71,17 +65,12 @@ var Label = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           dataSelectorId = _this$props.dataSelectorId,
           variant = _this$props.variant,
-          customProps = _this$props.customProps,
           customClass = _this$props.customClass,
           id = _this$props.id,
-          renderRightPlaceholderNode = _this$props.renderRightPlaceholderNode,
           _this$props$a11y = _this$props.a11y,
           a11y = _this$props$a11y === void 0 ? {} : _this$props$a11y;
-      var containerProps = customProps.containerProps,
-          rightPlaceholderNodeProps = customProps.rightPlaceholderNodeProps;
       var tabIndex = a11y.tabIndex;
-
-      var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
+      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,
@@ -92,15 +81,6 @@ var Label = /*#__PURE__*/function (_React$Component) {
         id: id,
         tabIndex: tabIndex
       }, text);
-
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _utils.isRenderable)(renderRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
-        $ui_displayMode: "flex",
-        $ui_direction: "row",
-        $ui_alignItems: "center"
-      }, containerProps), labelElement, /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
-        $ui_displayMode: "flex",
-        $ui_alignItems: "center"
-      }, rightPlaceholderNodeProps), (0, _utils.renderNode)(renderRightPlaceholderNode))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, labelElement));
     }
   }]);
 

package/lib/Label/Label.module.css

@@ -2,7 +2,7 @@
   /* label default variables */
   --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
@@ -13,24 +13,24 @@
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
-  font-family: var(--label_font_family);
+  font-weight: var(--label_font_weight);
   cursor: var(--label_cursor);
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
-  --label_line_height:1.5;
+  --label_line_height: 1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
-  --label_line_height:1.385;
+  --label_line_height: 1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
-  --label_line_height:1.286;
+  --label_line_height: 1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
-  --label_line_height:0.6923;
+  --label_line_height: 0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {
@@ -46,10 +46,10 @@
   display: inline-block;
 }
 .font_default {
-  --label_font_family: var(--zd_regular);
+  --label_font_weight: var(--zd-fw-normal);
 }
 .font_primary {
-  --label_font_family: var(--zd_semibold);
+  --label_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 .dotted {

package/lib/Label/__tests__/Label.spec.js

@@ -103,62 +103,4 @@ describe('Label', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with renderRightPlaceholderNode', function () {
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
-      text: "New Feature",
-      id: "label_new",
-      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          background: '#27ae60',
-          color: 'white',
-          padding: '2px 6px',
-          borderRadius: '3px',
-          fontSize: '10px',
-          fontWeight: 'bold'
-        }
-      }, "NEW")
-    })),
-        asFragment = _render12.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with customProps - containerProps & rightPlaceholderNodeProps', function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
-      text: "Premium Feature",
-      id: "label_premium",
-      size: "large",
-      palette: "danger",
-      renderRightPlaceholderNode: /*#__PURE__*/_react["default"].createElement("span", {
-        style: {
-          fontSize: '10px',
-          background: '#f39c12',
-          color: 'white',
-          padding: '1px 4px',
-          borderRadius: '2px'
-        }
-      }, "PRO"),
-      customProps: {
-        containerProps: {
-          $ui_alignItems: 'center',
-          $tagAttributes_container: {
-            style: {
-              gap: '6px'
-            }
-          }
-        },
-        rightPlaceholderNodeProps: {
-          $ui_displayMode: 'flex',
-          $ui_alignItems: 'center',
-          $tagAttributes_container: {
-            style: {
-              gap: '6px'
-            }
-          }
-        }
-      }
-    })),
-        asFragment = _render13.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -310,69 +310,3 @@ exports[`Label rendering the variant of- primary 1`] = `
   </label>
 </DocumentFragment>
 `;
-
-exports[`Label rendering with customProps - containerProps & rightPlaceholderNodeProps 1`] = `
-<DocumentFragment>
-  <div
-    class="flex row alignItems_center"
-    data-id="flex"
-    data-test-id="flex"
-    style="gap: 6px;"
-  >
-    <label
-      class="label title large danger font_default
-           cursor  "
-      data-id="label"
-      data-selector-id="label"
-      data-test-id="label"
-      id="label_premium"
-    >
-      Premium Feature
-    </label>
-    <div
-      class="flex row alignItems_center"
-      data-id="flex"
-      data-test-id="flex"
-      style="gap: 6px;"
-    >
-      <span
-        style="font-size: 10px; background: rgb(243, 156, 18); color: white; padding: 1px 4px; border-radius: 2px;"
-      >
-        PRO
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Label rendering with renderRightPlaceholderNode 1`] = `
-<DocumentFragment>
-  <div
-    class="flex row"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <label
-      class="label title medium default font_default
-           cursor  "
-      data-id="label"
-      data-selector-id="label"
-      data-test-id="label"
-      id="label_new"
-    >
-      New Feature
-    </label>
-    <div
-      class=""
-      data-id="flex"
-      data-test-id="flex"
-    >
-      <span
-        style="background: rgb(39, 174, 96); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold;"
-      >
-        NEW
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/lib/Label/props/defaultProps.js

@@ -12,7 +12,6 @@ var defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
-  customProps: {},
   customClass: '',
   dataSelectorId: 'label'
 };

package/lib/Label/props/propTypes.js

@@ -7,8 +7,6 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@zohodesk/layout/es/Flex/props/propTypes"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -23,15 +21,10 @@ var propTypes = {
   title: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['title', 'subtitle']),
   variant: _propTypes["default"].oneOf(['primary', 'default']),
-  customProps: _propTypes["default"].shape({
-    containerProps: _propTypes["default"].exact(_propTypes2["default"]),
-    rightPlaceholderNodeProps: _propTypes["default"].exact(_propTypes2["default"])
-  }),
   customClass: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     tabIndex: _propTypes["default"].string
   }),
-  id: _propTypes["default"].string,
-  renderRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
+  id: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
+  font-weight: var(--zd-fw-normal);
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

package/lib/Radio/Radio.js

@@ -15,8 +15,6 @@ var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
-var _Typography = _interopRequireDefault(require("../Typography/Typography"));
-
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
@@ -103,16 +101,13 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props3.customProps,
           children = _this$props3.children,
           a11y = _this$props3.a11y,
-          secondaryText = _this$props3.secondaryText,
           renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
           customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customLa = customClass.customLabel,
-          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
-          _customClass$customSe = customClass.customSecondaryText,
-          customSecondaryText = _customClass$customSe === void 0 ? '' : _customClass$customSe;
+          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
       var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _RadioModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
       var isEditable = !(isReadOnly || disabled);
@@ -129,9 +124,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
           _customProps$LabelPro = customProps.LabelProps,
-          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
-          _customProps$secondar = customProps.secondaryTextProps,
-          secondaryTextProps = _customProps$secondar === void 0 ? {} : _customProps$secondar;
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
@@ -150,8 +143,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '', " ").concat(secondaryText ? _RadioModule["default"].withSecondaryText : ''),
-        align: secondaryText ? "start" : undefined
+        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -172,10 +164,10 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         cy: "20",
         r: "11.03",
         className: "".concat(_RadioModule["default"].centerPath)
-      }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _RadioModule["default"].labelContainer
-      }, text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+        className: "".concat(_RadioModule["default"].text, " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '')
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
         size: labelSize,
@@ -184,14 +176,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " ").concat(disabled ? "".concat(_RadioModule["default"].disabled) : '', "\n                  ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
-      }, LabelProps)), secondaryText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
-        $ui_size: "12",
-        $ui_lineHeight: "1.2"
-      }, secondaryTextProps, {
-        $i18n_dataTitle: toolTip ? null : secondaryText,
-        $ui_className: "".concat(_RadioModule["default"].secondaryText, " ").concat(customSecondaryText)
-      }), secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(isEditable ? _RadioModule["default"].pointer : '', " ").concat(isReadOnly ? _RadioModule["default"].readonly : '', "  ").concat(customLabel)
+      }, LabelProps))), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/Radio/Radio.module.css

@@ -10,25 +10,20 @@
 }[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 0 0 var(--zd_size6);
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
-
 .container {
   composes: varClass;
 }
-
 .pointer {
   cursor: pointer;
 }
-
 .readonly, .disabled {
   cursor: default;
 }
-
 .disabled {
   opacity: 0.7
 }
-
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
@@ -37,12 +32,10 @@
   background: var(--radio_bg_color);
   border-radius: 50%;
 }
-
 .radio,
 .centerPath {
   fill: var(--radio_fill);
 }
-
 .filled {
   --radio_bg_color: var(--zdt_radio_default_bg);
 }
@@ -51,66 +44,48 @@
   --radio_width: var(--zd_size16);
   --radio_height: var(--zd_size16);
 }
-
 .small {
   --radio_width: var(--zd_size13);
   --radio_height: var(--zd_size13);
 }
-
-.medium.withSecondaryText {
-  margin-top: var(--zd_size1) ;
-}
-
-.small.withSecondaryText {
-  margin-top: var(--zd_size3) ;
-}
-
 .radioLabel {
   font-size: 0 ;
   display: block;
 }
-
 .rdBox {
   fill: none;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
-
 .centerPath {
   --radio_fill: inherit;
   stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
 }
-
 [dir=ltr] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
-
 [dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
-
 .rdBoxprimary,
 .hoverEfffect:hover .hoverprimary
-
 /* .hoverEfffect:focus .hoverprimary  */
-  {
+{
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
 .hoverEfffect:hover .hoverdanger
-
 /* .hoverEfffect:focus .hoverdanger */
-  {
+ {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
 .centerPathprimary {
   --radio_fill: var(--zdt_radio_primary_fill);
 }
-
 .centerPathdanger {
   --radio_fill: var(--zdt_radio_danger_fill);
 }
@@ -127,22 +102,14 @@
   --label_text_color: var(--zdt_radio_label_danger_text);
 }
 
-.secondaryText {
-  color: var(--zdt_radio_secondary_text);
-}
-
-.labelContainer {
-  composes: dflex flexcolumn from '../common/common.module.css';
-  gap: var(--zd_size4) ;
+.text {
   margin: var(--radio_label_margin);
 }
-
 @keyframes circleAnimate {
   0% {
     transform: scale(0);
   }
-
   100% {
     transform: scale(1);
   }
-}
+}

package/lib/Radio/__tests__/Radio.spec.js

@@ -243,14 +243,4 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering secondaryText with checked state', function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      secondaryText: "Secondary text",
-      text: "Radio Text",
-      checked: true
-    })),
-        asFragment = _render25.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });