@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.6 → 6.37.0-EPDM-2198.1

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

@@ -5,15 +5,20 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
-          label
-        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          :data-id="labelDataId"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
+          :alignArrow="infoTextAlign"
         />
       </label-wrapper>
       <input-error-wrapper>
@@ -28,6 +33,7 @@
             :value="value"
             @input="onChangeHandler"
             @blur="onInputBlur"
+            @keyup.enter="onEnterPress"
             :noBorder="noBorder"
             :disabled="disabled"
             :isDisabled="disabled"
@@ -38,6 +44,7 @@
             :hasFocus="hasFocus"
             :backgroundColor="backgroundColor"
             :disabledBackgroundColor="disabledBackgroundColor"
+            :data-id="inputDataId"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -310,9 +317,21 @@ export default {
     },
     borderColor: {
       required: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {
+    onEnterPress(event){
+      this.$emit('on-enter-click')
+      this.$refs.inputElement.$el.blur()
+    },
     onChangeHandler($event) {
       this.$emit('input-change', $event)
     },

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

@@ -1,7 +1,12 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value" :checkmarkColor="checkmarkColor">
+      <label-container
+        :size="size"
+        :isDisabled="item.disabled"
+        :isChecked="selectedOption === item.value"
+        :checkmarkColor="checkmarkColor"
+      >
         <radio
           type="radio"
           :value="selectedOption"
@@ -9,6 +14,7 @@
           :name="'radioButtons_' + radioName"
           :checked="selectedOption === item.value"
           :disabled="item.disabled"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
         <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
@@ -54,17 +60,17 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from "vue-styled-components"
-import Modal from "../../modals/modal"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import Modal from '../../modals/modal'
+import InfoText from '../../infoText'
 
 const wrapperProps = {
-  layout: String,
+  layout: String
 }
-const ComponentWrapper = styled("div", wrapperProps)`
+const ComponentWrapper = styled('div', wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
-    props.layout === "vertical" ? "column" : "row"};
+    props.layout === 'vertical' ? 'column' : 'row'};
   grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
@@ -83,8 +89,13 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean, checkmarkColor: String }
-const LabelContainer = styled("label", containerProps)`
+const containerProps = {
+  size: String,
+  isDisabled: Boolean,
+  isChecked: Boolean,
+  checkmarkColor: String
+}
+const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
@@ -92,30 +103,30 @@ const LabelContainer = styled("label", containerProps)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: ${(props) =>
-    props.size === "large"
-      ? "16px"
-      : props.size === "medium"
-        ? "13px"
-        : "10px"};
+    props.size === 'large'
+      ? '16px'
+      : props.size === 'medium'
+      ? '13px'
+      : '10px'};
   user-select: none;
   flex: auto;
   align-self: baseline;
 
   .checkmark {
     height: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     width: ${(props) =>
-      props.size === "large"
-        ? "23px"
-        : props.size === "medium"
-          ? "16px"
-          : "12px"};
+      props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
+        ? '16px'
+        : '12px'};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -124,28 +135,29 @@ const LabelContainer = styled("label", containerProps)`
     justify-content: center;
 
     &:after {
-      content: "";
-      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      content: '';
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
       width: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       height: ${(props) =>
-        props.size === "large"
-          ? "10px"
-          : props.size === "medium"
-            ? "8px"
-            : "6px"};
+        props.size === 'large'
+          ? '10px'
+          : props.size === 'medium'
+          ? '8px'
+          : '6px'};
       border-radius: 100%;
-      background: ${(props) => props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
+      background: ${(props) =>
+        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
 
 const textAttrs = { isDisabled: Boolean }
-const LabelText = styled("div", textAttrs)`
+const LabelText = styled('div', textAttrs)`
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
@@ -186,7 +198,7 @@ const ModalImageContainer = styled.div`
 `
 
 export default {
-  name: "radio-button",
+  name: 'radio-button',
   components: {
     Radio,
     ComponentWrapper,
@@ -198,24 +210,24 @@ export default {
     ModalImage,
     ModalImageContainer,
     InfoText,
-    LabelText,
+    LabelText
   },
   props: {
     selectedOption: {
       required: true,
-      default: false,
+      default: false
     },
     options: {
       required: true,
-      default: [],
+      default: []
     },
     layout: {
       required: false,
-      default: "horizontal", //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
     },
     size: {
       required: false,
-      default: "medium", // small, medium, large
+      default: 'medium' // small, medium, large
     },
     name: {
       required: false,
@@ -224,6 +236,10 @@ export default {
     checkmarkColor: {
       required: false,
       default: ''
+    },
+    dataId: {
+      type: String,
+      default: 'key'
     }
   },
   data() {
@@ -234,17 +250,18 @@ export default {
   },
   methods: {
     onInputHandler(value) {
-      this.$emit("on-radio-change", value)
+      this.$emit('on-radio-change', value)
     },
     isImageOpen(index) {
       return this.selectedImage === index
     },
     toggleImageModal(value) {
       this.selectedImage = value
-    },
+    }
   },
   created() {
-    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
-  },
+    this.radioName =
+      this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+  }
 }
 </script>

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

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