@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

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

@@ -1,61 +1,46 @@
 <template>
-  <ComponentWrapper :layout="layout">
-    <RadioWrapper
-      v-for="(item, index) in options"
-      :key="item.value"
-    >
-      <LabelContainer
-        :checkmark-color="checkmarkColor"
-        :has-label="item.label"
-        :is-checked="selectedOption === item.value"
-        :is-disabled="item.disabled"
+  <component-wrapper :layout="layout">
+    <radio-wrapper v-for="(item, index) in options" :key="item.value">
+      <label-container
         :size="size"
+        :hasLabel="item.label"
+        :isDisabled="item.disabled"
+        :isChecked="selectedOption === item.value"
+        :checkmarkColor="checkmarkColor"
       >
-        <Radio
-          :checked="selectedOption === item.value"
-          :data-id="`radio_button_${dataId}_option_${item.value}`"
-          :disabled="item.disabled"
-          :name="'radioButtons_' + radioName"
+        <radio
           type="radio"
           :value="selectedOption"
           @click="onInputHandler(item.value)"
+          :name="'radioButtons_' + radioName"
+          :checked="selectedOption === item.value"
+          :disabled="item.disabled"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
-        <LabelText
-          v-if="item.label"
-          :is-disabled="item.disabled"
-        >
-          {{ item.label }}
-        </LabelText>
-        <InfoText
-          v-if="item.infoText"
-          size="16px"
-          :text="item.infoText"
-        />
-      </LabelContainer>
-      <ImageContainer v-if="item.img">
-        <RadioImage :src="item.img" />
-        <div
-          class="search-icn-container"
-          @click="toggleImageModal(index)"
-        >
+        <label-text :isDisabled="item.disabled" v-if="item.label">{{ item.label }}</label-text>
+        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
+      </label-container>
+      <image-container v-if="item.img">
+        <radio-image :src="item.img" />
+        <div class="search-icn-container" @click="toggleImageModal(index)">
           <img
             class="search-icn"
             :src="require('../../../assets/icons/search_icon.png')"
           />
         </div>
-      </ImageContainer>
-      <Modal
+      </image-container>
+      <modal
         v-if="item.img"
-        :is-open="isImageOpen(index)"
+        :isOpen="isImageOpen(index)"
         @on-close="toggleImageModal(null)"
       >
-        <ModalImageContainer>
-          <ModalImage :src="item.img" />
-        </ModalImageContainer>
-      </Modal>
-    </RadioWrapper>
-  </ComponentWrapper>
+        <modal-image-container>
+          <modal-image :src="item.img" />
+        </modal-image-container>
+      </modal>
+    </radio-wrapper>
+  </component-wrapper>
 </template>
 
 <script>
@@ -76,22 +61,22 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-  import styled from 'vue3-styled-components'
-  import Modal from '../../modals/modal'
-  import InfoText from '../../infoText'
+import styled from 'vue3-styled-components'
+import Modal from '../../modals/modal'
+import InfoText from '../../infoText'
 
-  const wrapperProps = {
-    layout: String
-  }
-  const ComponentWrapper = styled('div', wrapperProps)`
+const wrapperProps = {
+  layout: String
+}
+const ComponentWrapper = styled('div', wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
-  props.layout === 'vertical' ? 'column' : 'row'};
+    props.layout === 'vertical' ? 'column' : 'row'};
   grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
 
-  const Radio = styled.input`
+const Radio = styled.input`
   cursor: pointer;
   position: absolute;
   opacity: 0;
@@ -100,26 +85,26 @@
   width: 0;
 `
 
-  const RadioWrapper = styled.div`
+const RadioWrapper = styled.div`
   display: grid;
   grid-gap: 10px;
 `
 
-  const containerProps = {
-    size: String,
-    isDisabled: Boolean,
-    isChecked: Boolean,
-    checkmarkColor: String
-  }
-  const LabelContainer = styled('label', containerProps)`
+const containerProps = {
+  size: String,
+  isDisabled: Boolean,
+  isChecked: Boolean,
+  checkmarkColor: String
+}
+const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: ${(props) =>
     props.hasLabel
-  ? '15px' : 0 };
+       ? '15px' : 0 };
   align-items: center;
   color: ${(props) =>
-  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: ${(props) =>
@@ -127,7 +112,7 @@
       ? '16px'
       : props.size === 'medium'
       ? '13px'
-  : '10px'};
+      : '10px'};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -138,13 +123,13 @@
         ? '23px'
         : props.size === 'medium'
         ? '16px'
-  : '12px'};
+        : '12px'};
     width: ${(props) =>
       props.size === 'large'
         ? '23px'
         : props.size === 'medium'
         ? '16px'
-  : '12px'};
+        : '12px'};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -160,31 +145,31 @@
           ? '10px'
           : props.size === 'medium'
           ? '8px'
-  : '6px'};
+          : '6px'};
       height: ${(props) =>
         props.size === 'large'
           ? '10px'
           : props.size === 'medium'
           ? '8px'
-  : '6px'};
+          : '6px'};
       border-radius: 100%;
       background: ${(props) =>
-  props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
+        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
 
-  const textAttrs = { isDisabled: Boolean }
-  const LabelText = styled('div', textAttrs)`
+const textAttrs = { isDisabled: Boolean }
+const LabelText = styled('div', textAttrs)`
   color: ${(props) =>
-  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
 
-  const RadioImage = styled.img`
+const RadioImage = styled.img`
   max-width: 100px;
 `
 
-  const ImageContainer = styled.div`
+const ImageContainer = styled.div`
   border-radius: 4px;
   cursor: pointer;
   display: grid;
@@ -209,77 +194,77 @@
   }
 `
 
-  const ModalImage = styled.img``
+const ModalImage = styled.img``
 
-  const ModalImageContainer = styled.div`
+const ModalImageContainer = styled.div`
   padding: 40px;
 `
 
-  export default {
-    name: 'RadioButton',
-    components: {
-      Radio,
-      ComponentWrapper,
-      LabelContainer,
-      RadioWrapper,
-      RadioImage,
-      ImageContainer,
-      Modal,
-      ModalImage,
-      ModalImageContainer,
-      InfoText,
-      LabelText
+export default {
+  name: 'radio-button',
+  components: {
+    Radio,
+    ComponentWrapper,
+    LabelContainer,
+    RadioWrapper,
+    RadioImage,
+    ImageContainer,
+    Modal,
+    ModalImage,
+    ModalImageContainer,
+    InfoText,
+    LabelText
+  },
+  props: {
+    selectedOption: {
+      required: true,
+      default: false
+    },
+    options: {
+      required: true,
+      default: []
+    },
+    layout: {
+      required: false,
+      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
     },
-    props: {
-      selectedOption: {
-        required: true,
-        default: false
-      },
-      options: {
-        required: true,
-        default: []
-      },
-      layout: {
-        required: false,
-        default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
-      },
-      size: {
-        required: false,
-        default: 'medium' // small, medium, large
-      },
-      name: {
-        required: false,
-        default: ''
-      },
-      checkmarkColor: {
-        required: false,
-        default: ''
-      },
-      dataId: {
-        type: String,
-        default: 'key'
-      }
+    size: {
+      required: false,
+      default: 'medium' // small, medium, large
     },
-    data() {
-      return {
-        selectedImage: null,
-        radioName: ''
-      }
+    name: {
+      required: false,
+      default: ''
+    },
+    checkmarkColor: {
+      required: false,
+      default: ''
+    },
+    dataId: {
+      type: String,
+      default: 'key'
+    }
+  },
+  data() {
+    return {
+      selectedImage: null,
+      radioName: ''
+    }
+  },
+  methods: {
+    onInputHandler(value) {
+      this.$emit('on-radio-change', value)
     },
-    created() {
-      this.radioName =
-        this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+    isImageOpen(index) {
+      return this.selectedImage === index
     },
-    methods: {
-      onInputHandler(value) {
-        this.$emit('on-radio-change', value)
-      },
-      isImageOpen(index) {
-        return this.selectedImage === index
-      },
-      toggleImageModal(value) {
-        this.selectedImage = value
-      }
+    toggleImageModal(value) {
+      this.selectedImage = value
     }
+  },
+  created() {
+    this.radioName =
+      this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
   }
+}
 </script>

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

@@ -1,24 +1,21 @@
 <template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :icon-color="iconColor"
-      :icon-position="iconPosition"
-    >
+  <container :inputWidth="inputWidth">
+    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
       <SearchIconSvg class="search-icn" />
-      <InputContainer
+      <input-container
         ref="inputElement"
-        :data-id="dataId"
-        :disabled="disabled"
-        :has-focus="hasFocus"
-        :input-width="inputWidth"
-        :is-disabled="disabled"
-        :is-filter="isFilter"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :inputWidth="inputWidth"
+        :isFilter="isFilter"
+        :hasFocus="hasFocus"
+        :data-id="dataId"
       />
-    </InputWrapper>
-  </Container>
+    </input-wrapper>
+  </container>
 </template>
 
 <script>
@@ -35,23 +32,23 @@
 //   iconPosition="left"
 //   iconColor="grey2"
 // />
-  import styled from 'vue3-styled-components'
-  import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
+import styled from 'vue3-styled-components'
+import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
 
-  const inputAttrs = {
-    isDisabled: Boolean,
-    inputWidth: String,
-    isFilter: Boolean
-  }
-  const Container = styled('div', inputAttrs)`
+const inputAttrs = {
+  isDisabled: Boolean,
+  inputWidth: String,
+  isFilter: Boolean
+}
+const Container = styled('div', inputAttrs)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
 `
 
-  const InputContainer = styled('input', inputAttrs)`
+const InputContainer = styled('input', inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey4};
   padding: ${(props) =>
-  props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+    props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
   border-radius: 4px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.black};
@@ -68,7 +65,7 @@
   }
 `
 
-  const InputWrapper = styled.span`
+const InputWrapper = styled.span`
   position: relative;
 
   svg {
@@ -81,73 +78,73 @@
       fill: ${(props) =>
         props.theme.colors[props.iconColor]
           ? props.theme.colors[props.iconColor]
-  : props.iconColor};
+          : props.iconColor};
     }
   }
 `
 
-  export default {
-    name: 'SearchInput',
-    components: {
-      InputContainer,
-      InputWrapper,
-      Container,
-      SearchIconSvg
+export default {
+  name: 'search-input',
+  components: {
+    InputContainer,
+    InputWrapper,
+    Container,
+    SearchIconSvg
+  },
+  props: {
+    value: {
+      required: true
     },
-    props: {
-      value: {
-        required: true
-      },
-      disabled: {
-        required: false,
-        default: false
-      },
-      placeholder: {
-        required: false,
-        default: ''
-      },
-      inputWidth: {
-        required: false,
-        default: null
-      },
-      isFilter: {
-        required: false,
-        default: false
-      },
-      hasFocus: {
-        required: false,
-        default: false
-      },
-      dataId: {
-        required: false,
-        default: ''
-      },
-      iconPosition: {
-        type: String,
-        default: 'right'
-      },
-      iconColor: {
-        type: String,
-        default: 'black'
-      }
+    disabled: {
+      required: false,
+      default: false
     },
-    emits: ['on-change'],
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.focusInputElement()
-        }
-      }
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    inputWidth: {
+      required: false,
+      default: null
     },
-    methods: {
-      onChangeHandler(event) {
-        this.$emit('on-change', event.target.value)
-      },
-      focusInputElement() {
-        this.$nextTick(() => {
-          this.$refs.inputElement.$el.focus()
-        })
+    isFilter: {
+      required: false,
+      default: false
+    },
+    hasFocus: {
+      required: false,
+      default: false
+    },
+    dataId: {
+      required: false,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'right'
+    },
+    iconColor: {
+      type: String,
+      default: 'black'
+    }
+  },
+  emits: ['on-change'],
+  methods: {
+    onChangeHandler(event) {
+      this.$emit('on-change', event.target.value)
+    },
+    focusInputElement() {
+      this.$nextTick(() => {
+        this.$refs.inputElement.$el.focus()
+      })
+    }
+  },
+  watch: {
+    hasFocus(newVal) {
+      if (newVal) {
+        this.focusInputElement()
       }
     }
   }
+}
 </script>