@eturnity/eturnity_reusable_components 8.7.4-EPDM-12729.17 → 8.7.4-EPDM-12729.18

package/package.json

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

package/src/assets/svgIcons/optimizer.svg

@@ -1,6 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
-<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
-<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
-<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.8645 1.42847H2.42875V5.86422L6.8645 1.42847ZM3.13585 6.57132H7.5716V2.13557L3.13585 6.57132ZM1.42875 0.428467H2.42875H7.5716H8.5716V1.42847V3.35704H9.99983V4.35704H8.5716V6.57132V7.57132H7.5716H2.42875H1.42875V6.57132V4.35704H0V3.35704H1.42875V1.42847V0.428467Z" fill="#263238"/>
 </svg>

package/src/components/infoText/index.vue

@@ -7,21 +7,38 @@
     @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
   >
     <div ref="icon" data-test-id="infoText_trigger">
-      <IconWrapper>
+      <IconWrapper
+        :background-color="backgroundColor"
+        :border-radius="borderRadius"
+        :padding="padding"
+      >
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
         <Dot
           v-if="type === 'dot'"
           :color="dotColor"
           data-test-id="infoText_dot"
         />
         <IconComponent
-          v-else
+          v-else-if="!noIcon"
           :color="iconColor || computedIconColor"
           :cursor="isDisabled ? 'not-allowed' : 'pointer'"
           :disabled="isDisabled"
           :name="iconName"
           :size="size"
         />
-        <div v-if="labelText">{{ labelText }}</div>
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
       </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
@@ -129,12 +146,29 @@
     border-radius: 50%;
   `
 
-  const IconWrapper = styled.div`
+  const IconWrapperAttrs = {
+    backgroundColor: String,
+    borderRadius: String,
+    padding: String,
+  }
+  const IconWrapper = styled('div', IconWrapperAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    padding: ${(props) => props.padding};
+  `
+
+  const LabelWrapperAttrs = {
+    size: String,
+    color: String,
+  }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
   `
 
   export default {
@@ -148,6 +182,7 @@
       TextWrapper,
       OverlayImage,
       IconWrapper,
+      LabelWrapper,
     },
     props: {
       text: {
@@ -216,6 +251,36 @@
         default: 'light', // light or dark
         required: false,
       },
+      labelAlign: {
+        type: String,
+        default: 'right',
+        required: false,
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      borderRadius: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      padding: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      labelSize: {
+        type: String,
+        default: '12px',
+        required: false,
+      },
+      noIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)