@eturnity/eturnity_reusable_components 6.50.1 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.50.1",
+  "version": "7.2.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -114,6 +114,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+import infoCard from '@/components/infoCard'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -138,7 +139,8 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon
+    icon,
+    infoCard
   },
   data() {
     return {

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <page-container :shouldPosition="shouldPosition">
-    <button-container>
+    <button-container :data-id="dataId">
       <plus-button :src="require('../../assets/icons/plus_button.svg')" />
     </button-container>
   </page-container>
@@ -8,11 +8,11 @@
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const pageAttrs = { shouldPosition: Boolean }
-const PageContainer = styled("div", pageAttrs)`
-  position: ${(props) => (props.shouldPosition ? "fixed" : "unset")};
+const PageContainer = styled('div', pageAttrs)`
+  position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
   bottom: 30px;
   right: 30px;
 `
@@ -42,17 +42,21 @@ const ButtonContainer = styled.div`
 const PlusButton = styled.img``
 
 export default {
-  name: "add-new-button",
+  name: 'add-new-button',
   components: {
     PageContainer,
     ButtonContainer,
-    PlusButton,
+    PlusButton
   },
   props: {
     shouldPosition: {
       required: false,
-      default: true,
+      default: true
     },
-  },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  }
 }
 </script>

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

@@ -22,7 +22,7 @@
 //   type="secondary" // primary, secondary, cancel
 //   :isDisabled="true"
 //   :minWidth="minWidth"
-//   :dataId="test_data_id"
+//   :data-id="test_data_id"
 // />
 
 import styled from 'vue-styled-components'

package/src/components/iconWrapper/index.vue

@@ -8,6 +8,7 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
+    :data-id="dataId"
   >
     <icon
       :disabled="disabled"
@@ -110,10 +111,10 @@ export default {
       required: false
     },
     backgroundColor: {
-      required: false,
-      },
-      hasBorder: {
-        required: false,
+      required: false
+    },
+    hasBorder: {
+      required: false
     },
     hoveredBackgroundColor: {
       required: false,
@@ -135,18 +136,21 @@ export default {
       required: false,
       default: '6px'
     },
-    isHovered:{
-      required:false,
-      default:false
-      },
-      isStriked:{
-        required:false,
-        default:false
-    
-      }
+    dataId: {
+      type: String,
+      default: ''
     },
-    data() {
-      return {}
+    isHovered: {
+      required: false,
+      default: false
+    },
+    isStriked: {
+      required: false,
+      default: false
     }
+  },
+  data() {
+    return {}
   }
+}
 </script>

package/src/components/infoCard/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <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')`
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+  padding: 20px;
+  width: 500px;
+  min-width: 450px;
+  border: 1px dashed #dee2eb;
+  border-radius: 4px;
+  margin:20px 0;
+`
+
+const InfoTextContainer = styled('div')`
+  font-size: 13px;
+`
+
+
+export default {
+    components:{
+        icon,
+        InfoTextContainer,
+        InfoContainer
+    },
+    props:[]
+}
+</script>

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

@@ -8,7 +8,7 @@
         <input-label
           :labelFontColor="labelFontColor"
           :fontSize="fontSize"
-          :dataId="labelDataId"
+          :data-id="labelDataId"
           >{{ label }}
           <optionalLabel v-if="labelOptional"
             >({{ $gettext('Optional') }})</optionalLabel
@@ -44,7 +44,7 @@
             :hasFocus="hasFocus"
             :backgroundColor="backgroundColor"
             :disabledBackgroundColor="disabledBackgroundColor"
-            :dataId="inputDataId"
+            :data-id="inputDataId"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"

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

@@ -11,7 +11,7 @@
         :inputWidth="inputWidth"
         :isFilter="isFilter"
         :hasFocus="hasFocus"
-        :dataId="dataId"
+        :data-id="dataId"
       />
       <img
         class="search-icn"
@@ -31,7 +31,7 @@
 //   inputWidth="250px"
 //   @on-change="function($event)"
 //   :isFilter="true" // to set the height at 30px
-//   dataId="test-data-id"
+//   data-id="test-data-id"
 // />
 import styled from 'vue-styled-components'
 

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

@@ -45,6 +45,7 @@
           :disabled="disabled"
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
+          :data-id="dataId"
         >
           <inputText
             v-if="isSearchBarVisible"
@@ -122,7 +123,8 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
-//     label-data-id="test-data-id"
+//     label-data-id="test-label0data-id"
+//     data-id="test-data-id"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -391,6 +393,10 @@ export default {
     showBorder: {
       required: false,
       default: true
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
   },
 
@@ -471,7 +477,7 @@ export default {
       }
     },
     optionLeave() {
-      if(this.dropdownAutoClose) {
+      if (this.dropdownAutoClose) {
         this.isDropdownOpen = false
       }
     },

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

@@ -10,6 +10,8 @@
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
         :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
         <label-text :size="size">{{ label }}</label-text>
         <info-text
@@ -35,6 +37,7 @@
           :primaryColor="primaryColor"
           :secondaryColor="secondaryColor"
           :inactiveColor="inactiveColor"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
         >
           {{ item.content }}
         </switchOption>
@@ -99,10 +102,12 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean
+  isChecked: Boolean,
+  secondaryColor: String,
+  primaryColor: String,
 }
 const LabelText = styled('div', toggleAttrs)`
-  color: white;
+  color: ${(props) => props.primaryColor };
   font-size: 13px;
   font-weight: 700;
 `

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

@@ -74,7 +74,7 @@
 //   :disabled="true"
 //   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
-//   dataId="test_data_id"
+//   data-id="test_data_id"
 // />
 
 import styled from 'vue-styled-components'

package/src/components/navigationTabs/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <roofTabWrap>
+    <tab
+      v-for="(tab, index) in tabsData"
+      :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :hasDisabledLook="!!tab['hasDisabledLook']"
+      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
+      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
+    >
+        <Option :isDisabled="!!tab['isDisabled']" :hasDisabledLook="!!tab['hasDisabledLook']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                borderColor="#ccc"
+                size="14px"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
+    </tab>
+    <bottomLine />
+  </roofTabWrap>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+const TabAttr = {
+  active: Boolean,
+  isDisabled: Boolean,
+  hasDisabledLook: Boolean
+}
+
+const bottomLine = styled('div')`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #b2b9c5;
+`
+const roofTabWrap = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 13px;
+  font-weight: 700;
+`
+const Uppercase = styled('span')`
+  text-transform: uppercase;
+`
+const Option = styled('div',TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${props=>props.hasDisabledLook ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
+const Tab = styled('div', TabAttr)`
+  padding: 16px 10px;
+  margin-right: 5px;
+  position: relative;
+  top: ${(props) => (props.hasDisabledLook ? '-1px' : '0')};
+  z-index: 10;
+  border-bottom: 2px solid
+    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
+  background-color: ${(props) => (props.hasDisabledLook ? props.theme.colors.grey5 : 'transparent')};
+  transition: 0.2s ease;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  min-width: 140px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 55px;
+  &:hover {
+    border-color: ${(props) => props.hasDisabledLook ? props.theme.colors.grey2 : props.theme.colors.primary};
+  }
+`
+
+export default {
+  name: 'Tabs',
+
+  components: {
+    Tab,
+    bottomLine,
+    roofTabWrap,
+    Option,
+    InfoText,
+    Uppercase
+  },
+
+  props: {
+    tabsData: { required: true },
+    activeTab: { required: true },
+    isIndexKey: { type: Boolean, default: false },
+    tabKey: { type: String, default: '' },
+    tabLabel: { type: String, default: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/pageTitle/index.vue

@@ -1,5 +1,14 @@
 <template>
-  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <flex>
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+    <info-text
+        v-if="infoText"
+        :text="infoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="infoAlign"
+      />
+  </flex>
 </template>
 
 <script>
@@ -10,20 +19,28 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
-
+import InfoText from '../infoText'
 const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  
+`
+const flex = styled("div", textAttrs)`
+  display: flex;
+  gap:10px;
   margin-bottom: 20px;
+  align-items: center;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
+    InfoText,
+    flex
   },
   props: {
     text: {
@@ -39,7 +56,13 @@ export default {
     uppercase: {
       required: false,
       default: true
-    }
+    },
+    infoText: {
+      required: false,
+    },
+    infoAlign: {
+      required: false,
+    },
   },
 }
 </script>

package/src/components/sideMenu/index.vue

@@ -18,7 +18,10 @@
           <list-text>{{ $gettext(item.label) }}</list-text>
         </list-item>
         <collapse-wrapper v-else :key="idx + item.key">
-          <collapse-container @click="toggleActiveDropdown(item.key)">
+          <collapse-container
+            :data-id="`sub_menu_settings_${item.key}`"
+            @click="toggleActiveDropdown(item.key)"
+          >
             <icon-container :isActive="activeParentTab === item.key">
               <icon
                 :name="item.icon"
@@ -41,6 +44,7 @@
               v-for="subItem in item.children"
               :key="subItem.key"
               :isActive="activeTab === subItem.key"
+              :data-id="`sub_menu_settings_${subItem.key}`"
               @click="
                 $emit('tab-click', {
                   activeKey: subItem.key,