@eturnity/eturnity_reusable_components 7.39.5-qa-elisee-7.42.1 → 7.45.0-EPDM-4900.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.5-qa-elisee-7.42.1",
+  "version": "7.45.0-EPDM-4900.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -35,9 +35,6 @@ 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:not(.fix) {
+    svg path {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
+    &:hover svg path {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoCard/index.vue

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

package/src/components/infoText/index.vue

@@ -1,31 +1,34 @@
 <template>
-  <ComponentWrapper>
-    <IconWrapper :size="size">
-      <IconImg
-        @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>
+  <PageContainer ref="container">
+    <div
+      ref="icon"
+      @click="openTrigger === 'onClick' && toggleInfo()"
+      @mouseenter="openTrigger === 'onHover' && showInfo()"
+      @mouseleave="openTrigger === 'onHover' && hideInfo()"
+    >
+      <IconComponent
+        :color="iconColor"
+        cursor="pointer"
+        name="info"
+        :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>
 </template>
 
 <script>
@@ -34,155 +37,309 @@
   // <info-text
   //     text="Veritatis et quasi architecto beatae vitae"
   //     size="20px"
-  //     alignArrow="right" // which side the arrow should be on
+  //     openTrigger="onClick"
+  //     buttonType="error"
+  //     image="path/to/image.jpg"
   // />
-  import theme from '../../assets/theme.js'
-  import styled from 'vue3-styled-components'
+  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'
 
-  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;
-    width: ${(props) => props.width};
-    max-width: ${(props) => props.maxWidth};
-    font-size: 13px;
-    font-weight: 400;
-    line-height: normal;
+  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;
-    z-index: 999;
-    color: ${(props) => props.theme.colors.white};
-
-    :before {
-      content: '';
-      background-color: ${(props) => props.theme.colors.black};
-      position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
+    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'};
 
-      ${(props) =>
-        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);
+    a {
+      color: ${(props) => props.theme.colors.blue};
     }
 
-    span a {
-      color: #2cc0eb;
+    img + span {
+      margin-top: 10px;
+      display: block;
     }
   `
 
-  const iconAttrs = { size: String }
-  const IconWrapper = styled('div', iconAttrs)`
+  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'};
+  `
+
+  const PageContainer = styled('div')`
+    display: inline-block;
     position: relative;
-    height: ${(props) => props.size};
   `
 
-  const IconImg = styled.div`
-    line-height: 0;
+  const TextWrapper = styled('div')`
+    z-index: 99999;
+    position: absolute;
   `
 
-  const ComponentWrapper = styled.div`
-    display: inline-block;
+  const OverlayImage = styled('img')`
+    width: 100%;
+    height: auto;
   `
 
   export default {
     name: 'InfoText',
     components: {
-      IconWrapper,
-      TextOverlay,
-      ComponentWrapper,
-      IconImg,
       IconComponent,
+      TextOverlay,
+      Arrow,
+      PageContainer,
+      TextWrapper,
+      OverlayImage,
     },
     props: {
       text: {
-        required: false,
-        default: '',
         type: String,
+        default: '',
       },
       size: {
-        required: false,
-        default: '14px',
-        type: String,
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
         type: String,
+        default: '14px',
       },
-      alignArrow: {
-        required: false,
-        default: 'center',
+      maxWidth: {
         type: String,
+        default: '400px',
       },
       openTrigger: {
-        required: false,
-        default: 'onHover', // onHover, onClick
         type: String,
+        default: 'onHover',
+        validator: (value) => ['onHover', 'onClick'].includes(value),
       },
-      width: {
-        required: false,
-        default: '200px',
+      buttonType: {
         type: String,
+        default: 'regular',
+        validator: (value) => ['regular', 'error'].includes(value),
       },
-      maxWidth: {
-        default: '400px',
+      image: {
         type: String,
+        default: '',
       },
     },
-    data() {
+    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 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' && isVisible.value) {
+          const clickedElement = event.target
+          if (
+            infoBox.value &&
+            !infoBox.value.$el.contains(clickedElement) &&
+            !icon.value.contains(clickedElement)
+          ) {
+            hideInfo()
+          }
+        }
+      }
+
+      onMounted(() => {
+        window.addEventListener('scroll', handleScroll, { passive: true })
+        window.addEventListener('resize', updatePosition)
+        document.addEventListener('scroll', handleScroll, {
+          passive: true,
+          capture: true,
+        })
+        document.addEventListener('click', handleClickOutside)
+      })
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll)
+        window.removeEventListener('resize', updatePosition)
+        document.removeEventListener('scroll', handleScroll, { capture: true })
+        document.removeEventListener('click', handleClickOutside)
+      })
+
+      watch(isVisible, (newValue) => {
+        if (newValue) {
+          updatePosition()
+        }
+      })
+
       return {
-        showInfo: false,
+        isVisible,
+        boxStyle,
+        arrowStyle,
+        showInfo,
+        hideInfo,
+        toggleInfo,
+        container,
+        icon,
+        infoBox,
+        textContent,
+        infoImage,
+        infoBoxWidth,
+        infoBoxHeight,
+        wrapperStyle,
+        textStyle,
+        onImageLoad,
       }
     },
     computed: {
       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()
+        return this.buttonType === 'error'
+          ? theme.colors.red
+          : theme.colors.mediumGray
       },
     },
   }