@eturnity/eturnity_reusable_components 8.10.3-EPDM-13568.6 → 8.10.3-EPDM-14085.2

package/src/components/draggableCard/index.vue

@@ -0,0 +1,354 @@
+<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>

package/src/components/filter/filterSettings.vue

@@ -297,13 +297,12 @@
       <MainButton
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        type="primary"
-        variant="cancel"
+        type="cancel"
         @click="$emit('on-cancel-view')"
       />
       <ResetContainer v-if="!filterViews || !filterViews.length">
         <ResetButton @click="$emit('on-reset-filters')">
-          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
+          <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
           <div>{{ $gettext('reset_filters') }}</div>
         </ResetButton>
       </ResetContainer>
@@ -476,7 +475,7 @@
     margin-top: 20px;
     align-self: center;
     font-size: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.blue};
     cursor: pointer;
   `
 

package/src/components/icon/index.vue

@@ -10,7 +10,6 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
-      :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
       <i data-test-id="icon_svg" v-html="icon.html"></i>
@@ -46,7 +45,6 @@
     disabled: {
       required: false,
       default: false,
-      type: Boolean,
     },
     name: {
       required: true,
@@ -54,48 +52,33 @@
     },
     color: {
       required: false,
-      default: null,
-      type: String,
     },
     hoveredColor: {
       required: false,
-      default: null,
-      type: String,
     },
     size: {
       required: false,
       default: '30px',
-      type: String,
     },
     cursor: {
       required: false,
       default: null,
-      type: String,
     },
     isStriked: {
       required: false,
       default: false,
-      type: Boolean,
     },
     backgroundColor: {
       required: false,
       default: null,
-      type: String,
     },
     count: {
       required: false,
       default: 0,
-      type: Number,
     },
     animation: {
       required: false,
       default: 'none',
-      type: String,
-    },
-    fillType: {
-      required: false,
-      default: 'fill',
-      type: String,
     },
   })
 
@@ -122,7 +105,7 @@
     right: -7px;
     background-color: ${({ theme }) => theme.colors.red};
     color: ${({ theme }) => theme.colors.white};
-    border-radius: 100%;
+    border-radius: 4px;
     width: 15px;
     height: 15px;
     display: flex;
@@ -146,14 +129,12 @@
     transform-origin: 0% 100%;
     transform: rotate(-45deg);
   `
-  const IconImageAttrs = {
+  const IconImage = styled('div', {
     color: String,
     backgroundColor: String,
     hoveredColor: String,
     animation: String,
-    fillType: String,
-  }
-  const IconImage = styled('div', IconImageAttrs)`
+  })`
     animation: ${(props) => props.animation};
     width: 100%;
     svg {
@@ -162,17 +143,13 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: ${(props) => (props.backgroundColor ? '8px' : '0')};
     }
     svg path:not(.fix) {
-      ${({ theme, color, fillType }) =>
-        color && `${fillType}: ${theme.colors[color] || color};`}
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
     &:hover svg path:not(.fix) {
-      ${(props) =>
-        `fill: ${
-          props.hoveredColor || props.theme.semanticColors.purple[500]
-        };`}
+      ${({ theme, hoveredColor }) =>
+        hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }
     &:hover + div {
       background-color: ${(props) => props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -12,9 +12,8 @@
     <RCIcon
       :color="iconColor ? iconColor : presetStyles.iconColor"
       data-test-id="info_card_icon"
-      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-      :name="iconName"
-      size="18px"
+      name="info"
+      size="24px"
     />
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
@@ -40,7 +39,7 @@
     display: flex;
     align-items: ${(props) =>
       props.alignItems ? props.alignItems : props.presetStyles.alignItems};
-    gap: 16px;
+    gap: 15px;
     min-width: ${(props) => props.minWidth};
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
@@ -58,7 +57,7 @@
   `
 
   const TextContainer = styled.div`
-    font-size: 14px;
+    font-size: 13px;
     width: 100%;
   `
 
@@ -122,24 +121,21 @@
       isErrorMinor() {
         return this.type === 'error_minor'
       },
-      iconName() {
-        return this.type === 'warning' ? 'warning_triangle' : 'info'
-      },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
         // to avoid flickering in case the same info card would switch the types
         let stylesCollection = {
           alignItems: 'flex-start',
-          padding: '8px 6px 8px 16px',
+          padding: '20px',
           borderWidth: '1px',
           borderStyle: 'solid',
           borderColor: 'transparent',
         }
 
         if (this.isWarning) {
-          stylesCollection.color = theme.semanticColors.teal[800]
-          stylesCollection.backgroundColor = theme.semanticColors.yellow[300]
-          stylesCollection.iconColor = theme.semanticColors.teal[800]
+          stylesCollection.color = theme.colors.white
+          stylesCollection.backgroundColor = theme.colors.yellow
+          stylesCollection.iconColor = theme.colors.white
         } else if (this.isErrorMinor) {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.pureRed

package/src/components/infoText/index.vue

@@ -48,7 +48,6 @@
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
-          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -93,8 +92,10 @@
     width: Number,
   }
   const TextOverlay = styled('div', TextOverlayAttrs)`
+    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;
@@ -121,11 +122,7 @@
   //   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};
+  //     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'};
   // `

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

@@ -25,7 +25,6 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
-        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -475,10 +474,6 @@
     },
     inheritAttrs: false,
     props: {
-      appTheme: {
-        type: String,
-        required: false,
-      },
       placeholder: {
         type: String,
         required: 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"
@@ -264,11 +263,6 @@
         default: '',
         type: String,
       },
-      appTheme: {
-        type: String,
-        required: false,
-        default: 'light',
-      },
       alignItems: {
         required: false,
         default: 'horizontal',

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

@@ -8,12 +8,11 @@
   >
     <ModalContainer
       v-if="isOpen"
-      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer v-if="!isLoading">
+      <ContentContainer :visible="!isLoading">
         <slot></slot>
       </ContentContainer>
       <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
@@ -63,7 +62,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
+  const modalContainerAttrs = { overflow: String }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -75,8 +74,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
-    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
+    min-width: 100px;
+    min-height: 100px;
 
     ::-webkit-scrollbar {
       width: 0.3em;

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>