@eturnity/eturnity_reusable_components 8.37.1-dev-03-elisee-8.37.3 → 8.40.0

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

@@ -1,85 +1,77 @@
 <template>
-  <FlexRadioContainer>
-    <ComponentWrapper :color-mode="colorMode" :layout="layout">
-      <RadioWrapper
-        v-for="(item, index) in options"
-        :key="item.value"
-        :data-test-id="'radioWrapper_' + item.value"
+  <ComponentWrapper :color-mode="colorMode" :layout="layout">
+    <RadioWrapper
+      v-for="(item, index) in options"
+      :key="item.value"
+      :data-test-id="'radioWrapper_' + item.value"
+    >
+      <LabelContainer
+        :checkmark-color="checkmarkColor"
+        :color-mode="colorMode"
+        :has-label="!!item.label"
+        :has-slots="!!$slots[`input-${item.value}`]"
+        :is-checked="selectedOption === item.value"
+        :is-disabled="isItemDisabled(item)"
+        :size="size"
       >
-        <LabelContainer
-          :checkmark-color="checkmarkColor"
+        <Radio
+          :checked="selectedOption === item.value"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-qa-id="dataQaId"
+          :data-test-id="'radioInput_' + item.value"
+          :disabled="isItemDisabled(item)"
+          :name="'radioButtons_' + radioName"
+          type="radio"
+          :value="selectedOption"
+          @click="onInputHandler(item.value)"
+        />
+        <span class="checkmark"></span>
+        <LabelText
+          v-if="item.label"
           :color-mode="colorMode"
-          :has-label="!!item.label"
-          :has-slots="!!$slots[`input-${item.value}`]"
-          :is-checked="selectedOption === item.value"
+          :data-test-id="'radioLabel_' + item.value"
           :is-disabled="isItemDisabled(item)"
-          :size="size"
         >
-          <Radio
-            :checked="selectedOption === item.value"
-            :data-id="`radio_button_${dataId}_option_${item.value}`"
-            :data-qa-id="dataQaId"
-            :data-test-id="'radioInput_' + item.value"
-            :disabled="isItemDisabled(item)"
-            :name="'radioButtons_' + radioName"
-            type="radio"
-            :value="selectedOption"
-            @click="onInputHandler(item.value)"
-          />
-          <span class="checkmark"></span>
-          <LabelText
-            v-if="item.label"
-            :color-mode="colorMode"
-            :data-test-id="'radioLabel_' + item.value"
-            :is-disabled="isItemDisabled(item)"
-          >
-            {{ item.label }}
-            <IsRequiredLabelStar v-if="isRequiredLabel" />
-          </LabelText>
-          <InfoText
-            v-if="item.infoText"
-            :data-test-id="'radioInfo_' + item.value"
-            size="16px"
-            :text="item.infoText"
-          />
-          <slot :name="`input-${item.value}`"></slot>
-        </LabelContainer>
-        <ImageContainer v-if="item.img">
-          <RadioImage
-            :data-test-id="'radioImage_' + item.value"
-            :src="item.img"
-          />
-          <div
-            class="search-icn-container"
-            :data-test-id="'radioOpenImage_' + item.value"
-            @click="toggleImageModal(index)"
-          >
-            <img
-              alt=""
-              class="search-icn"
-              :src="require('../../../assets/icons/search_icon.png')"
-            />
-          </div>
-        </ImageContainer>
-        <Modal
-          v-if="item.img"
-          :data-test-id="'radioModal_' + item.value"
-          :is-open="isImageOpen(index)"
-          @on-close="toggleImageModal(null)"
+          {{ item.label }}
+          <IsRequiredLabelStar v-if="isRequiredLabel" />
+        </LabelText>
+        <InfoText
+          v-if="item.infoText"
+          :data-test-id="'radioInfo_' + item.value"
+          size="16px"
+          :text="item.infoText"
+        />
+        <slot :name="`input-${item.value}`"></slot>
+      </LabelContainer>
+      <ImageContainer v-if="item.img">
+        <RadioImage
+          :data-test-id="'radioImage_' + item.value"
+          :src="item.img"
+        />
+        <div
+          class="search-icn-container"
+          :data-test-id="'radioOpenImage_' + item.value"
+          @click="toggleImageModal(index)"
         >
-          <ModalImageContainer>
-            <ModalImage :src="item.img" />
-          </ModalImageContainer>
-        </Modal>
-      </RadioWrapper>
-    </ComponentWrapper>
-    <ErrorMessage
-      v-if="hasError && errorMessage"
-      data-test-id="error_message_wrapper"
-    >
-      {{ errorMessage }}
-    </ErrorMessage>
-  </FlexRadioContainer>
+          <img
+            alt=""
+            class="search-icn"
+            :src="require('../../../assets/icons/search_icon.png')"
+          />
+        </div>
+      </ImageContainer>
+      <Modal
+        v-if="item.img"
+        :data-test-id="'radioModal_' + item.value"
+        :is-open="isImageOpen(index)"
+        @on-close="toggleImageModal(null)"
+      >
+        <ModalImageContainer>
+          <ModalImage :src="item.img" />
+        </ModalImageContainer>
+      </Modal>
+    </RadioWrapper>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -107,7 +99,6 @@
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
-  import ErrorMessage from '../../errorMessage'
 
   const wrapperProps = {
     layout: String,
@@ -255,11 +246,7 @@
   const ModalImageContainer = styled.div`
     padding: 40px;
   `
-  const FlexRadioContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  `
+
   export default {
     name: 'RadioButton',
     components: {
@@ -275,8 +262,6 @@
       InfoText,
       LabelText,
       IsRequiredLabelStar,
-      ErrorMessage,
-      FlexRadioContainer,
     },
     props: {
       disabled: {
@@ -335,16 +320,6 @@
         default: false,
         type: Boolean,
       },
-      hasError: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      errorMessage: {
-        required: false,
-        default: '',
-        type: String,
-      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -201,12 +201,6 @@
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
-        <ErrorMessage
-          v-if="hasError && hasErrorMessage"
-          data-test-id="error_message_wrapper"
-        >
-          {{ errorMessage }}
-        </ErrorMessage>
       </SelectButtonWrapper>
     </InputWrapper>
   </Container>
@@ -239,7 +233,6 @@
   import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
-  import ErrorMessage from '../../errorMessage'
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
@@ -309,6 +302,7 @@
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+    display: inline-block;
     text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
@@ -520,7 +514,6 @@
       Teleport,
       DraggableInputHandle,
       IsRequiredLabelStar,
-      ErrorMessage,
     },
 
     props: {
@@ -627,14 +620,9 @@
         default: true,
       },
       hasError: {
-        type: Boolean,
         required: false,
         default: false,
       },
-      errorMessage: {
-        type: String,
-        default: '',
-      },
       disabled: {
         required: false,
         type: Boolean,
@@ -747,9 +735,6 @@
       }
     },
     computed: {
-      hasErrorMessage() {
-        return this.errorMessage && this.errorMessage.length > 0
-      },
       optionLength() {
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1

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

@@ -25,8 +25,6 @@
           :resize="resize"
           :rows="rowHeight"
           :value="value"
-          @blur="onInputBlur"
-          @focus="onInputFocus"
           @input="onChangeHandler"
         ></textarea>
       </InputContainer>
@@ -210,12 +208,6 @@
         }
         this.$emit('input-change', $event.target.value)
       },
-      onInputBlur($event) {
-        this.$emit('input-blur', $event.target.value)
-      },
-      onInputFocus($event) {
-        this.$emit('input-focus', $event.target.value)
-      },
     },
   }
 </script>

package/src/components/spinner/index.vue

@@ -59,8 +59,6 @@
 
   const getSpinnerSize = (size) => {
     switch (size) {
-      case 'tiny':
-        return '16px'
       case 'small':
         return '24px'
       case 'large':

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

@@ -16,17 +16,17 @@
 
   const TagContainer = styled.div`
     display: inline-flex;
-    align-items: baseline;
+    align-items: center;
     justify-content: center;
     gap: 4px;
     border-radius: 4px;
-    padding: 4px;
+    padding: 2px 4px;
     background-color: ${(props) => props.theme.semanticColors.yellow[200]};
     cursor: pointer;
   `
 
   const TextContainer = styled.div`
-    font-size: 12px;
+    font-size: 10px;
     font-weight: 700;
     color: ${(props) => props.theme.semanticColors.teal[800]};
   `