@eturnity/eturnity_reusable_components 7.35.0 → 7.35.1-EPDM-10576.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.35.0",
+  "version": "7.35.1-EPDM-10576.5",
   "files": [
     "dist",
     "src"

package/src/components/buttons/mainButton/mainButton.spec.js

@@ -9,8 +9,10 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('MainButton.vue', () => {
-  it('button is rendered', async () => {
-    const wrapper = mount(MainButton, {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(MainButton, {
       props: {
         type: 'primary',
         text: 'Click me',
@@ -23,10 +25,11 @@ describe('MainButton.vue', () => {
         },
       },
     })
+  })
+
+  it('button is rendered with correct props', async () => {
     await wrapper.vm.$nextTick()
     const buttonWrapper = wrapper.find('[data-id="button_wrapper"]')
-
-    // check that the element exists
     expect(buttonWrapper.exists()).toBe(true)
   })
 })

package/src/components/filter/filterSettings.vue

@@ -87,7 +87,10 @@
             :key="index + '_field'"
           >
             <SelectComponent
-              v-if="isMultipleSelector(filter.filter_type)"
+              v-if="
+                isMultipleSelector(filter.filter_type) ||
+                isSingleSelector(filter.filter_type)
+              "
               align-items="vertical"
               :disabled="!filter.choices.length"
               font-size="13px"
@@ -102,16 +105,12 @@
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
               </template>
               <template #dropdown>
-                <DropdownCheckboxContainer
-                  v-for="(filterOption, optionIdx) in filter.choices"
-                  :key="optionIdx + 'optionIdx'"
-                  @click.stop
-                >
-                  <Checkbox
-                    :is-checked="filterOption.selected"
-                    :label="filterOption.text"
-                    size="small"
-                    @on-event-handler="
+                <template v-if="isSingleSelector(filter.filter_type)">
+                  <Option
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    :value="filterOption.text"
+                    @click="
                       onChange({
                         dataType: item.type,
                         value: $event,
@@ -119,8 +118,31 @@
                         field: filter.field,
                       })
                     "
-                  />
-                </DropdownCheckboxContainer>
+                  >
+                    {{ filterOption.text }}
+                  </Option>
+                </template>
+                <template v-else>
+                  <DropdownCheckboxContainer
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    @click.stop
+                  >
+                    <Checkbox
+                      :is-checked="filterOption.selected"
+                      :label="filterOption.text"
+                      size="small"
+                      @on-event-handler="
+                        onChange({
+                          dataType: item.type,
+                          value: $event,
+                          choice: filterOption.choice,
+                          field: filter.field,
+                        })
+                      "
+                    />
+                  </DropdownCheckboxContainer>
+                </template>
               </template>
             </SelectComponent>
             <SectionContainer v-else-if="isRangeSelector(filter.filter_type)">
@@ -305,6 +327,8 @@
   const ContainerWrapper = styled.div`
     position: absolute;
     margin-top: 4px;
+    max-height: 70vh;
+    overflow-y: auto;
     background-color: ${(props) => props.theme.colors.white};
     min-width: 100%;
     width: max-content;
@@ -317,13 +341,15 @@
   const ColAttrs = { numCols: Number, hasActiveView: Boolean }
   const ColumnWrapper = styled('div', ColAttrs)`
     display: grid;
+    max-height: 50vh;
+    overflow-y: auto;
     grid-template-columns: repeat(${(props) => props.numCols}, auto);
 
     ${({ hasActiveView, theme }) =>
       hasActiveView &&
       `
-    border-top: 1px solid ${theme.colors.grey4};
-  `}
+      border-top: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const TitleAttrs = { showBorder: Boolean }
@@ -335,8 +361,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
   `
 
   const ButtonContainer = styled.div`
@@ -372,8 +398,8 @@
     ${({ showBorder, theme }) =>
       showBorder &&
       `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
 
     .ghost {
       opacity: 0.5;
@@ -402,6 +428,7 @@
     display: grid;
     gap: 6px;
     width: 100%;
+    overflow-wrap: anywhere;
     padding: 7px 10px;
     background: ${(props) => props.theme.colors.grey5};
   `
@@ -435,11 +462,11 @@
   `
 
   const UpperContainer = styled.div`
-  display: grid;
-  grid-gap: 20px
-  grid-template-columns: 1fr 1fr;
-  padding: 10px 14px;
-`
+    display: grid;
+    grid-gap: 20px
+    grid-template-columns: 1fr 1fr;
+    padding: 10px 14px;
+  `
 
   const ResetButton = styled.div`
     display: inline-flex;
@@ -622,6 +649,9 @@
         const foundItem = options.find((item) => item.choice === value)
         return foundItem ? foundItem.text : value ? value : filter.selectedText
       },
+      isSingleSelector(type) {
+        return type === 'boolean'
+      },
       isMultipleSelector(type) {
         return type === 'multi_select_integer' || type === 'multi_select_string'
       },

package/src/components/filter/index.vue

@@ -92,7 +92,7 @@
     mounted() {
       document.addEventListener('click', this.clickOutside)
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -3,55 +3,61 @@ import Checkbox from './index.vue'
 export default {
   title: 'Checkbox',
   component: Checkbox,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Checkbox },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<checkbox v-bind="$props" />',
-
-  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
-  //To use:
-  // <checkbox
-  //     label="Do you accept the Terms?"
-  //     :isChecked="isChecked" //required
-  //     @on-event-handler="onInputChange($event)" //required
-  //     checkColor="blue"
-  //     size="small"
-  //     backgroundColor="red"
-  //     :isDisabled="true"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  isDisabled: false,
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
+//     :isDisabled="true"
+//     cursorType="default"
+// />
+
+export const DefaultCheckbox = {
+  args: {
+    isChecked: 'false',
+  },
+}
+
+export const IsChecked = {
+  args: {
+    isChecked: 'true',
+  },
+}
+
+export const CheckboxLabel = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+  },
 }
 
-export const Small = Template.bind({})
-Small.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
-  isDisabled: false,
+export const SmallCheckbox = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+    size: 'small',
+  },
 }
 
-export const CustomColor = Template.bind({})
-CustomColor.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  checkColor: 'blue',
-  backgroundColor: 'red',
-  isDisabled: false,
+export const DisabledCheckbox = {
+  args: {
+    isChecked: false,
+    label: 'Click me',
+    size: 'small',
+    isDisabled: 'true',
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isChecked: false,
-  size: 'medium', // "small" or "medium"
-  isDisabled: true,
+export const CustomColor = {
+  args: {
+    isChecked: 'false',
+    size: 'medium',
+    checkColor: 'blue',
+    backgroundColor: 'yellow',
+  },
 }

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

@@ -0,0 +1,109 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Checkbox from '@/components/inputs/checkbox'
+import theme from '@/assets/theme'
+
+describe('Checkbox Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Checkbox, {
+      props: {
+        isChecked: false,
+        label: 'Click me',
+        isDisabled: false,
+        dataId: 'checkbox_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+  it('checkbox is rendered and emits correct payload on change', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+    expect(wrapper.vm.label).toBe('Click me')
+    expect(wrapper.vm.size).toBe('medium')
+    expect(wrapper.vm.isDisabled).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+  })
+  it('disabled should not emit anything', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ isDisabled: true })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isDisabled).toBe(true)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvents = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvents).toBeUndefined() // No event should be emitted
+  })
+  it('checkbox can handle multiple clicks', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+
+    // test the 2nd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[1]).toEqual([false])
+    await wrapper.setProps({ isChecked: false }) // manually update the props
+
+    // test the 3rd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[2]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+  })
+  it('should have a custom background color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ backgroundColor: theme.colors.red })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
+  })
+  it('should have a custom checkbox color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
+  })
+})

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

@@ -4,6 +4,7 @@
       :background-color="backgroundColor"
       :check-color="checkColor"
       :cursor-type="cursorType"
+      :data-test-id="dataId"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"

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

@@ -9,7 +9,7 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('RCToggle.vue', () => {
-  it('checkbox is rendered and emits correct payload on change', async () => {
+  it('toggle is rendered and emits correct payload on change', async () => {
     const wrapper = mount(RCToggle, {
       props: { isChecked: true, label: 'Test label', disabled: false },
       global: {
@@ -42,7 +42,7 @@ describe('RCToggle.vue', () => {
     // Check the payload of the event
     expect(emittedEvent[0]).toEqual([false])
   }),
-    it('checkbox disabled does not emit anything', async () => {
+    it('toggle disabled does not emit anything', async () => {
       const wrapper = mount(RCToggle, {
         props: { isChecked: false, disabled: true },
         global: {