@eturnity/eturnity_reusable_components 8.13.10 → 8.13.12--EPDM-14330.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.10",
+  "version": "8.13.12--EPDM-14330.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/download.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="42" viewbox="-1 -1 42 42" width="42" xmlns="http://www.w3.org/2000/svg">
-<rect fill="white" height="40" rx="4" width="40"></rect>
-<path clip-rule="evenodd" d="M27 17.9975H22.6923V13H17.3077V17.9975H13L20 23.2339L27 17.9975ZM13 24.994L13.0075 27H26.9925L27 24.994H13Z" fill="#505CA6" fill-rule="evenodd"></path>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6.5L7 10.5L3 6.5" fill="white"/>
+<path d="M13 13H1M11 6.5L7 10.5M7 10.5L3 6.5M7 10.5V1" stroke="#6F20DC" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/assets/svgIcons/kanban_view.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2C2.44772 2 2 2.44772 2 3V9C2 9.55229 2.44772 10 3 10H3.5C4.05228 10 4.5 9.55229 4.5 9V3C4.5 2.44772 4.05228 2 3.5 2H3Z" fill="#6F20DC"/>
+<path d="M5.75 3C5.75 2.44772 6.19772 2 6.75 2H7.25C7.80228 2 8.25 2.44772 8.25 3V5C8.25 5.55228 7.80228 6 7.25 6H6.75C6.19772 6 5.75 5.55228 5.75 5V3Z" fill="#6F20DC"/>
+<path d="M10.5 2C9.94771 2 9.5 2.44772 9.5 3V11C9.5 11.5523 9.94771 12 10.5 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2H10.5Z" fill="#6F20DC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.89543 0.895431 0 2 0H12C13.1046 0 14 0.895431 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2ZM2 1H12C12.5523 1 13 1.44772 13 2V12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2C1 1.44772 1.44772 1 2 1Z" fill="#6F20DC"/>
+</svg>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
-<path d="M10 0H12V22H10V0Z" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1C6 0.447716 6.44772 0 7 0C7.55228 0 8 0.447715 8 1V13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13V1Z" fill="white"/>
+<path d="M13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8H1C0.447716 8 1.95702e-08 7.55228 4.37113e-08 7C6.78524e-08 6.44772 0.447715 6 1 6L13 6Z" fill="white"/>
 </svg>

package/src/assets/svgIcons/table_view.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="M0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2C0.895431 0 0 0.89543 0 2ZM7.5 3.5H13V6H7.5V3.5ZM6.5 3.5H1V6H6.5V3.5ZM1 7V9.5H6.5V7H1ZM1 10.5V12C1 12.5523 1.44772 13 2 13H6.5V10.5H1ZM7.5 13H12C12.5523 13 13 12.5523 13 12V10.5H7.5V13ZM13 9.5V7H7.5V9.5H13Z" fill="#263238"/>
+</svg>

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

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :fill-type="fillType"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -74,7 +75,7 @@
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
         : props.customColor
-        ? props.theme.colors.black
+        ? props.theme.colors.white
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.textColor};
     background-color: ${(props) =>
@@ -231,6 +232,11 @@
         default: false,
         type: Boolean,
       },
+      fillType: {
+        required: false,
+        default: 'fill',
+        type: String,
+      },
     },
     data() {
       return {

package/src/components/selectedOptions/index.vue

@@ -36,8 +36,9 @@
                 />
               </ListItemTitle>
               <Icon
-                color="white"
+                :color="theme.colors.white"
                 :cursor="item.disabled ? 'not-allowed' : 'pointer'"
+                :hovered-color="theme.colors.white"
                 name="arrow_right"
                 size="20px"
               />
@@ -86,7 +87,13 @@
         </EmptyText>
         <CloseContainer>
           <IconContainer @click="$emit('on-close')">
-            <Icon color="white" cursor="pointer" name="close" size="14px" />
+            <Icon
+              :color="theme.colors.white"
+              cursor="pointer"
+              :hovered-color="theme.colors.white"
+              name="close"
+              size="14px"
+            />
           </IconContainer>
         </CloseContainer>
       </BoxContainer>
@@ -131,6 +138,7 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
   import Icon from '../icon'
+  import theme from '../../assets/theme'
 
   const PageWrapper = styled.div`
     font-size: 13px;
@@ -397,6 +405,9 @@
       }
     },
     computed: {
+      theme() {
+        return theme
+      },
       hasComponent() {
         return this.optionsList.some((item) => item.component)
       },

package/src/components/spinner/index.vue

@@ -43,8 +43,8 @@
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    height: 100%;
+    width: 100%;
   `
 
   const wrapperAttrs = { size: String }

package/src/components/tabsHeader/index.vue

@@ -7,6 +7,21 @@
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
+        <RCIcon
+          v-if="item.icon"
+          :color="
+            activeTab === item.id
+              ? theme.semanticColors.purple[500]
+              : theme.semanticColors.teal[800]
+          "
+          :hovered-color="
+            activeTab === item.id
+              ? theme.semanticColors.purple[500]
+              : theme.semanticColors.teal[800]
+          "
+          :name="item.icon"
+          size="14px"
+        />
         <div>{{ item.text }}</div>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
@@ -34,6 +49,7 @@
   // />
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
+  import theme from '@/assets/theme'
 
   const PageContainer = styled.div``
 
@@ -51,17 +67,16 @@
     gap: 8px;
     padding: 10px 20px;
     font-size: 14px;
-    font-weight: 600;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.secondary : props.theme.colors.white};
+    font-weight: ${(props) => (props.isActive ? '500' : '400')};
+    background-color: ${(props) => props.theme.colors.white};
     color: ${(props) =>
       props.isActive
-        ? props.theme.colors.brightBlue
-        : props.theme.colors.black};
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
     border-bottom: ${(props) =>
       props.isActive
-        ? '4px solid' + props.theme.colors.brightBlue
-        : '1px solid' + props.theme.colors.grey4};
+        ? '1px solid' + props.theme.semanticColors.purple[400]
+        : '1px solid' + props.theme.semanticColors.purple[100]};
     flex-grow: 1;
   `
 
@@ -80,9 +95,14 @@
       },
       activeTab: {
         required: true,
-        type: Number,
+        type: [Number, String],
       },
     },
+    data() {
+      return {
+        theme,
+      }
+    },
     methods: {
       onTabClick({ id }) {
         if (id === this.activeTab) {