@eturnity/eturnity_reusable_components 7.45.5-EPDM-10609.6 → 7.45.5-EPDM-10609.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.5-EPDM-10609.6",
+  "version": "7.45.5-EPDM-10609.8",
   "files": [
     "dist",
     "src"

package/src/components/infoText/index.vue

@@ -8,11 +8,16 @@
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <Dot v-if="type === 'dot'" :color="dotColor" />
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
         <IconComponent
           v-else
           :color="iconColor"
           cursor="pointer"
+          data-test-id="infoText_info"
           name="info"
           :size="size"
         />
@@ -21,6 +26,7 @@
         <TextOverlay
           v-if="showInfo"
           :align-arrow="alignArrow"
+          data-test-id="info_text_wrapper"
           :half-computed-text-info-width="halfComputedTextInfoWidth"
           :icon-size="size"
           :info-position="infoPosition"
@@ -87,11 +93,9 @@
         : props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
         : props.alignArrow === 'center'
-        ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
+        ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2)'
         : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
 
-    ${(props) => (props.infoPosition === 'left' ? 'right' : 'left')} : 0;
-
     text-align: left;
     background: ${(props) => props.theme.colors.black};
     padding: 10px;
@@ -172,30 +176,26 @@
         type: String,
         required: false,
         default: '14px',
-        type: String,
       },
       infoPosition: {
         required: false,
-        default: 'bottom',
+        default: 'bottom', // top, bottom
         type: String,
       },
       alignArrow: {
         type: String,
         required: false,
-        default: 'center',
-        type: String,
+        default: 'center', // left, center, right
       },
       openTrigger: {
         type: String,
         required: false,
         default: 'onHover', // onHover, onClick
-        type: String,
       },
       width: {
         type: String,
         required: false,
         default: '165px',
-        type: String,
       },
       maxWidth: {
         default: '400px',

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

@@ -0,0 +1,62 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import InfoText from '@/components/infoText'
+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('close_for_modals,_tool_tips.svg')),
+}))
+
+describe('InfoText Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(InfoText, {
+      props: {
+        text: 'default text',
+        size: '14px',
+        infoPosition: 'bottom',
+        alignArrow: 'center',
+        openTrigger: 'onHover',
+        width: '165px',
+        maxWidth: '165px',
+        shouldUseTeleport: false,
+        dotColor: '#00009f',
+        type: 'info',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders InfoText component with default props', () => {
+    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')
+    expect(wrapper.vm.alignArrow).toContain('center')
+  })
+
+  test('openTrigger prop is set to onClick', async () => {
+    await wrapper.setProps({ openTrigger: 'onClick' })
+
+    //should not see text upon hover
+    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
+      false
+    )
+    //should see text upon click
+    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
+      true
+    )
+  })
+
+  test('position type is dot', async () => {
+    await wrapper.setProps({ type: 'dot' })
+    expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,48 @@
+import InfoText from './index.vue'
+
+export default {
+  title: 'infoText',
+  component: InfoText,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <info-text
+//     text="Veritatis et quasi architecto beatae vitae"
+//     size="20px"
+//     alignArrow="right" // which side the arrow should be on
+// />
+
+export const Default = {
+  args: {
+    text: 'default text',
+    size: '14px',
+    infoPosition: 'bottom',
+    alignArrow: 'center',
+    openTrigger: 'onHover',
+    width: '165px',
+    maxWidth: '165px',
+    shouldUseTeleport: false,
+    dotColor: '#00009f',
+    type: 'info',
+  },
+}
+
+export const Dot = {
+  args: {
+    ...Default.args,
+    type: 'dot',
+  },
+}
+
+//will only show the info text on click
+export const OnClick = {
+  args: {
+    ...Default.args,
+    openTrigger: 'onClick',
+  },
+}