@eturnity/eturnity_reusable_components 8.26.11-EPDM-16030.0 → 8.26.11-EPDM-16266.1

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

@@ -41,15 +41,36 @@
         :height="height"
       >
         {{ text }}
+        <Icon
+          v-if="showCaret"
+          :color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          data-test-id="button-icon-caret"
+          :disable-hover="disableIconHover"
+          :hovered-color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          name="arrow_down"
+          size="8px"
+        />
       </ButtonContainer>
       <NumberContainer
-        v-if="numberCount"
+        v-if="numberCount && numberCountType === 'inline'"
         data-test-id="button-icon-number-container"
       >
         <NumberText data-test-id="button-icon-number">{{
           numberCount
         }}</NumberText>
       </NumberContainer>
+      <CountBadge
+        v-else-if="numberCount && numberCountType === 'badge'"
+        data-test-id="button-icon-number-badge"
+      >
+        {{ numberCount }}
+      </CountBadge>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -84,6 +105,7 @@
     height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
+    position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
@@ -120,7 +142,7 @@
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
-    overflow: hidden;
+    overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
@@ -155,6 +177,7 @@
     justify-content: center;
     padding: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    gap: 8px;
     white-space: nowrap;
   `
 
@@ -200,6 +223,26 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
+  const CountBadge = styled('div')`
+    position: absolute;
+    grid-area: 1 / 1 / 2 / 4;
+    top: -3.5px;
+    right: 0px;
+    transform: translateX(50%);
+    padding: 0 2px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    height: 15px;
+    min-width: 11px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+    z-index: 1;
+    pointer-events: none;
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -210,6 +253,7 @@
       Icon,
       NumberContainer,
       NumberText,
+      CountBadge,
     },
     props: {
       type: {
@@ -285,14 +329,23 @@
         default: false,
       },
       numberCount: {
-        type: Number,
+        type: String,
         required: false,
         default: null,
       },
+      numberCountType: {
+        type: String,
+        required: false,
+        default: 'inline',
+      },
       height: {
         type: String,
         default: 'auto',
       },
+      showCaret: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -21,7 +21,7 @@
           :name="icon"
           size="14px"
         />
-        {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
+        {{ text }}
       </LabelComponent>
     </ButtonContainer>
   </PageContainer>
@@ -231,10 +231,6 @@
         default: 'medium',
         required: false,
       },
-      isFirstLetterCapitalized: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       theme() {
@@ -250,10 +246,5 @@
               .default.textColor
       },
     },
-    methods: {
-      capitalizeFirstLetter(word) {
-        return word.charAt(0).toUpperCase() + word.slice(1)
-      },
-    },
   }
 </script>