@zohodesk/dot 1.0.0-temp-222 → 1.0.0-temp-220.2

package/lib/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   text-transform: capitalize;
 }
 

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }

package/lib/AudioPlayer/AudioPlayer.module.css

@@ -74,7 +74,7 @@
 .line {
     color: var(--zdt_audioplayer_line_text);
     font-size: var(--zd_font_size13) ;
-    font-family: var(--zd_semibold);
+    font-weight: var(--zd-fw-semibold);
 }
 
 .disable {

package/lib/DotProvider/hooks/useDotProvider.js

@@ -23,6 +23,8 @@ require("@zohodesk/components/es/common/basic.module.css");
 
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
+require("@zohodesk/variables/es/fontWeightVariables.module.css");
+
 require("@zohodesk/components/es/common/boxShadow.module.css");
 
 require("../../common/dot_boxShadow.module.css");

package/lib/Drawer/Drawer.module.css

@@ -109,7 +109,7 @@
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/lib/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

package/lib/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,5 +1,5 @@
 .headtingText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   font-size: var(--zd_font_size50) ;
   letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5) ;

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,10 +10,8 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -45,9 +43,6 @@ exports[`CurrencyField rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,10 +18,8 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="container effect  placeHolder  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -77,9 +75,6 @@ exports[`DateField rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/form/fields/Fields.module.css

@@ -71,16 +71,11 @@
 }
 .radioBox {
   max-width: 100% ;
-  transition: border var(--zd_transition3);
-  border: 1px solid var(--zdt_radiofield_box_border);
-  border-radius: 6px;
-}
-.radioBox.primaryTextOnly {
   height: var(--zd_size36) ;
+  transition: border var(--zd_transition3);
   padding: 0 var(--zd_size10) ;
-}
-.radioBox.withSecondaryText {
-  padding: var(--zd_size18) var(--zd_size16) ;
+  border: 1px solid var(--zdt_radiofield_box_border);
+  border-radius: 6px
 }
 .hoverableRadioBox:hover, .radioBoxActive {
   border-color: var(--zdt_radiofield_box_active_border)

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,10 +29,8 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="container effect  custmInputWrapper  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"

package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,10 +22,8 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="container effect    flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -57,9 +55,6 @@ exports[`PhoneField rendering the defult props 1`] = `
                 data-test-id="containerComponent"
               />
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/form/fields/RadioField/RadioField.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@zohodesk/utils");
-
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
@@ -186,30 +184,18 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
-        var _compileClassNames;
-
         var text = option.text,
             value = option.value,
             _option$disabled = option.disabled,
             disabled = _option$disabled === void 0 ? false : _option$disabled,
             tooltip = option.tooltip,
-            infoTooltip = option.infoTooltip,
-            secondaryText = option.secondaryText,
-            renderRightPlaceholderNode = option.renderRightPlaceholderNode,
-            customProps = option.customProps;
+            infoTooltip = option.infoTooltip;
         var isDisabledState = disabled || isDisabled;
         var isChecked = selectedValue == value;
-        var rightPlaceholderNode = !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
-          name: "ZD-GN-info",
-          size: "16",
-          title: infoTooltip,
-          iconClass: _FieldsModule["default"].infoIcon
-        }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
-        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _compileClassNames)) : '';
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
           className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
-        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({}, customProps, {
+        }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
           id: index,
           value: value,
           name: id,
@@ -226,21 +212,20 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           checked: isChecked,
           dataId: dataId,
           isReadOnly: isReadOnly,
-          variant: variant,
-          secondaryText: secondaryText
+          variant: variant
         }, RadioProps, {
           a11y: _objectSpread({
             tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
           }, RadioProps.a11y),
           customClass: _objectSpread({
-            customRadioWrap: radioBoxClasses
-          }, RadioProps.customClass),
-          customProps: _objectSpread({
-            LabelProps: _objectSpread(_objectSpread({}, RadioProps.customProps ? RadioProps.customProps.LabelProps : undefined), {}, {
-              renderRightPlaceholderNode: rightPlaceholderNode
-            })
-          }, RadioProps.customProps)
-        })));
+            customRadioWrap: isBoxStyle ? "".concat(_FieldsModule["default"].radioBox, " ").concat(!isDisabledState ? _FieldsModule["default"].hoverableRadioBox : '', " ").concat(isChecked ? _FieldsModule["default"].radioBoxActive : '') : ''
+          }, RadioProps.customClass)
+        }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)) : null));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/RadioField/__tests__/RadioField.spec.js

@@ -24,22 +24,6 @@ var options = [{
   text: 'Kolkata',
   value: '4'
 }];
-var optionsWithsecondaryText = [{
-  text: 'Chennai',
-  value: '1',
-  secondaryText: 'Tamil Nadu Capital'
-}, {
-  text: 'Mumbai',
-  value: '2',
-  secondaryText: 'Maharashtra Capital',
-  tooltip: 'Disabled Option',
-  disabled: true
-}, {
-  text: 'Delhi',
-  value: '3',
-  secondaryText: 'Capital of India',
-  infoTooltip: 'Capital of India'
-}];
 describe('RadioField', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
@@ -66,21 +50,4 @@ describe('RadioField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering with secondaryTextOptions', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
-      options: optionsWithsecondaryText
-    })),
-        asFragment = _render4.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with secondaryTextOptions & isBoxStyle', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioField["default"], {
-      options: optionsWithsecondaryText,
-      isBoxStyle: true
-    })),
-        asFragment = _render5.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });