@eturnity/eturnity_reusable_components 8.19.8-EPDM-13664.1 → 8.19.8-EPDM-12618.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.8-EPDM-13664.1",
+  "version": "8.19.8-EPDM-12618.7",
   "files": [
     "dist",
     "src"

package/src/components/infoText/index.vue

@@ -1,7 +1,6 @@
 <template>
   <PageContainer
     ref="container"
-    data-test-id="infoText_container"
     :type="type"
     @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
     @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
@@ -288,11 +287,6 @@
         default: '',
         required: false,
       },
-      contentBackgroundColor: {
-        type: String,
-        default: '',
-        required: false,
-      },
       borderRadius: {
         type: String,
         default: '',
@@ -472,9 +466,7 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
-          backgroundColor: props.contentBackgroundColor
-            ? props.contentBackgroundColor
-            : props.image
+          backgroundColor: props.image
             ? theme.colors.white
             : props.appTheme === 'light'
             ? theme.colors.black

package/src/components/infoText/infoText.spec.js

@@ -1,8 +1,7 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import InfoText from '@/components/infoText'
-import defaultProps from './defaultProps'
-import IconTextContent from './templates/iconTextContent.vue'
+import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   // need to mock this due to how jest handles import.meta
@@ -14,19 +13,31 @@ describe('InfoText Component', () => {
 
   beforeEach(() => {
     wrapper = mount(InfoText, {
-      props: defaultProps,
+      props: {
+        text: 'default text',
+        size: '14px',
+        infoPosition: 'bottom',
+        alignArrow: 'center',
+        openTrigger: 'onHover',
+        width: '165px',
+        maxWidth: '165px',
+        shouldUseTeleport: false,
+        dotColor: '#00009f',
+        type: 'info',
+      },
       global: {
-        stubs: {
-          teleport: true,
+        provide: {
+          theme,
         },
+        stubs: {
+          teleport: true
+        }
       },
     })
   })
 
   test('renders InfoText component with default props', () => {
-    expect(wrapper.find('[data-test-id="infoText_container"]').exists()).toBe(
-      true
-    )
+    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
@@ -41,7 +52,7 @@ describe('InfoText Component', () => {
     )
 
     //should see text upon click
-    await wrapper.trigger('click')
+    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
     expect(wrapper.vm.isVisible).toBe(true)
 
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
@@ -53,34 +64,4 @@ describe('InfoText Component', () => {
     await wrapper.setProps({ type: 'dot' })
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
-
-  test('iconTextContent slot is correctly rendered', async () => {
-    // override
-    const props = defaultProps.iconTextContent
-    wrapper = mount(InfoText, {
-      props: defaultProps,
-      slots: {
-        default: `<IconTextContent icon-name="${props.iconName}" text="${props.text}" />`,
-      },
-      global: {
-        stubs: {
-          teleport: true,
-        },
-        components: {
-          IconTextContent,
-        },
-      },
-    })
-
-    await wrapper.trigger('mouseenter')
-    expect(wrapper.vm.isVisible).toBe(true)
-
-    const container = wrapper.find('[data-test-id="iconTextContent_container"]')
-    const icon = container.find('[data-test-id="iconTextContent_icon"]')
-    const text = container.find('[data-test-id="iconTextContent_text"]')
-    expect(container.exists()).toBe(true)
-    expect(icon.exists()).toBe(true)
-    expect(text.exists()).toBe(true)
-    expect(text.text()).toBe(props.text)
-  })
 })

package/src/components/infoText/infoText.stories.js

@@ -1,6 +1,4 @@
-import theme from '../../assets/theme'
 import InfoText from './index.vue'
-import IconTextContent from './templates/iconTextContent.vue'
 
 export default {
   title: 'infoText',
@@ -48,29 +46,3 @@ export const OnClick = {
     openTrigger: 'onClick',
   },
 }
-
-export const IconTextContentTemplate = {
-  args: {
-    ...Default.args,
-    contentBackgroundColor: 'black',
-    iconName: 'warning_triangle',
-    iconColor: theme.colors.yellow,
-    size: '18px',
-  },
-  render: (args) => ({
-    components: { InfoText, IconTextContent },
-    setup() {
-      return { args }
-    },
-    template: `
-      <InfoText v-bind="args">
-        <IconTextContent
-          icon-name="warning_triangle"
-          text="This is a sample text with an icon"
-          icon-size="${args.size}"
-          icon-color="${args.iconColor}"
-        />
-      </InfoText>
-    `,
-  }),
-}

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

@@ -179,9 +179,7 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isError
-        ? props.theme.colors.grey6
-        : props.isDisabled
+      props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'

package/src/components/tableDropdown/index.vue

@@ -78,10 +78,13 @@
               v-else
               class="inputField"
               :disabled="customInputDisabled"
+              :error-message="item.errorMessage"
               :font-color="showArchived ? theme.colors.red : 'black'"
+              :is-error="item.isError"
               :min-width="item.value.length + 'ch'"
-              :no-border="true"
+              :no-border="item.noBorder || item.noBorder === undefined"
               :value="item.value"
+              @input-blur="onCustomInputChange($event.trim())"
               @input-change="onCustomInputChange($event)"
             />
           </InputContainer>
@@ -162,7 +165,7 @@
             </OptionsItem>
           </OptionsWrapper>
           <CustomContainer
-            v-if="inputText.length && allowFreeInputs"
+            v-if="getCustomName.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
             <CustomName>{{ getCustomName }}</CustomName>
@@ -226,7 +229,6 @@
   const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
-    overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
     color: ${(props) =>
@@ -558,7 +560,7 @@
     },
     computed: {
       getCustomName() {
-        return this.inputText
+        return this.inputText.trim()
       },
       theme() {
         return theme
@@ -652,7 +654,7 @@
       },
       onCustomNameClick() {
         this.wasClicked = true
-        this.$emit('on-custom-input-name', this.inputText)
+        this.$emit('on-custom-input-name', this.getCustomName)
         this.$emit('toggle-dropdown-open', { close: true })
         this.inputText = ''
       },

package/src/components/infoText/defaultProps.js

@@ -1,16 +0,0 @@
-export default {
-  text: 'default text',
-  size: '14px',
-  infoPosition: 'bottom',
-  alignArrow: 'center',
-  openTrigger: 'onHover',
-  width: '165px',
-  maxWidth: '165px',
-  shouldUseTeleport: false,
-  dotColor: '#00009f',
-  type: 'info',
-  iconTextContent: {
-    iconName: 'error',
-    text: 'Sample Text',
-  },
-}

package/src/components/infoText/templates/iconTextContent.vue

@@ -1,105 +0,0 @@
-<template>
-  <Container data-test-id="iconTextContent_container">
-    <RCIcon
-      :color="iconColor"
-      data-test-id="iconTextContent_icon"
-      :name="iconName"
-      :size="iconSize"
-    />
-    <TextWrapper
-      data-test-id="iconTextContent_text"
-      :font-color="fontColor"
-      :font-size="fontSize"
-    >
-      {{ text }}
-      <slot data-test-id="iconTextContent_slot"></slot>
-    </TextWrapper>
-  </Container>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  // import IconTextContent from "@eturnity/eturnity_reusable_components/src/components/infoText/templates/iconTextContent"
-  //To use:
-  // <InfoText
-  //      icon-color="red"
-  //      icon-name="error"
-  //      size="20px"
-  //      open-trigger="onClick"
-  // >
-  //   <IconTextContent
-  //     icon-name="error"
-  //     text="Text"
-  //     icon-size="18px"
-  //     icon-color="red"
-  //   />
-  // </InfoText>
-
-  import styled from 'vue3-styled-components'
-  import theme from '../../../assets/theme.js'
-  import RCIcon from '../../icon'
-
-  const Container = styled('div')`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 8px;
-  `
-
-  const TextAttrs = {
-    fontSize: String,
-    fontColor: String,
-  }
-  const TextWrapper = styled('div', TextAttrs)`
-    font-size: ${(props) => props.fontSize};
-    color: ${(props) => props.fontColor};
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    font-weight: 400;
-    line-height: 150%;
-    letter-spacing: 0%;
-    vertical-align: middle;
-  `
-
-  export default {
-    name: 'IconTextContent',
-    components: {
-      Container,
-      TextWrapper,
-      RCIcon,
-    },
-    props: {
-      iconName: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-      iconSize: {
-        type: String,
-        required: false,
-        default: '18px',
-      },
-      iconColor: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      fontSize: {
-        type: String,
-        required: false,
-        default: '11px',
-      },
-      fontColor: {
-        type: String,
-        required: false,
-        default: theme.colors.white,
-      },
-    },
-  }
-</script>