@eturnity/eturnity_reusable_components 6.50.1-EPDM-8599.4 → 7.2.0

package/package.json

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

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/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

@@ -37,6 +37,7 @@
           :primaryColor="primaryColor"
           :secondaryColor="secondaryColor"
           :inactiveColor="inactiveColor"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
         >
           {{ item.content }}
         </switchOption>

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/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,