@eturnity/eturnity_reusable_components 8.19.8-EPDM-6306.4 → 8.19.8-EPDM-14690.4

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

@@ -240,6 +240,8 @@
         return this.isDisabled
           ? this.theme.mainButton[this.appTheme][this.type][this.variant]
               .disabled.textColor
+          : this.iconColor
+          ? this.iconColor
           : this.theme.mainButton[this.appTheme][this.type][this.variant]
               .default.textColor
       },

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    max-width: 100%;
+    /* max-width: 100%; */
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/icon/index.vue

@@ -208,9 +208,11 @@
       !props.disableHover &&
       `
      &:hover svg path:not(.fix, .isStrokePath) {
-      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
+      ${`${props.fillType}: ${
+        props.theme.colors[props.hoveredColor] || props.color
+      };`}
      &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.hoveredColor || props.color};`}
+      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
     }
     &:hover + div {
       background-color: ${props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -73,7 +73,12 @@
       type: {
         required: false,
         type: String,
-        default: 'info',
+        default: 'info_simple',
+        validator(value) {
+          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
+            value
+          )
+        },
       },
       minWidth: {
         required: false,
@@ -112,8 +117,11 @@
       },
     },
     computed: {
-      isInfo() {
+      isInfoSimple() {
         // this property is used for tests
+        return this.type === 'info_simple'
+      },
+      isInfo() {
         return this.type === 'info'
       },
       isWarning() {
@@ -148,9 +156,13 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
           stylesCollection.iconColor = theme.colors.red
-        } else {
+        } else if (this.isInfoSimple) {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
+        } else {
+          stylesCollection.color = theme.semanticColors.teal[800]
+          stylesCollection.backgroundColor = theme.semanticColors.blue[300]
+          stylesCollection.iconColor = theme.semanticColors.teal[800]
         }
 
         return stylesCollection

package/src/components/infoCard/infoCard.spec.js

@@ -45,19 +45,19 @@ describe('RCInfoCard.vue', () => {
         },
       })
 
-      expect(wrapper.vm.isInfo).toBe(true)
+      expect(wrapper.vm.isInfoSimple).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })

package/src/components/infoText/index.vue

@@ -15,37 +15,40 @@
         :is-disabled="isDisabled"
         :padding="padding"
       >
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'left'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-        <Dot
-          v-if="type === 'dot'"
-          :color="dotColor"
-          data-test-id="infoText_dot"
-        />
-        <IconComponent
-          v-else-if="!noIcon"
-          :color="iconColor || computedIconColor"
-          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-          :disabled="isDisabled"
-          :hovered-color="iconColor || computedIconColor"
-          :name="iconName"
-          :size="size"
-        />
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'right'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
+        <template v-if="!$slots.trigger">
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'left'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+          <Dot
+            v-if="type === 'dot'"
+            :color="dotColor"
+            data-test-id="infoText_dot"
+          />
+          <IconComponent
+            v-else-if="!noIcon"
+            :color="iconColor || computedIconColor"
+            :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+            :disabled="isDisabled"
+            :hovered-color="iconColor || computedIconColor"
+            :name="iconName"
+            :size="size"
+          />
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'right'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+        </template>
+        <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible" to="body">
+    <Teleport v-if="isVisible && !!text" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
@@ -227,7 +230,7 @@
       },
       infoPosition: {
         required: false,
-        default: 'bottom',
+        default: null,
         type: String,
       },
       maxWidth: {
@@ -363,7 +366,9 @@
           { position: 'left', space: spaceLeft },
         ].sort((a, b) => b.space - a.space)
 
-        const bestPosition = positions[0].position
+        const bestPosition = props.infoPosition
+          ? props.infoPosition
+          : positions[0].position
 
         let top, left, arrowPosition
 

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

@@ -30,7 +30,61 @@
       />
     </LabelWrapper>
     <InputWrapper>
+      <InputInfoText
+        v-if="!!inputInfoText"
+        info-position="bottom"
+        :text="inputInfoText"
+      >
+        <template #trigger>
+          <InputContainer
+            v-bind="$attrs"
+            ref="inputField1"
+            :align-items="alignItems"
+            :background-color="
+              colorMode === 'transparent' ? 'transparent' : backgroundColor
+            "
+            :border-color="
+              colorMode === 'transparent' && !borderColor
+                ? 'white'
+                : borderColor
+            "
+            :color-mode="colorMode"
+            :data-id="inputDataId"
+            :data-qa-id="dataQaId"
+            :disabled="disabled && !isDisabledStyledOnly"
+            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+            :font-size="fontSize"
+            :has-label-slot="hasLabelSlot"
+            :has-slot="hasSlot"
+            :has-unit="unitName && !!unitName.length"
+            :input-height="inputHeight"
+            :is-border-error-only="isBorderErrorOnly"
+            :is-disabled="disabled"
+            :is-error="isError"
+            :is-info-border="isInfoBorder"
+            :is-interactive="isInteractive"
+            :min-width="minWidth"
+            :no-border="noBorder"
+            :placeholder="displayedPlaceholder"
+            :read-only="isReadOnly"
+            :readonly="isReadOnly"
+            :show-arrow-controls="showArrowControls"
+            :show-linear-unit-name="showLinearUnitName"
+            :slot-size="slotSize"
+            :text-align="textAlign"
+            :value="formatWithCurrency(value)"
+            @blur="onInputBlur($event)"
+            @focus="focusInput()"
+            @input="onInput($event)"
+            @keydown.down="decrementValue"
+            @keydown.up="incrementValue"
+            @keyup.enter="onEnterPress"
+          />
+        </template>
+      </InputInfoText>
+
       <InputContainer
+        v-else
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
@@ -43,25 +97,28 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled"
+        :disabled="disabled && !isDisabledStyledOnly"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
+        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
+        :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
+        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formattedValue"
+        :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -69,18 +126,19 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
+
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="hasLength"
+        :has-length="!!textInput.length"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -92,7 +150,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="handleSelectChange"
+          @input-change="$emit('select-change', $event)"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -134,7 +192,9 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
   </Container>
 </template>
 
@@ -205,6 +265,8 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
+    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -217,7 +279,9 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
+      props.isInfoBorder
+        ? '1px solid ' + props.theme.semanticColors.blue[500]
+        : props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -236,16 +300,17 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
+      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName
+        ? isError && !showLinearUnitName && !isBorderErrorOnly
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName
+        : isError && !showLinearUnitName && !isBorderErrorOnly
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -457,18 +522,12 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const EVENT_TYPES = {
-    INPUT_FOCUS: 'input-focus',
-    INPUT_CHANGE: 'input-change',
-    INPUT_BLUR: 'input-blur',
-    PRESS_ENTER: 'on-enter-click',
-    INPUT_DRAG: 'on-input-drag',
-    SELECT_CHANGE: 'select-change',
-  }
+  const InputInfoText = styled(InfoText)`
+    width: 100%;
+  `
 
   export default {
     name: 'InputNumber',
-    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -490,6 +549,7 @@
       ArrowControls,
       ArrowButton,
       ArrowDivider,
+      InputInfoText,
     },
     inheritAttrs: false,
     props: {
@@ -709,13 +769,28 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
+      isInfoBorder: {
+        type: Boolean,
+        default: false,
+      },
+      inputInfoText: {
+        type: String,
+        default: '',
+      },
+      isDisabledStyledOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
+        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
-        inputValue: null,
-        enteredValue: null,
       }
     },
     computed: {
@@ -738,14 +813,6 @@
 
         return item ? item.label : '-'
       },
-      formattedValue() {
-        return this.isFocused
-          ? this.enteredValue
-          : this.formatWithCurrency(this.value)
-      },
-      hasLength() {
-        return this.formattedValue !== null && this.formattedValue.length > 0
-      },
     },
     watch: {
       focus(value) {
@@ -756,22 +823,30 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.inputValue = ''
-          this.enteredValue = ''
+          this.textInput = ''
         }
       },
-      value: {
-        immediate: true,
-        handler(val) {
-          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
-            this.inputValue = this.value
-            this.enteredValue =
-              typeof this.value === 'number' && !isNaN(this.value)
-                ? Number(this.value.toFixed(this.numberPrecision))
-                : this.value
-          }
-        },
-      },
+    },
+    created() {
+      if (this.value) {
+        this.textInput = numberToString({
+          value: this.value,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.defaultNumber !== null) {
+        this.textInput = numberToString({
+          value: this.defaultNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.minNumber !== null) {
+        this.textInput = numberToString({
+          value: this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      }
     },
     mounted() {
       if (this.focus) {
@@ -810,31 +885,32 @@
         }
       },
       onEnterPress() {
-        this.$emit(EVENT_TYPES.PRESS_ENTER)
+        this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(value) {
-        if (isNaN(value) || value === '') {
-          value = this.defaultNumber
+      onChangeHandler(event) {
+        if (isNaN(event) || event === '') {
+          event = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : value
+            : event
         }
         if (!this.allowNegative) {
-          value = Math.abs(value)
+          event = Math.abs(event)
         }
-        if (this.minNumber && this.minNumber > value) {
-          value = this.minNumber
+        if (this.minNumber && this.minNumber > event) {
+          event = this.minNumber
         }
+        event = parseFloat(event)
         // Need to return an integer rather than a string
-        value = parseFloat(value)
-        return value
+        this.$emit('input-change', event)
       },
-      onEvaluateCode(value) {
+      onEvaluateCode(event) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        const val = event.target.value
+        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -892,43 +968,58 @@
         return array
       },
       onInput(event) {
-        console.log('onInput', event.target.value)
-        this.enteredValue = event.target.value
-        if (!this.isFocused || this.enteredValue === this.inputValue) {
+        if (!this.isFocused) {
           return
         }
+        if (event.target.value === '') {
+          this.$emit('on-input', '')
+        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
+          evaluatedVal = this.onEvaluateCode(event)
         } finally {
-          this.inputValue = this.onChangeHandler(evaluatedVal)
-
-          if (this.isFocused && typeof this.enteredValue !== 'number') {
-            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
+          if (evaluatedVal && this.value != evaluatedVal) {
+            this.$emit('on-input', evaluatedVal)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        if (!Number.isNaN(this.inputValue)) {
-          this.enteredValue = this.inputValue
+        let value = e.target.value
+        let evaluatedInput = this.onEvaluateCode(e)
+        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
+        if ((evaluatedInput && value.length) || this.minNumber !== null) {
+          this.textInput = numberToString({
+            value:
+              evaluatedInput && value.length
+                ? evaluatedInput
+                : this.defaultNumber
+                ? this.defaultNumber
+                : this.minNumber,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
         }
-        this.$emit(
-          EVENT_TYPES.INPUT_BLUR,
-          Number(this.onEvaluateCode(String(this.inputValue)))
-        )
+        let adjustedMinValue =
+          evaluatedInput && evaluatedInput.length
+            ? evaluatedInput
+            : this.defaultNumber
+            ? this.defaultNumber
+            : this.minNumber || this.minNumber === 0
+            ? this.minNumber
+            : ''
+        this.$emit('input-blur', adjustedMinValue)
       },
       focusInput() {
         if (this.disabled) {
           return
         }
         this.isFocused = true
-        this.textInput = this.formatWithCurrency(this.value)
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
+        this.$emit('input-focus')
       },
       blurInput() {
         if (this.disabled) {
@@ -948,7 +1039,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if (adjustedMinValue || adjustedMinValue === 0) {
+        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -961,8 +1052,6 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
-        } else if (this.isFocused) {
-          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -983,7 +1072,14 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
+        this.$emit('on-input-drag', value)
+
+        this.textInput = numberToString({
+          value: value && value.length ? value : this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        //this.value=value
       },
       stopInteract(e) {
         e.preventDefault()
@@ -991,9 +1087,6 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
-      handleSelectChange(value) {
-        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
-      },
     },
   }
 </script>

package/src/components/pageTitle/index.vue

@@ -46,7 +46,6 @@
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: 600;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

package/src/components/tag/proTag/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <RCButton
+    button-size="tiny"
+    icon="star"
+    icon-color="yellow"
+    text="PRO"
+    type="protag"
+    variant="main"
+  />
+</template>
+<script>
+  import RCButton from '../../buttons/mainButton'
+  export default {
+    name: 'ProTag',
+    components: {
+      RCButton,
+    },
+  }
+</script>

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
+  value = parseFloat(value)
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits: