@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.27 → 7.48.1-qa-elisee-7.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.27",
+  "version": "7.48.1-qa-elisee-7.51.0",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,8 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage"
+    "test-coverage": "jest --coverage",
+    "prepublishOnly": "npm run test"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/assets/svgIcons/lock.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
 <path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
 </svg>

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

@@ -52,9 +52,7 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.theme.colors[props.customColor]
-          ? props.theme.colors[props.customColor]
-          : props.customColor
+        ? props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;

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

@@ -5,7 +5,6 @@
       :custom-color="customColor"
       :data-id="dataId"
       :font-color="fontColor"
-      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
@@ -44,19 +43,12 @@
     customColor: String,
     fontColor: String,
     noWrap: Boolean,
-    height: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
-    display: flex;
-    justify-content: center;
     padding: 7px 15px;
     font-size: 13px;
     color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.white
-        : props.fontColor
-        ? props.fontColor
-        : props.theme.colors.white};
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.disabled
@@ -75,7 +67,6 @@
     user-select: none;
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
-    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -145,11 +136,6 @@
         default: null,
         type: String,
       },
-      height: {
-        required: false,
-        default: 'auto',
-        type: String,
-      },
       id: {
         required: false,
         default: null,

package/src/components/icon/icon.spec.js

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import RCIcon from '@/components/icon'
+import theme from '@/assets/theme'
+import 'jest-styled-components'
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('RCIcon.vue', () => {
+  it('renders icon with default props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: { name: 'House' },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconWrapper = wrapper.find('[data-test-id="icon_wrapper"]')
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+
+    expect(iconWrapper.exists()).toBe(true)
+    expect(iconImage.exists()).toBe(true)
+    expect(wrapper.props('size')).toBe('30px')
+  })
+
+  it('renders striked line when isStriked is true', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        isStriked: true,
+        color: 'red',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const strikedLine = wrapper.find('[data-test-id="icon_striked_line"]')
+    expect(strikedLine.exists()).toBe(true)
+  })
+
+  it('applies correct styling based on props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        size: '60px',
+        color: 'red',
+        hoveredColor: 'blue',
+        backgroundColor: 'yellow',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+    expect(iconImage.exists()).toBe(true)
+    // Add assertions for styling if needed
+  })
+})

package/src/components/icon/index.vue

@@ -1,14 +1,24 @@
 <template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
+  <Wrapper
+    :cursor="cursor"
+    data-test-id="icon_wrapper"
+    :disabled="disabled"
+    :size="size"
+  >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
+      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i v-html="icon.html"></i>
+      <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine v-if="isStriked" :color="color" />
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+      data-test-id="icon_striked_line"
+    />
   </Wrapper>
 </template>
 
@@ -35,7 +45,6 @@
     },
     name: {
       required: true,
-      type: String,
     },
     color: {
       required: false,

package/src/components/infoText/index.vue

@@ -1,36 +1,32 @@
 <template>
-  <PageContainer ref="container">
-    <div
-      ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-    >
-      <IconComponent
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
-        :size="size"
-      />
-    </div>
-    <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
-        <TextOverlay ref="infoBox" :image="image" :style="boxStyle">
-          <OverlayImage
-            v-if="image"
-            ref="infoImage"
-            alt="Info Image"
-            :src="image"
-            @load="onImageLoad"
-          />
-          <span ref="textContent" :style="textStyle" v-html="text"></span>
-        </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
-      </TextWrapper>
-    </Teleport>
-  </PageContainer>
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
+        data-test-id="infoText_trigger"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <IconComponent
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
+      </IconImg>
+      <TextOverlay
+        v-if="showInfo"
+        :align-arrow="alignArrow"
+        :half-computed-text-info-width="halfComputedTextInfoWidth"
+        :icon-size="size"
+        :info-position="infoPosition"
+        :max-width="maxWidth"
+        :width="width"
+        ><slot></slot>
+        <span v-if="text.length > 0" v-html="text"></span>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -39,77 +35,90 @@
   // <info-text
   //     text="Veritatis et quasi architecto beatae vitae"
   //     size="20px"
-  //     openTrigger="onClick"
-  //     buttonType="error"
-  //     image="path/to/image.jpg"
+  //     alignArrow="right" // which side the arrow should be on
   // />
-  import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
-  import IconComponent from '../icon'
-  import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
 
-  const TextOverlay = styled('div')`
-    background-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
-    font-size: ${(props) => (props.image ? '12px' : '13px')};
-    border-radius: 4px;
+  const textAttrs = {
+    iconSize: String,
+    alignArrow: String,
+    width: String,
+    halfComputedTextInfoWidth: Number,
+    infoPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    ${(props) =>
+      props.infoPosition == 'top'
+        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
+        : 'top : calc(' + props.iconSize + ' + 15px)'};
+    ${(props) =>
+      props.alignArrow === 'left'
+        ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
+        : props.alignArrow === 'center'
+        ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
+        : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+    text-align: left;
+    background: ${(props) => props.theme.colors.black};
     padding: 10px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-    width: 100%; // Ensure the TextOverlay takes full width of its parent
-    box-shadow: ${(props) =>
-      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
+    width: ${(props) => props.width};
+    max-width: ${(props) => props.maxWidth};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 999;
+    color: ${(props) => props.theme.colors.white};
 
-    a {
-      color: ${(props) => props.theme.colors.blue};
-    }
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
 
-    img + span {
-      margin-top: 10px;
-      display: block;
-    }
-  `
+      ${(props) =>
+        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid
       ${(props) =>
-        props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+        props.alignArrow === 'left'
+          ? 'left:40px;'
+          : props.alignArrow == 'center'
+          ? 'left: calc(50% + 19px);'
+          : 'right:-13px;'};
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: translate(-2em, -0.5em) rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
   `
 
-  const PageContainer = styled('div')`
-    display: inline-block;
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
     position: relative;
+    height: ${(props) => props.size};
   `
 
-  const TextWrapper = styled('div')`
-    z-index: 99999;
-    position: absolute;
+  const IconImg = styled.div`
+    line-height: 0;
   `
 
-  const OverlayImage = styled('img')`
-    width: 100%;
-    height: auto;
+  const ComponentWrapper = styled.div`
+    display: inline-block;
   `
 
   export default {
     name: 'InfoText',
     components: {
-      IconComponent,
+      IconWrapper,
       TextOverlay,
-      Arrow,
-      PageContainer,
-      TextWrapper,
-      OverlayImage,
+      ComponentWrapper,
+      IconImg,
+      IconComponent,
     },
     props: {
       text: {
@@ -118,7 +127,7 @@
         type: String,
       },
       size: {
-        type: String,
+        required: false,
         default: '14px',
         type: String,
       },
@@ -127,252 +136,54 @@
         default: 'bottom',
         type: String,
       },
-      maxWidth: {
-        default: '400px',
+      alignArrow: {
+        required: false,
+        default: 'center',
         type: String,
       },
       openTrigger: {
+        required: false,
+        default: 'onHover', // onHover, onClick
         type: String,
-        default: 'onHover',
-        validator: (value) => ['onHover', 'onClick'].includes(value),
-      },
-      buttonType: {
-        type: String,
-        default: 'regular',
-        validator: (value) => ['regular', 'error'].includes(value),
       },
-      image: {
+      width: {
+        required: false,
+        default: '165px',
         type: String,
-        default: '',
       },
-      iconName: {
+      maxWidth: {
+        default: '400px',
         type: String,
-        default: 'info',
-      },
-      iconColor: {
-        type: String,
-        default: null,
-        required: false,
-      },
-      isDisabled: {
-        type: Boolean,
-        default: false,
-        required: false,
       },
     },
-    setup(props) {
-      const isVisible = ref(false)
-      const container = ref(null)
-      const icon = ref(null)
-      const infoBox = ref(null)
-      const textContent = ref(null)
-      const infoImage = ref(null)
-      const infoBoxWidth = ref(0)
-      const infoBoxHeight = ref(0)
-      const boxStyle = ref({})
-      const arrowStyle = ref({})
-      const wrapperStyle = ref({})
-      const isMobile = ref(window.innerWidth <= 768)
-
-      const textStyle = computed(() => ({
-        fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
-        textAlign: props.image ? 'right' : 'left',
-      }))
-
-      const calculatePosition = (width) => {
-        if (!icon.value) return {}
-
-        const iconRect = icon.value.getBoundingClientRect()
-        const windowHeight = window.innerHeight
-        const windowWidth = window.innerWidth
-
-        let top = iconRect.bottom + 10
-        let left = iconRect.left
-
-        // Adjust left based on the infoBoxWidth
-        if (left + width > windowWidth) {
-          left = windowWidth - width - 10
-        }
-
-        // Ensure there's enough space below or place above if not
-        const isAbove = top + infoBoxHeight.value > windowHeight
-        if (isAbove) {
-          top = iconRect.top - infoBoxHeight.value - 10
-        }
-
-        // Calculate arrow position
-        let arrowLeft = iconRect.left - left + iconRect.width / 2 - 8
-
-        // Adjust arrow position if it's too close to the edges
-        const edgeThreshold = 2 // pixels from the edge to start adjusting
-        if (arrowLeft < edgeThreshold) {
-          arrowLeft = edgeThreshold
-        } else if (arrowLeft > width - 16 - edgeThreshold) {
-          arrowLeft = width - 16 - edgeThreshold
-        }
-
-        const arrowTop = isAbove ? 'auto' : '-7px'
-        const arrowBottom = isAbove ? '-7px' : 'auto'
-
-        arrowStyle.value = {
-          left: `${arrowLeft}px`,
-          top: arrowTop,
-          bottom: arrowBottom,
-          transform: isAbove ? 'none' : 'rotate(180deg)',
-        }
-
-        wrapperStyle.value = {
-          position: 'fixed',
-          top: `${top}px`,
-          left: `${left}px`,
-          transform: 'none',
-          width: `${width}px`, // Set a fixed width for the wrapper
-        }
-
-        return {
-          width: '100%', // Always use 100% width for the TextOverlay
-          maxWidth: props.maxWidth,
-          overflowY: 'auto',
-          backgroundColor: props.image
-            ? theme.colors.white
-            : theme.colors.black,
-        }
-      }
-
-      const showInfo = async () => {
-        isVisible.value = true
-        await nextTick()
-        updatePosition()
-      }
-
-      const hideInfo = () => {
-        isVisible.value = false
-      }
-
-      const toggleInfo = () => {
-        isVisible.value ? hideInfo() : showInfo()
-      }
-
-      const handleScroll = () => {
-        if (isVisible.value) {
-          hideInfo()
-        }
-        updatePosition()
-      }
-
-      const isIconInView = () => {
-        if (!icon.value) return false
-        const rect = icon.value.getBoundingClientRect()
-        return (
-          rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <=
-            (window.innerHeight || document.documentElement.clientHeight) &&
-          rect.right <=
-            (window.innerWidth || document.documentElement.clientWidth)
-        )
-      }
-
-      const updatePosition = async () => {
-        if (infoBox.value && textContent.value) {
-          await nextTick()
-
-          if (isIconInView()) {
-            const contentWidth = textContent.value.offsetWidth
-            infoBoxWidth.value = Math.min(
-              Math.max(contentWidth, 200), // Set a minimum width of 200px
-              parseInt(props.maxWidth, 10)
-            )
-            infoBoxHeight.value = infoBox.value.$el.offsetHeight
-            boxStyle.value = calculatePosition(infoBoxWidth.value)
-
-            // Now make it visible if it should be
-            if (isVisible.value) {
-              infoBox.value.$el.style.visibility = 'visible'
-            }
-          } else if (isVisible.value) {
-            hideInfo()
-          }
-        }
-      }
-
-      const onImageLoad = () => {
-        if (infoImage.value) {
-          infoBoxHeight.value = infoBox.value.$el.offsetHeight
-          updatePosition()
-        }
-      }
-
-      const handleClickOutside = (event) => {
-        if (
-          (props.openTrigger === 'onClick' || isMobile.value) &&
-          isVisible.value
-        ) {
-          const clickedElement = event.target
-          if (
-            infoBox.value &&
-            !infoBox.value.$el.contains(clickedElement) &&
-            !icon.value.contains(clickedElement)
-          ) {
-            hideInfo()
-          }
-        }
-      }
-
-      const handleResize = () => {
-        isMobile.value = window.innerWidth <= 768
-        updatePosition()
-      }
-
-      onMounted(() => {
-        window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', handleResize)
-        document.addEventListener('scroll', handleScroll, {
-          passive: true,
-          capture: true,
-        })
-        document.addEventListener('click', handleClickOutside)
-      })
-
-      onUnmounted(() => {
-        window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', handleResize)
-        document.removeEventListener('scroll', handleScroll, { capture: true })
-        document.removeEventListener('click', handleClickOutside)
-      })
-
-      watch(isVisible, (newValue) => {
-        if (newValue) {
-          updatePosition()
-        }
-      })
-
+    data() {
       return {
-        isVisible,
-        boxStyle,
-        arrowStyle,
-        showInfo,
-        hideInfo,
-        toggleInfo,
-        container,
-        icon,
-        infoBox,
-        textContent,
-        infoImage,
-        infoBoxWidth,
-        infoBoxHeight,
-        wrapperStyle,
-        textStyle,
-        onImageLoad,
-        isMobile,
+        showInfo: false,
       }
     },
     computed: {
-      computedIconColor() {
-        return this.buttonType === 'error'
-          ? theme.colors.red
-          : theme.colors.mediumGray
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+      halfComputedTextInfoWidth() {
+        return parseInt(this.width) / 2
+      },
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
       },
     },
   }