@eturnity/eturnity_reusable_components 7.51.3 → 7.51.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.3",
+  "version": "7.51.4",
   "files": [
     "dist",
     "src"
@@ -16,8 +16,7 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage",
-    "prepublishOnly": "npm run test"
+    "test-coverage": "jest --coverage"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/assets/svgIcons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0686 17.0686C20.9771 13.1601 20.9771 6.83992 17.0686 2.93139C13.1601 -0.977131 6.83992 -0.977131 2.93139 2.93139C-0.977131 6.83992 -0.977131 13.1601 2.93139 17.0686C6.83992 20.9771 13.1601 20.9771 17.0686 17.0686ZM6.42412 8.50312L8.66944 10.7484L13.5759 5.842L15.3222 7.58836L10.4158 12.4948L8.66944 14.158L6.92308 12.4948L4.67775 10.2495L6.42412 8.50312Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/collapse_all.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
+  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
+</svg>

package/src/assets/svgIcons/expand_all.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 1.20459L11.3818 4.49095L10.6182 5.50914L6.99998 2.7955L3.3818 5.50914L2.61816 4.49095L6.99998 1.20459Z" fill="#263238"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 12.7954L11.3818 9.50905L10.6182 8.49086L6.99998 11.2045L3.3818 8.49086L2.61816 9.50905L6.99998 12.7954Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/export_document.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0H8.33405L11.7467 3.41264V6.7202H10.5248V4.88741H6.85927V1.22185H1.97185V12.2185H5.63741V13.4404H0.75V0ZM8.08112 1.47478V3.66556H10.2719L8.08112 1.47478ZM10.5554 7.99581L13.5233 10.9979L10.5554 14L9.68664 13.141L11.2017 11.6088H6.85805V10.387H11.2017L9.68664 8.85477L10.5554 7.99581Z" fill="#0D0D0D"/>
+</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/module.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_down.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 7.63636H4.55V0H9.45V7.63636H13.125L7 14L0.875 7.63636Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_up.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
+<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
+<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
+<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
+</svg>

package/src/assets/svgIcons/string_design.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
+<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
+<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/string_directions.svg

@@ -0,0 +1,10 @@
+<svg width="30" height="30" viewBox="8 8 14 14" fill="#263238" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_908_47480)" fill="#263238">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 19.75V8.5H9.5V19.75C9.5 20.1642 9.83579 20.5 10.25 20.5C10.6642 20.5 11 20.1642 11 19.75V10.25C11 9.2835 11.7835 8.5 12.75 8.5C13.7165 8.5 14.5 9.2835 14.5 10.25V21.5H13.5V10.25C13.5 9.83579 13.1642 9.5 12.75 9.5C12.3358 9.5 12 9.83579 12 10.25V19.75C12 20.7165 11.2165 21.5 10.25 21.5C9.2835 21.5 8.5 20.7165 8.5 19.75ZM20 9.5H15.5V8.5H20C20.8284 8.5 21.5 9.17157 21.5 10C21.5 10.8284 20.8284 11.5 20 11.5H17C16.7239 11.5 16.5 11.7239 16.5 12C16.5 12.2761 16.7239 12.5 17 12.5H20C20.8284 12.5 21.5 13.1716 21.5 14C21.5 14.8284 20.8284 15.5 20 15.5H17C16.7239 15.5 16.5 15.7239 16.5 16C16.5 16.2761 16.7239 16.5 17 16.5H20C20.8284 16.5 21.5 17.1716 21.5 18C21.5 18.8284 20.8284 19.5 20 19.5H17C16.7239 19.5 16.5 19.7239 16.5 20C16.5 20.2761 16.7239 20.5 17 20.5H21.5V21.5H17C16.1716 21.5 15.5 20.8284 15.5 20C15.5 19.1716 16.1716 18.5 17 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18C20.5 17.7239 20.2761 17.5 20 17.5H17C16.1716 17.5 15.5 16.8284 15.5 16C15.5 15.1716 16.1716 14.5 17 14.5H20C20.2761 14.5 20.5 14.2761 20.5 14C20.5 13.7239 20.2761 13.5 20 13.5H17C16.1716 13.5 15.5 12.8284 15.5 12C15.5 11.1716 16.1716 10.5 17 10.5H20C20.2761 10.5 20.5 10.2761 20.5 10C20.5 9.72386 20.2761 9.5 20 9.5Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_908_47480">
+<rect width="14" height="14" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/banner/notificationBanner/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <PageContainer v-if="showBanner">
+    <BannerContainer
+      :background-color="backgroundColor"
+      :text-color="textColor"
+    >
+      <IconContainer>
+        <RCIcon color="white" :name="iconName" size="20px" />
+      </IconContainer>
+      <TextContainer>
+        <TextContent>
+          {{ mainText }}
+        </TextContent>
+      </TextContainer>
+      <ButtonContainer>
+        <MainButton
+          :custom-color="theme.colors.white"
+          :font-color="theme.colors.black"
+          :text="buttonText"
+          @click="$emit('on-button-click')"
+        />
+      </ButtonContainer>
+    </BannerContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import NotificationBanner from "@eturnity/eturnity_reusable_components/src/components/banner/notificationBanner"
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../../icon'
+  import MainButton from '../../buttons/mainButton'
+  import theme from '@/assets/theme'
+
+  const PageContainer = styled.div`
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+  `
+
+  const bannerAttrs = { backgroundColor: String, textColor: String }
+  const BannerContainer = styled('div', bannerAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 20px;
+    padding: 10px 20px;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors[props.backgroundColor]};
+    color: ${(props) => props.theme.colors[props.textColor]};
+    font-size: 14px;
+  `
+
+  const IconContainer = styled.div``
+
+  const TextContainer = styled.div``
+
+  const TextContent = styled.div`
+    line-height: 150%;
+  `
+
+  const ButtonContainer = styled.div`
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+  `
+
+  export default {
+    name: 'NotificationBanner',
+    components: {
+      PageContainer,
+      BannerContainer,
+      RCIcon,
+      IconContainer,
+      TextContainer,
+      TextContent,
+      ButtonContainer,
+      MainButton,
+    },
+    props: {
+      backgroundColor: {
+        type: String,
+        default: 'green',
+        required: false,
+      },
+      textColor: {
+        type: String,
+        default: 'white',
+        required: false,
+      },
+      iconName: {
+        type: String,
+        default: 'checkmark',
+        required: false,
+      },
+      mainText: {
+        type: String,
+        required: true,
+      },
+      buttonText: {
+        type: String,
+        required: true,
+      },
+      isOpen: {
+        type: Boolean,
+        default: false,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        theme,
+        showBanner: false,
+      }
+    },
+    watch: {
+      isOpen(newVal) {
+        if (newVal) {
+          this.showBanner = true
+          setTimeout(() => {
+            this.showBanner = false
+            this.$emit('on-close')
+          }, 10000)
+        }
+      },
+    },
+  }
+</script>

package/src/components/buttons/buttonIcon/index.vue

@@ -52,7 +52,9 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
@@ -81,7 +83,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 15px;
+    padding: 0 14px;
   `
 
   const IconContainerAttrs = {

package/src/components/buttons/mainButton/index.vue

@@ -5,6 +5,7 @@
       :custom-color="customColor"
       :data-id="dataId"
       :font-color="fontColor"
+      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
@@ -43,12 +44,19 @@
     customColor: String,
     fontColor: String,
     noWrap: Boolean,
+    height: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
+    display: flex;
+    justify-content: center;
     padding: 7px 15px;
-    font-size: 13px;
+    font-size: 14px;
     color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.white};
+      props.isDisabled
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.disabled
@@ -67,6 +75,7 @@
     user-select: none;
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
+    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -141,6 +150,11 @@
         default: null,
         type: String,
       },
+      height: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       id: {
         required: false,
         default: null,

package/src/components/icon/index.vue

@@ -35,6 +35,7 @@
     },
     name: {
       required: true,
+      type: String,
     },
     color: {
       required: false,

package/src/components/infoText/index.vue

@@ -2,14 +2,16 @@
   <PageContainer ref="container">
     <div
       ref="icon"
-      @click="openTrigger === 'onClick' && toggleInfo()"
-      @mouseenter="openTrigger === 'onHover' && showInfo()"
-      @mouseleave="openTrigger === 'onHover' && hideInfo()"
+      data-test-id="infoText_trigger"
+      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
     >
       <IconComponent
-        :color="iconColor"
-        cursor="pointer"
-        name="info"
+        :color="iconColor || computedIconColor"
+        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+        :disabled="isDisabled"
+        :name="iconName"
         :size="size"
       />
     </div>
@@ -111,8 +113,9 @@
     },
     props: {
       text: {
-        type: String,
+        required: false,
         default: '',
+        type: String,
       },
       size: {
         type: String,
@@ -142,6 +145,20 @@
         type: String,
         default: '',
       },
+      iconName: {
+        type: String,
+        default: 'info',
+      },
+      iconColor: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -155,6 +172,7 @@
       const boxStyle = ref({})
       const arrowStyle = ref({})
       const wrapperStyle = ref({})
+      const isMobile = ref(window.innerWidth <= 768)
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
@@ -287,7 +305,10 @@
       }
 
       const handleClickOutside = (event) => {
-        if (props.openTrigger === 'onClick' && isVisible.value) {
+        if (
+          (props.openTrigger === 'onClick' || isMobile.value) &&
+          isVisible.value
+        ) {
           const clickedElement = event.target
           if (
             infoBox.value &&
@@ -299,9 +320,14 @@
         }
       }
 
+      const handleResize = () => {
+        isMobile.value = window.innerWidth <= 768
+        updatePosition()
+      }
+
       onMounted(() => {
         window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', updatePosition)
+        window.addEventListener('resize', handleResize)
         document.addEventListener('scroll', handleScroll, {
           passive: true,
           capture: true,
@@ -311,7 +337,7 @@
 
       onUnmounted(() => {
         window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', updatePosition)
+        window.removeEventListener('resize', handleResize)
         document.removeEventListener('scroll', handleScroll, { capture: true })
         document.removeEventListener('click', handleClickOutside)
       })
@@ -339,10 +365,11 @@
         wrapperStyle,
         textStyle,
         onImageLoad,
+        isMobile,
       }
     },
     computed: {
-      iconColor() {
+      computedIconColor() {
         return this.buttonType === 'error'
           ? theme.colors.red
           : theme.colors.mediumGray

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

@@ -19,7 +19,7 @@
       <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
       </CheckWrapper>
-      <LabelText v-if="hasLabel">
+      <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
       </LabelText>
     </Container>
@@ -90,18 +90,20 @@
           ? '16px'
           : '25px'};
       background-color: ${(props) =>
-        props.isChecked
+        props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.isChecked
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.isDisabled
-          ? props.theme.colors.lightGray
           : props.theme.colors.white};
       border-radius: 4px;
       border: 1px solid
         ${(props) =>
           props.isChecked
-            ? props.backgroundColor
+            ? props.isDisabled
+              ? props.theme.colors.lightGray
+              : props.backgroundColor
               ? props.backgroundColor
               : props.theme.colors.green
             : props.theme.colors.mediumGray};
@@ -140,7 +142,11 @@
           : '10px'};
       border: solid
         ${(props) =>
-          props.checkColor ? props.checkColor : props.theme.colors.white};
+          props.isDisabled
+            ? props.theme.colors.green
+            : props.checkColor
+            ? props.checkColor
+            : props.theme.colors.white};
       border-width: ${(props) =>
         props.size === 'medium'
           ? '0 3px 3px 0'
@@ -160,11 +166,16 @@
     width: 0;
   `
 
-  const LabelText = styled.div`
+  const LabelTextAttrs = {
+    isDisabled: Boolean,
+  }
+  const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
     display: grid;
-    align-items: flex-start;
+    align-items: center;
     min-height: 18px;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {