@eturnity/eturnity_reusable_components 1.2.16-QA03-23092022.4 → 1.2.16-QA03-23092022.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.16-QA03-23092022.4",
+  "version": "1.2.16-QA03-23092022.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -9,6 +9,7 @@
         test="koko"
         @keydown="keydownHandler"
       />
+
     </page-container>
   </ThemeProvider>
 </template>

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 99;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

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

@@ -45,6 +45,11 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
+      <icon
+        v-if="(isError || inputIcon) && !showLinearUnitName"
+        :class="inputIconImageClass"
+        :src="isError ? warningIcon : inputIconImage"
+      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -82,6 +87,8 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+import warningIcon from '../../../assets/icons/error_icon.png'
 
 const inputProps = {
   isError: Boolean,
@@ -143,6 +150,15 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -191,12 +207,12 @@ const SlotContainer = styled('span', inputProps)`
       ? props.theme.colors.black
       : props.theme.colors.mediumGray};
 `
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
+// const ErrorMessage = styled.div`
+//   font-size: 14px;
+//   color: ${(props) => props.theme.colors.red};
+//   position: absolute;
+//   top: calc(100% + 1px);
+// `
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -220,13 +236,15 @@ export default {
     LabelWrapper,
     LabelText,
     SlotContainer,
-    InfoText
+    InfoText,
+    Icon
   },
   inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
+      isFocused: false,
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -312,6 +330,21 @@ export default {
     },
     slotSize: {
       required: false
+    },
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
+    },
+    inputIconImageClass: {
+      require: false,
+      type: Array,
+      default: () => []
     }
   },
   computed: {