@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

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,273 +1,273 @@
-<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"
-        :size="size"
-      >
-        <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)"
-        />
-        <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)">
-          <img
-            class="search-icn"
-            :src="require('../../../assets/icons/search_icon.png')"
-          />
-        </div>
-      </ImageContainer>
-      <Modal
-        v-if="item.img"
-        :is-open="isImageOpen(index)"
-        @on-close="toggleImageModal(null)"
-      >
-        <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 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,
-    hasLabel: Boolean,
-  }
-  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'
-          ? '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: 'RadioButton',
-    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: '',
-      }
-    },
-    created() {
-      this.radioName =
-        this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
-    },
-    methods: {
-      onInputHandler(value) {
-        this.$emit('on-radio-change', value)
-      },
-      isImageOpen(index) {
-        return this.selectedImage === index
-      },
-      toggleImageModal(value) {
-        this.selectedImage = value
-      },
-    },
-  }
-</script>
+<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"
+        :size="size"
+      >
+        <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)"
+        />
+        <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)">
+          <img
+            class="search-icn"
+            :src="require('../../../assets/icons/search_icon.png')"
+          />
+        </div>
+      </ImageContainer>
+      <Modal
+        v-if="item.img"
+        :is-open="isImageOpen(index)"
+        @on-close="toggleImageModal(null)"
+      >
+        <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 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,
+    hasLabel: Boolean,
+  }
+  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'
+          ? '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: 'RadioButton',
+    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: '',
+      }
+    },
+    created() {
+      this.radioName =
+        this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+    },
+    methods: {
+      onInputHandler(value) {
+        this.$emit('on-radio-change', value)
+      },
+      isImageOpen(index) {
+        return this.selectedImage === index
+      },
+      toggleImageModal(value) {
+        this.selectedImage = value
+      },
+    },
+  }
+</script>