@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/Provider.js

@@ -13,7 +13,7 @@ var _AppContainer = _interopRequireDefault(require("./AppContainer/AppContainer"
 
 var _Layout = require("./Layout");
 
-var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
+var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
 require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
@@ -59,28 +59,6 @@ require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module
 
 require("../assets/Appearance/dark/mode/darkMode.module.css");
 
-require("../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
-
-require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
-
-require("../assets/Appearance/pureDark/mode/pureDarkMode.module.css");
-
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 
 var _IdProvider = require("./Provider/IdProvider");
@@ -123,17 +101,25 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       appearanceName: 'default',
       themeName: 'blue'
     };
+    _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
-    _this.setAppearance = _this.setAppearance.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Provider, [{
-    key: "setAppearance",
-    value: function setAppearance(mode) {
-      this.setState({
-        appearanceName: mode
-      });
+    key: "switchMode",
+    value: function switchMode() {
+      var appearanceName = this.state.appearanceName;
+
+      if (appearanceName == 'default') {
+        this.setState({
+          appearanceName: 'dark'
+        });
+      } else {
+        this.setState({
+          appearanceName: 'default'
+        });
+      }
     }
   }, {
     key: "setTheme",
@@ -145,9 +131,33 @@ var Provider = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$state = this.state,
           appearanceName = _this$state.appearanceName,
           themeName = _this$state.themeName;
+      var themeClass = {
+        width: '20px',
+        height: '20px',
+        borderRadius: '3px',
+        display: 'flex',
+        border: '1px solid #ccc',
+        margin: '0 5px',
+        cursor: 'pointer',
+        backgroundColor: '#0a73eb'
+      };
+      var green = {
+        backgroundColor: '#26a942'
+      };
+      var red = {
+        backgroundColor: '#de3535'
+      };
+      var orange = {
+        backgroundColor: '#e57717'
+      };
+      var yellow = {
+        backgroundColor: '#e8b923'
+      };
       return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Provider, {
         value: {
           isReducedMotion: false,
@@ -162,9 +172,65 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
-      }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
-        onThemeChange: this.setTheme,
-        onAppearanceChange: this.setAppearance
+      }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          position: 'fixed',
+          bottom: '0',
+          backgroundColor: '#272727',
+          padding: '10px',
+          borderRadius: '15px 15px 0 0',
+          minWidth: '100px',
+          textAlign: 'center',
+          left: '50%',
+          transform: 'translate(-50%)',
+          boxShadow: '0 0 3px #000',
+          fontSize: '12px',
+          zIndex: '3',
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        id: "switchMode",
+        text: "Light/Night Mode",
+        labelSize: "small",
+        onChange: this.switchMode,
+        checked: appearanceName == 'dark'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Blue Theme",
+        style: themeClass,
+        onClick: function onClick() {
+          return _this2.setTheme('blue');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Green Theme",
+        style: Object.assign({}, themeClass, green),
+        onClick: function onClick() {
+          return _this2.setTheme('green');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Red Theme",
+        style: Object.assign({}, themeClass, red),
+        onClick: function onClick() {
+          return _this2.setTheme('red');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Orange Theme",
+        style: Object.assign({}, themeClass, orange),
+        onClick: function onClick() {
+          return _this2.setTheme('orange');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Yellow Theme",
+        style: Object.assign({}, themeClass, yellow),
+        onClick: function onClick() {
+          return _this2.setTheme('yellow');
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        "data-portal": "portal1"
       })));
     }
   }]);

package/lib/Radio/Radio.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
@@ -162,8 +160,51 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Radio;
-Radio.defaultProps = _defaultProps.defaultProps;
-Radio.propTypes = _propTypes.propTypes;
+Radio.defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  palette: 'primary',
+  labelPalette: 'default',
+  labelSize: 'medium',
+  size: 'medium',
+  variant: 'default',
+  isFilled: true,
+  customClass: {},
+  a11y: {}
+};
+Radio.propTypes = {
+  active: _propTypes["default"].bool,
+  checked: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  disabledTitle: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isFilled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  labelPalette: _propTypes["default"].oneOf(['default', 'primary', 'danger', 'mandatory']),
+  labelSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  name: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['primary', 'danger']),
+  size: _propTypes["default"].oneOf(['small', 'medium']),
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['primary', 'default']),
+  customClass: _propTypes["default"].shape({
+    customRadioWrap: _propTypes["default"].string,
+    customRadio: _propTypes["default"].string,
+    customLabel: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    ariaChecked: _propTypes["default"].bool,
+    ariaHidden: _propTypes["default"].bool,
+    role: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string,
+    ariaLabel: _propTypes["default"].string,
+    ariaReadonly: _propTypes["default"].bool
+  })
+};
 
 if (false) {
   Radio.docs = {

package/lib/Radio/Radio.module.css

@@ -67,16 +67,14 @@
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,
-.hoverEfffect:hover .hoverprimary
-/* .hoverEfffect:focus .hoverprimary  */
-{
+.hoverEfffect:hover .hoverprimary,
+.hoverEfffect:focus .hoverprimary {
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
-.hoverEfffect:hover .hoverdanger
-/* .hoverEfffect:focus .hoverdanger */
- {
+.hoverEfffect:hover .hoverdanger,
+.hoverEfffect:focus .hoverdanger {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
@@ -88,13 +86,13 @@
 }
 
 .active:hover .primaryLabel,
-/* .active:focus .primaryLabel, */
+.active:focus .primaryLabel,
 .primarycheckedActive {
   --label_text_color: var(--zdt_radio_label_primary_text);
 }
 
 .active:hover .dangerLabel,
-/* .active:focus .dangerLabel, */
+.active:focus .dangerLabel,
 .dangercheckedActive {
   --label_text_color: var(--zdt_radio_label_danger_text);
 }

package/lib/Responsive/CustomResponsive.js

@@ -11,9 +11,7 @@ exports.useResponsiveReceiver = useResponsiveReceiver;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ResizeObserver = _interopRequireDefault(require("./ResizeObserver"));
 
@@ -132,11 +130,16 @@ function ResponsiveSender(props) {
   });
 }
 
-ResponsiveSender.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.CustomResponsiveSender_defaultProps), {}, {
-  responsiveId: defaultResponsiveId
-});
+ResponsiveSender.defaultProps = {
+  responsiveId: defaultResponsiveId,
+  domRefKey: 'eleRef'
+};
 ResponsiveSender.contextType = ResponsiveContext;
-ResponsiveSender.propTypes = _propTypes.CustomResponsiveSender_propTypes;
+ResponsiveSender.propTypes = {
+  children: _propTypes["default"].any.isRequired,
+  domRefKey: _propTypes["default"].string,
+  responsiveId: _propTypes["default"].string
+};
 
 function useResponsiveReceiver() {
   var responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
@@ -230,7 +233,14 @@ function ResponsiveReceiver(_ref) {
   }, child) : child;
 }
 
-ResponsiveReceiver.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.CustomResponsiveReceiver_defaultProps), {}, {
-  responsiveId: defaultResponsiveId
-});
-ResponsiveReceiver.propTypes = _propTypes.CustomResponsiveReceiver_propTypes;
+ResponsiveReceiver.defaultProps = {
+  responsiveId: defaultResponsiveId,
+  domRefKey: 'eleRef'
+};
+ResponsiveReceiver.propTypes = {
+  children: _propTypes["default"].func,
+  domRefKey: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  query: _propTypes["default"].func,
+  responsiveId: _propTypes["default"].string
+};

package/lib/Responsive/Responsive.js

@@ -12,9 +12,7 @@ exports.useResponsiveReceiver = useResponsiveReceiver;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ResizeObserver = _interopRequireDefault(require("./ResizeObserver"));
 
@@ -42,12 +40,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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; }
-
 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); } }
@@ -168,11 +160,18 @@ var ResponsiveSender = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports.ResponsiveSender = ResponsiveSender;
-ResponsiveSender.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.ResponsiveSender_defaultProps), {}, {
-  responsiveId: defaultResponsiveId
-});
+ResponsiveSender.defaultProps = {
+  responsiveId: defaultResponsiveId,
+  domRefKey: 'eleRef' // matcher: defaultMatcher
+
+};
 ResponsiveSender.contextType = ResponsiveContext;
-ResponsiveSender.propTypes = _propTypes.ResponsiveSender_propTypes;
+ResponsiveSender.propTypes = {
+  children: _propTypes["default"].any.isRequired,
+  domRefKey: _propTypes["default"].string,
+  responsiveId: _propTypes["default"].string // matcher: PropTypes.func
+
+};
 
 function useResponsiveReceiver() {
   var responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
@@ -268,7 +267,15 @@ function ResponsiveReceiver(_ref) {
   }, child) : child : null;
 }
 
-ResponsiveReceiver.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.ResponsiveReceiver_defaultProps), {}, {
-  responsiveId: defaultResponsiveId
-});
-ResponsiveReceiver.propTypes = _propTypes.ResponsiveReceiver_propTypes;
+ResponsiveReceiver.defaultProps = {
+  responsiveId: defaultResponsiveId,
+  domRefKey: 'eleRef',
+  hiddenSizes: []
+};
+ResponsiveReceiver.propTypes = {
+  children: _propTypes["default"].func,
+  domRefKey: _propTypes["default"].string,
+  eleRef: _propTypes["default"].func,
+  hiddenSizes: _propTypes["default"].array,
+  responsiveId: _propTypes["default"].string
+};

package/lib/Ribbon/Ribbon.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _RibbonModule = _interopRequireDefault(require("./Ribbon.module.css"));
 
@@ -78,8 +76,30 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Ribbon;
-Ribbon.propTypes = _propTypes.propTypes;
-Ribbon.defaultProps = _defaultProps.defaultProps;
+Ribbon.propTypes = {
+  children: _propTypes["default"].element,
+  dataId: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
+  text: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
+  customClass: _propTypes["default"].string
+}; // Ribbon.propTypesDescription = {
+//   text: ' ',
+//   type: ' ',
+//   children: ' ',
+//   palette: ' ',
+//   size: ' '
+// };
+
+Ribbon.defaultProps = {
+  palette: 'default',
+  size: 'large',
+  text: 'Ribbon',
+  type: 'default',
+  dataId: 'ribbonComp',
+  customClass: ''
+};
 
 if (false) {
   Ribbon.docs = {

package/lib/RippleEffect/RippleEffect.js

@@ -7,9 +7,7 @@ exports["default"] = RippleEffect;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
@@ -35,8 +33,25 @@ function RippleEffect(props) {
   });
 }
 
-RippleEffect.defaultProps = _defaultProps.defaultProps;
-RippleEffect.propTypes = _propTypes.propTypes;
+RippleEffect.defaultProps = {
+  isActive: false,
+  isDisabled: false,
+  isNeedEffect: true,
+  needBorder: true,
+  hoverType: 'default',
+  palette: 'default',
+  isCopyTextEnabled: false
+};
+RippleEffect.propTypes = {
+  children: _propTypes["default"].node,
+  hoverType: _propTypes["default"].oneOf(['default', 'border', 'bg']),
+  isActive: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isNeedEffect: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: _propTypes["default"].bool
+};
 
 if (false) {
   RippleEffect.docs = {

package/lib/RippleEffect/RippleEffect.module.css

@@ -8,61 +8,43 @@
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
-/* .hoverEffect:focus.primary.borderHover  */
-{
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
   border-color: var(--zdt_rippleeffect_primary_border);
 }
-.primary.defaultHover, .hoverEffect:hover.primary.active.border
-/* .hoverEffect:focus.primary.active.border  */
-{
+.primary.defaultHover, .hoverEffect:hover.primary.active.border, .hoverEffect:focus.primary.active.border {
   border-color: var(--zdt_rippleeffect_primary_active_border);
 }
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
-/* .hoverEffect:focus.primaryLight.borderHover  */
-{
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover, .hoverEffect:focus.primaryLight.borderHover {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
-.green.defaultHover, .hoverEffect:hover.green.borderHover
-/* .hoverEffect:focus.green.borderHover  */
-{
+.green.defaultHover, .hoverEffect:hover.green.borderHover, .hoverEffect:focus.green.borderHover {
   border-color: var(--zdt_rippleeffect_green_border);
 }
-.hoverEffect:hover.default.defaultHover
-/* .hoverEffect:focus.default.defaultHover */
- {
+.hoverEffect:hover.default.defaultHover, .hoverEffect:focus.default.defaultHover {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
-.hoverEffect:hover.default.borderHover
-/* .hoverEffect:focus.default.borderHover */
- {
+.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
-.hoverEffect:hover.default.bgHover
-/* .hoverEffect:focus.default.bgHover */
- {
+.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
-.hoverEffect:hover.primaryLight.bgHover
-/* .hoverEffect:focus.primaryLight.bgHover  */
-{
+.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
 .primaryFilled {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.hoverEffect:hover.primaryFilled, .primaryFilled.active {
+.hoverEffect:hover.primaryFilled, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
-.hoverEffect:hover.green.bgHover
-/* .hoverEffect:focus.green.bgHover */
- {
+.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
-.default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
+.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
-.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
 .green.active {
@@ -74,17 +56,13 @@
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover
-/* .hoverEffect:focus.danger.borderHover */
- {
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
-.hoverEffect:hover.danger.bgHover, .danger.active {
+.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
-.hoverEffect:hover.primaryDark.bgHover
-/* .hoverEffect:focus.primaryDark.bgHover */
- {
+.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
 .notAllowed {