@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.2 → 8.7.5-EPIC-8593.4

package/src/components/draggableCard/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <CardContainer
+    data-test-id="draggable_card_container"
+    :initial-position="initialPosition"
+    :width="width"
+  >
+    <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"
+          >
+            <img :src="CollapseArrowIconUrl" />
+          </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 CollapseArrowIconUrl from '../../assets/icons/collapse_arrow_icon_white.svg?url'
+
+  const CardContainerAttr = {
+    initialPosition: Object,
+    width: String,
+  }
+  const CardContainer = styled('div', CardContainerAttr)`
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    width: ${(props) => props.width};
+    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;
+    height: fit-content;
+    margin-right: 30px;
+  `
+
+  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;
+    ${(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,
+      RCIcon,
+      CloseButton,
+      InfoText,
+      TitleContainer,
+      BodyContainer,
+      FooterContainer,
+    },
+    props: {
+      width: {
+        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,
+        },
+        CollapseArrowIconUrl,
+      }
+    },
+    computed: {
+      dragBoundsEnabled() {
+        const minPosition = this.dragBounds?.min
+        const maxPosition = this.dragBounds?.max
+        return (
+          Number.isFinite(minPosition?.top) &&
+          Number.isFinite(minPosition?.left) &&
+          Number.isFinite(maxPosition?.top) &&
+          Number.isFinite(maxPosition?.left)
+        )
+      },
+      theme() {
+        return theme
+      },
+    },
+    watch: {
+      dragBounds() {
+        this.clampElementPosition()
+      },
+    },
+    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
+        element.style.top = positionY + 'px'
+        element.style.left = positionX + 'px'
+        if (this.dragBoundsEnabled) {
+          this.clampElementPosition()
+        }
+      },
+      onDragEnd() {
+        this.isDragging = false
+        this.removeEvents()
+      },
+      clampElementPosition() {
+        if (!this.dragBoundsEnabled) return
+
+        const element = this.$el
+        const rect = element.getBoundingClientRect()
+        const computedStyle = window.getComputedStyle(element)
+        const currentX = parseFloat(computedStyle.left) || 0
+        const currentY = parseFloat(computedStyle.top) || 0
+
+        const minPosition = this.dragBounds.min
+        const maxPosition = this.dragBounds.max
+
+        const y = Math.min(
+          Math.max(currentY, minPosition.top),
+          maxPosition.top - rect.height
+        )
+
+        const x = Math.min(
+          Math.max(currentX, minPosition.left),
+          maxPosition.left - rect.width
+        )
+
+        element.style.top = y + 'px'
+        element.style.left = x + 'px'
+      },
+      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>

package/src/components/errorMessage/errorMessage.spec.js

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import ErrorMessage from '@/components/errorMessage'
+import theme from '@/assets/theme'
+
+/* eslint-disable */
+
+describe('ErrorMessage Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ErrorMessage, {
+      props: {},
+      slots: {
+        default: '<div data-test-id="fake-msg">testing</div>',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders ErrorMessage component with default props', () => {
+    expect(wrapper.findAll('[data-test-id="fake-msg"]').length).toBe(1)
+  })
+
+  test('applies the correct CSS class for styling', async () => {
+    wrapper.setProps({ marginTop: '20px' })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.props().marginTop).toBe('20px')
+  })
+})

package/src/components/errorMessage/errorMessage.stories.js

@@ -0,0 +1,35 @@
+import ErrorMessage from './index.vue'
+
+export default {
+  title: 'ErrorMessage',
+  component: ErrorMessage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//
+//To use:
+// <error-message>
+//     <span>
+//         testing error message
+//     </span>
+// </error-message>
+
+const Template = (args, { argTypes }) => ({
+  components: { ErrorMessage },
+  props: Object.keys(argTypes),
+  template: `
+  <ErrorMessage v-bind="$props">
+    <span>
+        testing error message
+    </span>
+  </ErrorMessage>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  marginTop: '13px',
+}

package/src/components/filter/filterSettings.vue

@@ -100,6 +100,7 @@
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -255,6 +256,7 @@
               :label="filter.label"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>

package/src/components/icon/index.vue

@@ -3,13 +3,15 @@
     :cursor="cursor"
     data-test-id="icon_wrapper"
     :disabled="disabled"
-    :size="size"
+    :height="height ? height : size"
+    :width="width ? width : size"
   >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -67,6 +69,16 @@
       default: '30px',
       type: String,
     },
+    width: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '',
+    },
     cursor: {
       required: false,
       default: null,
@@ -97,10 +109,15 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
-    size: String,
+    height: String,
+    width: String,
     disabled: Boolean,
     cursor: String,
   })`
@@ -108,10 +125,10 @@
     position: relative;
     align-content: center;
     justify-content: center;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    min-width: ${(props) => props.size};
-    min-height: ${(props) => props.size};
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+    min-width: ${(props) => props.width};
+    min-height: ${(props) => props.height};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
     line-height: 0;
   `
@@ -152,6 +169,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -168,12 +186,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;

package/src/components/infoText/index.vue

@@ -46,7 +46,7 @@
       </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
+      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
           :app-theme="appTheme"
@@ -137,7 +137,7 @@
   `
 
   const TextWrapper = styled('div')`
-    z-index: 99999;
+    z-index: 9999999999;
     position: absolute;
   `
 

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

@@ -29,6 +29,9 @@ describe('InfoText Component', () => {
         provide: {
           theme,
         },
+        stubs: {
+          teleport: true
+        }
       },
     })
   })
@@ -38,7 +41,6 @@ describe('InfoText Component', () => {
     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 () => {
@@ -48,8 +50,11 @@ describe('InfoText Component', () => {
     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.vm.isVisible).toBe(true)
+
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       true
     )

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

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

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

@@ -56,6 +56,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -163,6 +164,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     :isReadOnly="true"
   //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
@@ -202,6 +204,7 @@
     showLinearUnitName: Boolean,
     colorMode: String,
     showArrowControls: Boolean,
+    readOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -250,7 +253,8 @@
         ? '0 4px 4px 0'
         : '4px'};
     text-align: ${(props) => props.textAlign};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
     font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     color: ${(props) =>
       props.isError
@@ -263,7 +267,9 @@
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.isDisabled
+      props.readOnly
+        ? props.theme.semanticColors.grey[300]
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? 'transparent'
           : props.theme.colors.grey5
@@ -276,6 +282,8 @@
     box-sizing: border-box;
     opacity: ${(props) =>
       props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
+    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
+    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -686,6 +694,10 @@
         type: Boolean,
         default: false,
       },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {