@eturnity/eturnity_reusable_components 7.39.5-qa-elisee-7.42.1 → 7.45.1

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/radioButton/RadioButton.stories.js

@@ -1,58 +1,77 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultRadioButtonProps from './defaultProps'
 import RadioButton from './index.vue'
 
 export default {
   title: 'RadioButton',
   component: RadioButton,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { RadioButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<radio-button v-bind="$props" />',
-
-  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
-  // To use:
-  // <radio-button
-  //     :options="radioOptions"
-  //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
-  //     size="large"
-  //   />
-  // Data being passed should look like:
-  // radioOptions: [
-  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
-  // { label: 'Button 4', value: 'button_4', disabled: true }
-  // ]
-})
+// To use:
+// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+// <radio-button
+//     checkmarkColor="red"
+//     dataId="radio_button"
+//     layout="horizontal" //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+//     name="Name for Radio buttons"
+//     :options="radioOptions"
+//     :selectedOption="checkedOption"
+//     size="medium" // small, medium, large
+//     @on-radio-change="onInputChange($event)"
+//   />
+// Data being passed should look like:
+// radioOptions: [
+//  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+//  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+//  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+//  { label: 'Option 4', value: 'option_4', disabled: true }
+// ]
+
+const defaultProps = defaultRadioButtonProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleRadioChange = ($event) => {
+    action('on-radio-change')($event)
+    updateArgs({ selectedOption: $event })
+  }
+
+  return {
+    components: { RadioButton },
+    setup() {
+      return { args: currentArgs, handleRadioChange }
+    },
+    template: `
+      <RadioButton
+        v-bind="args"
+        @on-radio-change="handleRadioChange"
+      />
+    `,
+  }
+}
 
 export const Default = Template.bind({})
 Default.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1', infoText: 'my info text' },
-    { label: 'Button 2', value: 'button_2', infoText: 'my info text 2' },
-    { label: 'Button 3', value: 'button_3', disabled: true },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
-  layout: 'horizontal',
-  size: 'medium',
+  ...defaultProps,
+}
+
+export const BlueCheckmark = Template.bind({})
+BlueCheckmark.args = {
+  ...defaultProps,
+  checkmarkColor: '#00f',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...defaultProps,
+  size: 'small',
 }
 
-export const VerticalLayout = Template.bind({})
-VerticalLayout.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1' },
-    { label: 'Button 2', value: 'button_2' },
-    { label: 'Button 3', value: 'button_3' },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
+export const Vertical = Template.bind({})
+Vertical.args = {
+  ...defaultProps,
   layout: 'vertical',
-  size: 'medium',
 }

package/src/components/inputs/radioButton/defaultProps.js

@@ -0,0 +1,33 @@
+const defaultRadioButtonProps = {
+  dataId: 'radio_buttons',
+  name: 'options',
+  options: [
+    {
+      label: 'Option 1',
+      value: 'option_1',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/solar_img_i.png',
+    },
+    {
+      label: 'Option 2',
+      value: 'option_2',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/switcher_img_i.png',
+      infoText: 'Option 2 info text',
+    },
+    {
+      label: 'Option 3',
+      value: 'option_3',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/varta_img_i.png',
+      infoText: 'Option 3 info text',
+      disabled: true,
+    },
+    {
+      label: 'Option 4',
+      value: 'option_4',
+      disabled: true,
+      infoText: 'Option 4 info text',
+    },
+  ],
+  selectedOption: 'option_2',
+}
+
+export default defaultRadioButtonProps

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

@@ -1,6 +1,10 @@
 <template>
   <ComponentWrapper :layout="layout">
-    <RadioWrapper v-for="(item, index) in options" :key="item.value">
+    <RadioWrapper
+      v-for="(item, index) in options"
+      :key="item.value"
+      :data-test-id="'radioWrapper_' + item.value"
+    >
       <LabelContainer
         :checkmark-color="checkmarkColor"
         :has-label="!!item.label"
@@ -11,6 +15,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
           type="radio"
@@ -18,15 +23,32 @@
           @click="onInputHandler(item.value)"
         />
         <span class="checkmark"></span>
-        <LabelText v-if="item.label" :is-disabled="item.disabled">
+        <LabelText
+          v-if="item.label"
+          :data-test-id="'radioLabel_' + item.value"
+          :is-disabled="item.disabled"
+        >
           {{ item.label }}
         </LabelText>
-        <InfoText v-if="item.infoText" size="16px" :text="item.infoText" />
+        <InfoText
+          v-if="item.infoText"
+          :data-test-id="'radioInfo_' + item.value"
+          size="16px"
+          :text="item.infoText"
+        />
       </LabelContainer>
       <ImageContainer v-if="item.img">
-        <RadioImage :src="item.img" />
-        <div class="search-icn-container" @click="toggleImageModal(index)">
+        <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')"
           />
@@ -34,6 +56,7 @@
       </ImageContainer>
       <Modal
         v-if="item.img"
+        :data-test-id="'radioModal_' + item.value"
         :is-open="isImageOpen(index)"
         @on-close="toggleImageModal(null)"
       >
@@ -49,18 +72,21 @@
   // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
   // To use:
   // <radio-button
+  //     checkmarkColor="red"
+  //     dataId="radio_button"
+  //     layout="horizontal"
+  //     name="Name for Radio buttons"
   //     :options="radioOptions"
   //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
   //     size="large"
+  //     @on-radio-change="onInputChange($event)"
   //   />
   // Data being passed should look like:
   // radioOptions: [
-  //   { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-  //   { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-  //   { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
-  //   { label: 'Button 4', value: 'button_4', disabled: true }
+  //  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+  //  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+  //  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+  //  { label: 'Option 4', value: 'option_4', disabled: true }
   // ]
 
   import styled from 'vue3-styled-components'
@@ -82,7 +108,6 @@
     cursor: pointer;
     position: absolute;
     opacity: 0;
-    cursor: pointer;
     height: 0;
     width: 0;
   `
@@ -221,33 +246,42 @@
     props: {
       selectedOption: {
         required: true,
-        default: false,
+        type: [String, Number],
       },
       options: {
+        default() {
+          return []
+        },
         required: true,
-        default: [],
+        type: Array,
       },
       layout: {
-        required: false,
         default: 'horizontal', //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+        required: false,
+        type: String,
       },
       size: {
-        required: false,
         default: 'medium', // small, medium, large
+        required: false,
+        type: String,
       },
       name: {
-        required: false,
         default: '',
+        required: false,
+        type: String,
       },
       checkmarkColor: {
-        required: false,
         default: '',
+        required: false,
+        type: String,
       },
       dataId: {
-        type: String,
         default: 'key',
+        required: false,
+        type: String,
       },
     },
+    emits: ['on-radio-change'],
     data() {
       return {
         selectedImage: null,
@@ -260,7 +294,9 @@
     },
     methods: {
       onInputHandler(value) {
-        this.$emit('on-radio-change', value)
+        if (value !== this.selectedOption) {
+          this.$emit('on-radio-change', value)
+        }
       },
       isImageOpen(index) {
         return this.selectedImage === index