@eturnity/eturnity_reusable_components 7.24.3-EPDM-10647.1 → 7.24.3-EPDM-11320.2

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -1,7 +1,7 @@
-import RadioButton from "./index.vue"
+import RadioButton from './index.vue'
 
 export default {
-  title: "RadioButton",
+  title: 'RadioButton',
   component: RadioButton,
   // argTypes: {},
 }
@@ -34,25 +34,25 @@ const Template = (args, { argTypes }) => ({
 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 },
+    { 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",
+  selectedOption: 'button_2',
+  layout: 'horizontal',
+  size: 'medium',
 }
 
 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 },
+    { 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",
-  layout: "vertical",
-  size: "medium",
+  selectedOption: 'button_2',
+  layout: 'vertical',
+  size: 'medium',
 }

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

@@ -1,270 +1,272 @@
 <template>
-  <component-wrapper :layout="layout">
-    <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container
+  <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"
         :size="size"
-        :hasLabel="item.label"
-        :isDisabled="item.disabled"
-        :isChecked="selectedOption === item.value"
-        :checkmarkColor="checkmarkColor"
       >
-        <radio
+        <Radio
+          :checked="selectedOption === item.value"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :disabled="item.disabled"
+          :name="'radioButtons_' + radioName"
           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>
-        <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" />
+        <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)">
           <img
             class="search-icn"
             :src="require('../../../assets/icons/search_icon.png')"
           />
         </div>
-      </image-container>
-      <modal
+      </ImageContainer>
+      <Modal
         v-if="item.img"
-        :isOpen="isImageOpen(index)"
+        :is-open="isImageOpen(index)"
         @on-close="toggleImageModal(null)"
       >
-        <modal-image-container>
-          <modal-image :src="item.img" />
-        </modal-image-container>
-      </modal>
-    </radio-wrapper>
-  </component-wrapper>
+        <ModalImageContainer>
+          <ModalImage :src="item.img" />
+        </ModalImageContainer>
+      </Modal>
+    </RadioWrapper>
+  </ComponentWrapper>
 </template>
 
 <script>
-// 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 }
-// ]
+  // 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 }
+  // ]
 
-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)`
-  display: flex;
-  flex-direction: ${(props) =>
-    props.layout === 'vertical' ? 'column' : 'row'};
-  grid-gap: 10px 5px;
-  flex-wrap: wrap;
-`
-
-const Radio = styled.input`
-  cursor: pointer;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-`
+  const wrapperProps = {
+    layout: String,
+  }
+  const ComponentWrapper = styled('div', wrapperProps)`
+    display: flex;
+    flex-direction: ${(props) =>
+      props.layout === 'vertical' ? 'column' : 'row'};
+    grid-gap: 10px 5px;
+    flex-wrap: wrap;
+  `
 
-const RadioWrapper = styled.div`
-  display: grid;
-  grid-gap: 10px;
-`
+  const Radio = styled.input`
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  `
 
-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 };
-  align-items: center;
-  color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-  position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  font-size: ${(props) =>
-    props.size === 'large'
-      ? '16px'
-      : props.size === 'medium'
-      ? '13px'
-      : '10px'};
-  user-select: none;
-  flex: auto;
-  align-self: baseline;
+  const RadioWrapper = styled.div`
+    display: grid;
+    grid-gap: 10px;
+  `
 
-  .checkmark {
-    height: ${(props) =>
+  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)};
+    align-items: center;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+    position: relative;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    font-size: ${(props) =>
       props.size === 'large'
-        ? '23px'
-        : props.size === 'medium'
         ? '16px'
-        : '12px'};
-    width: ${(props) =>
-      props.size === 'large'
-        ? '23px'
         : props.size === 'medium'
-        ? '16px'
-        : '12px'};
-    background-color: #fff;
-    border-radius: 100%;
-    border: 1px solid ${(props) => props.theme.colors.mediumGray};
-    display: flex;
-    align-items: center;
-    justify-content: center;
+        ? '13px'
+        : '10px'};
+    user-select: none;
+    flex: auto;
+    align-self: baseline;
 
-    &:after {
-      content: '';
-      display: ${(props) => (props.isChecked ? 'block' : 'none')};
-      width: ${(props) =>
+    .checkmark {
+      height: ${(props) =>
         props.size === 'large'
-          ? '10px'
+          ? '23px'
           : props.size === 'medium'
-          ? '8px'
-          : '6px'};
-      height: ${(props) =>
+          ? '16px'
+          : '12px'};
+      width: ${(props) =>
         props.size === 'large'
-          ? '10px'
+          ? '23px'
           : props.size === 'medium'
-          ? '8px'
-          : '6px'};
+          ? '16px'
+          : '12px'};
+      background-color: #fff;
       border-radius: 100%;
-      background: ${(props) =>
-        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
-    }
-  }
-`
+      border: 1px solid ${(props) => props.theme.colors.mediumGray};
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-const textAttrs = { isDisabled: Boolean }
-const LabelText = styled('div', textAttrs)`
-  color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-`
+      &:after {
+        content: '';
+        display: ${(props) => (props.isChecked ? 'block' : 'none')};
+        width: ${(props) =>
+          props.size === 'large'
+            ? '10px'
+            : props.size === 'medium'
+            ? '8px'
+            : '6px'};
+        height: ${(props) =>
+          props.size === 'large'
+            ? '10px'
+            : props.size === 'medium'
+            ? '8px'
+            : '6px'};
+        border-radius: 100%;
+        background: ${(props) =>
+          props.checkmarkColor
+            ? props.checkmarkColor
+            : props.theme.colors.green};
+      }
+    }
+  `
 
-const RadioImage = styled.img`
-  max-width: 100px;
-`
+  const textAttrs = { isDisabled: Boolean }
+  const LabelText = styled('div', textAttrs)`
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
 
-const ImageContainer = styled.div`
-  border-radius: 4px;
-  cursor: pointer;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  position: relative;
+  const RadioImage = styled.img`
+    max-width: 100px;
+  `
 
-  .search-icn-container {
-    display: none;
-  }
+  const ImageContainer = styled.div`
+    border-radius: 4px;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    position: relative;
 
-  &:hover {
     .search-icn-container {
-      display: grid;
-      position: absolute;
-      background: rgba(0, 0, 0, 0.4);
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-items: center;
+      display: none;
     }
-  }
-`
 
-const ModalImage = styled.img``
+    &:hover {
+      .search-icn-container {
+        display: grid;
+        position: absolute;
+        background: rgba(0, 0, 0, 0.4);
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-items: center;
+      }
+    }
+  `
 
-const ModalImageContainer = styled.div`
-  padding: 40px;
-`
+  const ModalImage = styled.img``
 
-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)
-    },
-    size: {
-      required: false,
-      default: 'medium' // small, medium, large
+  const ModalImageContainer = styled.div`
+    padding: 40px;
+  `
+
+  export default {
+    name: 'RadioButton',
+    components: {
+      Radio,
+      ComponentWrapper,
+      LabelContainer,
+      RadioWrapper,
+      RadioImage,
+      ImageContainer,
+      Modal,
+      ModalImage,
+      ModalImageContainer,
+      InfoText,
+      LabelText,
     },
-    name: {
-      required: false,
-      default: ''
+    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',
+      },
     },
-    checkmarkColor: {
-      required: false,
-      default: ''
+    data() {
+      return {
+        selectedImage: null,
+        radioName: '',
+      }
     },
-    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/SearchInput.stories.js

@@ -1,7 +1,7 @@
-import SearchInput from "./index.vue"
+import SearchInput from './index.vue'
 
 export default {
-  title: "SearchInput",
+  title: 'SearchInput',
   component: SearchInput,
   // argTypes: {},
 }
@@ -25,16 +25,16 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: "Search...",
+  placeholder: 'Search...',
   disabled: false,
-  value: "",
-  inputWidth: "250px",
+  value: '',
+  inputWidth: '250px',
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: "Search...",
+  placeholder: 'Search...',
   disabled: true,
-  value: "",
-  inputWidth: "250px",
+  value: '',
+  inputWidth: '250px',
 }