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

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

@@ -1,77 +1,85 @@
 <template>
-  <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"
+  <FlexRadioContainer>
+    <ComponentWrapper :color-mode="colorMode" :layout="layout">
+      <RadioWrapper
+        v-for="(item, index) in options"
+        :key="item.value"
+        :data-test-id="'radioWrapper_' + item.value"
       >
-        <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"
+        <LabelContainer
+          :checkmark-color="checkmarkColor"
           :color-mode="colorMode"
-          :data-test-id="'radioLabel_' + item.value"
+          :has-label="!!item.label"
+          :has-slots="!!$slots[`input-${item.value}`]"
+          :is-checked="selectedOption === item.value"
           :is-disabled="isItemDisabled(item)"
+          :size="size"
         >
-          {{ 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')"
+          <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)"
           />
-        </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>
+          <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)"
+        >
+          <ModalImageContainer>
+            <ModalImage :src="item.img" />
+          </ModalImageContainer>
+        </Modal>
+      </RadioWrapper>
+    </ComponentWrapper>
+    <ErrorMessage
+      v-if="hasError && errorMessage"
+      data-test-id="error_message_wrapper"
+    >
+      {{ errorMessage }}
+    </ErrorMessage>
+  </FlexRadioContainer>
 </template>
 
 <script>
@@ -99,6 +107,7 @@
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import ErrorMessage from '../../errorMessage'
 
   const wrapperProps = {
     layout: String,
@@ -246,7 +255,11 @@
   const ModalImageContainer = styled.div`
     padding: 40px;
   `
-
+  const FlexRadioContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  `
   export default {
     name: 'RadioButton',
     components: {
@@ -262,6 +275,8 @@
       InfoText,
       LabelText,
       IsRequiredLabelStar,
+      ErrorMessage,
+      FlexRadioContainer,
     },
     props: {
       disabled: {
@@ -320,6 +335,16 @@
         default: false,
         type: Boolean,
       },
+      hasError: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      errorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     emits: ['on-radio-change'],
     data() {