@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.1 → 7.45.5-qa-16-11.13

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

@@ -1,269 +1,269 @@
-import { mount, DOMWrapper } from '@vue/test-utils'
-import RadioButton from '@/components/inputs/radioButton'
-import defaultRadioButtonProps from './defaultProps'
-import theme from '@/assets/theme'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
-}))
-jest.mock('../../../assets/icons/search_icon.png', () => 'search_icon.png')
-
-describe('RadioButton.vue', () => {
-  const radioButtons = mount(RadioButton, {
-    props: defaultRadioButtonProps,
-    global: {
-      provide: {
-        theme,
-      },
-    },
-  })
-  function findRadioWrappersByCriteria(criteria) {
-    // criteria === ['active', ..., 'hasImage'], can include any number of criteria
-    // This function is used for getting a list of
-    // RadioWrapper components which matches
-    // all the requested criteria (conjunctive filtering).
-    // Make sure that criteria don't contradict each other.
-    // List of possible criteria =
-    //  - active || disabled
-    //  - checked || unchecked
-    //  - hasInfoIcon
-    //  - hasImage
-
-    function getParentRadioWrapper(element) {
-      // function is used for getting a parent RadioWrapper component
-      const radioWrapper = element.element.closest(
-        '[data-test-id^="radioWrapper_"]'
-      )
-      return radioWrapper ? new DOMWrapper(radioWrapper) : null
-    }
-
-    const elementsWithTestIds = radioButtons.findAll('[data-test-id]')
-    let resultsObject = {}
-
-    criteria.forEach((criterion) => {
-      resultsObject[criterion] = []
-      if (criterion === 'active' || criterion === 'disabled') {
-        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
-          element.attributes('data-test-id').startsWith('radioInput_')
-        )
-        criteriaRelatedElements.forEach((el) => {
-          const element = el.element
-          if (criterion === 'active' ? !element.disabled : element.disabled) {
-            resultsObject[criterion].push(getParentRadioWrapper(el))
-          }
-        })
-      }
-      if (criterion === 'checked' || criterion === 'unchecked') {
-        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
-          element.attributes('data-test-id').startsWith('radioInput_')
-        )
-        criteriaRelatedElements.forEach((el) => {
-          const element = el.element
-          if (criterion === 'checked' ? element.checked : !element.checked) {
-            resultsObject[criterion].push(getParentRadioWrapper(el))
-          }
-        })
-      }
-      if (criterion === 'hasInfoIcon') {
-        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
-          element.attributes('data-test-id').startsWith('radioInfo_')
-        )
-        criteriaRelatedElements.forEach((element) => {
-          resultsObject[criterion].push(getParentRadioWrapper(element))
-        })
-      }
-      if (criterion === 'hasImage') {
-        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
-          element.attributes('data-test-id').startsWith('radioOpenImage_')
-        )
-        criteriaRelatedElements.forEach((element) => {
-          resultsObject[criterion].push(getParentRadioWrapper(element))
-        })
-      }
-    })
-
-    let resultArray = []
-    Object.keys(resultsObject).forEach((criterion, index) => {
-      if (index === 0) {
-        resultArray = [...resultsObject[criterion]]
-      } else {
-        resultArray = resultArray.filter((element) =>
-          resultsObject[criterion]
-            .map((item) => item.attributes('data-test-id'))
-            .includes(element.attributes('data-test-id'))
-        )
-      }
-    })
-
-    return resultArray
-  }
-
-  it('Radio buttons are rendered and emit correct payload on change', async () => {
-    //check that all the options have been rendered
-    let radioBtnWrappers = radioButtons.findAll('[data-test-id]')
-    radioBtnWrappers = radioBtnWrappers.filter((wrapper) =>
-      wrapper.attributes('data-test-id').startsWith('radioWrapper_')
-    )
-    const numberOfOptions = radioButtons.props('options').length
-    expect(radioBtnWrappers).toHaveLength(numberOfOptions)
-
-    // check that the selected element exists and there is only a single copy of it and has correct value
-    const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
-    expect(checkedWrapperArray.length).toBe(1)
-    const checkedWrapper = checkedWrapperArray[0]
-    const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
-    const defaultValueFromProps = radioButtons.props('selectedOption')
-    expect(checkedRadioInput.attributes('value')).toBe(
-      defaultValueFromProps
-    )
-
-    // Log attributes to see what is rendered (commented out just for reference)
-    // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
-
-    // Test the label
-    const labelOfDefaultValue = radioButtons
-      .props('options')
-      .find((option) => option.value === defaultValueFromProps).label
-    expect(checkedWrapper.text()).toContain(labelOfDefaultValue)
-
-    // Test the click on unselected active element
-    const uncheckedWrapperArray = findRadioWrappersByCriteria([
-      'unchecked',
-      'active',
-    ])
-    const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
-      .attributes('data-test-id')
-      .replace('radioWrapper_', '')
-    const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
-    await uncheckedLabelWrapper.trigger('click')
-    expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
-    const emittedEvents = radioButtons.emitted('on-radio-change')
-    expect(emittedEvents).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvents[emittedEvents.length - 1]).toEqual([
-      expectedValueOfEmittedEvent,
-    ])
-    await radioButtons.setProps({ selectedOption: expectedValueOfEmittedEvent })
-  }),
-    it('click on disabled element (|| selected element || info icon || image) does not emit anything', async () => {
-      // Remember the number of emitted events before triggering clicks
-      const initialNumberOfEvents =
-        radioButtons.emitted('on-radio-change').length
-
-      // Test RadioWrapper with disabled element
-      const disabledWrapperArray = findRadioWrappersByCriteria(['disabled'])
-      const disabledLabelWrapper = disabledWrapperArray[0].find('label')
-      await disabledLabelWrapper.trigger('click')
-      // Check if we still have the same number of emitted events as at the beginning
-      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
-        initialNumberOfEvents
-      )
-
-      // Get RadioWrapper with selected element
-      const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
-      const checkedLabelWrapper = checkedWrapperArray[0].find('label')
-      await checkedLabelWrapper.trigger('click')
-      // Check if we still have the same number of emitted events as at the beginning
-      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
-        initialNumberOfEvents
-      )
-
-      // Get RadioWrapper with info icon
-      const arrayOfWrappersWithInfoIcons = findRadioWrappersByCriteria([
-        'active',
-        'unchecked',
-        'hasInfoIcon',
-      ])
-      const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
-        '[data-test-id="infoText_trigger"]'
-      )
-      await infoIconForClick.trigger('click')
-      // Check if we still have the same number of emitted events as at the beginning
-      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
-        initialNumberOfEvents
-      )
-
-      // Get RadioWrapper with image
-      const arrayOfWrappersWithImage = findRadioWrappersByCriteria([
-        'active',
-        'unchecked',
-        'hasImage',
-      ])
-      const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
-      const openImageWrapperTestId = testedRadioWrapperWithImage
-        .attributes('data-test-id')
-        .replace('radioWrapper_', 'radioOpenImage_')
-      const openImageWrapper = testedRadioWrapperWithImage.find(
-        `[data-test-id="${openImageWrapperTestId}"]`
-      )
-      await openImageWrapper.trigger('click')
-      // Check if we still have the same number of emitted events as at the beginning
-      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
-        initialNumberOfEvents
-      )
-
-      // Since we just clicked on image miniature
-      // lets check has the corresponding modal been opened
-      // and is the correct image displayed
-      const imageModalWrapperTestId = testedRadioWrapperWithImage
-        .attributes('data-test-id')
-        .replace('radioWrapper_', 'radioModal_')
-      const imageModalWrapper = testedRadioWrapperWithImage.find(
-        `[data-test-id="${imageModalWrapperTestId}"]`
-      )
-      expect(imageModalWrapper.attributes('class')).toContain('visible')
-      const imageWrapperTestId = testedRadioWrapperWithImage
-        .attributes('data-test-id')
-        .replace('radioWrapper_', 'radioImage_')
-      const imageWrapper = testedRadioWrapperWithImage.find(
-        `[data-test-id="${imageWrapperTestId}"]`
-      )
-      const expectedImageSrc = imageWrapper.attributes('src')
-      const modalImageSrc = imageModalWrapper.find('img').attributes('src')
-      expect(modalImageSrc).toBe(expectedImageSrc)
-      //Close the modal
-      radioButtons.find('.visible .close').trigger('click')
-      await radioButtons.vm.$nextTick()
-      expect(imageModalWrapper.attributes('class')).toContain('hidden')
-    }),
-    it('test hover on Info Icon', async () => {
-      // Get RadioWrapper with Info Icon
-      const arrayOfWrappersWithInfoIcon = findRadioWrappersByCriteria([
-        'hasInfoIcon',
-      ])
-      //Select tested item and get expected text within the info badge
-      const testedRadioWrapper =
-        arrayOfWrappersWithInfoIcon[arrayOfWrappersWithInfoIcon.length - 1]
-      const valueOfTestedRadioWrapper = testedRadioWrapper
-        .attributes('data-test-id')
-        .replace('radioWrapper_', '')
-      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
-      const iconForHover = testedRadioWrapper.find(
-        '[data-test-id="infoText_trigger"]'
-      )
-      await iconForHover.trigger('mouseenter')
-      expect(testedRadioWrapper.text()).toContain(expectedText)
-    }),
-    it('Test the click again after all the manipulations', async () => {
-      const uncheckedWrapperArray = findRadioWrappersByCriteria([
-        'unchecked',
-        'active',
-      ])
-      const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
-        .attributes('data-test-id')
-        .replace('radioWrapper_', '')
-      const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
-      await uncheckedLabelWrapper.trigger('click')
-      expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
-      const emittedEvents = radioButtons.emitted('on-radio-change')
-      expect(emittedEvents).toHaveLength(2) // Check that this is just 2nd emitted event
-      // Check the payload of the event
-      expect(emittedEvents[emittedEvents.length - 1]).toEqual([
-        expectedValueOfEmittedEvent,
-      ])
-      await radioButtons.setProps({
-        selectedOption: expectedValueOfEmittedEvent,
-      })
-    })
-})
+import { mount, DOMWrapper } from '@vue/test-utils'
+import RadioButton from '@/components/inputs/radioButton'
+import defaultRadioButtonProps from './defaultProps'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+jest.mock('../../../assets/icons/search_icon.png', () => 'search_icon.png')
+
+describe('RadioButton.vue', () => {
+  const radioButtons = mount(RadioButton, {
+    props: defaultRadioButtonProps,
+    global: {
+      provide: {
+        theme,
+      },
+    },
+  })
+  function findRadioWrappersByCriteria(criteria) {
+    // criteria === ['active', ..., 'hasImage'], can include any number of criteria
+    // This function is used for getting a list of
+    // RadioWrapper components which matches
+    // all the requested criteria (conjunctive filtering).
+    // Make sure that criteria don't contradict each other.
+    // List of possible criteria =
+    //  - active || disabled
+    //  - checked || unchecked
+    //  - hasInfoIcon
+    //  - hasImage
+
+    function getParentRadioWrapper(element) {
+      // function is used for getting a parent RadioWrapper component
+      const radioWrapper = element.element.closest(
+        '[data-test-id^="radioWrapper_"]'
+      )
+      return radioWrapper ? new DOMWrapper(radioWrapper) : null
+    }
+
+    const elementsWithTestIds = radioButtons.findAll('[data-test-id]')
+    let resultsObject = {}
+
+    criteria.forEach((criterion) => {
+      resultsObject[criterion] = []
+      if (criterion === 'active' || criterion === 'disabled') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInput_')
+        )
+        criteriaRelatedElements.forEach((el) => {
+          const element = el.element
+          if (criterion === 'active' ? !element.disabled : element.disabled) {
+            resultsObject[criterion].push(getParentRadioWrapper(el))
+          }
+        })
+      }
+      if (criterion === 'checked' || criterion === 'unchecked') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInput_')
+        )
+        criteriaRelatedElements.forEach((el) => {
+          const element = el.element
+          if (criterion === 'checked' ? element.checked : !element.checked) {
+            resultsObject[criterion].push(getParentRadioWrapper(el))
+          }
+        })
+      }
+      if (criterion === 'hasInfoIcon') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInfo_')
+        )
+        criteriaRelatedElements.forEach((element) => {
+          resultsObject[criterion].push(getParentRadioWrapper(element))
+        })
+      }
+      if (criterion === 'hasImage') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioOpenImage_')
+        )
+        criteriaRelatedElements.forEach((element) => {
+          resultsObject[criterion].push(getParentRadioWrapper(element))
+        })
+      }
+    })
+
+    let resultArray = []
+    Object.keys(resultsObject).forEach((criterion, index) => {
+      if (index === 0) {
+        resultArray = [...resultsObject[criterion]]
+      } else {
+        resultArray = resultArray.filter((element) =>
+          resultsObject[criterion]
+            .map((item) => item.attributes('data-test-id'))
+            .includes(element.attributes('data-test-id'))
+        )
+      }
+    })
+
+    return resultArray
+  }
+
+  it('Radio buttons are rendered and emit correct payload on change', async () => {
+    //check that all the options have been rendered
+    let radioBtnWrappers = radioButtons.findAll('[data-test-id]')
+    radioBtnWrappers = radioBtnWrappers.filter((wrapper) =>
+      wrapper.attributes('data-test-id').startsWith('radioWrapper_')
+    )
+    const numberOfOptions = radioButtons.props('options').length
+    expect(radioBtnWrappers).toHaveLength(numberOfOptions)
+
+    // check that the selected element exists and there is only a single copy of it and has correct value
+    const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
+    expect(checkedWrapperArray.length).toBe(1)
+    const checkedWrapper = checkedWrapperArray[0]
+    const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
+    const defaultValueFromProps = radioButtons.props('selectedOption')
+    expect(checkedRadioInput.attributes('value')).toBe(
+      defaultValueFromProps
+    )
+
+    // Log attributes to see what is rendered (commented out just for reference)
+    // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
+
+    // Test the label
+    const labelOfDefaultValue = radioButtons
+      .props('options')
+      .find((option) => option.value === defaultValueFromProps).label
+    expect(checkedWrapper.text()).toContain(labelOfDefaultValue)
+
+    // Test the click on unselected active element
+    const uncheckedWrapperArray = findRadioWrappersByCriteria([
+      'unchecked',
+      'active',
+    ])
+    const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
+      .attributes('data-test-id')
+      .replace('radioWrapper_', '')
+    const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
+    await uncheckedLabelWrapper.trigger('click')
+    expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
+    const emittedEvents = radioButtons.emitted('on-radio-change')
+    expect(emittedEvents).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvents[emittedEvents.length - 1]).toEqual([
+      expectedValueOfEmittedEvent,
+    ])
+    await radioButtons.setProps({ selectedOption: expectedValueOfEmittedEvent })
+  }),
+    it('click on disabled element (|| selected element || info icon || image) does not emit anything', async () => {
+      // Remember the number of emitted events before triggering clicks
+      const initialNumberOfEvents =
+        radioButtons.emitted('on-radio-change').length
+
+      // Test RadioWrapper with disabled element
+      const disabledWrapperArray = findRadioWrappersByCriteria(['disabled'])
+      const disabledLabelWrapper = disabledWrapperArray[0].find('label')
+      await disabledLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with selected element
+      const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
+      const checkedLabelWrapper = checkedWrapperArray[0].find('label')
+      await checkedLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with info icon
+      const arrayOfWrappersWithInfoIcons = findRadioWrappersByCriteria([
+        'active',
+        'unchecked',
+        'hasInfoIcon',
+      ])
+      const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
+        '[data-test-id="infoText_trigger"]'
+      )
+      await infoIconForClick.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with image
+      const arrayOfWrappersWithImage = findRadioWrappersByCriteria([
+        'active',
+        'unchecked',
+        'hasImage',
+      ])
+      const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
+      const openImageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioOpenImage_')
+      const openImageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${openImageWrapperTestId}"]`
+      )
+      await openImageWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Since we just clicked on image miniature
+      // lets check has the corresponding modal been opened
+      // and is the correct image displayed
+      const imageModalWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioModal_')
+      const imageModalWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageModalWrapperTestId}"]`
+      )
+      expect(imageModalWrapper.attributes('class')).toContain('visible')
+      const imageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioImage_')
+      const imageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageWrapperTestId}"]`
+      )
+      const expectedImageSrc = imageWrapper.attributes('src')
+      const modalImageSrc = imageModalWrapper.find('img').attributes('src')
+      expect(modalImageSrc).toBe(expectedImageSrc)
+      //Close the modal
+      radioButtons.find('.visible .close').trigger('click')
+      await radioButtons.vm.$nextTick()
+      expect(imageModalWrapper.attributes('class')).toContain('hidden')
+    }),
+    it('test hover on Info Icon', async () => {
+      // Get RadioWrapper with Info Icon
+      const arrayOfWrappersWithInfoIcon = findRadioWrappersByCriteria([
+        'hasInfoIcon',
+      ])
+      //Select tested item and get expected text within the info badge
+      const testedRadioWrapper =
+        arrayOfWrappersWithInfoIcon[arrayOfWrappersWithInfoIcon.length - 1]
+      const valueOfTestedRadioWrapper = testedRadioWrapper
+        .attributes('data-test-id')
+        .replace('radioWrapper_', '')
+      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
+      const iconForHover = testedRadioWrapper.find(
+        '[data-test-id="infoText_trigger"]'
+      )
+      await iconForHover.trigger('mouseenter')
+      expect(testedRadioWrapper.text()).toContain(expectedText)
+    }),
+    it('Test the click again after all the manipulations', async () => {
+      const uncheckedWrapperArray = findRadioWrappersByCriteria([
+        'unchecked',
+        'active',
+      ])
+      const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
+        .attributes('data-test-id')
+        .replace('radioWrapper_', '')
+      const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
+      await uncheckedLabelWrapper.trigger('click')
+      expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
+      const emittedEvents = radioButtons.emitted('on-radio-change')
+      expect(emittedEvents).toHaveLength(2) // Check that this is just 2nd emitted event
+      // Check the payload of the event
+      expect(emittedEvents[emittedEvents.length - 1]).toEqual([
+        expectedValueOfEmittedEvent,
+      ])
+      await radioButtons.setProps({
+        selectedOption: expectedValueOfEmittedEvent,
+      })
+    })
+})

package/src/components/inputs/searchInput/SearchInput.stories.js

@@ -1,40 +1,40 @@
-import SearchInput from './index.vue'
-
-export default {
-  title: 'SearchInput',
-  component: SearchInput,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { SearchInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<search-input v-bind="$props" />',
-
-  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-  // To use:
-  // <search-input
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   :disabled="true"
-  //   inputWidth="250px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Search...',
-  disabled: false,
-  value: '',
-  inputWidth: '250px',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Search...',
-  disabled: true,
-  value: '',
-  inputWidth: '250px',
-}
+import SearchInput from './index.vue'
+
+export default {
+  title: 'SearchInput',
+  component: SearchInput,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { SearchInput },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<search-input v-bind="$props" />',
+
+  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+  // To use:
+  // <search-input
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   :disabled="true"
+  //   inputWidth="250px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: 'Search...',
+  disabled: false,
+  value: '',
+  inputWidth: '250px',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: 'Search...',
+  disabled: true,
+  value: '',
+  inputWidth: '250px',
+}