@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

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

@@ -1,67 +1,67 @@
-import { useArgs } from '@storybook/preview-api'
-import { action } from '@storybook/addon-actions'
-import defaultSearchInputProps from './defaultProps'
-import SearchInput from './index.vue'
-
-export default {
-  title: 'SearchInput',
-  component: SearchInput,
-  tags: ['autodocs'],
-}
-
-// To use:
-
-const defaultProps = defaultSearchInputProps
-
-const Template = (args) => {
-  const [currentArgs, updateArgs] = useArgs()
-
-  const handleInputChange = ($event) => {
-    action('on-change')($event)
-    updateArgs({ value: $event })
-  }
-
-  return {
-    components: { SearchInput },
-    setup() {
-      return { args: currentArgs, handleInputChange }
-    },
-    template: `
-      <SearchInput
-        v-bind="args"
-        @on-change="handleInputChange"
-      />
-    `,
-  }
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  ...defaultProps,
-}
-
-export const Placeholder = Template.bind({})
-Placeholder.args = {
-  ...defaultProps,
-  placeholder: 'Search... ',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  ...defaultProps,
-  disabled: true,
-}
-
-export const StyledIcon = Template.bind({})
-StyledIcon.args = {
-  ...defaultProps,
-  'icon-color': 'red',
-  'icon-position': 'left',
-}
-
-export const Sizes = Template.bind({})
-Sizes.args = {
-  ...defaultProps,
-  'input-width': '250px',
-  'is-filter': true,
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultSearchInputProps from './defaultProps'
+import SearchInput from './index.vue'
+
+export default {
+  title: 'SearchInput',
+  component: SearchInput,
+  tags: ['autodocs'],
+}
+
+// To use:
+
+const defaultProps = defaultSearchInputProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleInputChange = ($event) => {
+    action('on-change')($event)
+    updateArgs({ value: $event })
+  }
+
+  return {
+    components: { SearchInput },
+    setup() {
+      return { args: currentArgs, handleInputChange }
+    },
+    template: `
+      <SearchInput
+        v-bind="args"
+        @on-change="handleInputChange"
+      />
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const Placeholder = Template.bind({})
+Placeholder.args = {
+  ...defaultProps,
+  placeholder: 'Search... ',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...defaultProps,
+  disabled: true,
+}
+
+export const StyledIcon = Template.bind({})
+StyledIcon.args = {
+  ...defaultProps,
+  'icon-color': 'red',
+  'icon-position': 'left',
+}
+
+export const Sizes = Template.bind({})
+Sizes.args = {
+  ...defaultProps,
+  'input-width': '250px',
+  'is-filter': true,
 }

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

@@ -1,12 +1,12 @@
-const defaultSearchInputProps = {
-  dataId: 'search_input_id',
-  disabled: false, //
-  hasFocus: false, //
-  iconColor: 'black',
-  iconPosition: 'right',
-  inputWidth: null, //
-  isFilter: false,
-  placeholder: '',
-  value: '',
-}
-export default defaultSearchInputProps
+const defaultSearchInputProps = {
+  dataId: 'search_input_id',
+  disabled: false, //
+  hasFocus: false, //
+  iconColor: 'black',
+  iconPosition: 'right',
+  inputWidth: null, //
+  isFilter: false,
+  placeholder: '',
+  value: '',
+}
+export default defaultSearchInputProps

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

@@ -1,181 +1,181 @@
-<template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :icon-color="iconColor"
-      :icon-position="iconPosition"
-      :is-full-height="isFullHeight"
-    >
-      <SearchIconSvg class="search-icn" />
-      <InputContainer
-        ref="inputElement"
-        :data-id="dataId"
-        :data-qa-id="dataQaId"
-        :disabled="disabled"
-        :has-focus="hasFocus"
-        :input-width="inputWidth"
-        :is-disabled="disabled"
-        :is-filter="isFilter"
-        :is-full-height="isFullHeight"
-        :placeholder="placeholder"
-        :value="value"
-        @input="onChangeHandler($event)"
-      />
-    </InputWrapper>
-  </Container>
-</template>
-
-<script>
-  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-  // To use:
-  // <search-input
-  //   data-id='search_input_id'
-  //   :disabled="true"
-  //   :has-focus="true"
-  //   icon-color="grey2" // colors only from theme
-  //   icon-position="left"
-  //   input-width="250px"
-  //   :is-filter="true" // to set the height at 30px
-  //   placeholder="Search by company name"
-  //   :value="companyName"
-  //   @on-change="function($event)"
-  // />
-  import styled from 'vue3-styled-components'
-  import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
-
-  const inputAttrs = {
-    isDisabled: Boolean,
-    inputWidth: String,
-    isFilter: Boolean,
-    isFullHeight: Boolean,
-  }
-  const Container = styled('div', inputAttrs)`
-    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-    position: relative;
-  `
-
-  const InputContainer = styled('input', inputAttrs)`
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    padding: ${(props) =>
-      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
-    border-radius: 4px;
-    font-size: 13px;
-    color: ${(props) => props.theme.colors.black};
-    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
-    box-sizing: border-box;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-    background: ${(props) => props.theme.colors.white} !important;
-    &::placeholder {
-      color: ${(props) => props.theme.colors.darkGray};
-    }
-
-    &:focus {
-      outline: none;
-    }
-  `
-
-  const wrapperAttrs = {
-    iconColor: String,
-    iconPosition: String,
-    isFullHeight: Boolean,
-  }
-  const InputWrapper = styled('div', wrapperAttrs)`
-    position: relative;
-    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
-
-    svg {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
-
-      path {
-        fill: ${(props) =>
-          props.theme.colors[props.iconColor]
-            ? props.theme.colors[props.iconColor]
-            : props.iconColor};
-      }
-    }
-  `
-
-  export default {
-    name: 'SearchInput',
-    components: {
-      InputContainer,
-      InputWrapper,
-      Container,
-      SearchIconSvg,
-    },
-    props: {
-      value: {
-        type: [String, Number],
-        required: true,
-      },
-      disabled: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      placeholder: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      inputWidth: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      isFilter: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      hasFocus: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      dataId: {
-        required: false,
-        default: '',
-        type: [String, Number],
-      },
-      dataQaId: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      iconPosition: {
-        type: String,
-        default: 'right',
-      },
-      iconColor: {
-        type: String,
-        default: 'black',
-      },
-      isFullHeight: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    emits: ['on-change'],
-    watch: {
-      hasFocus(newVal) {
-        if (newVal) {
-          this.focusInputElement()
-        }
-      },
-    },
-    methods: {
-      onChangeHandler(event) {
-        this.$emit('on-change', event.target.value)
-      },
-      focusInputElement() {
-        this.$nextTick(() => {
-          this.$refs.inputElement.$el.focus()
-        })
-      },
-    },
-  }
-</script>
+<template>
+  <Container :input-width="inputWidth">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+      :is-full-height="isFullHeight"
+    >
+      <SearchIconSvg class="search-icn" />
+      <InputContainer
+        ref="inputElement"
+        :data-id="dataId"
+        :data-qa-id="dataQaId"
+        :disabled="disabled"
+        :has-focus="hasFocus"
+        :input-width="inputWidth"
+        :is-disabled="disabled"
+        :is-filter="isFilter"
+        :is-full-height="isFullHeight"
+        :placeholder="placeholder"
+        :value="value"
+        @input="onChangeHandler($event)"
+      />
+    </InputWrapper>
+  </Container>
+</template>
+
+<script>
+  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+  // To use:
+  // <search-input
+  //   data-id='search_input_id'
+  //   :disabled="true"
+  //   :has-focus="true"
+  //   icon-color="grey2" // colors only from theme
+  //   icon-position="left"
+  //   input-width="250px"
+  //   :is-filter="true" // to set the height at 30px
+  //   placeholder="Search by company name"
+  //   :value="companyName"
+  //   @on-change="function($event)"
+  // />
+  import styled from 'vue3-styled-components'
+  import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
+
+  const inputAttrs = {
+    isDisabled: Boolean,
+    inputWidth: String,
+    isFilter: Boolean,
+    isFullHeight: Boolean,
+  }
+  const Container = styled('div', inputAttrs)`
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    position: relative;
+  `
+
+  const InputContainer = styled('input', inputAttrs)`
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    padding: ${(props) =>
+      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+    border-radius: 4px;
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.black};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
+    box-sizing: border-box;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    background: ${(props) => props.theme.colors.white} !important;
+    &::placeholder {
+      color: ${(props) => props.theme.colors.darkGray};
+    }
+
+    &:focus {
+      outline: none;
+    }
+  `
+
+  const wrapperAttrs = {
+    iconColor: String,
+    iconPosition: String,
+    isFullHeight: Boolean,
+  }
+  const InputWrapper = styled('div', wrapperAttrs)`
+    position: relative;
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
+
+    svg {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
+
+      path {
+        fill: ${(props) =>
+          props.theme.colors[props.iconColor]
+            ? props.theme.colors[props.iconColor]
+            : props.iconColor};
+      }
+    }
+  `
+
+  export default {
+    name: 'SearchInput',
+    components: {
+      InputContainer,
+      InputWrapper,
+      Container,
+      SearchIconSvg,
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        required: true,
+      },
+      disabled: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      placeholder: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      inputWidth: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      isFilter: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      hasFocus: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      dataId: {
+        required: false,
+        default: '',
+        type: [String, Number],
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      iconPosition: {
+        type: String,
+        default: 'right',
+      },
+      iconColor: {
+        type: String,
+        default: 'black',
+      },
+      isFullHeight: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['on-change'],
+    watch: {
+      hasFocus(newVal) {
+        if (newVal) {
+          this.focusInputElement()
+        }
+      },
+    },
+    methods: {
+      onChangeHandler(event) {
+        this.$emit('on-change', event.target.value)
+      },
+      focusInputElement() {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus()
+        })
+      },
+    },
+  }
+</script>

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

@@ -1,65 +1,65 @@
-import { mount } from '@vue/test-utils'
-import SearchInput from '@/components/inputs/searchInput'
-import defaultSearchInputProps from './defaultProps'
-import theme from '@/assets/theme'
-
-describe('SearchInput.vue', () => {
-  let searchInput
-  let searchInputWrapper
-
-  beforeEach(() => {
-    searchInput = mount(SearchInput, {
-      props: defaultSearchInputProps,
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const defaultDataId = searchInput.props('dataId')
-    searchInputWrapper = searchInput.find(`[data-id="${defaultDataId}"]`)
-  })
-
-  it('Search input is rendered and displays the correct placeholder', async () => {
-    // Check that Search input has been rendered
-    expect(searchInputWrapper.exists()).toBe(true)
-
-    // Set the placeholder
-    const placeholderText = 'Search by company name'
-    await searchInput.setProps({ placeholder: placeholderText })
-    await searchInput.vm.$nextTick()
-
-    // Check that the input displays the correct placeholder
-    expect(searchInputWrapper.attributes('placeholder')).toBe(placeholderText)
-  })
-
-  it('Search input emits correct payload on change', async () => {
-    // Simulate user input
-    const inputValue = 'test input'
-    await searchInputWrapper.setValue(inputValue)
-
-    // Check that the component emitted the 'on-change' event with correct payload
-    expect(searchInput.emitted('on-change')).toBeTruthy()
-    expect(searchInput.emitted('on-change')[0]).toEqual([inputValue])
-  })
-
-  it('test disabled prop', async () => {
-    await searchInput.setProps({ disabled: true })
-    await searchInput.vm.$nextTick()
-
-    expect(searchInputWrapper.attributes()).toHaveProperty('disabled')
-    expect(searchInputWrapper.element.disabled).toBe(true)
-  })
-
-  it('test hasFocus prop', async () => {
-    // Spy on the focus method
-    const focusSpy = jest.spyOn(searchInputWrapper.element, 'focus')
-
-    await searchInput.setProps({ hasFocus: true })
-    await searchInput.vm.$nextTick()
-
-    // Check that the focus method was called
-    expect(focusSpy).toHaveBeenCalled()
-  })
+import { mount } from '@vue/test-utils'
+import SearchInput from '@/components/inputs/searchInput'
+import defaultSearchInputProps from './defaultProps'
+import theme from '@/assets/theme'
+
+describe('SearchInput.vue', () => {
+  let searchInput
+  let searchInputWrapper
+
+  beforeEach(() => {
+    searchInput = mount(SearchInput, {
+      props: defaultSearchInputProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const defaultDataId = searchInput.props('dataId')
+    searchInputWrapper = searchInput.find(`[data-id="${defaultDataId}"]`)
+  })
+
+  it('Search input is rendered and displays the correct placeholder', async () => {
+    // Check that Search input has been rendered
+    expect(searchInputWrapper.exists()).toBe(true)
+
+    // Set the placeholder
+    const placeholderText = 'Search by company name'
+    await searchInput.setProps({ placeholder: placeholderText })
+    await searchInput.vm.$nextTick()
+
+    // Check that the input displays the correct placeholder
+    expect(searchInputWrapper.attributes('placeholder')).toBe(placeholderText)
+  })
+
+  it('Search input emits correct payload on change', async () => {
+    // Simulate user input
+    const inputValue = 'test input'
+    await searchInputWrapper.setValue(inputValue)
+
+    // Check that the component emitted the 'on-change' event with correct payload
+    expect(searchInput.emitted('on-change')).toBeTruthy()
+    expect(searchInput.emitted('on-change')[0]).toEqual([inputValue])
+  })
+
+  it('test disabled prop', async () => {
+    await searchInput.setProps({ disabled: true })
+    await searchInput.vm.$nextTick()
+
+    expect(searchInputWrapper.attributes()).toHaveProperty('disabled')
+    expect(searchInputWrapper.element.disabled).toBe(true)
+  })
+
+  it('test hasFocus prop', async () => {
+    // Spy on the focus method
+    const focusSpy = jest.spyOn(searchInputWrapper.element, 'focus')
+
+    await searchInput.setProps({ hasFocus: true })
+    await searchInput.vm.$nextTick()
+
+    // Check that the focus method was called
+    expect(focusSpy).toHaveBeenCalled()
+  })
 })