@eturnity/eturnity_reusable_components 8.4.0 → 8.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.4.0",
+  "version": "8.4.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/bell_alt.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12.75C5.5 13.4404 6.17157 14 7 14C7.82843 14 8.5 13.4404 8.5 12.75H5.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8 0.559644 7.55228 -3.91405e-08 7 -8.74228e-08C6.44772 -1.35705e-07 6 0.559644 6 1.25L8 1.25Z" fill="white"/>
+<path d="M7 1C4.79086 1 3 2.64162 3 4.66667V6.55904C3 8.11545 2.54599 9.63806 1.69361 10.9403L1 12H13L12.3064 10.9403C11.454 9.63806 11 8.11545 11 6.55904V4.66667C11 2.64162 9.20914 1 7 1Z" fill="white"/>
+</svg>

package/src/components/icon/index.vue

@@ -19,6 +19,9 @@
       :color="color"
       data-test-id="icon_striked_line"
     />
+    <CountWrapper v-if="count > 0" data-test-id="icon_count">
+      {{ counter }}
+    </CountWrapper>
   </Wrapper>
 </template>
 
@@ -34,7 +37,7 @@
   //   isStriked = "true"
   // />
 
-  import { onMounted, reactive, watch } from 'vue'
+  import { computed, onMounted, reactive, watch } from 'vue'
   import styled from 'vue3-styled-components'
   import { fetchIcon } from './iconCache.mjs'
 
@@ -69,6 +72,10 @@
       required: false,
       default: null,
     },
+    count: {
+      required: false,
+      default: 0,
+    },
     animation: {
       required: false,
       default: 'none',
@@ -92,6 +99,21 @@
     line-height: 0;
   `
 
+  const CountWrapper = styled('div')`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  `
+
   const StrikedLine = styled('div', { color: String })`
     display: flex;
     position: absolute;
@@ -145,6 +167,10 @@
     icon.html = await fetchIcon(props.name.toLowerCase())
   }
 
+  const counter = computed(() =>
+    props.count > 9 ? '9+' : props.count.toString()
+  )
+
   onMounted(() => loadSvg())
 
   watch(() => props.name, loadSvg)

package/src/components/inputs/inputText/index.vue

@@ -47,6 +47,7 @@
             :is-disabled="disabled"
             :is-error="hasError"
             :min-width="minWidth"
+            :name="inputName"
             :no-border="noBorder"
             :placeholder="placeholder"
             :type="inputTypeData"
@@ -392,6 +393,11 @@
         default: 'off',
         type: String,
       },
+      inputName: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {