@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

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

@@ -1,77 +1,77 @@
-import { useArgs } from '@storybook/preview-api'
-import { action } from '@storybook/addon-actions'
-import defaultRadioButtonProps from './defaultProps'
-import RadioButton from './index.vue'
-
-export default {
-  title: 'RadioButton',
-  component: RadioButton,
-  tags: ['autodocs'],
-}
-
-// To use:
-// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
-// <radio-button
-//     checkmarkColor="red"
-//     dataId="radio_button"
-//     layout="horizontal" //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
-//     name="Name for Radio buttons"
-//     :options="radioOptions"
-//     :selectedOption="checkedOption"
-//     size="medium" // small, medium, large
-//     @on-radio-change="onInputChange($event)"
-//   />
-// Data being passed should look like:
-// radioOptions: [
-//  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-//  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-//  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
-//  { label: 'Option 4', value: 'option_4', disabled: true }
-// ]
-
-const defaultProps = defaultRadioButtonProps
-
-const Template = (args) => {
-  const [currentArgs, updateArgs] = useArgs()
-
-  const handleRadioChange = ($event) => {
-    action('on-radio-change')($event)
-    updateArgs({ selectedOption: $event })
-  }
-
-  return {
-    components: { RadioButton },
-    setup() {
-      return { args: currentArgs, handleRadioChange }
-    },
-    template: `
-      <RadioButton
-        v-bind="args"
-        @on-radio-change="handleRadioChange"
-      />
-    `,
-  }
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  ...defaultProps,
-}
-
-export const BlueCheckmark = Template.bind({})
-BlueCheckmark.args = {
-  ...defaultProps,
-  checkmarkColor: '#00f',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  ...defaultProps,
-  size: 'small',
-}
-
-export const Vertical = Template.bind({})
-Vertical.args = {
-  ...defaultProps,
-  layout: 'vertical',
-}
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultRadioButtonProps from './defaultProps'
+import RadioButton from './index.vue'
+
+export default {
+  title: 'RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+}
+
+// To use:
+// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+// <radio-button
+//     checkmarkColor="red"
+//     dataId="radio_button"
+//     layout="horizontal" //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+//     name="Name for Radio buttons"
+//     :options="radioOptions"
+//     :selectedOption="checkedOption"
+//     size="medium" // small, medium, large
+//     @on-radio-change="onInputChange($event)"
+//   />
+// Data being passed should look like:
+// radioOptions: [
+//  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+//  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+//  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+//  { label: 'Option 4', value: 'option_4', disabled: true }
+// ]
+
+const defaultProps = defaultRadioButtonProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleRadioChange = ($event) => {
+    action('on-radio-change')($event)
+    updateArgs({ selectedOption: $event })
+  }
+
+  return {
+    components: { RadioButton },
+    setup() {
+      return { args: currentArgs, handleRadioChange }
+    },
+    template: `
+      <RadioButton
+        v-bind="args"
+        @on-radio-change="handleRadioChange"
+      />
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const BlueCheckmark = Template.bind({})
+BlueCheckmark.args = {
+  ...defaultProps,
+  checkmarkColor: '#00f',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...defaultProps,
+  size: 'small',
+}
+
+export const Vertical = Template.bind({})
+Vertical.args = {
+  ...defaultProps,
+  layout: 'vertical',
+}

package/src/components/inputs/radioButton/defaultProps.js

@@ -1,31 +1,33 @@
-const defaultRadioButtonProps = {
-  options: [
-    {
-      label: 'Option 1',
-      value: 'option_1',
-      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/solar_img_i.png',
-    },
-    {
-      label: 'Option 2',
-      value: 'option_2',
-      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/switcher_img_i.png',
-      infoText: 'Option 2 info text',
-    },
-    {
-      label: 'Option 3',
-      value: 'option_3',
-      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/varta_img_i.png',
-      infoText: 'Option 3 info text',
-      disabled: true,
-    },
-    {
-      label: 'Option 4',
-      value: 'option_4',
-      disabled: true,
-      infoText: 'Option 4 info text',
-    },
-  ],
-  selectedOption: 'option_2',
-}
-
-export default defaultRadioButtonProps
+const defaultRadioButtonProps = {
+  dataId: 'radio_buttons',
+  name: 'options',
+  options: [
+    {
+      label: 'Option 1',
+      value: 'option_1',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/solar_img_i.png',
+    },
+    {
+      label: 'Option 2',
+      value: 'option_2',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/switcher_img_i.png',
+      infoText: 'Option 2 info text',
+    },
+    {
+      label: 'Option 3',
+      value: 'option_3',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/varta_img_i.png',
+      infoText: 'Option 3 info text',
+      disabled: true,
+    },
+    {
+      label: 'Option 4',
+      value: 'option_4',
+      disabled: true,
+      infoText: 'Option 4 info text',
+    },
+  ],
+  selectedOption: 'option_2',
+}
+
+export default defaultRadioButtonProps