@nulogy/components 7.4.0 → 7.5.0

package/dist/main.js

@@ -16153,7 +16153,11 @@
     var _hover, _active, _hoverActive, _focus, _ref3;
 
     var disabled = _ref2.disabled,
+        hoverBackgroundColor = _ref2.hoverBackgroundColor,
         theme = _ref2.theme;
+
+    var _a;
+
     return _ref3 = {
       background: "transparent",
       border: "none",
@@ -16172,7 +16176,7 @@
     }, _ref3["" + HoverText] = {
       opacity: "0"
     }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
-      backgroundColor: theme.colors.lightBlue
+      backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
     }, _hover["" + HoverText] = {
       opacity: "1"
     }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
@@ -16196,18 +16200,21 @@
     var children = _a.children,
         _a$color = _a.color,
         color = _a$color === void 0 ? "darkBlue" : _a$color,
+        _a$hoverBackgroundCol = _a.hoverBackgroundColor,
+        hoverBackgroundColor = _a$hoverBackgroundCol === void 0 ? "lightBlue" : _a$hoverBackgroundCol,
         icon = _a.icon,
         labelHidden = _a.labelHidden,
         className = _a.className,
         iconSize = _a.iconSize,
         fontSize = _a.fontSize,
         tooltip = _a.tooltip,
-        props = __rest(_a, ["children", "color", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
+        props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
     return /*#__PURE__*/React__default['default'].createElement(WrapperButton$1, Object.assign({
       ref: forwardedRef,
       "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
-      className: className
+      className: className,
+      hoverBackgroundColor: hoverBackgroundColor
     }, props), /*#__PURE__*/React__default['default'].createElement(Manager$2, null, /*#__PURE__*/React__default['default'].createElement(Reference$2, null, function (_ref4) {
       var ref = _ref4.ref;
       return /*#__PURE__*/React__default['default'].createElement(Icon, {

package/dist/main.module.js

@@ -16127,7 +16127,11 @@ var WrapperButton$1 = styled.button.withConfig({
   var _hover, _active, _hoverActive, _focus, _ref3;
 
   var disabled = _ref2.disabled,
+      hoverBackgroundColor = _ref2.hoverBackgroundColor,
       theme = _ref2.theme;
+
+  var _a;
+
   return _ref3 = {
     background: "transparent",
     border: "none",
@@ -16146,7 +16150,7 @@ var WrapperButton$1 = styled.button.withConfig({
   }, _ref3["" + HoverText] = {
     opacity: "0"
   }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
-    backgroundColor: theme.colors.lightBlue
+    backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
   }, _hover["" + HoverText] = {
     opacity: "1"
   }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
@@ -16170,18 +16174,21 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
   var children = _a.children,
       _a$color = _a.color,
       color = _a$color === void 0 ? "darkBlue" : _a$color,
+      _a$hoverBackgroundCol = _a.hoverBackgroundColor,
+      hoverBackgroundColor = _a$hoverBackgroundCol === void 0 ? "lightBlue" : _a$hoverBackgroundCol,
       icon = _a.icon,
       labelHidden = _a.labelHidden,
       className = _a.className,
       iconSize = _a.iconSize,
       fontSize = _a.fontSize,
       tooltip = _a.tooltip,
-      props = __rest(_a, ["children", "color", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
+      props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
   return /*#__PURE__*/React__default.createElement(WrapperButton$1, Object.assign({
     ref: forwardedRef,
     "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
-    className: className
+    className: className,
+    hoverBackgroundColor: hoverBackgroundColor
   }, props), /*#__PURE__*/React__default.createElement(Manager$2, null, /*#__PURE__*/React__default.createElement(Reference$2, null, function (_ref4) {
     var ref = _ref4.ref;
     return /*#__PURE__*/React__default.createElement(Icon, {

package/dist/src/Button/IconicButton.d.ts

@@ -5,6 +5,7 @@ declare type BaseProps = {
     labelHidden?: boolean;
     icon?: any;
     iconSize?: string;
+    hoverBackgroundColor?: string;
     fontSize?: string;
     tooltip?: string;
 };

package/dist/src/Button/IconicButton.story.d.ts

@@ -71,3 +71,5 @@ export declare const WithNonTextChildren: {
         name: string;
     };
 };
+export declare const WithCustomHoverBackgroundThemeColor: () => JSX.Element;
+export declare const WithCustomHoverBackgroundNonThemeColor: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {