@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.3 → 7.12.7

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

@@ -1,58 +1,58 @@
-import RadioButton from "./index.vue"
-
-export default {
-  title: "RadioButton",
-  component: RadioButton,
-  // argTypes: {},
-}
-
-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 }
-  // ]
-})
-
-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",
-}
-
-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",
-  layout: "vertical",
-  size: "medium",
-}
+import RadioButton from "./index.vue"
+
+export default {
+  title: "RadioButton",
+  component: RadioButton,
+  // argTypes: {},
+}
+
+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 }
+  // ]
+})
+
+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",
+}
+
+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",
+  layout: "vertical",
+  size: "medium",
+}

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

@@ -1,267 +1,267 @@
-<template>
-  <component-wrapper :layout="layout">
-    <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container
-        :size="size"
-        :isDisabled="item.disabled"
-        :isChecked="selectedOption === item.value"
-        :checkmarkColor="checkmarkColor"
-      >
-        <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>
-        <label-text :isDisabled="item.disabled">{{ 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>
-      </image-container>
-      <modal
-        v-if="item.img"
-        :isOpen="isImageOpen(index)"
-        @on-close="toggleImageModal(null)"
-      >
-        <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 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 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: 15px;
-  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'
-        ? '16px'
-        : '12px'};
-    background-color: #fff;
-    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};
-    }
-  }
-`
-
-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 ImageContainer = styled.div`
-  border-radius: 4px;
-  cursor: pointer;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  position: relative;
-
-  .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;
-    }
-  }
-`
-
-const ModalImage = styled.img``
-
-const ModalImageContainer = styled.div`
-  padding: 40px;
-`
-
-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
-    },
-    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>
+<template>
+  <component-wrapper :layout="layout">
+    <radio-wrapper v-for="(item, index) in options" :key="item.value">
+      <label-container
+        :size="size"
+        :isDisabled="item.disabled"
+        :isChecked="selectedOption === item.value"
+        :checkmarkColor="checkmarkColor"
+      >
+        <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>
+        <label-text :isDisabled="item.disabled">{{ 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>
+      </image-container>
+      <modal
+        v-if="item.img"
+        :isOpen="isImageOpen(index)"
+        @on-close="toggleImageModal(null)"
+      >
+        <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 styled from 'vue-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 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: 15px;
+  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'
+        ? '16px'
+        : '12px'};
+    background-color: #fff;
+    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};
+    }
+  }
+`
+
+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 ImageContainer = styled.div`
+  border-radius: 4px;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  position: relative;
+
+  .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;
+    }
+  }
+`
+
+const ModalImage = styled.img``
+
+const ModalImageContainer = styled.div`
+  padding: 40px;
+`
+
+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
+    },
+    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>