@zohodesk/dot 1.0.0-temp-166 → 1.0.0-temp-168

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -26,6 +26,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
 
 var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -89,7 +91,8 @@ function DesktopNotificationUI(props) {
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
       i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      responsiveId = props.responsiveId;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -115,66 +118,82 @@ function DesktopNotificationUI(props) {
   var Zindex = isAnimate ? getNextIndex() : null;
   var uiVariantOne = title && (info || secondaryInfo);
   var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _DesktopNotificationModule["default"].parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-    className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: "".concat(dataId, "_close"),
-    needClose: needClose
-  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
-  }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
-  }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].footer
-  }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].message),
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": "".concat(dataId, "_submitButton"),
-    "data-test-id": "".concat(dataId, "_submitButton")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: cancelText,
-    palette: "secondary",
-    dataId: "".concat(dataId, "_cancelButton"),
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n            ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "  ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: "".concat(dataId, "_close"),
+      needClose: needClose
+    })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+    }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+    }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _DesktopNotificationModule["default"].footer
+    }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].message),
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": "".concat(dataId, "_submitButton"),
+      "data-test-id": "".concat(dataId, "_submitButton")
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: cancelText,
+      palette: "secondary",
+      dataId: "".concat(dataId, "_cancelButton"),
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
+  }));
 }
 
 DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;

package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -28,6 +28,7 @@
 }
 
 /* Size */
+
 .medium {
   width: var(--zd_size452) ;
 }
@@ -35,6 +36,10 @@
 .large {
   width: var(--zd_size580) ;
 }
+.tapWidth{
+  max-width: 100% ;
+  min-width: 100% ;
+}
 
 /* Animation Style */
 .closeAnimation {
@@ -76,12 +81,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_smoke18);
+  color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_smoke1);
+  border-top: 1px solid var(--zdt_desktopnotification_message_border);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -92,7 +97,7 @@
 }
 
 .message:hover {
-  background: var(--zd_alabaster);
+  background: var(--zdt_desktopnotification_message_hover_bg);
 }
 
 /* Section */
@@ -100,9 +105,10 @@
   padding: var(--zd_size15) var(--zd_size30) var(--zd_size30) ;
 }
 
+
 .subTitle {
   font-size: var(--zd_font_size15) ;
-  line-height: 1.3333;
+  line-height: var(--zd_size20);
   font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -113,7 +119,7 @@
 
 .infoText {
   font-size: var(--zd_font_size14) ;
-  line-height: 1.2857;
+  line-height: var(--zd_size18);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 
@@ -124,4 +130,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/lib/version2/notification/DesktopNotification/props/defaultProps.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -17,6 +20,7 @@ var defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports.defaultProps = defaultProps;

package/lib/version2/notification/DesktopNotification/props/propTypes.js

@@ -14,7 +14,8 @@ var propTypes = {
   onPortalClose: _propTypes["default"].func,
   autoClose: _propTypes["default"].bool,
   hideTime: _propTypes["default"].string,
-  Element: _propTypes["default"].element
+  Element: _propTypes["default"].element,
+  responsiveId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;
 var DesktopNotificationUI_propTypes = {

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -19,6 +19,10 @@ var _AlertClose = _interopRequireDefault(require("../../AlertClose/AlertClose"))
 
 var _AlertIcons = _interopRequireDefault(require("../../alertIcons/AlertIcons"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
+
 var _DesktopNotificationHeaderModule = _interopRequireDefault(require("./DesktopNotificationHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -70,35 +74,65 @@ var DesktopNotificationHeader = /*#__PURE__*/function (_Component) {
           type = _this$props$type === void 0 ? '' : _this$props$type,
           needIcon = _this$props.needIcon,
           title = _this$props.title,
-          needClose = _this$props.needClose;
+          needClose = _this$props.needClose,
+          responsiveId = _this$props.responsiveId;
+
+      function responsiveFunc(_ref) {
+        var mediaQueryOR = _ref.mediaQueryOR;
+        return {
+          uptoTablet: mediaQueryOR([{
+            maxWidth: 760
+          }])
+        };
+      }
+
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
         className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
         isCover: false,
         wrap: "wrap"
-      }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DesktopNotificationHeaderModule["default"].iconContainer
-      }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
-        type: type
-      })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        align: "center"
-      }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _DesktopNotificationHeaderModule["default"].title,
-        shrink: true
-      }, title) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
-      }, title))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _DesktopNotificationHeaderModule["default"].close
-      }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
-        onClose: onClose,
-        dataTitle: closeTitle,
-        dataId: dataId,
-        type: "light"
-      })) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: responsiveFunc,
+        responsiveId: responsiveId
+      }, function (_ref2) {
+        var uptoTablet = _ref2.uptoTablet;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
+          className: _DesktopNotificationHeaderModule["default"].iconContainer
+        }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
+          type: type
+        })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          alignBox: "row",
+          align: "center"
+        }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          shrink: true
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $i18n_dataTitle: title,
+          $ui_className: _DesktopNotificationHeaderModule["default"].title,
+          $ui_tagName: "h1",
+          $ui_size: uptoTablet ? '16' : '18',
+          $ui_lineHeight: "20",
+          $ui_weight: "bold",
+          $flag_reset: true,
+          $ui_wordBreak: "breakWord"
+        }, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $i18n_dataTitle: title,
+          $ui_className: _DesktopNotificationHeaderModule["default"].title,
+          $ui_size: "14",
+          $ui_wordBreak: "breakWord"
+        }, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _DesktopNotificationHeaderModule["default"].close
+        }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
+          onClose: onClose,
+          dataTitle: closeTitle,
+          dataId: dataId,
+          type: "light"
+        })) : null);
+      }));
     }
   }]);
 

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,32 +5,29 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
   }
-  
+
   .title {
-    font-size: var(--zd_font_size18) ;
-    line-height: 1.2222;
-    font-family: var(--zd_bold);
-    composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   }
-  
+
   [dir=ltr] .title {
   margin: 0 var(--zd_size5) 0 var(--zd_size10) ;
   }
-  
+
   [dir=rtl] .title {
     margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
   }
 
   .infoText {
-    font-size: var(--zd_font_size14) ;
     max-width: 100% ;
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
 
   /* Palette */
@@ -38,19 +35,19 @@
   .success {
     --commonalert_border_color: var(--zdt_commonalert_success_border);
   }
-  
+
   .info,.notification,.alarm {
     --commonalert_border_color: var(--zdt_commonalert_info_border);
   }
-  
+
   .danger {
     --commonalert_border_color: var(--zdt_commonalert_danger_border);
   }
-  
+
   .error {
     --commonalert_border_color: var(--zdt_commonalert_error_border);
   }
-  
+
   .warning {
     --commonalert_border_color: var(--zdt_commonalert_warning_border);
   }
@@ -70,18 +67,18 @@
 }
 
 .primary .infoText {
-    line-height: 1;
+    line-height: var(--zd_size18);
   }
-  
+
   .primary .close {
     position: absolute;
     top: var(--zd_size12) ;
   }
-  
+
   [dir=ltr] .primary .close {
   right: var(--zd_size12) ;
   }
-  
+
   [dir=rtl] .primary .close {
     left: var(--zd_size12) ;
   }
@@ -99,7 +96,7 @@
   }
 
   .secondary .infoText {
-    line-height: 1.4286;
+    line-height: var(--zd_size20);
   }
 
   .secondary .iconContainer {
@@ -134,4 +131,4 @@
   [dir=rtl] .secondary .close {
     left: var(--zd_size12) ;
     margin: auto var(--zd_size25) auto 0 ;
-  }
+  }

package/lib/version2/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var defaultProps = {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports.defaultProps = defaultProps;

package/lib/version2/notification/DesktopNotificationHeader/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   onClose: _propTypes["default"].func,
   title: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: _propTypes["default"].oneOf(['primary', 'secondary'])
+  variant: _propTypes["default"].oneOf(['primary', 'secondary']),
+  responsiveId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-166",
+  "version": "1.0.0-temp-168",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -21,22 +21,22 @@
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/components/lib node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
     "build:lib": "react-cli build:component:cmjs",
     "build:es": "react-cli build:library:es",
-    "build": "npm run build:lib && npm run build:es",
+    "build": "npm run theme:validate && npm run build:lib && npm run build:es",
     "build:local": " npm run build && npm run rtl && npm run cssVariableConvert ",
     "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
     "rtl:watch": "react-cli rtl ./src ./es -w",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "prepare": "react-cli clean assets &&  npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
     "init": "npm run clean && npm run build:variables",
-    "build:variables": "node ./preprocess/index",
+    "build:variables": "react-cli clean ./assets && node ./preprocess/index",
     "lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "test": "react-cli test",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
-    "docs": "npm run dubCheck && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js && npm run download && npm run test && npm run review:props",
+    "docs": "npm run dubCheck && npm run theme:validate && review:props && react-cli docs",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run test && npm run theme:validate ",
     "postpublish": "node postPublish.js",
     "download": "react-cli clean ./node_modules ./package-lock.json  && npm install",
     "expublish": "npm publish --tag experimental-version",
@@ -44,17 +44,19 @@
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
-    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js ./src/ ./.cli ./.cli "
+    "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli",
+    "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli",
+    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
-    "@zohodesk-private/node-plugins": "^1.0.0",
+    "@zohodesk-private/node-plugins": "1.1.1",
     "@zohodesk-private/color-variable-preprocessor": "1.1.0",
-    "@zohodesk-private/react-prop-validator": "1.1.0",
-    "@zohodesk/components": "1.0.0-temp-178",
+    "@zohodesk-private/react-prop-validator": "1.2.0",
+    "@zohodesk/components": "1.2.19",
     "@zohodesk/a11y": "2.1.0",
     "@zohodesk/icons": "1.0.19",
-    "@zohodesk/svg": "1.1.6",
+    "@zohodesk/svg": "1.1.8",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
@@ -69,9 +71,9 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.2.18",
+    "@zohodesk/components": "1.2.19",
     "@zohodesk/icons": "1.0.19",
-    "@zohodesk/svg": "1.1.6",
+    "@zohodesk/svg": "1.1.8",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.2",

package/propValidationArg.json

@@ -0,0 +1,8 @@
+{
+    "inputDir": "./src",
+    "outputDir": "./.cli",
+    "excludeDir":"./.cli",
+    "propUnifiExcludeDir":"./.cli",
+    "propUnifiReport":"propUnifi",
+    "strictMode":""
+}