@eturnity/eturnity_reusable_components 8.13.13-epic-shading.0 → 8.13.13-qa-16-03-26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-epic-shading.0",
+  "version": "8.13.13-qa-16-03-26.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -71,7 +71,6 @@ const theme = (() => {
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
     transparentBlack1: '#263238e6',
-    transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
     eturnityGrey: '#263238',

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

@@ -44,7 +44,7 @@
   import styled from 'vue3-styled-components'
 
   const ComponentWrapper = styled.div`
-    min-height: 16px;
+    min-height: 18px;
   `
 
   const CheckWrapper = styled('div', { hasLabel: Boolean })`
@@ -179,7 +179,7 @@
     font-size: 13px;
     display: grid;
     align-items: center;
-    min-height: 16px;
+    min-height: 18px;
     color: ${(props) =>
       props.isDisabled ? props.theme.colors.grey2 : 'unset'};
   `

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

@@ -60,7 +60,7 @@
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formatWithCurrency(value)"
+        :value="formattedValue"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -74,7 +74,7 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
+        :has-length="hasLength"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
@@ -91,7 +91,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="$emit('select-change', $event)"
+          @input-change="handleSelectChange"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -449,8 +449,18 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
+  const EVENT_TYPES = {
+    INPUT_FOCUS: 'input-focus',
+    INPUT_CHANGE: 'input-change',
+    INPUT_BLUR: 'input-blur',
+    PRESS_ENTER: 'on-enter-click',
+    INPUT_DRAG: 'on-input-drag',
+    SELECT_CHANGE: 'select-change',
+  }
+
   export default {
     name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -689,9 +699,10 @@
     },
     data() {
       return {
-        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
       }
     },
     computed: {
@@ -714,6 +725,14 @@
 
         return item ? item.label : '-'
       },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
     },
     watch: {
       focus(value) {
@@ -724,30 +743,19 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+          this.inputValue = ''
+          this.enteredValue = ''
         }
       },
-    },
-    created() {
-      if (this.value) {
-        this.textInput = numberToString({
-          value: this.value,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.defaultNumber !== null) {
-        this.textInput = numberToString({
-          value: this.defaultNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.minNumber !== null) {
-        this.textInput = numberToString({
-          value: this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      }
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue = this.value
+          }
+        },
+      },
     },
     mounted() {
       if (this.focus) {
@@ -786,29 +794,28 @@
         }
       },
       onEnterPress() {
-        this.$emit('on-enter-click')
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
+      onChangeHandler(value) {
+        if (isNaN(value) || value === '') {
+          value = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : event
+            : value
         }
         if (!this.allowNegative) {
-          event = Math.abs(event)
+          value = Math.abs(value)
         }
-        event = parseFloat(event)
+        value = parseFloat(value)
         // Need to return an integer rather than a string
-        this.$emit('input-change', event)
+        return parseFloat(value)
       },
-      onEvaluateCode(event) {
+      onEvaluateCode(value) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        const val = event.target.value
-        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -866,48 +873,29 @@
         return array
       },
       onInput(event) {
-        if (!this.isFocused) {
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
           return
         }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(event)
+          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
         } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
+          this.inputValue = this.onChangeHandler(evaluatedVal)
+
+          if (this.isFocused && typeof this.enteredValue !== 'number') {
+            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        let value = e.target.value
-        let evaluatedInput = this.onEvaluateCode(e)
-        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-        if ((evaluatedInput && value.length) || this.minNumber !== null) {
-          this.textInput = numberToString({
-            value:
-              evaluatedInput && value.length
-                ? evaluatedInput
-                : this.defaultNumber
-                ? this.defaultNumber
-                : this.minNumber,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
-        }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        this.$emit('input-blur', adjustedMinValue)
+        this.enteredValue = this.inputValue
+        this.$emit(
+          EVENT_TYPES.INPUT_BLUR,
+          this.onEvaluateCode(String(this.inputValue))
+        )
       },
       focusInput() {
         if (this.disabled) {
@@ -917,7 +905,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit('input-focus')
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
       },
       blurInput() {
         if (this.disabled) {
@@ -937,7 +925,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -950,6 +938,8 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
+        } else if (this.isFocused) {
+          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -970,14 +960,7 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit('on-input-drag', value)
-
-        this.textInput = numberToString({
-          value: value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        //this.value=value
+        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
       },
       stopInteract(e) {
         e.preventDefault()
@@ -985,6 +968,9 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
     },
   }
 </script>

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

@@ -109,11 +109,7 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" :color-mode="colorMode">
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -142,12 +138,11 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
+                colorMode == 'dark' || colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -167,10 +162,17 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
+              :style="{
+                transform: `translate(${dropdownPosition?.left}px, ${
+                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                })`,
+              }"
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
@@ -208,7 +210,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport } from 'vue'
+  import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -392,14 +394,17 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
+    isFixedDropdownPosition: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
-    position: absolute;
-    top: ${(props) =>
-      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
-    left: ${(props) => props.dropdownPosition?.left}px;
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
+    position: ${(props) =>
+      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
+    top: 0px;
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -647,6 +652,11 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -664,6 +674,17 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
+      }
+    },
+    setup() {
+      const modalRef = inject('modalRef')
+
+      return {
+        modalRef,
       }
     },
     computed: {
@@ -721,6 +742,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.modalRef
+      },
     },
     watch: {
       value(val) {
@@ -734,8 +758,13 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
+          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
+          if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId)
+            this.animationFrameId = null
+          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -748,11 +777,30 @@
           })
         }
       },
+      isSelectDropdownShown(isShown) {
+        if (!isShown) return
+        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
+        // before getting the distance between the select and the dropdown menu
+        setTimeout(() => {
+          this.getDistanceBetweenSelectAndDropdownMenu()
+        }, 100)
+      },
+      selectTopPosition() {
+        this.dropdownPosition.top =
+          this.selectTopPosition +
+          this.$refs.select.$el.clientHeight +
+          this.selectAndDropdownDistance
+      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
+      if (!this.isFixedDropdownPosition)
+        document.body.addEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -761,6 +809,12 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+      if (!this.isFixedDropdownPosition) {
+        document.body.removeEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
+      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -866,11 +920,11 @@
           return
         }
         await this.$nextTick()
-        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        this.isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (isDisplayedAtBottom) this.generateDropdownPosition()
+        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -963,6 +1017,25 @@
           }
         }
       },
+      getDistanceBetweenSelectAndDropdownMenu() {
+        const wholeSelectTopPosition =
+          this.selectTopPosition + this.$refs.select.$el.clientHeight
+        this.selectAndDropdownDistance =
+          this.dropdownPosition.top - wholeSelectTopPosition
+      },
+      calculateSelectTopPosition() {
+        const selectRef = this.$refs.select
+        if (selectRef) {
+          const currentTopPosition =
+            selectRef.$el.getBoundingClientRect().top + window.scrollY
+          if (this.selectTopPosition !== currentTopPosition) {
+            this.selectTopPosition = currentTopPosition
+          }
+        }
+        this.animationFrameId = requestAnimationFrame(
+          this.calculateSelectTopPosition
+        )
+      },
     },
   }
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="modalRef"
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
@@ -36,6 +37,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -58,14 +60,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 99999;
+  z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -163,6 +165,14 @@
         default: false,
       },
     },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
+  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:

package/src/assets/svgIcons/house_sun.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C8.27614 0.5 8.5 0.723858 8.5 1V2.86667C8.5 3.14281 8.27614 3.36667 8 3.36667C7.72386 3.36667 7.5 3.14281 7.5 2.86667V1C7.5 0.723858 7.72386 0.5 8 0.5ZM0.5 8C0.5 7.72386 0.723858 7.5 1 7.5H2.86667C3.14281 7.5 3.36667 7.72386 3.36667 8C3.36667 8.27614 3.14281 8.5 2.86667 8.5H1C0.723858 8.5 0.5 8.27614 0.5 8ZM12.6333 8C12.6333 7.72386 12.8572 7.5 13.1333 7.5H15C15.2761 7.5 15.5 7.72386 15.5 8C15.5 8.27614 15.2761 8.5 15 8.5H13.1333C12.8572 8.5 12.6333 8.27614 12.6333 8ZM8.99987 10.8145C9.09475 11.0816 9.39061 11.2244 9.64095 11.0915C10.059 10.8696 10.4293 10.5644 10.728 10.1927C11.1343 9.6872 11.3922 9.0787 11.4728 8.43514C11.5535 7.79158 11.4537 7.13827 11.1847 6.54812C10.9156 5.95796 10.4879 5.45417 9.94915 5.09297C9.41045 4.73177 8.78197 4.52736 8.13385 4.50256C7.48573 4.47776 6.84347 4.63353 6.27873 4.9525C5.71399 5.27148 5.24899 5.7411 4.93563 6.30896C4.70526 6.72642 4.56349 7.1849 4.51696 7.65586C4.48909 7.93792 4.73355 8.15738 5.01665 8.14374C5.29975 8.1301 5.51274 7.8874 5.55771 7.60756C5.60274 7.32731 5.69588 7.05561 5.83426 6.80486C6.05573 6.40352 6.38437 6.07162 6.7835 5.84619C7.18262 5.62076 7.63654 5.51066 8.0946 5.52819C8.55265 5.54572 8.99683 5.69019 9.37756 5.94546C9.75829 6.20074 10.0606 6.55679 10.2507 6.97388C10.4409 7.39098 10.5114 7.8527 10.4544 8.30754C10.3974 8.76237 10.2152 9.19242 9.928 9.54971C9.74858 9.77293 9.5326 9.96227 9.29044 10.1103C9.04864 10.2582 8.90499 10.5474 8.99987 10.8145ZM5.17261 9.95833C5.36097 9.79137 5.64409 9.79046 5.83352 9.95621L8.82925 12.5775C8.93776 12.6724 9 12.8096 9 12.9538V14.5C9 14.7761 9.22386 15 9.5 15C9.77614 15 10 14.7761 10 14.5V12.9538C10 12.5212 9.81328 12.1097 9.48776 11.8249L6.49202 9.20363C5.92373 8.70638 5.0744 8.7091 4.5093 9.20998L1.50504 11.8728C1.18385 12.1575 1 12.5662 1 12.9954V14.5C1 14.7761 1.22386 15 1.5 15C1.77614 15 2 14.7761 2 14.5V12.9954C2 12.8523 2.06128 12.7161 2.16835 12.6212L5.17261 9.95833ZM3.40391 2.69668C3.20865 2.50142 2.89206 2.50142 2.6968 2.69668C2.50154 2.89194 2.50154 3.20852 2.6968 3.40379L4.01673 4.72372C4.212 4.91898 4.52858 4.91898 4.72384 4.72372C4.9191 4.52846 4.9191 4.21187 4.72384 4.01661L3.40391 2.69668ZM11.2764 4.01661C11.0811 4.21187 11.0811 4.52846 11.2764 4.72372C11.4716 4.91898 11.7882 4.91898 11.9835 4.72372L13.3034 3.40379C13.4987 3.20852 13.4987 2.89194 13.3034 2.69668C13.1081 2.50142 12.7916 2.50142 12.5963 2.69668L11.2764 4.01661ZM11.9835 11.2762C11.7882 11.081 11.4716 11.081 11.2764 11.2762C11.0811 11.4715 11.0811 11.7881 11.2764 11.9833L12.5963 13.3033C12.7916 13.4985 13.1081 13.4985 13.3034 13.3033C13.4987 13.108 13.4987 12.7914 13.3034 12.5962L11.9835 11.2762Z" fill="black"/>
-</svg>

package/src/components/draggableCard/defaultProps.js

@@ -1,16 +0,0 @@
-const defaultProps = {
-  title: 'Sample Title',
-  infoText: 'Sample Info Text',
-  initialPosition: { top: '0px', left: '0px' },
-  minWidth: '284px',
-  maxWidth: '284px',
-  dragTargets: ['document'],
-  dragBounds: {},
-  sampleBody1:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  sampleBody2:
-    'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-  sampleFooter: 'Sample footer',
-}
-
-export default defaultProps

package/src/components/draggableCard/draggableCard.spec.js

@@ -1,99 +0,0 @@
-import { mount } from '@vue/test-utils'
-import DraggableCard from '@/components/draggableCard'
-import defaultProps from './defaultProps'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
-}))
-
-describe('DraggableCard.vue', () => {
-  it('renders properly with required props', () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_header"]').text()
-    ).toContain(defaultProps.title)
-
-    // Expect no footer rendered if not provided
-    const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
-    expect(footerElement.exists()).toBe(false)
-  })
-
-  it('renders body slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: defaultProps,
-      slots: {
-        body: `
-          <div class="custom_body1">${defaultProps.sampleBody1}</div>
-          <div class="custom_body2">${defaultProps.sampleBody2}</div>
-        `,
-      },
-    })
-    expect(wrapper.find('.custom_body1').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody1)
-    expect(wrapper.find('.custom_body2').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody2)
-  })
-
-  it('renders footer slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: defaultProps,
-      slots: {
-        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
-      },
-    })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_footer"]').exists()
-    ).toBe(true)
-    expect(wrapper.find('.custom_footer').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleFooter)
-  })
-
-  it('emits "on-close" when close button is clicked', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_close_button"]')
-      .trigger('click')
-    expect(wrapper.emitted('on-close')).toBeTruthy()
-  })
-
-  it('toggles collapse state when arrow icon is clicked', async () => {
-    const wrapper = mount(DraggableCard, {
-      props: { ...defaultProps, isCollapsible: true },
-    })
-    expect(wrapper.vm.isCollapsed).toBe(false)
-    await wrapper
-      .find('[data-test-id="draggable_card_collapse_button"]')
-      .trigger('click')
-    expect(wrapper.vm.isCollapsed).toBe(true)
-  })
-
-  it('handles drag start event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_drag_icon"]')
-      .trigger('mousedown', { clientX: 100, clientY: 100 })
-    expect(wrapper.vm.isDragging).toBe(true)
-  })
-
-  it('handles drag move event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
-    expect(wrapper.vm.eventCoordinates.x).toBe(120)
-    expect(wrapper.vm.eventCoordinates.y).toBe(120)
-  })
-
-  it('handles drag end event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDragEnd()
-    expect(wrapper.vm.isDragging).toBe(false)
-  })
-})

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,79 +0,0 @@
-import defaultProps from './defaultProps'
-import DraggableCard from './index.vue'
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'DraggableCard',
-  component: DraggableCard,
-  tags: ['autodocs'],
-}
-
-const TextContainer = styled.div`
-  font-family: ${theme.fonts.mainFont};
-  color: ${theme.colors.white};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 0%;
-`
-
-const CompleteTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      <template #footer>
-        <TextContainer>{{ args.sampleFooter }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const Default = CompleteTemplate.bind({})
-Default.args = {
-  ...defaultProps,
-}
-
-export const NotCollapsible = CompleteTemplate.bind({})
-NotCollapsible.args = {
-  ...defaultProps,
-  isCollapsible: false,
-}
-
-export const AdjustWidth = CompleteTemplate.bind({})
-AdjustWidth.args = {
-  ...defaultProps,
-  minWidth: '100px',
-  maxWidth: '500px',
-}
-
-const NoFooterTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const NoFooter = NoFooterTemplate.bind({})
-NoFooter.args = {
-  ...defaultProps,
-}

package/src/components/draggableCard/index.vue

@@ -1,354 +0,0 @@
-<template>
-  <CardContainer
-    data-test-id="draggable_card_container"
-    :initial-position="initialPosition"
-    :max-width="maxWidth"
-    :min-width="minWidth"
-  >
-    <HeaderContainer data-test-id="draggable_card_header">
-      <SubHeaderWrapper>
-        <LeftIconsContainer>
-          <DragHandleWrapper :class="{ dragging: isDragging }">
-            <RCIcon
-              :color="theme.colors.grey3"
-              data-test-id="draggable_card_drag_icon"
-              name="drag_icon"
-              size="14px"
-              :title="$gettext('drag_drop')"
-              @mousedown="(event) => onDragStart(event, false)"
-              @touchstart="
-                (event) => {
-                  onDragStart(event, true)
-                }
-              "
-            />
-          </DragHandleWrapper>
-          <ArrowIconWrapper
-            v-if="isCollapsible"
-            data-test-id="draggable_card_collapse_button"
-            :is-collapsed="isCollapsed"
-            @click="toggleCollapse"
-          >
-            <CollapseArrowIcon />
-          </ArrowIconWrapper>
-        </LeftIconsContainer>
-        <TitleContainer :data-id="titleDataId">
-          <TextContainer>{{ title }}</TextContainer>
-          <InfoText v-if="infoText?.length" :text="infoText" />
-        </TitleContainer>
-      </SubHeaderWrapper>
-      <CloseButton
-        class="close"
-        data-test-id="draggable_card_close_button"
-        @click="$emit('on-close')"
-      />
-    </HeaderContainer>
-    <BodyContainer v-if="!isCollapsed" data-test-id="draggable_card_body">
-      <slot name="body"></slot>
-    </BodyContainer>
-    <FooterContainer v-if="$slots.footer" data-test-id="draggable_card_footer">
-      <slot name="footer"></slot>
-    </FooterContainer>
-  </CardContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import theme from '../../assets/theme.js'
-  import RCIcon from '../icon'
-  import CloseButton from '../buttons/closeButton'
-  import InfoText from '../infoText'
-  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
-
-  const CardContainerAttr = {
-    initialPosition: Object,
-    minWidth: String,
-    maxWidth: String,
-  }
-  const CardContainer = styled('div', CardContainerAttr)`
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    min-width: ${(props) => props.minWidth};
-    max-width: ${(props) => props.maxWidth};
-    background: ${theme.colors.transparentBlack2};
-    z-index: 5;
-    ${(props) =>
-      props.initialPosition?.top && `top: ${props.initialPosition.top};`}
-    ${(props) =>
-      props.initialPosition?.right && `right: ${props.initialPosition.right};`}
-    ${(props) =>
-      props.initialPosition?.left && `left: ${props.initialPosition.left};`}
-    ${(props) =>
-      props.initialPosition?.bottom &&
-      `bottom: ${props.initialPosition.bottom};`}
-  `
-
-  const HeaderContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-  `
-
-  const SubHeaderWrapper = styled.div`
-    display: flex;
-    min-width: 180px;
-    align-items: center;
-    justify-content: space-between;
-    height: fit-content;
-    margin-right: 14px;
-  `
-
-  const LeftIconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-right: 14px;
-  `
-
-  const TitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `
-
-  const TextContainer = styled.div`
-    font-family: ${theme.fonts.mainFont};
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 19.6px;
-    letter-spacing: -1%;
-    color: ${theme.colors.white};
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  const DragHandleWrapper = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: 26px;
-    height: 26px;
-    cursor: grab;
-    &.dragging {
-      cursor: grabbing;
-    }
-  `
-
-  const collapsedAttrs = {
-    isCollapsed: Boolean,
-  }
-  const ArrowIconWrapper = styled('div', collapsedAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 8px;
-    height: 26px;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-    path {
-      fill: ${theme.colors.white};
-    }
-
-    ${(props) => props.isCollapsed && 'transform: rotate(-180deg);'}
-  `
-
-  const BodyContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding-top: 8px;
-    padding-right: 16px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  const FooterContainer = styled.div`
-    display: flex;
-    border-radius: 4px;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-    background: ${theme.colors.eturnityGrey};
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  export default {
-    name: 'DraggableCard',
-    components: {
-      CardContainer,
-      HeaderContainer,
-      SubHeaderWrapper,
-      LeftIconsContainer,
-      TextContainer,
-      DragHandleWrapper,
-      ArrowIconWrapper,
-      CollapseArrowIcon,
-      RCIcon,
-      CloseButton,
-      InfoText,
-      TitleContainer,
-      BodyContainer,
-      FooterContainer,
-    },
-    props: {
-      minWidth: {
-        required: true,
-        type: String,
-      },
-      maxWidth: {
-        required: true,
-        type: String,
-      },
-      initialPosition: {
-        required: true,
-        type: Object,
-      },
-      title: {
-        required: true,
-        type: String,
-      },
-      titleDataId: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      isCollapsible: {
-        required: false,
-        type: Boolean,
-        default: true,
-      },
-      infoText: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      dragTargets: {
-        required: false,
-        type: Array,
-        default: () => ['document'],
-      },
-      dragBounds: {
-        required: false,
-        type: Object,
-        default: () => {},
-      },
-    },
-    emits: ['on-close'],
-    data() {
-      return {
-        isCollapsed: false,
-        isDragging: false,
-        isTouchStart: false,
-        eventCoordinates: {
-          x: 0,
-          y: 0,
-        },
-      }
-    },
-    computed: {
-      dragBoundsEnabled() {
-        const minPosition = this.dragBounds?.min
-        const maxPosition = this.dragBounds?.max
-        return (
-          minPosition?.top &&
-          minPosition?.left &&
-          maxPosition?.top &&
-          maxPosition?.left
-        )
-      },
-      theme() {
-        return theme
-      },
-    },
-    beforeUnmount() {
-      this.removeEvents()
-    },
-    methods: {
-      toggleCollapse() {
-        this.isCollapsed = !this.isCollapsed
-      },
-      onDragStart(e, isTouchStart) {
-        e.preventDefault()
-        this.isDragging = true
-        this.isTouchStart = isTouchStart
-        this.eventCoordinates.x = isTouchStart
-          ? e.touches[0].clientX
-          : e.clientX
-        this.eventCoordinates.y = isTouchStart
-          ? e.touches[0].clientY
-          : e.clientY
-        this.dragTargets.forEach((id) => {
-          const target =
-            id === 'document' ? document : document.getElementById(id)
-          if (target && target.addEventListener) {
-            target.addEventListener(
-              isTouchStart ? 'touchend' : 'mouseup',
-              this.onDragEnd
-            )
-            target.addEventListener(
-              isTouchStart ? 'touchmove' : 'mousemove',
-              this.onDrag
-            )
-          }
-        })
-        document.addEventListener(
-          isTouchStart ? 'touchend' : 'mouseup',
-          this.onDragEnd
-        )
-      },
-      onDrag(e) {
-        e.preventDefault()
-        const eventX = this.isTouchStart ? e.touches[0].clientX : e.clientX
-        const eventY = this.isTouchStart ? e.touches[0].clientY : e.clientY
-        const deltaX = this.eventCoordinates.x - eventX
-        const deltaY = this.eventCoordinates.y - eventY
-        this.eventCoordinates.x = eventX
-        this.eventCoordinates.y = eventY
-        const element = this.$el
-        let positionY = element.offsetTop - deltaY
-        let positionX = element.offsetLeft - deltaX
-        if (this.dragBoundsEnabled) {
-          const minPosition = this.dragBounds.min
-          const maxPosition = this.dragBounds.max
-          positionY = Math.min(
-            Math.max(positionY, minPosition.top),
-            maxPosition.top
-          )
-          positionX = Math.min(
-            Math.max(positionX, minPosition.left),
-            maxPosition.left
-          )
-        }
-        element.style.top = positionY + 'px'
-        element.style.left = positionX + 'px'
-      },
-      onDragEnd() {
-        this.isDragging = false
-        this.removeEvents()
-      },
-      removeEvents() {
-        this.dragTargets.forEach((id) => {
-          const target =
-            id === 'document' ? document : document.getElementById(id)
-          if (target && target.removeEventListener) {
-            target.removeEventListener('mouseup', this.onDragEnd)
-            target.removeEventListener('touchend', this.onDragEnd)
-            target.removeEventListener('mousemove', this.onDrag)
-            target.removeEventListener('touchmove', this.onDrag)
-          }
-        })
-        document.removeEventListener('mouseup', this.onDragEnd)
-        document.removeEventListener('touchend', this.onDragEnd)
-      },
-    },
-  }
-</script>