@eturnity/eturnity_reusable_components 8.13.13-qa-16-03-26.2 → 8.13.13-qa-16-03-26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-qa-16-03-26.2",
+  "version": "8.13.13-qa-16-03-26.3",
   "files": [
     "dist",
     "src"

package/src/components/buttons/buttonIcon/index.vue

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :disable-hover="disableIconHover"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -231,6 +232,10 @@
         default: false,
         type: Boolean,
       },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -10,6 +10,7 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -97,6 +98,10 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
@@ -152,6 +157,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -168,12 +174,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;