@eturnity/eturnity_reusable_components 8.7.4-EPDM-12729.20 → 8.7.4-EPDM-12729.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.4-EPDM-12729.20",
+  "version": "8.7.4-EPDM-12729.21",
   "files": [
     "dist",
     "src"

package/src/components/infoText/index.vue

@@ -10,6 +10,9 @@
       <IconWrapper
         :background-color="backgroundColor"
         :border-radius="borderRadius"
+        :hovered-icon="hoveredIcon"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
         :padding="padding"
       >
         <LabelWrapper
@@ -150,6 +153,9 @@
     backgroundColor: String,
     borderRadius: String,
     padding: String,
+    hoveredIcon: Boolean,
+    isActive: Boolean,
+    isDisabled: Boolean,
   }
   const IconWrapper = styled('div', IconWrapperAttrs)`
     display: flex;
@@ -158,8 +164,18 @@
     gap: 6px;
     white-space: nowrap;
     background-color: ${(props) => props.backgroundColor};
-    border-radius: ${(props) => props.borderRadius};
+    border-radius: ${(props) =>
+      props.hoveredIcon ? '6px' : props.borderRadius};
     padding: ${(props) => props.padding};
+    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.transparentWhite2 : ''};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    &:hover {
+      background-color: ${(props) => props.theme.colors.transparentWhite2};
+    }
   `
 
   const LabelWrapperAttrs = {
@@ -190,6 +206,11 @@
         default: '',
         type: String,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       labelText: {
         required: false,
         default: '',
@@ -281,6 +302,11 @@
         default: false,
         required: false,
       },
+      hoveredIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)