@eturnity/eturnity_reusable_components 7.39.4-EPDM-10609.0 → 7.39.4-qa-elisee-7.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.4-EPDM-10609.0",
+  "version": "7.39.4-qa-elisee-7.42.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/compass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" fill="#333" viewBox="0 0 29 29"><path d="m10.5 14 4-8 4 8z"/><path class='fix' fill="#ccc" d="m10.5 16 4 8 4-8z"/></svg>

package/src/assets/svgIcons/pause.svg

@@ -0,0 +1,6 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path d="M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M224,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z M352,320
+	c0,8.836-7.164,16-16,16h-32c-8.836,0-16-7.164-16-16V192c0-8.836,7.164-16,16-16h32c8.836,0,16,7.164,16,16V320z"/>
+</svg>

package/src/assets/theme.js

@@ -11,7 +11,6 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
-    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',
@@ -36,6 +35,9 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
+  fonts: {
+    mainFont: '"Figtree", sans-serif',
+  },
   borderRadius: '4px',
 }
 

package/src/components/icon/index.vue

@@ -111,10 +111,10 @@
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-    svg path {
+    svg path:not(.fix) {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path {
+    &:hover svg path:not(.fix) {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoCard/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <InfoContainer>
-    <RCIcon name="info" size="24px" :color="color" />
+  <InfoContainer
+    background-color="backgrounColor"
+    :border-color="borderColor"
+    :has-dashed-border="hasDashedBorder"
+  >
+    <RCIcon :color="color" name="info" size="24px" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -10,12 +14,24 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-
-  const InfoContainer = styled.div`
+  const propsContainer = {
+    backgroundColor: String,
+    hasDashedBorder: Boolean,
+    borderColor: String,
+  }
+  const InfoContainer = styled('div', propsContainer)`
     display: flex;
     gap: 15px;
-    padding: 20px;
-    border: 1px dashed ${(props) => props.theme.colors.grey4};
+    padding: 15px;
+    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
+      ${(props) =>
+        props.theme.colors[props.borderColor]
+          ? props.theme.colors[props.borderColor]
+          : props.borderColor};
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor};
     border-radius: 4px;
   `
 
@@ -33,8 +49,19 @@
     },
     props: {
       color: {
-        required: false
-      }
-    }
+        required: false,
+      },
+      backgrounColor: {
+        required: false,
+      },
+      hasDashedBorder: {
+        required: false,
+        default: true,
+      },
+      borderColor: {
+        required: false,
+        default: 'grey4',
+      },
+    },
   }
 </script>

package/src/components/infoText/index.vue

@@ -1,14 +1,12 @@
 <template>
   <ComponentWrapper>
-    <IconWrapper :size="type === 'dot' ? 'unset' : size">
+    <IconWrapper :size="size">
       <IconImg
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <Dot v-if="type === 'dot'" :color="dotColor" />
         <IconComponent
-          v-else
           :color="iconColor"
           cursor="pointer"
           name="info"
@@ -20,10 +18,11 @@
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
+        :info-position="infoPosition"
         :max-width="maxWidth"
         :width="width"
         ><slot></slot>
-        <span v-html="text"></span>
+        <span v-if="text.length > 0" v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
   </ComponentWrapper>
@@ -46,10 +45,14 @@
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
+    infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+    ${(props) =>
+      props.infoPosition == 'top'
+        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
+        : 'top : calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
       props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
@@ -65,14 +68,17 @@
     font-weight: 400;
     line-height: normal;
     border-radius: 4px;
-    z-index: 99;
+    z-index: 999;
     color: ${(props) => props.theme.colors.white};
 
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.black};
       position: absolute;
-      top: 2px;
+
+      ${(props) =>
+        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
+
       ${(props) =>
         props.alignArrow === 'left'
           ? 'left:40px;'
@@ -96,14 +102,6 @@
     height: ${(props) => props.size};
   `
 
-  const Dot = styled('div')`
-    width: 5px;
-    height: 5px;
-    background-color: ${(props) => props.color};
-    border-radius: 50%;
-    display: inline-block;
-  `
-
   const IconImg = styled.div`
     line-height: 0;
   `
@@ -115,7 +113,6 @@
   export default {
     name: 'InfoText',
     components: {
-      Dot,
       IconWrapper,
       TextOverlay,
       ComponentWrapper,
@@ -124,43 +121,38 @@
     },
     props: {
       text: {
-        type: String,
         required: false,
         default: '',
+        type: String,
       },
       size: {
-        type: String,
         required: false,
         default: '14px',
+        type: String,
       },
-      alignArrow: {
+      infoPosition: {
+        required: false,
+        default: 'bottom',
         type: String,
+      },
+      alignArrow: {
         required: false,
         default: 'center',
+        type: String,
       },
       openTrigger: {
-        type: String,
         required: false,
         default: 'onHover', // onHover, onClick
+        type: String,
       },
       width: {
-        type: String,
         required: false,
         default: '200px',
+        type: String,
       },
       maxWidth: {
-        type: String,
         default: '400px',
-      },
-      dotColor: {
-        type: String,
-        required: false,
-        default: theme.colors.blue2,
-      },
-      type: {
         type: String,
-        required: false,
-        default: 'info', // info, dot
       },
     },
     data() {

package/src/components/inputs/inputText/InputText.stories.js

@@ -3,6 +3,7 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
+  tags: ['autodocs'],
   // argTypes: {},
 }
 
@@ -42,8 +43,8 @@ Default.args = {
   textAlign: 'left',
 }
 
-export const hasError = Template.bind({})
-hasError.args = {
+export const HasError = Template.bind({})
+HasError.args = {
   placeholder: 'Enter Value',
   errorMessage: 'This field is required',
   isError: true,

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

@@ -2,22 +2,26 @@
   <Container>
     <InputWrapper
       :align-items="alignItems"
+      data-test-id="input_wrapper"
       :has-label="!!label && label.length > 0"
     >
       <LabelWrapper v-if="label">
         <InputLabel
+          ref="label"
           :data-id="labelDataId"
+          data-test-id="label_wrapper"
           :font-size="fontSize"
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <OptionalLabel v-if="labelOptional">
+          <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
         </InputLabel>
         <InfoText
-          v-if="infoTextMessage"
+          v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
+          data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
         />
@@ -28,6 +32,7 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
+            data-test-id="input"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -44,21 +49,26 @@
             :type="inputTypeData"
             :value="value"
             @blur="onInputBlur"
+            @focus="onInputFocus"
             @input="onChangeHandler"
             @keyup.enter="onEnterPress"
           />
           <IconWrapper
             v-if="inputType === 'password' && !isError"
+            data-test-id="password_visiblity_change_icon"
             size="20px"
             @click="toggleShowPassword()"
           >
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
-          <IconWrapper v-if="hasError" size="16px">
+          <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
         </IconContainer>
-        <ErrorMessage v-if="hasError && hasErrorMessage">
+        <ErrorMessage
+          v-if="hasError && hasErrorMessage"
+          data-test-id="error_message_wrapper"
+        >
           {{ dynamicErrorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
@@ -236,93 +246,123 @@
       placeholder: {
         required: false,
         default: '',
+        type: String,
       },
       alignItems: {
         required: false,
         default: 'horizontal',
+        type: String,
+        validator(value) {
+          return ['horizontal', 'vertical'].includes(value)
+        },
       },
       isError: {
         required: false,
         default: false,
+        type: Boolean,
       },
       inputWidth: {
         required: false,
         default: null,
+        type: String,
       },
       inputHeight: {
         required: false,
         default: null,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       value: {
         required: true,
         default: null,
+        type: String,
       },
       errorMessage: {
         required: false,
         default: '',
+        type: String,
       },
       infoTextMessage: {
         required: false,
+        default: '',
+        type: String,
       },
       infoTextAlign: {
         required: false,
+        default: 'left',
+        type: String,
       },
       label: {
         required: false,
+        default: '',
+        type: String,
       },
       labelOptional: {
         required: false,
         default: false,
+        type: Boolean,
       },
       noBorder: {
         required: false,
         default: false,
+        type: Boolean,
       },
       disabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       fontSize: {
         required: false,
         default: null,
+        type: String,
       },
       inputType: {
         required: false,
         default: 'text',
+        type: String,
       },
       labelFontColor: {
         required: false,
         default: 'black',
+        type: String,
       },
       backgroundColor: {
         required: false,
+        type: String,
       },
       disabledBackgroundColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontColor: {
         required: false,
         default: 'black',
+        type: String,
       },
       hasFocus: {
         required: false,
         default: false,
+        type: Boolean,
       },
       borderColor: {
         required: false,
+        type: String,
       },
       labelDataId: {
         required: false,
         default: '',
+        type: String,
       },
       inputDataId: {
         required: false,
         default: '',
+        type: String,
       },
     },
     data() {
@@ -335,12 +375,10 @@
         return this.isError || this.error
       },
       hasErrorMessage() {
-        return (
-          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
-        )
+        return this.errorMessage && this.errorMessage.length > 0
       },
       dynamicErrorMessage() {
-        return this.errMessage || this.errorMessage
+        return this.errorMessage
       },
     },
     watch: {
@@ -367,6 +405,9 @@
         this.validateInput($event.target.value)
         this.$emit('input-blur', $event.target.value)
       },
+      onInputFocus($event) {
+        this.$emit('input-focus', $event.target.value)
+      },
       toggleShowPassword() {
         this.inputTypeData =
           this.inputTypeData === 'password' ? 'text' : 'password'

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

@@ -0,0 +1,588 @@
+/* eslint-disable */
+import { mount, Wrapper } from '@vue/test-utils'
+import RCInputText from '@/components/inputs/inputText/index'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+const wrapper1 = mount(RCInputText, {
+  props: {
+    placeholder: 'placeholderText',
+    value: 'Test value',
+    label: 'Test label',
+  },
+  global: {
+    provide: {
+      theme,
+    },
+  },
+})
+const wrapperPassword = mount(RCInputText, {
+  props: {
+    placeholder: 'placeholderText',
+    value: 'Test value',
+    label: 'Test label',
+    inputType: 'password',
+  },
+  global: {
+    provide: {
+      theme,
+    },
+  },
+})
+describe('RCInputText.vue', () => {
+  let consoleWarnSpy
+  beforeEach(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+  // initial rendering
+  it('input is rendered', async () => {
+    const inputTextWrapper = wrapper1.find('[data-test-id="input_wrapper"]')
+    expect(inputTextWrapper.exists()).toBe(true)
+  })
+  // event management
+  it('input is rendered and emits inputChange when input event is triggered.', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.setValue('Test Input Value')
+    const emittedInputChangeEvent = wrapper1.emitted('input-change')
+    expect(emittedInputChangeEvent).toBeTruthy()
+    expect(emittedInputChangeEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedInputChangeEvent[0]).toEqual(['Test Input Value'])
+  })
+  it('input emits on-enter-click', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.trigger('keyup.enter')
+    const emittedOnEnterClickEvent = wrapper1.emitted('on-enter-click')
+    expect(emittedOnEnterClickEvent).toBeTruthy()
+    expect(emittedOnEnterClickEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedOnEnterClickEvent[0]).toEqual([]) // Check if the event was emitted exactly once
+  })
+  it('input emits on-blur', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.setValue('Test Input Value')
+    await inputElement.trigger('blur')
+    const emittedOnBlurEvent = wrapper1.emitted('input-blur')
+    expect(emittedOnBlurEvent).toBeTruthy()
+    expect(emittedOnBlurEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedOnBlurEvent[0]).toEqual(['Test Input Value']) // Check if the event was emitted exactly once
+  })
+  it('input password visibility click trigger input type change', async () => {
+    const inputElement = wrapperPassword.find('input')
+    const passwordVisibilityIconElement = wrapperPassword.find(
+      '[data-test-id="password_visiblity_change_icon"]'
+    )
+    expect(passwordVisibilityIconElement.exists()).toBe(true)
+    await passwordVisibilityIconElement.trigger('click')
+    let inputType = inputElement.attributes().type
+    expect(inputType).toBe('text')
+    await passwordVisibilityIconElement.trigger('click')
+    inputType = inputElement.attributes().type
+    expect(inputType).toBe('password')
+    await passwordVisibilityIconElement.trigger('click')
+    inputType = inputElement.attributes().type
+    expect(inputType).toBe('text')
+  })
+  //Test conditional visibility
+  it('label visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const label = wrapper.find('[data-test-id="label_wrapper"]')
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toContain('Test label')
+  })
+  it('label invisibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const label = wrapper.find('[data-test-id="label_wrapper"]')
+    expect(label.exists()).toBe(false)
+  })
+  it('label optional visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+        labelOptional: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const labelOptional = wrapper.find('[data-test-id="label_optional"]')
+    expect(labelOptional.exists()).toBe(true)
+  })
+  it('label optional invisibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const labelOptional = wrapper.find('[data-test-id="label_optional"]')
+    expect(labelOptional.exists()).toBe(false)
+  })
+  it('infoTextMessage visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        infoTextMessage: 'infoTextMessage test',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const InfoTextMessage = wrapper.find('[data-test-id="info_text_message"]')
+    expect(InfoTextMessage.exists()).toBe(true)
+  })
+  it('infoTextMessage invibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const InfoTextMessage = wrapper.find('[data-test-id="info_text_message"]')
+    expect(InfoTextMessage.exists()).toBe(false)
+  })
+  it('error visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        isError: true,
+        errorMessage: 'Error message test',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const errorWrapper = wrapper.find('[data-test-id="error_wrapper"]')
+    const errorMessageWrapper = wrapper.find(
+      '[data-test-id="error_message_wrapper"]'
+    )
+    expect(errorWrapper.exists()).toBe(true)
+    expect(errorMessageWrapper.exists()).toBe(true)
+    expect(errorMessageWrapper.text()).toContain('Error message test')
+  })
+  it('error invibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const errorWrapper = wrapper.find('[data-test-id="error_wrapper"]')
+    const errorMessageWrapper = wrapper.find(
+      '[data-test-id="error_message_wrapper"]'
+    )
+    expect(errorWrapper.exists()).toBe(false)
+    expect(errorMessageWrapper.exists()).toBe(false)
+  })
+  //Test that the component handles different prop types correctly and throws appropriate warnings for invalid props.
+  it('validation of prop type - placeholder - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        placeholder: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - alignItems - not horizontal or vertical', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        alignItems: 'top',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - isError - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        isError: 'true',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputWidth - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        inputWidth: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputHeight - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        inputHeight: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - minWidth - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        minWidth: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - value - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 42,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - errorMessage - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        errorMessage: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - infoTextMessage - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        infoTextMessage: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - infoTextAlign - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        infoTextAlign: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - label - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        label: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelOptional - not Boolean', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'test value',
+        labelOptional: 12,
+        label: 'label test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    wrapper.vm.$gettext.mockReturnValue('Translated Message')
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - noBorder - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        noBorder: 1,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - disabled - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        disabled: 'false',
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - fontSize - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        fontSize: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputType - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        inputType: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelFontColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        labelFontColor: true,
+        value: 'value test',
+        label: 'label text',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - backgroundColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        backgroundColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - disabledBackgroundColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        disabledBackgroundColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - fontColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        fontColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - hasFocus - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        hasFocus: 'true',
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - borderColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        borderColor: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelDataId - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        labelDataId: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputDataId - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        inputDataId: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  //Prop Updates: Verify that the component updates correctly when props change, reflecting new values in the rendered output.
+  it('update of prop hasFocus', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'value test',
+        hasFocus: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const inputElement = wrapper.find('input').element
+    jest.spyOn(inputElement, 'focus').mockImplementation(() => {
+      // Simulate that the input element is now the focused element
+      Object.defineProperty(document, 'activeElement', {
+        value: inputElement,
+        configurable: true,
+      })
+    })
+    await wrapper.setProps({ hasFocus: true })
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement).toBe(wrapper.find('input').element)
+  })
+})

package/src/components/roundTabs/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <ContainerComponent>
+    <RoundedTabLeft
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+    <TabComponent
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+      :height="height"
+      :width="width"
+    >
+      <slot></slot>
+    </TabComponent>
+    <RoundedTabRight
+      :background-color="backgroundColor"
+      :border-radius="borderRadius"
+    />
+  </ContainerComponent>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+
+  const ContainerComponent = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+  const RoundedTabLeft = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    position:absolute;
+    bottom:0;
+    left:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top left,
+      transparent 71%,
+      black 71%
+    );
+  `
+  const RoundedTabRight = styled('div', {
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+  position:absolute;
+  bottom:0;
+    right:-${(prop) => prop.borderRadius}
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.borderRadius};
+    height: ${(prop) => prop.borderRadius};
+    -webkit-mask-image: radial-gradient(
+      circle at top right,
+      transparent 71%,
+      black 71%
+    );`
+  const TabComponent = styled('div', {
+    width: String,
+    height: String,
+    backgroundColor: String,
+    borderRadius: String,
+  })`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(prop) => prop.backgroundColor};
+    width: ${(prop) => prop.width};
+    height: ${(prop) => prop.height};
+    border-radius: ${(prop) => prop.borderRadius} ${(prop) => prop.borderRadius}
+      0 0;
+  `
+  export default {
+    name: 'RoundTabs',
+    components: {
+      ContainerComponent,
+      TabComponent,
+      RoundedTabLeft,
+      RoundedTabRight,
+    },
+    props: {
+      height: {
+        required: false,
+        default: '40px',
+        type: String,
+      },
+      width: {
+        required: false,
+        default: '200px',
+        type: String,
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white',
+        type: String,
+      },
+      borderRadius: {
+        required: false,
+        default: '20px',
+        type: String,
+      },
+    },
+  }
+</script>