@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

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,272 +1,270 @@
 <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" />
+        <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>
-  // 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 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 Radio = styled.input`
+  cursor: pointer;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`
 
-  const RadioWrapper = styled.div`
-    display: grid;
-    grid-gap: 10px;
-  `
+const RadioWrapper = styled.div`
+  display: grid;
+  grid-gap: 10px;
+`
 
-  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) =>
+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;
+
+  .checkmark {
+    height: ${(props) =>
       props.size === 'large'
+        ? '23px'
+        : props.size === 'medium'
         ? '16px'
+        : '12px'};
+    width: ${(props) =>
+      props.size === 'large'
+        ? '23px'
         : props.size === 'medium'
-        ? '13px'
-        : '10px'};
-    user-select: none;
-    flex: auto;
-    align-self: baseline;
+        ? '16px'
+        : '12px'};
+    background-color: #fff;
+    border-radius: 100%;
+    border: 1px solid ${(props) => props.theme.colors.mediumGray};
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    .checkmark {
-      height: ${(props) =>
+    &:after {
+      content: '';
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
+      width: ${(props) =>
         props.size === 'large'
-          ? '23px'
+          ? '10px'
           : props.size === 'medium'
-          ? '16px'
-          : '12px'};
-      width: ${(props) =>
+          ? '8px'
+          : '6px'};
+      height: ${(props) =>
         props.size === 'large'
-          ? '23px'
+          ? '10px'
           : props.size === 'medium'
-          ? '16px'
-          : '12px'};
-      background-color: #fff;
+          ? '8px'
+          : '6px'};
       border-radius: 100%;
-      border: 1px solid ${(props) => props.theme.colors.mediumGray};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &: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};
-      }
+      background: ${(props) =>
+        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
-  `
+  }
+`
 
-  const textAttrs = { isDisabled: Boolean }
-  const LabelText = styled('div', textAttrs)`
-    color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-  `
+const textAttrs = { isDisabled: Boolean }
+const LabelText = styled('div', textAttrs)`
+  color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+`
 
-  const RadioImage = styled.img`
-    max-width: 100px;
-  `
+const RadioImage = styled.img`
+  max-width: 100px;
+`
 
-  const ImageContainer = styled.div`
-    border-radius: 4px;
-    cursor: pointer;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    position: relative;
+const ImageContainer = styled.div`
+  border-radius: 4px;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  position: relative;
 
-    .search-icn-container {
-      display: none;
-    }
+  .search-icn-container {
+    display: none;
+  }
 
-    &: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;
-      }
+  &: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 ModalImage = styled.img``
+const ModalImage = styled.img``
 
-  const ModalImageContainer = styled.div`
-    padding: 40px;
-  `
+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
     },
-    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',
-      },
+    options: {
+      required: true,
+      default: []
     },
-    data() {
-      return {
-        selectedImage: null,
-        radioName: '',
-      }
+    layout: {
+      required: false,
+      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
     },
-    created() {
-      this.radioName =
-        this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+    size: {
+      required: false,
+      default: 'medium' // small, medium, large
     },
-    methods: {
-      onInputHandler(value) {
-        this.$emit('on-radio-change', value)
-      },
-      isImageOpen(index) {
-        return this.selectedImage === index
-      },
-      toggleImageModal(value) {
-        this.selectedImage = value
-      },
+    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)
+    },
+    isImageOpen(index) {
+      return this.selectedImage === index
+    },
+    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",
 }