@eturnity/eturnity_reusable_components 7.6.1-EPDM-9777.4 → 7.6.1-qa-16-02-15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.6.1-EPDM-9777.4",
+  "version": "7.6.1-qa-16-02-15.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/theme.js

@@ -13,6 +13,7 @@ const theme = {
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',
+    brightBlue: '#0068DE',
     grey1: '#666',
     grey2: '#c4c4c4',
     grey3: '#b2b9c5',

package/src/components/infoCard/index.vue

@@ -1,36 +1,38 @@
 <template>
-  <info-container>
-    <icon name="info" size="24px" />
-    <text-container>
-      <slot />
-    </text-container>
-  </info-container>
+    <info-container>
+            <icon name="info" size="24px" />
+      <InfoTextContainer>
+        <slot />
+      </InfoTextContainer>
+    </info-container>
 </template>
-
+    
 <script>
 import styled from 'vue-styled-components'
-import Icon from '../icon'
-
-const InfoContainer = styled.div`
+import icon from '../icon'
+const InfoContainer = styled('div')`
   display: flex;
+  align-items: flex-start;
   gap: 15px;
   padding: 20px;
-  border: 1px dashed ${(props) => props.theme.colors.grey4};
+  width: 500px;
+  min-width: 450px;
+  border: 1px dashed #dee2eb;
   border-radius: 4px;
+  margin:20px 0;
 `
 
-const TextContainer = styled.div`
+const InfoTextContainer = styled('div')`
   font-size: 13px;
-  width: 100%;
 `
 
 
 export default {
-  name: 'InfoCard',
-  components: {
-    Icon,
-    InfoContainer,
-    TextContainer
-  }
+    components:{
+        icon,
+        InfoTextContainer,
+        InfoContainer
+    },
+    props:[]
 }
 </script>

package/src/components/infoText/index.vue

@@ -58,7 +58,6 @@ const TextOverlay = styled('div', textAttrs)`
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
-  line-height: normal;
   border-radius: 4px;
   z-index: 99;
   color: ${(props) => props.theme.colors.white};

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

@@ -3,7 +3,6 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
@@ -27,7 +26,7 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
@@ -137,10 +136,6 @@ export default {
       required: true,
       default: false
     },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
     isLoading: {
       required: false,
       default: false
@@ -158,20 +153,30 @@ export default {
       default: 'fixed'
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    onOutsideClose() {
-      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
-      if (!this.preventOutsideClose) {
-        this.$emit('on-close')
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
       }
     }
   },
   watch: {
-    isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? 'hidden' : ''
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
     }
   }
 }

package/src/components/pagination/index.vue

@@ -7,7 +7,11 @@
       @click="fetchPage(paginationParams.previous)"
     >
       <arrowIconContainer>
-        <icon name="arrow_left" color="#0068de" size="12px" />
+        <icon
+          name="arrow_left"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
       </arrowIconContainer>
       <arrowText>{{ $gettext('back') }}</arrowText>
     </paginationLink>
@@ -55,7 +59,11 @@
     >
       <arrowText>{{ $gettext('forward') }}</arrowText>
       <arrowIconContainer>
-        <icon name="arrow_right" color="#0068de" size="12px" />
+        <icon
+          name="arrow_right"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
       </arrowIconContainer>
     </paginationLink>
   </paginationWrapper>
@@ -64,8 +72,10 @@
 <script>
 import styled from 'vue-styled-components'
 import icon from '../icon'
+import theme from '@/assets/theme.js'
+
 const paginationWrapper = styled.nav`
-  color: #0068de;
+  color: ${(props) => props.theme.brightBlue};
   font-size: 13px;
   display: flex;
   flex-wrap: wrap;
@@ -85,7 +95,7 @@ const paginationLink = styled.div`
 
   &.active {
     color: #fff;
-    background-color: #0068de;
+    background-color: ${(props) => props.theme.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }
@@ -106,6 +116,11 @@ export default {
     arrowIconContainer
   },
   props: ['fetchPage', 'currentPage', 'paginationParams'],
+  computed: {
+    getTheme() {
+      return theme
+    }
+  },
   methods: {
     getNewProjects(num) {
       this.$emit('on-pagination-change', num)

package/src/components/tables/mainTable/index.vue

@@ -10,7 +10,7 @@
       ref="tableRef"
       :isPositionAbsolute="doesTableContainDraggables"
     >
-      <table-wrapper :fullWidth="fullWidth">
+      <table-wrapper class="main-table-wrapper" :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
@@ -72,7 +72,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   overflow-y: hidden;
 
   ::-webkit-scrollbar {
-    height: 5px; //height of the whole scrollbar area
+    height: 10px; //height of the whole scrollbar area
   }
 
   ::-webkit-scrollbar-track {
@@ -81,7 +81,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 
   ::-webkit-scrollbar-thumb {
-    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
+    border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
     border-radius: 4px;
   }
 `

package/src/components/threeDots/index.vue

@@ -23,17 +23,17 @@
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
-              onSelect({
-                item: child,
-                hasChildren: hasChildren(child)
-              })
-            "
+            onSelect({
+              item: child,
+              hasChildren: hasChildren(child)
+            })
+          "
             @keyup.enter.stop="
-              onSelect({
-                item: child,
-                hasChildren: hasChildren(child)
-              })
-            "
+            onSelect({
+              item: child,
+              hasChildren: hasChildren(child)
+            })
+          "
           >
             {{ child.name }}
           </option-child>
@@ -45,11 +45,10 @@
             tabindex="0"
             @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
             @keyup.enter="
-              onSelect({ item: item, hasChildren: hasChildren(item) })
-            "
+            onSelect({ item: item, hasChildren: hasChildren(item) })
+          "
             @mouseover="onItemHover({ index, item })"
             :isDisabled="item.disabled"
-            :title="item.title"
           >
             <arrow-left
               :hasChildren="hasChildren(item)"
@@ -69,10 +68,9 @@
 // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
 // To use:
 // <three-dots
-//   :isLoading="true"
 //   :options="listOptions"
-//   @on-click="onClick($event)"
 //   @on-select="onSelect($event)"
+//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -205,8 +203,6 @@ const OptionItem = styled('div', optionAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
-  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
-  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
   &:hover {
     background-color: #ebeef4;
@@ -372,9 +368,6 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
-        if (item.disabled) {
-          this.$emit('on-click', item)
-        }
         return
       }
       this.$emit('on-select', item)