@eturnity/eturnity_reusable_components 8.16.9-EPDM-11600.8 → 8.16.9-EPDM-14690.5

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

@@ -30,45 +30,55 @@
       />
     </LabelWrapper>
     <InputWrapper>
-      <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"
-        :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-disabled="disabled"
-        :is-error="isError"
-        :is-interactive="isInteractive"
-        :is-pre-defined="isPreDefined"
-        :min-width="minWidth"
-        :no-border="noBorder"
-        :placeholder="displayedPlaceholder"
-        :read-only="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"
-      />
+      <InfoText 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"
+            :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>
+      </InfoText>
+
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -80,7 +90,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -134,7 +144,9 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
   </Container>
 </template>
 
@@ -197,7 +209,6 @@
     slotSize: String,
     inputHeight: String,
     isInteractive: Boolean,
-    isPreDefined: Boolean,
     alignItems: String,
     labelFontColor: String,
     labelFontWeight: String,
@@ -206,6 +217,8 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
+    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -218,7 +231,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'
@@ -237,16 +252,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) =>
@@ -260,7 +276,7 @@
     color: ${(props) =>
       props.isError
         ? props.theme.colors.grey6
-        : props.isDisabled && !props.isPreDefined
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? props.theme.colors.white
           : props.theme.colors.grey2
@@ -538,11 +554,6 @@
         required: false,
         default: 0,
       },
-      isPreDefined: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
       minDecimals: {
         type: Number,
         required: false,
@@ -663,18 +674,12 @@
         required: false,
         default: '',
       },
-      labelDataTestId: {
-        type: String,
-        required: false,
-        default: '',
-      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
-        type: String,
         required: false,
         default: '',
       },
@@ -710,6 +715,18 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
+      isInfoBorder: {
+        type: Boolean,
+        default: false,
+      },
+      inputInfoText: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {

package/src/components/pageSubtitle/index.vue

@@ -5,8 +5,7 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
-    <span v-else data-test-id="page_subtitle_text">
+    <span data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -59,11 +58,6 @@
         required: true,
         type: String,
       },
-      containsHtml: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
       color: {
         required: false,
         type: String,

package/src/components/pageTitle/index.vue

@@ -1,8 +1,8 @@
 <template>
   <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
     <TitleText
-      data-test-id="page_title_text"
       :color="color"
+      data-test-id="page_title_text"
       :font-size="fontSize"
       :uppercase="uppercase"
     >
@@ -10,8 +10,8 @@
     </TitleText>
     <InfoText
       v-if="!!infoText"
-      data-test-id="page_title_tooltip"
       :align-arrow="infoAlign"
+      data-test-id="page_title_tooltip"
       :text="infoText"
     />
   </TitleWrap>
@@ -44,9 +44,8 @@
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: bold;
+    font-weight: 500;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {