@eturnity/eturnity_reusable_components 7.45.5 → 7.48.1-EPDM-12680.0

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

@@ -22,15 +22,16 @@
   // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
   // To use:
   // <search-input
-  //   placeholder="Company name"
-  //   :value="companyName"
+  //   data-id='search_input_id'
   //   :disabled="true"
-  //   inputWidth="250px"
+  //   :has-focus="true"
+  //   icon-color="grey2" // colors only from theme
+  //   icon-position="left"
+  //   input-width="250px"
+  //   :is-filter="true" // to set the height at 30px
+  //   placeholder="Search by company name"
+  //   :value="companyName"
   //   @on-change="function($event)"
-  //   :isFilter="true" // to set the height at 30px
-  //   data-id="test-data-id"
-  //   iconPosition="left"
-  //   iconColor="grey2"
   // />
   import styled from 'vue3-styled-components'
   import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
@@ -94,31 +95,38 @@
     },
     props: {
       value: {
+        type: [String, Number],
         required: true,
       },
       disabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       placeholder: {
         required: false,
         default: '',
+        type: String,
       },
       inputWidth: {
         required: false,
         default: null,
+        type: String,
       },
       isFilter: {
         required: false,
         default: false,
+        type: Boolean,
       },
       hasFocus: {
         required: false,
         default: false,
+        type: Boolean,
       },
       dataId: {
         required: false,
         default: '',
+        type: [String, Number],
       },
       iconPosition: {
         type: String,

package/src/components/inputs/searchInput/searchInput.spec.js

@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import SearchInput from '@/components/inputs/searchInput'
+import defaultSearchInputProps from './defaultProps'
+import theme from '@/assets/theme'
+
+describe('SearchInput.vue', () => {
+  let searchInput
+  let searchInputWrapper
+
+  beforeEach(() => {
+    searchInput = mount(SearchInput, {
+      props: defaultSearchInputProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const defaultDataId = searchInput.props('dataId')
+    searchInputWrapper = searchInput.find(`[data-id="${defaultDataId}"]`)
+  })
+
+  it('Search input is rendered and displays the correct placeholder', async () => {
+    // Check that Search input has been rendered
+    expect(searchInputWrapper.exists()).toBe(true)
+
+    // Set the placeholder
+    const placeholderText = 'Search by company name'
+    await searchInput.setProps({ placeholder: placeholderText })
+    await searchInput.vm.$nextTick()
+
+    // Check that the input displays the correct placeholder
+    expect(searchInputWrapper.attributes('placeholder')).toBe(placeholderText)
+  })
+
+  it('Search input emits correct payload on change', async () => {
+    // Simulate user input
+    const inputValue = 'test input'
+    await searchInputWrapper.setValue(inputValue)
+
+    // Check that the component emitted the 'on-change' event with correct payload
+    expect(searchInput.emitted('on-change')).toBeTruthy()
+    expect(searchInput.emitted('on-change')[0]).toEqual([inputValue])
+  })
+
+  it('test disabled prop', async () => {
+    await searchInput.setProps({ disabled: true })
+    await searchInput.vm.$nextTick()
+
+    expect(searchInputWrapper.attributes()).toHaveProperty('disabled')
+    expect(searchInputWrapper.element.disabled).toBe(true)
+  })
+
+  it('test hasFocus prop', async () => {
+    // Spy on the focus method
+    const focusSpy = jest.spyOn(searchInputWrapper.element, 'focus')
+
+    await searchInput.setProps({ hasFocus: true })
+    await searchInput.vm.$nextTick()
+
+    // Check that the focus method was called
+    expect(focusSpy).toHaveBeenCalled()
+  })
+})

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

@@ -17,7 +17,9 @@
       >
         <InputLabel
           :font-color="
-            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
+            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'eturnityGrey'
           "
           :font-size="fontSize"
           >{{ label }}
@@ -40,18 +42,26 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
+            buttonBgColor || colorMode == 'dark'
+              ? 'transparentBlack1'
+              : colorMode == 'transparent'
+              ? 'transparent'
+              : 'white'
           "
           class="select-button"
+          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
-            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'black'
           "
           :font-size="fontSize"
           :has-error="hasError"
           :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
           :height="height"
+          :is-search-bar-visible="isSearchBarVisible"
           :no-relative="noRelative"
           :padding-left="paddingLeft"
           :select-height="selectHeight"
@@ -72,7 +82,11 @@
             ref="searchInput"
             background-color="transparent"
             :font-color="
-              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+              buttonFontColor ||
+              colorMode == 'dark' ||
+              colorMode == 'transparent'
+                ? 'white'
+                : 'black'
             "
             :font-size="fontSize"
             input-height="34px"
@@ -92,26 +106,30 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
           </Caret>
         </SelectButton>
@@ -121,15 +139,27 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'black'
+                  : 'white'
               "
               :dropdown-position="dropdownPosition"
               :font-color="
-                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
+                dropdownFontColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'white'
+                  : 'black'
               "
               :font-size="fontSize"
               :hovered-bg-color="
-                colorMode == 'dark' ? '#000000' : dropdownBgColor
+                colorMode == 'dark'
+                  ? '#000000'
+                  : colorMode == 'transparent'
+                  ? 'grey6'
+                  : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
@@ -186,12 +216,15 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const Caret = styled.div`
+  const CaretAttrs = { colorMode: String }
+  const Caret = styled('div', CaretAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${CARET_WIDTH};
-    min-width: ${CARET_WIDTH};
+    width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    min-width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -230,6 +263,7 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
+    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -274,6 +308,8 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
+    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -281,7 +317,11 @@
     border-radius: 4px;
     max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
     ${(props) =>
-      props.isSearchBarVisible
+      props.colorMode === 'transparent'
+        ? props.isSearchBarVisible
+          ? 'padding: 10px 15px 10px 5px;'
+          : 'padding: 10px 15px;'
+        : props.isSearchBarVisible
         ? ''
         : `padding-left: ${
             props.hasNoPadding
@@ -613,7 +653,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

package/src/components/inputs/select/option/index.vue

@@ -1,6 +1,12 @@
 <template>
   <OptionContainer
-    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :background-color="
+      colorMode == 'dark'
+        ? '#000000'
+        : colorMode == 'transparent'
+        ? 'black'
+        : backgroundColor
+    "
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
@@ -8,6 +14,8 @@
     :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
+        : colorMode == 'transparent'
+        ? 'grey6'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
@@ -130,7 +138,8 @@
         default: '12px 10px',
       },
       textColor: {
-        type: true,
+        type: String,
+        required: false,
         default: 'inherit',
       },
     },

package/src/components/spinner/index.vue

@@ -3,6 +3,7 @@
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper">
         <SpinnerSvg
+          :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
           :style="{ width: size, height: size }"
         />
@@ -16,6 +17,7 @@
   >
     <SpinnerWrapper data-test-id="spinner_wrapper">
       <SpinnerSvg
+        :class="{ white: isWhite }"
         data-test-id="spinner_icon"
         :style="{ width: size, height: size }"
       />
@@ -54,6 +56,10 @@
   const SpinnerWrapper = styled.div`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
+
+    .white {
+      filter: brightness(0) invert(1);
+    }
   `
 
   export default {
@@ -80,6 +86,11 @@
         default: '60px',
         type: String,
       },
+      isWhite: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
   }
 </script>