@eturnity/eturnity_reusable_components 6.48.2 → 6.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.2",
+  "version": "6.50.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/assets/svgIcons/integrations.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11H16C17.1046 0 18 0.895431 18 2V12H12C10.8954 12 10 11.1046 10 10V4L0 4V2C0 0.89543 0.895431 0 2 0H10ZM0 6H6C7.10457 6 8 6.89543 8 8V14H18V16C18 17.1046 17.1046 18 16 18H8H7H2C0.895431 18 0 17.1046 0 16V6Z" fill="white"/>
+</svg>

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

@@ -6,6 +6,7 @@
       :isDisabled="isDisabled"
       :customColor="customColor"
       :noWrap="noWrap"
+      :data-id="dataId"
     >
       {{ text }}
     </button-container>
@@ -21,38 +22,45 @@
 //   type="secondary" // primary, secondary, cancel
 //   :isDisabled="true"
 //   :minWidth="minWidth"
+//   :dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
-const ButtonContainer = styled("div", ButtonAttrs)`
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  noWrap: Boolean
+}
+const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-      props.isDisabled
-          ? props.theme.colors.disabled
-          : props.customColor
-              ? props.customColor
-              : props.type === "primary"
-                  ? props.theme.colors.black
-                  : props.type === "secondary"
-                      ? props.theme.colors.grey3
-                      : props.type === "cancel"
-                          ? props.theme.colors.red
-                          : props.theme.colors.black};
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.type === 'primary'
+      ? props.theme.colors.black
+      : props.type === 'secondary'
+      ? props.theme.colors.grey3
+      : props.type === 'cancel'
+      ? props.theme.colors.red
+      : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
   ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+    opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
   }
 
   &:active {
@@ -61,26 +69,26 @@ const ButtonContainer = styled("div", ButtonAttrs)`
 `
 
 export default {
-  name: "main-button",
+  name: 'main-button',
   components: {
     PageContainer,
-    ButtonContainer,
+    ButtonContainer
   },
   props: {
     type: {
       required: false,
-      default: "primary",
+      default: 'primary'
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     text: {
-      required: true,
+      required: true
     },
     customColor: {
       required: false,
-      default: null,
+      default: null
     },
     noWrap: {
       required: false,
@@ -89,7 +97,11 @@ export default {
     minWidth: {
       required: false,
       default: null
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
-  },
+  }
 }
 </script>

package/src/components/iconWrapper/index.vue

@@ -8,63 +8,85 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-    >
-        <icon :disabled="disabled" 
-            :size="iconSize" 
-            :name="name" 
-            :color="iconColor" 
-            :hoveredColor="hoveredIconColor" 
-            :isStriked="isStriked"
-            />
-            
-        <caret v-if="hasCaret">
-          <iconWrapper :disabled="disabled" 
-            size="10px" 
-            name="arrow_down" 
-            :iconColor="iconColor" 
-            :hoveredBackgroundColor="hoveredIconColor"
-            borderRadius="1px"
-            />  
-        </caret>
-    </Wrapper>
-  </template>
-  
-  <script>
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-   
-  import styled from 'vue-styled-components'
-  import icon from '../icon'
-  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
-    position:relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
-    justify-content:center;
-    align-items:center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    border-radius: ${(props) => props.borderRadius};
-    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
-    &:hover{
-        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
-    }
-  `
-  const caret=styled.div`
-  position:absolute;
-  bottom:3px;
-  right:2px;
-  height:10px;
-  `
-  
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <caret v-if="hasCaret">
+      <iconWrapper
+        :disabled="disabled"
+        size="10px"
+        name="arrow_down"
+        :iconColor="iconColor"
+        :hoveredBackgroundColor="hoveredIconColor"
+        borderRadius="1px"
+      />
+    </caret>
+  </Wrapper>
+</template>
+
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<icon
+//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+//   color="red"
+//   hoveredColor="blue"
+//   size="60px" by default, this is 30px
+// />
+
+import styled from 'vue-styled-components'
+import icon from '../icon'
+const wrapperAttrs = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  justify-content: center;
+  align-items: center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  border-radius: ${(props) => props.borderRadius};
+  ${(props) =>
+    props.isHovered
+      ? 'background-color:' +
+          props.theme.colors[props.hoveredBackgroundColor] ||
+        props.hoveredBackgroundColor
+      : ''};
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBackgroundColor] ||
+      props.hoveredBackgroundColor};
+  }
+`
+const caret = styled.div`
+  position: absolute;
+  bottom: 3px;
+  right: 2px;
+  height: 10px;
+`
+
 export default {
   name: 'iconWrapper',
   components: {

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

@@ -11,6 +11,7 @@
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
+        :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
       <div>
@@ -168,6 +169,10 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
   },
   methods: {

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

@@ -84,6 +84,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     minWidth="100px"
 //     :numberPrecision="3"
+//     minDecimals="2"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
@@ -358,6 +359,10 @@ export default {
       required: false,
       default: 0
     },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
     unitName: {
       required: false,
       default: ''
@@ -498,7 +503,8 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
+            minDecimals: this.minDecimals
           })
           return num
         }
@@ -509,7 +515,8 @@ export default {
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       } else if (typeof evaluated === 'number') {
         evaluated = evaluated.toFixed(this.numberPrecision)
@@ -569,7 +576,8 @@ export default {
               : this.defaultNumber
               ? this.defaultNumber
               : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       }
       let adjustedMinValue =
@@ -614,7 +622,8 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
@@ -626,7 +635,8 @@ export default {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
       }
@@ -645,7 +655,8 @@ export default {
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
       //this.value=value
     },
@@ -660,17 +671,20 @@ export default {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.defaultNumber !== null) {
       this.textInput = numberToString({
         value: this.defaultNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     }
   },

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/select/index.vue

@@ -492,10 +492,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {

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

@@ -1,10 +1,18 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
     @click="clickHandler"
     @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
   >
     <slot></slot>
   </optionContainer>
@@ -14,18 +22,29 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String, backgroundColor: String }
+const optionProps = {
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: pointer;
+  cursor: ${(props) => props.cursorType};
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
-  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
@@ -47,6 +66,21 @@ export default {
     colorMode: {
       required: false,
       default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
+    },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -57,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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

@@ -1,6 +1,11 @@
 <template>
   <container>
-    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+    <flex-wrapper
+      :size="size"
+      :disabled="disabled"
+      @click="onToggleChange"
+      :data-id="dataId"
+    >
       <label-container
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
@@ -69,27 +74,28 @@
 //   :disabled="true"
 //   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
+//   dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const Container = styled.div`
   display: inline-block;
 `
 
 const flexAttrs = { size: String, disabled: Boolean }
-const FlexWrapper = styled("div", flexAttrs)`
+const FlexWrapper = styled('div', flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${(props) =>
-    props.size === "medium"
-      ? "20px"
-      : props.size === "small"
-      ? "10px"
-      : "20px"};
+    props.size === 'medium'
+      ? '20px'
+      : props.size === 'small'
+      ? '10px'
+      : '20px'};
   align-items: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 `
 
 const toggleAttrs = {
@@ -97,43 +103,43 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean,
+  isChecked: Boolean
 }
-const LabelText = styled("div", toggleAttrs)`
+const LabelText = styled('div', toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
   font-size: ${(props) =>
-    props.size === "medium"
-      ? "16px"
-      : props.size === "small"
-      ? "13px"
-      : "16px"};
+    props.size === 'medium'
+      ? '16px'
+      : props.size === 'small'
+      ? '13px'
+      : '16px'};
 `
 
-const ToggleWrapper = styled("span", toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
-      ? "1px solid " + props.theme.colors.disabled
+      ? '1px solid ' + props.theme.colors.disabled
       : props.isChecked
       ? props.backgroundColor
-        ? "1px solid " + props.backgroundColor
-        : "1px solid " + props.theme.colors.green
-      : "1px solid " + props.theme.colors.grey3}
+        ? '1px solid ' + props.backgroundColor
+        : '1px solid ' + props.theme.colors.green
+      : '1px solid ' + props.theme.colors.grey3}
   position: relative;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${(props) =>
-    props.size === "medium"
-      ? "50px"
-      : props.size === "small"
-      ? "29px"
-      : "50px"};
+    props.size === 'medium'
+      ? '50px'
+      : props.size === 'small'
+      ? '29px'
+      : '50px'};
   height: ${(props) =>
-    props.size === "medium"
-      ? "24px"
-      : props.size === "small"
-      ? "16px"
-      : "24px"};
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
   border-radius: 100px;
 
   &:focus {
@@ -149,9 +155,9 @@ const ToggleWrapper = styled("span", toggleAttrs)`
 const backgroundAttrs = {
   backgroundColor: String,
   isChecked: Boolean,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleBackground = styled("span", backgroundAttrs)`
+const ToggleBackground = styled('span', backgroundAttrs)`
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -171,25 +177,25 @@ const toggleProps = {
   isChecked: Boolean,
   toggleColor: String,
   size: String,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleDot = styled("span", toggleProps)`
+const ToggleDot = styled('span', toggleProps)`
   position: absolute;
   height: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   width: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   left: 3px
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -202,33 +208,33 @@ const ToggleDot = styled("span", toggleProps)`
   transition: transform 0.4s ease;
   transform: ${(props) =>
     props.isChecked
-      ? props.size === "medium"
-        ? "translateX(25px)"
-        : props.size === "small"
-        ? "translateX(12px)"
-        : "translateX(25px)"
-      : "translateX(0)"};
+      ? props.size === 'medium'
+        ? 'translateX(25px)'
+        : props.size === 'small'
+        ? 'translateX(12px)'
+        : 'translateX(25px)'
+      : 'translateX(0)'};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(25px)" : "translateX(0)"};
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
     bottom: 8px;
   }
 `
 
 const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled("div", labelAttrs)`
+const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? "auto 1fr" : "auto"};
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
   grid-gap: 12px;
   align-items: center;
 `
 
 export default {
-  name: "toggle",
+  name: 'toggle',
   components: {
     Container,
     ToggleBackground,
@@ -237,52 +243,56 @@ export default {
     FlexWrapper,
     LabelText,
     InfoText,
-    LabelContainer,
+    LabelContainer
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     toggleColor: {
-      required: false,
+      required: false
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "small",
+      default: 'small'
     },
     labelAlign: {
       required: false,
-      default: "right",
+      default: 'right'
     },
     fontColor: {
-      required: false,
+      required: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     infoTextMessage: {
-      required: false,
+      required: false
     },
     infoTextAlign: {
-      required: false,
+      required: false
     },
+    dataId: {
+      type: String,
+      default: ''
+    }
   },
   methods: {
     onToggleChange() {
       if (this.disabled) {
         return
       }
-      this.$emit("on-toggle-change", !this.isChecked)
-    },
-  },
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
+  }
 }
 </script>

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

@@ -37,7 +37,7 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/sideMenu/index.vue

@@ -8,6 +8,7 @@
         <list-item
           v-if="!item.children"
           :key="idx"
+          :data-id="`sub_menu_settings_${item.key}`"
           :isActive="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
@@ -57,6 +58,7 @@
       <icon-container
         :isActive="false"
         :isButton="true"
+        data-id="button_settings_logout"
         @click="$emit('on-logout')"
       >
         <rotate-icon

package/src/components/tableDropdown/index.vue

@@ -134,11 +134,13 @@
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}

package/src/helpers/numberConverter.js

@@ -91,19 +91,12 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision = 0 }) => {
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
   value = parseFloat(value)
-  let minNumberPrecision
-  let maxNumberPrecision
-  if (typeof numberPrecision === 'number') {
-    minNumberPrecision = numberPrecision
-    maxNumberPrecision = numberPrecision
-  } else {
-    minNumberPrecision = numberPrecision[0]
-    maxNumberPrecision = numberPrecision[1]
-  }
   return value.toLocaleString(langForLocaleString(), {
-    minimumFractionDigits: minNumberPrecision,
-    maximumFractionDigits: maxNumberPrecision
+    minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
+    maximumFractionDigits:
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
   })
 }