@eturnity/eturnity_reusable_components 7.48.1-EPDM-10679.1 → 7.48.1-EPDM-12680.14

package/src/components/infoText/placeholder.vue

@@ -0,0 +1,225 @@
+<template>
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
+        ref="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"
+        :arrow-position="arrowPosition"
+        :icon-size="size"
+        :max-width="maxWidth"
+        :position="overlayPosition"
+        :style="overlayStyle"
+        :width="width"
+        ><slot></slot>
+        <span v-html="text"></span>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  // />
+  import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
+
+  const textAttrs = {
+    iconSize: String,
+    width: String,
+    position: String,
+    arrowPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    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;
+    border-radius: 4px;
+    z-index: 9999;
+    color: ${(props) => props.theme.colors.white};
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
+      ${(props) => (props.position === 'top' ? 'bottom: -4px;' : 'top: -4px;')}
+      ${(props) => {
+        switch (props.arrowPosition) {
+          case 'left':
+            return 'left: 40px;'
+          case 'center':
+            return 'left: calc(50% - 4px);'
+          case 'right':
+            return 'right: 40px;'
+          default:
+            return 'left: calc(50% - 4px);'
+        }
+      }}
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
+  `
+
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    height: ${(props) => props.size};
+  `
+
+  const IconImg = styled.div`
+    line-height: 0;
+  `
+
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      IconComponent,
+    },
+    props: {
+      text: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: '14px',
+      },
+      openTrigger: {
+        required: false,
+        default: 'onHover', // onHover, onClick
+      },
+      width: {
+        required: false,
+        default: '200px',
+      },
+      maxWidth: {
+        type: String,
+        default: '400px',
+      },
+    },
+    data() {
+      return {
+        showInfo: false,
+        overlayStyle: {},
+        overlayPosition: 'top',
+        arrowPosition: 'center',
+      }
+    },
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.positionOverlay)
+    },
+    beforeUnmount() {
+      window.removeEventListener('resize', this.positionOverlay)
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+          this.$nextTick(() => {
+            this.positionOverlay()
+          })
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
+      },
+      positionOverlay() {
+        const iconRect = this.$refs.iconImg.getBoundingClientRect()
+        const overlayRect = this.$el
+          .querySelector('.TextOverlay')
+          .getBoundingClientRect()
+
+        let top, left
+
+        // Check if there's enough space above the icon
+        if (
+          iconRect.top > overlayRect.height + 10 &&
+          iconRect.top > window.innerHeight / 2
+        ) {
+          top = -overlayRect.height - 10
+          this.overlayPosition = 'top'
+        } else {
+          // If not, position it below the icon
+          top = iconRect.height + 10
+          this.overlayPosition = 'bottom'
+        }
+
+        left = -(overlayRect.width / 2) + iconRect.width / 2
+
+        // Ensure the overlay doesn't go off-screen horizontally
+        if (iconRect.left + left < 0) {
+          left = -iconRect.left
+          this.arrowPosition = 'left'
+        } else if (
+          iconRect.left + left + overlayRect.width >
+          window.innerWidth
+        ) {
+          left = window.innerWidth - (iconRect.left + overlayRect.width)
+          this.arrowPosition = 'right'
+        } else {
+          this.arrowPosition = 'center'
+        }
+
+        // Adjust vertical position if it goes off-screen
+        const totalHeight = iconRect.top + top + overlayRect.height
+        if (totalHeight > window.innerHeight) {
+          top -= totalHeight - window.innerHeight + 10
+        }
+
+        this.overlayStyle = {
+          top: `${top}px`,
+          left: `${left}px`,
+        }
+      },
+    },
+  }
+</script>

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -1,63 +1,63 @@
-import Checkbox from './index.vue'
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-}
-
-// <checkbox
-//     label="Do you accept the Terms?"
-//     :isChecked="isChecked" //required
-//     @on-event-handler="onInputChange($event)" //required
-//     checkColor="blue"
-//     size="small"
-//     backgroundColor="red"
-//     :isDisabled="true"
-//     cursorType="default"
-// />
-
-export const DefaultCheckbox = {
-  args: {
-    isChecked: 'false',
-  },
-}
-
-export const IsChecked = {
-  args: {
-    isChecked: 'true',
-  },
-}
-
-export const CheckboxLabel = {
-  args: {
-    isChecked: 'false',
-    label: 'Click me',
-  },
-}
-
-export const SmallCheckbox = {
-  args: {
-    isChecked: 'false',
-    label: 'Click me',
-    size: 'small',
-  },
-}
-
-export const DisabledCheckbox = {
-  args: {
-    isChecked: false,
-    label: 'Click me',
-    size: 'small',
-    isDisabled: 'true',
-  },
-}
-
-export const CustomColor = {
-  args: {
-    isChecked: 'false',
-    size: 'medium',
-    checkColor: 'blue',
-    backgroundColor: 'yellow',
-  },
-}
+import Checkbox from './index.vue'
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+}
+
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
+//     :isDisabled="true"
+//     cursorType="default"
+// />
+
+export const DefaultCheckbox = {
+  args: {
+    isChecked: 'false',
+  },
+}
+
+export const IsChecked = {
+  args: {
+    isChecked: 'true',
+  },
+}
+
+export const CheckboxLabel = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+  },
+}
+
+export const SmallCheckbox = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+    size: 'small',
+  },
+}
+
+export const DisabledCheckbox = {
+  args: {
+    isChecked: false,
+    label: 'Click me',
+    size: 'small',
+    isDisabled: 'true',
+  },
+}
+
+export const CustomColor = {
+  args: {
+    isChecked: 'false',
+    size: 'medium',
+    checkColor: 'blue',
+    backgroundColor: 'yellow',
+  },
+}

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

@@ -1,109 +1,109 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import Checkbox from '@/components/inputs/checkbox'
-import theme from '@/assets/theme'
-
-describe('Checkbox Component', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(Checkbox, {
-      props: {
-        isChecked: false,
-        label: 'Click me',
-        isDisabled: false,
-        dataId: 'checkbox_wrapper',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-  it('checkbox is rendered and emits correct payload on change', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isChecked).toBe(false)
-    expect(wrapper.vm.label).toBe('Click me')
-    expect(wrapper.vm.size).toBe('medium')
-    expect(wrapper.vm.isDisabled).toBe(false)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-event-handler')
-    // To inspect emitted events:
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([true])
-  })
-  it('disabled should not emit anything', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ isDisabled: true })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isDisabled).toBe(true)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvents = wrapper.emitted('on-event-handler')
-    // To inspect emitted events:
-    expect(emittedEvents).toBeUndefined() // No event should be emitted
-  })
-  it('checkbox can handle multiple clicks', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isChecked).toBe(false)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-event-handler')
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([true])
-    await wrapper.setProps({ isChecked: true }) // manually update the props
-
-    // test the 2nd click
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[1]).toEqual([false])
-    await wrapper.setProps({ isChecked: false }) // manually update the props
-
-    // test the 3rd click
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[2]).toEqual([true])
-    await wrapper.setProps({ isChecked: true }) // manually update the props
-  })
-  it('should have a custom background color', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ backgroundColor: theme.colors.red })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
-  })
-  it('should have a custom checkbox color', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Checkbox from '@/components/inputs/checkbox'
+import theme from '@/assets/theme'
+
+describe('Checkbox Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Checkbox, {
+      props: {
+        isChecked: false,
+        label: 'Click me',
+        isDisabled: false,
+        dataId: 'checkbox_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+  it('checkbox is rendered and emits correct payload on change', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+    expect(wrapper.vm.label).toBe('Click me')
+    expect(wrapper.vm.size).toBe('medium')
+    expect(wrapper.vm.isDisabled).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+  })
+  it('disabled should not emit anything', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ isDisabled: true })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isDisabled).toBe(true)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvents = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvents).toBeUndefined() // No event should be emitted
+  })
+  it('checkbox can handle multiple clicks', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+
+    // test the 2nd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[1]).toEqual([false])
+    await wrapper.setProps({ isChecked: false }) // manually update the props
+
+    // test the 3rd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[2]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+  })
+  it('should have a custom background color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ backgroundColor: theme.colors.red })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
+  })
+  it('should have a custom checkbox color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
+  })
+})