@eturnity/eturnity_reusable_components 7.37.5-qa-elisee-7.42.0 → 7.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.37.5-qa-elisee-7.42.0",
+  "version": "7.39.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -35,9 +35,6 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
   borderRadius: '4px',
 }
 

package/src/components/icon/index.vue

@@ -111,10 +111,10 @@
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-    svg path:not(.fix) {
+    svg path {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
+    &:hover svg path {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoCard/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <InfoContainer
-    background-color="backgrounColor"
-    :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
-  >
-    <RCIcon :color="color" name="info" size="24px" />
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -14,24 +10,12 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
-    borderColor: String,
-  }
-  const InfoContainer = styled('div', propsContainer)`
+
+  const InfoContainer = styled.div`
     display: flex;
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    padding: 20px;
+    border: 1px dashed ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
   `
 
@@ -49,19 +33,8 @@
     },
     props: {
       color: {
-        required: false,
-      },
-      backgrounColor: {
-        required: false,
-      },
-      hasDashedBorder: {
-        required: false,
-        default: true,
-      },
-      borderColor: {
-        required: false,
-        default: 'grey4',
-      },
-    },
+        required: false
+      }
+    }
   }
 </script>

package/src/components/infoText/index.vue

@@ -18,11 +18,10 @@
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
-        :info-position="infoPosition"
         :max-width="maxWidth"
         :width="width"
         ><slot></slot>
-        <span v-if="text.length > 0" v-html="text"></span>
+        <span v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
   </ComponentWrapper>
@@ -45,14 +44,10 @@
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
-    infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : calc(' + props.iconSize + ' + 15px)'};
+    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
       props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
@@ -68,17 +63,14 @@
     font-weight: 400;
     line-height: normal;
     border-radius: 4px;
-    z-index: 999;
+    z-index: 99;
     color: ${(props) => props.theme.colors.white};
 
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.black};
       position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
-
+      top: 2px;
       ${(props) =>
         props.alignArrow === 'left'
           ? 'left:40px;'
@@ -122,37 +114,26 @@
     props: {
       text: {
         required: false,
-        default: '',
-        type: String,
       },
       size: {
         required: false,
         default: '14px',
-        type: String,
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
       },
       alignArrow: {
         required: false,
         default: 'center',
-        type: String,
       },
       openTrigger: {
         required: false,
         default: 'onHover', // onHover, onClick
-        type: String,
       },
       width: {
         required: false,
         default: '200px',
-        type: String,
       },
       maxWidth: {
-        default: '400px',
         type: String,
+        default: '400px',
       },
     },
     data() {

package/src/components/inputs/inputText/InputText.stories.js

@@ -3,7 +3,6 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  tags: ['autodocs'],
   // argTypes: {},
 }
 
@@ -43,8 +42,8 @@ Default.args = {
   textAlign: 'left',
 }
 
-export const HasError = Template.bind({})
-HasError.args = {
+export const hasError = Template.bind({})
+hasError.args = {
   placeholder: 'Enter Value',
   errorMessage: 'This field is required',
   isError: true,

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

@@ -2,26 +2,22 @@
   <Container>
     <InputWrapper
       :align-items="alignItems"
-      data-test-id="input_wrapper"
       :has-label="!!label && label.length > 0"
     >
       <LabelWrapper v-if="label">
         <InputLabel
-          ref="label"
           :data-id="labelDataId"
-          data-test-id="label_wrapper"
           :font-size="fontSize"
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
+          <OptionalLabel v-if="labelOptional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
         </InputLabel>
         <InfoText
-          v-if="infoTextMessage != ''"
+          v-if="infoTextMessage"
           :align-arrow="infoTextAlign"
-          data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
         />
@@ -32,7 +28,6 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
-            data-test-id="input"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -49,26 +44,21 @@
             :type="inputTypeData"
             :value="value"
             @blur="onInputBlur"
-            @focus="onInputFocus"
             @input="onChangeHandler"
             @keyup.enter="onEnterPress"
           />
           <IconWrapper
             v-if="inputType === 'password' && !isError"
-            data-test-id="password_visiblity_change_icon"
             size="20px"
             @click="toggleShowPassword()"
           >
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
-          <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
+          <IconWrapper v-if="hasError" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
         </IconContainer>
-        <ErrorMessage
-          v-if="hasError && hasErrorMessage"
-          data-test-id="error_message_wrapper"
-        >
+        <ErrorMessage v-if="hasError && hasErrorMessage">
           {{ dynamicErrorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
@@ -246,123 +236,93 @@
       placeholder: {
         required: false,
         default: '',
-        type: String,
       },
       alignItems: {
         required: false,
         default: 'horizontal',
-        type: String,
-        validator(value) {
-          return ['horizontal', 'vertical'].includes(value)
-        },
       },
       isError: {
         required: false,
         default: false,
-        type: Boolean,
       },
       inputWidth: {
         required: false,
         default: null,
-        type: String,
       },
       inputHeight: {
         required: false,
         default: null,
-        type: String,
       },
       minWidth: {
         required: false,
         default: null,
-        type: String,
       },
       value: {
         required: true,
         default: null,
-        type: String,
       },
       errorMessage: {
         required: false,
         default: '',
-        type: String,
       },
       infoTextMessage: {
         required: false,
-        default: '',
-        type: String,
       },
       infoTextAlign: {
         required: false,
-        default: 'left',
-        type: String,
       },
       label: {
         required: false,
-        default: '',
-        type: String,
       },
       labelOptional: {
         required: false,
         default: false,
-        type: Boolean,
       },
       noBorder: {
         required: false,
         default: false,
-        type: Boolean,
       },
       disabled: {
         required: false,
         default: false,
-        type: Boolean,
       },
       fontSize: {
         required: false,
         default: null,
-        type: String,
       },
       inputType: {
         required: false,
         default: 'text',
-        type: String,
       },
       labelFontColor: {
         required: false,
         default: 'black',
-        type: String,
       },
       backgroundColor: {
         required: false,
-        type: String,
       },
       disabledBackgroundColor: {
         required: false,
         default: null,
-        type: String,
       },
       fontColor: {
         required: false,
         default: 'black',
-        type: String,
       },
       hasFocus: {
         required: false,
         default: false,
-        type: Boolean,
       },
       borderColor: {
         required: false,
-        type: String,
       },
       labelDataId: {
         required: false,
         default: '',
-        type: String,
       },
       inputDataId: {
         required: false,
         default: '',
-        type: String,
       },
     },
     data() {
@@ -375,10 +335,12 @@
         return this.isError || this.error
       },
       hasErrorMessage() {
-        return this.errorMessage && this.errorMessage.length > 0
+        return (
+          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+        )
       },
       dynamicErrorMessage() {
-        return this.errorMessage
+        return this.errMessage || this.errorMessage
       },
     },
     watch: {
@@ -405,9 +367,6 @@
         this.validateInput($event.target.value)
         this.$emit('input-blur', $event.target.value)
       },
-      onInputFocus($event) {
-        this.$emit('input-focus', $event.target.value)
-      },
       toggleShowPassword() {
         this.inputTypeData =
           this.inputTypeData === 'password' ? 'text' : 'password'

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

@@ -613,7 +613,9 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0].childElementCount
+            : !!this.$refs.dropdown.$el.children[0]
+            ? this.$refs.dropdown.$el.children[0].childElementCount
+            : 0
         }
 
         return 0

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

@@ -15,6 +15,7 @@
     :is-disabled="isDisabled"
     :min-width="minWidth"
     :padding="padding"
+    :text-color="textColor"
     :title="hoverText"
     @click="clickHandler"
     @mouseover="hoverHandler"
@@ -36,6 +37,7 @@
     disabledBgColor: String,
     disabledTextColor: String,
     padding: String,
+    textColor: String,
   }
   const OptionContainer = styled('div', optionProps)`
     display: flex;
@@ -67,7 +69,9 @@
             ? props.theme.colors[props.disabledTextColor]
             : props.disabledTextColor
           : props.theme.colors.grey3
-        : 'inherit'};
+        : props.theme.colors[props.textColor]
+        ? props.theme.colors[props.textColor]
+        : props.textColor};
     &:hover {
       background-color: ${(props) =>
         !!props.disabledTextColor && props.isDisabled
@@ -125,6 +129,10 @@
         required: false,
         default: '12px 10px',
       },
+      textColor: {
+        type: true,
+        default: 'inherit',
+      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {