@eturnity/eturnity_reusable_components 6.48.2-test-ext-02.0 → 6.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.2-test-ext-02.0",
+  "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/App.vue

@@ -114,7 +114,6 @@ 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`
@@ -139,8 +138,7 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon,
-    infoCard
+    icon
   },
   data() {
     return {

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

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

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

@@ -1,38 +0,0 @@
-<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>