@eturnity/eturnity_reusable_components 8.31.1 → 8.31.3

package/dist/main.es376.js

@@ -1,7 +1,7 @@
 import "./main.es3.js";
 import styled from "./main.es7.js";
 import { fetchIcon } from "./main.es381.js";
-import { reactive } from "./main.es19.js";
+import { reactive } from "./main.es18.js";
 import { computed, onMounted, watch, openBlock, createBlock, withCtx, createVNode, createElementVNode as createBaseVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
 import { toDisplayString } from "./main.es16.js";
 const _hoisted_1 = ["innerHTML"];

package/dist/main.es6.js

@@ -1,5 +1,5 @@
-import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es19.js";
-import { readonly, ref, shallowRef, unref } from "./main.es19.js";
+import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es18.js";
+import { readonly, ref, shallowRef, unref } from "./main.es18.js";
 import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es16.js";
 import { toDisplayString } from "./main.es16.js";
 const stack = [];

package/dist/main.es9.js

@@ -1,4 +1,4 @@
-import RCButton from "./main.es17.js";
+import RCButton from "./main.es25.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";
 import { resolveComponent, openBlock, createBlock } from "./main.es6.js";

package/package.json

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

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -63,6 +63,19 @@ export default {
       options: ['fill', 'stroke'],
       description: 'How to fill the icon',
     },
+    showCaret: {
+      control: 'boolean',
+      description: 'Whether to render a caret after the text',
+    },
+    numberCountType: {
+      control: 'select',
+      options: ['inline', 'badge'],
+      description: 'How to render the number count',
+    },
+    numberCount: {
+      control: 'text',
+      description: 'Number count to display',
+    },
   },
 }
 

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -98,8 +98,9 @@ describe('ButtonIcon.vue', () => {
   })
 
   it('renders number count when provided', async () => {
-    const numberCount = 5
-    await wrapper.setProps({ numberCount })
+    const numberCount = '5'
+    let numberCountType = 'inline'
+    await wrapper.setProps({ numberCount, numberCountType })
     const numberContainer = wrapper.find(
       '[data-test-id="button-icon-number-container"]'
     )
@@ -107,6 +108,12 @@ describe('ButtonIcon.vue', () => {
     expect(numberContainer.exists()).toBe(true)
     expect(numberText.exists()).toBe(true)
     expect(numberText.text()).toBe(numberCount.toString())
+
+    numberCountType = 'badge'
+    await wrapper.setProps({ numberCount, numberCountType })
+    const countBadge = wrapper.find('[data-test-id="button-icon-number-badge"]')
+    expect(countBadge.exists()).toBe(true)
+    expect(countBadge.text()).toBe(numberCount.toString())
   })
 
   it('applies different button sizes correctly', async () => {
@@ -149,4 +156,14 @@ describe('ButtonIcon.vue', () => {
       expect(wrapper.props('appTheme')).toBe(theme)
     }
   })
+
+  it('renders caret based on showCaret prop', async () => {
+    await wrapper.setProps({ showCaret: true })
+    let caret = wrapper.find('[data-test-id="button-icon-caret"]')
+    expect(caret.exists()).toBe(true)
+
+    await wrapper.setProps({ showCaret: false })
+    caret = wrapper.find('[data-test-id="button-icon-caret"]')
+    expect(caret.exists()).toBe(false)
+  })
 })

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

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

@@ -3,6 +3,7 @@
     <InputWrapper
       :icon-color="iconColor"
       :icon-position="iconPosition"
+      :input-height="inputHeight"
       :is-full-height="isFullHeight"
     >
       <SearchIconSvg class="search-icn" />
@@ -12,6 +13,7 @@
         :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
+        :input-height="inputHeight"
         :input-width="inputWidth"
         :is-disabled="disabled"
         :is-filter="isFilter"
@@ -47,6 +49,7 @@
     inputWidth: String,
     isFilter: Boolean,
     isFullHeight: Boolean,
+    inputHeight: String,
   }
   const Container = styled('div', inputAttrs)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
@@ -61,7 +64,7 @@
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
+    height: ${(props) => (props.isFullHeight ? '100%' : props.inputHeight)};
     box-sizing: border-box;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
     background: ${(props) => props.theme.colors.white} !important;
@@ -78,10 +81,12 @@
     iconColor: String,
     iconPosition: String,
     isFullHeight: Boolean,
+    inputHeight: String,
   }
   const InputWrapper = styled('div', wrapperAttrs)`
     position: relative;
-    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
+    height: ${({ isFullHeight, inputHeight }) =>
+      isFullHeight ? '100%' : inputHeight};
 
     svg {
       position: absolute;
@@ -158,6 +163,10 @@
         type: Boolean,
         default: false,
       },
+      inputHeight: {
+        type: String,
+        default: 'auto',
+      },
     },
     emits: ['on-change'],
     watch: {