@eturnity/eturnity_reusable_components 7.51.16-EPDM-13568.3 → 7.51.16-EPDM-10609.14

package/src/components/infoText/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer ref="container">
+  <PageContainer ref="container" :type="type">
     <div
       ref="icon"
       data-test-id="infoText_trigger"
@@ -7,7 +7,13 @@
       @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
       @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
+      <Dot
+        v-if="type === 'dot'"
+        :color="dotColor"
+        data-test-id="infoText_dot"
+      />
       <IconComponent
+        v-else
         :color="iconColor || computedIconColor"
         :cursor="isDisabled ? 'not-allowed' : 'pointer'"
         :disabled="isDisabled"
@@ -19,7 +25,6 @@
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
-          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -37,7 +42,7 @@
             </slot>
           </span>
         </TextOverlay>
-        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
+        <Arrow :image="image" :style="arrowStyle" />
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -58,14 +63,11 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlayAttrs = {
-    appTheme: String,
-    image: Boolean,
-    width: Number,
-  }
-  const TextOverlay = styled('div', TextOverlayAttrs)`
+  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.black};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -86,23 +88,19 @@
     }
   `
 
-  // const Arrow = styled('div')`
-  //   position: absolute;
-  //   width: 0;
-  //   height: 0;
-  //   border: 8px solid transparent;
-  //   border-top-color: ${(props) =>
-  //     props.image
-  //       ? props.theme.colors.white
-  //       : props.appTheme === 'dark'
-  //       ? props.theme.colors.grey5
-  //       : props.theme.colors.black};
-  //   filter: ${(props) =>
-  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  // `
+  const Arrow = styled('div')`
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-top-color: ${(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;
+    display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
     position: relative;
   `
 
@@ -116,12 +114,20 @@
     height: auto;
   `
 
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+  `
+
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
-      // Arrow,
+      Arrow,
+      Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
@@ -173,10 +179,15 @@
         default: false,
         required: false,
       },
-      appTheme: {
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.colors.blue2,
+      },
+      type: {
         type: String,
-        default: 'light', // light or dark
         required: false,
+        default: 'info', // info, dot
       },
     },
     setup(props) {
@@ -195,11 +206,7 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image
-          ? theme.colors.grey1
-          : props.appTheme === 'dark'
-          ? theme.colors.black
-          : theme.colors.white,
+        color: props.image ? theme.colors.grey1 : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -329,9 +336,7 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : props.appTheme === 'light'
-            ? theme.colors.black
-            : theme.colors.grey5,
+            : theme.colors.black,
         }
       }
 

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',
+  },
+}

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

@@ -13,7 +13,6 @@
       <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
-        :data-qa-id="dataQaId"
         type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
@@ -215,10 +214,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
       cursorType: {
         type: String,
         default: 'pointer',

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

@@ -15,7 +15,6 @@
     <LabelWrapper v-if="labelText">
       <LabelText
         :data-id="labelDataId"
-        :data-test-id="labelDataTestId"
         :label-font-color="labelFontColor"
         :label-font-weight="labelFontWeight"
       >
@@ -25,7 +24,6 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
-        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -42,7 +40,6 @@
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
-        :data-qa-id="dataQaId"
         :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
@@ -475,10 +472,6 @@
     },
     inheritAttrs: false,
     props: {
-      appTheme: {
-        type: String,
-        required: false,
-      },
       placeholder: {
         type: String,
         required: false,
@@ -654,10 +647,6 @@
         required: false,
         default: '',
       },
-      dataQaId: {
-        required: false,
-        default: '',
-      },
       showSelect: {
         type: Boolean,
         default: false,

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

@@ -21,7 +21,6 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
-          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -35,7 +34,6 @@
             :background-color="backgroundColor"
             :border-color="borderColor"
             :data-id="inputDataId"
-            :data-qa-id="dataQaId"
             data-test-id="input"
             :default-padding="defaultPadding"
             :disabled="disabled"
@@ -264,11 +262,6 @@
         default: '',
         type: String,
       },
-      appTheme: {
-        type: String,
-        required: false,
-        default: 'light',
-      },
       alignItems: {
         required: false,
         default: 'horizontal',
@@ -385,11 +378,6 @@
         default: '',
         type: String,
       },
-      dataQaId: {
-        required: false,
-        default: '',
-        type: String,
-      },
       iconName: {
         required: false,
         default: null,

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

@@ -17,7 +17,6 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
-          :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
@@ -297,11 +296,6 @@
         required: false,
         type: String,
       },
-      dataQaId: {
-        type: String,
-        default: '',
-        required: false,
-      },
       colorMode: {
         default: '',
         required: false,

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

@@ -5,7 +5,6 @@
       <InputContainer
         ref="inputElement"
         :data-id="dataId"
-        :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
         :input-width="inputWidth"
@@ -129,11 +128,6 @@
         default: '',
         type: [String, Number],
       },
-      dataQaId: {
-        required: false,
-        default: '',
-        type: String,
-      },
       iconPosition: {
         type: String,
         default: 'right',

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

@@ -13,7 +13,6 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
-        :data-qa-id="dataQaId + '_label'"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -52,7 +51,6 @@
           class="select-button"
           :color-mode="colorMode"
           :data-id="dataId"
-          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
@@ -137,7 +135,7 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="#portal-target">
+          <Teleport to="body">
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
@@ -607,10 +605,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,

package/src/components/inputs/select/option/index.vue

@@ -150,12 +150,11 @@
     computed: {},
     methods: {
       clickHandler(e) {
-        if (this.isDisabled) {
+        if (this.isDisabled || !!this.$attrs?.onClick) {
           // prevent emitter if the option is disabled
           return
-        } else {
-          this.$parent.$emit('option-selected', this.value, e)
         }
+        this.$parent.$emit('option-selected', this.value, e)
       },
       hoverHandler() {
         this.$parent.$emit('option-hovered', this.value)

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

@@ -18,7 +18,6 @@
       >
         <textarea
           :data-id="inputDataId"
-          :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
           :resize="resize"
@@ -186,11 +185,6 @@
         required: false,
         default: '',
       },
-      dataQaId: {
-        required: false,
-        default: '',
-        type: String,
-      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -2,7 +2,6 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
-      :data-qa-id="dataQaId"
       data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
@@ -305,10 +304,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
     },
     methods: {
       onToggleChange() {

package/src/components/modals/modal/index.vue

@@ -2,9 +2,10 @@
   <PageWrapper
     :backdrop="backdrop"
     :class="{ visible: isOpen, hidden: !isOpen }"
+    :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer v-if="isOpen" :overflow="overflowRule" @click="onClickModalContainer">
+    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -34,7 +35,7 @@
     visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
   `
 
-  const pageAttrs = { backdrop: String, position: String }
+  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/projectMarker/index.vue

@@ -59,8 +59,7 @@
           <MainButton :text="$gettext('Delete')" @click="onDelete" />
           <MainButton
             :text="$gettext('Cancel')"
-            type="primary"
-            variant="cancel"
+            type="cancel"
             @click="closeDeleteModal"
           />
         </CtaContainer>

package/src/components/rangeSlider/Slider.vue

@@ -2,7 +2,6 @@
   <div
     :class="className"
     :data-id="dataId"
-    :data-qa-id="dataQaId"
     :style="style"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
@@ -65,10 +64,6 @@
         type: String,
         default: '',
       },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
       className: {
         type: String,
         default: 'vdr',