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

package/es/Radio/props/propTypes.js

@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
-import { propTypes as TypographyPropTypes } from "../../Typography/props/propTypes";
 export const propTypes = {
   active: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
-  secondaryText: PropTypes.string,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
   id: PropTypes.string,
@@ -25,8 +23,7 @@ export const propTypes = {
   }),
   customProps: PropTypes.exact({
     ContainerProps: PropTypes.object,
-    LabelProps: PropTypes.object,
-    secondaryTextProps: PropTypes.exact(TypographyPropTypes)
+    LabelProps: PropTypes.object
   }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,

package/es/Tab/Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/es/TextBox/TextBox.module.css

@@ -9,7 +9,7 @@
   --textbox_width: 100%;
   --textbox_height: var(--zd_size35);
   --textbox_border_radius: none;
-  --textbox_font_family: var(--zd_regular);
+  --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
@@ -166,18 +166,18 @@
 .primary,
 .secondary,
 .light {
-  font-family: var(--textbox_font_family);
+  font-weight: var(--textbox_font_weight);
 }
 
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
-  --textbox_font_family: var(--zd_semibold);
+  --textbox_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
-  --textbox_font_family: var(--zd_light);
+  --textbox_font_weight: var(--zd-fw-light);
 }
 
 .light {

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -1,8 +1,4 @@
 .varClass {
-  /* textboxicon default variables */
-  --textboxicon_line_height: 1px;
-  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
-
   /* textboxicon icon default variables */
   --textboxicon_icon_margin: 0 var(--zd_size5);
   --textboxicon_icon_cursor: pointer;
@@ -11,8 +7,6 @@
 .container {
   composes: varClass;
   position: relative;
-  --local_inputFieldLine_border_width: var(--textboxicon_line_height);
-  --local_inputFieldLine_border_color: var(--textboxicon_line_color);
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;

package/es/Textarea/Textarea.module.css

@@ -139,7 +139,7 @@
   --textarea_height: var(--zd_size184);
 }
 .default {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
 .primary {

package/es/Tooltip/Tooltip.module.css

@@ -14,7 +14,7 @@
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
   line-height: 1.5385;

package/es/Typography/css/Typography.module.css

@@ -25,20 +25,20 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 

package/es/common/basic.module.css

@@ -1,15 +1,15 @@
 @font-face {
-  font-family: Regular;
-  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
-  font-weight: 400;
+  font-family: Light;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: Light;
-  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
-  font-weight: 300;
+  font-family: Regular;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
@@ -29,3 +29,36 @@
   font-style: normal;
   font-display: swap;
 }
+
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 100 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
+  font-weight: 700 900;
+  font-style: normal;
+  font-display: swap;
+}

package/es/common/basicReset.module.css

@@ -27,7 +27,7 @@ html {
 }
 
 textarea {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 label, input[type='button'], input[type='submit'], input[type='file'], button {
@@ -37,4 +37,4 @@ label, input[type='button'], input[type='submit'], input[type='file'], button {
 /*Moz Required Box shadow Isssue*/
 input[required]:-moz-ui-invalid {
   box-shadow: none;
-}
+}

package/es/common/common.module.css

@@ -303,22 +303,22 @@
   resize: vertical;
 }
 
-/*font-family*/
+/*font-weight*/
 .regular {
-  font-family: var(--zd_regular, Regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .light {
-  font-family: var(--zd_light, Light);
+  font-weight: var(--zd-fw-light);
 }
 
 .semibold {
-  font-family: var(--zd_semibold, Semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth;
 }
 
 .bold {
-  font-family: var(--zd_bold, Bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth;
 }
 

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

@@ -1,7 +1,7 @@
 .varClass {
     --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
     --local_inputFieldLine_border_width: 1px;
-    --local_padding: var(--zd_size0);
+    --local_padding: 0;
     --local_cursor: pointer;
 }
 

package/es/v1/Tab/v1Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/es/v1/Typography/css/v1_Typography.module.css

@@ -19,17 +19,17 @@
   display: initial;
 }
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_light {
-  font-family: var(--zd_light);
+  font-weight: var(--zd-fw-light);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth from '../../../common/common.module.css';
 }
 .fontStyles_normal{

package/lib/AppContainer/AppContainer.js

@@ -29,6 +29,8 @@ require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
+require("@zohodesk/variables/es/fontWeightVariables.module.css");
+
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");

package/lib/AppContainer/AppContainer.module.css

@@ -8,8 +8,9 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container {
-  font-family: var(--zd_regular);
+.container, .container button, .container input, .container textarea ,.container select {
+  /* font-family: var(--zd_regular); */
+  font-family: var(--zd-font-family), var(--zd_fallback_font, ZDLato);
 }
 .tooltip {
   height: 0 ;

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

@@ -5,7 +5,7 @@
   --button_cursor: pointer;
   --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
+  --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
@@ -49,7 +49,7 @@
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
-  font-family: var(--button_font_family);
+  font-weight: var(--button_font_weight);
   text-transform: var(--button_text_transform);
   min-width: var(--button_min_width);
   height: var(--button_height);
@@ -63,7 +63,7 @@
 }
 
 .bold {
-  --button_font_family: var(--zd_semibold);
+  --button_font_weight: var(--zd-fw-semibold);
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -623,7 +623,7 @@
 }
 
 .loader {
-  color: var(--dot_mirror)
+  color: var(--dot_mirror);
 }
 
 [dir=ltr] .strike {
@@ -633,34 +633,43 @@
 [dir=rtl] .strike {
   background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
 }
+
 .primaryStrike {
   --button_strike_color: var(--zdt_button_primary_strike);
 }
+
 .primaryfilledStrike {
   --button_strike_color: var(--zdt_button_primaryFilled_strike);
   --button_border_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerStrike {
   --button_strike_color: var(--zdt_button_danger_strike);
 }
+
 .dangerfilledStrike {
   --button_strike_color: var(--zdt_button_dangerFilled_strike);
   --button_border_color: var(--zdt_button_dangerfill_bg);
 }
+
 .secondaryStrike {
   --button_strike_color: var(--zdt_button_secondary_border);
 }
+
 .secondaryfilledStrike {
   --button_strike_color: var(--zdt_button_secondaryFilled_strike);
   --button_border_color: var(--zdt_button_secondaryfill_bg);
 }
+
 .tertiaryfilledStrike {
   --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
   --button_border_color: var(--zdt_button_tertiaryfill_bg);
 }
+
 .successStrike {
   --button_strike_color: var(--zdt_button_success_strike);
 }
+
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
   --button_border_color: var(--zdt_button_successfill_border);

package/lib/CheckBox/CheckBox.js

@@ -15,8 +15,6 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
-var _Typography = _interopRequireDefault(require("../Typography/Typography"));
-
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
@@ -106,14 +104,11 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props3.customClass,
           customProps = _this$props3.customProps,
           dataSelectorId = _this$props3.dataSelectorId,
-          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode,
-          secondaryText = _this$props3.secondaryText;
+          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _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;
       var _customClass$customCh = customClass.customCheckBox,
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
@@ -121,9 +116,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customCB = customClass.customCBoxSize,
           customCBoxSize = _customClass$customCB === void 0 ? '' : _customClass$customCB,
           _customClass$customTi = customClass.customTickSize,
-          customTickSize = _customClass$customTi === void 0 ? '' : _customClass$customTi,
-          _customClass$customSe = customClass.customSecondaryText,
-          customSecondaryText = _customClass$customSe === void 0 ? '' : _customClass$customSe;
+          customTickSize = _customClass$customTi === void 0 ? '' : _customClass$customTi;
       var accessMode = isReadOnly ? _CheckBoxModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _CheckBoxModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
       var ariaLabel = a11y.ariaLabel,
@@ -152,8 +145,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataSelectorId: dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(secondaryText ? _CheckBoxModule["default"].withSecondaryText : '', " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : ''),
-        align: secondaryText ? "start" : undefined
+        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,
@@ -201,10 +193,10 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         y1: "20",
         x2: "28.53",
         y2: "20"
-      }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _CheckBoxModule["default"].labelContainer
-      }, text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+        className: _CheckBoxModule["default"].text
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: disabled ? 'disable' : labelPalette,
         id: id,
@@ -212,15 +204,9 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         type: "title",
         clipped: isClipped,
         variant: variant,
-        customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                                ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                                ").concat(accessMode, " ").concat(customLabel),
+        customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                            ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                            ").concat(accessMode, " ").concat(customLabel),
         title: toolTip ? toolTip : text
-      }, 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(_CheckBoxModule["default"].secondaryText, " ").concat(customSecondaryText)
-      }), secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+      }, LabelProps))), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/CheckBox/CheckBox.module.css

@@ -90,6 +90,12 @@
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+[dir=ltr] .text {
+  margin-left: var(--zd_size6) ;
+}
+[dir=rtl] .text {
+  margin-right: var(--zd_size6) ;
+}
 
  .checkedprimary,
 .checkeddanger {
@@ -135,27 +141,6 @@
 .disabled {
   opacity: 0.7
 }
-
-.withSecondaryText {
-  margin-top: var(--zd_size1) ;
-}
-
-.secondaryText {
-  color: var(--zdt_checkbox_secondary_text);
-}
-
-.labelContainer {
-  composes: dflex flexcolumn from '../common/common.module.css';
-  gap: var(--zd_size4) ;
-}
-
-[dir=ltr] .labelContainer {
-  margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .labelContainer {
-  margin-right: var(--zd_size6) ;
-}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/lib/CheckBox/__tests__/CheckBox.spec.js

@@ -168,33 +168,24 @@ describe('CheckBox component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render secondaryText', function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
-      text: "checkboxText",
-      secondaryText: "secondaryText"
-    })),
-        asFragment = _render18.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
   test('Should be render activeStyle is minus', function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       activeStyle: "minus"
     })),
-        asFragment = _render19.asFragment;
+        asFragment = _render18.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render dataSelectorId', function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       dataSelectorId: "dataSelectorIdCheck"
     })),
-        asFragment = _render20.asFragment;
+        asFragment = _render19.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering the Custom Props', function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       text: "checkboxText",
       customProps: {
         CheckBoxProps: {
@@ -205,12 +196,12 @@ describe('CheckBox component', function () {
         }
       }
     })),
-        asFragment = _render21.asFragment;
+        asFragment = _render20.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering the Custom class', function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       text: "checkboxText",
       checked: true,
       customClass: {
@@ -220,12 +211,12 @@ describe('CheckBox component', function () {
         customTickSize: 'customTickSizeClass'
       }
     })),
-        asFragment = _render22.asFragment;
+        asFragment = _render21.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  true and entering their values', function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       checked: true,
       a11y: {
         ariaLabel: 'ariaLabelCheckBox',
@@ -235,12 +226,12 @@ describe('CheckBox component', function () {
         role: 'checkBox2'
       }
     })),
-        asFragment = _render23.asFragment;
+        asFragment = _render22.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  false and entering their values', function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
       checked: true,
       a11y: {
         ariaLabel: 'ariaLabelCheckBox',
@@ -250,7 +241,7 @@ describe('CheckBox component', function () {
         role: 'checkBox3'
       }
     })),
-        asFragment = _render24.asFragment;
+        asFragment = _render23.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });