@eturnity/eturnity_reusable_components 8.22.23-EPDM-15709.0 → 8.22.23-EPDM-13618.1

package/src/components/deleteIcon/index.vue

@@ -1,78 +1,78 @@
-<template>
-  <Wrapper :is-disabled="isDisabled">
-    <DeleteIconRed class="icon-red" :hover-bg="hoverBg" />
-    <DeleteIconGray class="icon-gray" />
-  </Wrapper>
-</template>
-
-<script>
-  // To use:
-  // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
-  import styled from 'vue3-styled-components'
-  import SvgDelete from '../../assets/icons/delete_icon.svg'
-  import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
-
-  const wrapperAttrs = { isDisabled: Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
-    width: 30px;
-    height: 30px;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-
-    .icon-red {
-      display: none;
-    }
-
-    .icon-gray {
-      display: inline;
-    }
-
-    ${(props) =>
-      !props.isDisabled &&
-      `
-      &:hover {
-        .icon-red {
-          display: inline;
-        }
-
-        .icon-gray {
-          display: none;
-        }
-      }
-    `}
-  `
-
-  const IconImageAttrs = { hoverBg: String }
-  const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
-    &:hover {
-      background-color: ${(props) =>
-        props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
-      border-radius: 4px;
-    }
-  `
-
-  const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
-    &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
-      border-radius: 4px;
-    }
-  `
-
-  export default {
-    name: 'DeleteIcon',
-    components: {
-      Wrapper,
-      DeleteIconRed,
-      DeleteIconGray,
-    },
-    props: {
-      isDisabled: {
-        required: false,
-        default: false,
-      },
-      hoverBg: {
-        required: false,
-        default: '',
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper :is-disabled="isDisabled">
+    <DeleteIconRed class="icon-red" :hover-bg="hoverBg" />
+    <DeleteIconGray class="icon-gray" />
+  </Wrapper>
+</template>
+
+<script>
+  // To use:
+  // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
+  import styled from 'vue3-styled-components'
+  import SvgDelete from '../../assets/icons/delete_icon.svg'
+  import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
+
+  const wrapperAttrs = { isDisabled: Boolean }
+  const Wrapper = styled('div', wrapperAttrs)`
+    width: 30px;
+    height: 30px;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+
+    .icon-red {
+      display: none;
+    }
+
+    .icon-gray {
+      display: inline;
+    }
+
+    ${(props) =>
+      !props.isDisabled &&
+      `
+      &:hover {
+        .icon-red {
+          display: inline;
+        }
+
+        .icon-gray {
+          display: none;
+        }
+      }
+    `}
+  `
+
+  const IconImageAttrs = { hoverBg: String }
+  const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+    &:hover {
+      background-color: ${(props) =>
+        props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+      border-radius: 4px;
+    }
+  `
+
+  const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
+    &:hover {
+      background-color: ${(props) => props.theme.colors.grey5};
+      border-radius: 4px;
+    }
+  `
+
+  export default {
+    name: 'DeleteIcon',
+    components: {
+      Wrapper,
+      DeleteIconRed,
+      DeleteIconGray,
+    },
+    props: {
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      hoverBg: {
+        required: false,
+        default: '',
+      },
+    },
+  }
+</script>

package/src/components/draggableCard/defaultProps.js

@@ -1,16 +1,16 @@
-const defaultProps = {
-  title: 'Sample Title',
-  infoText: 'Sample Info Text',
-  initialPosition: { top: '0px', left: '0px' },
-  minWidth: '284px',
-  maxWidth: '284px',
-  dragTargets: ['document'],
-  dragBounds: {},
-  sampleBody1:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  sampleBody2:
-    'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-  sampleFooter: 'Sample footer',
-}
-
-export default defaultProps
+const defaultProps = {
+  title: 'Sample Title',
+  infoText: 'Sample Info Text',
+  initialPosition: { top: '0px', left: '0px' },
+  minWidth: '284px',
+  maxWidth: '284px',
+  dragTargets: ['document'],
+  dragBounds: {},
+  sampleBody1:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  sampleBody2:
+    'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  sampleFooter: 'Sample footer',
+}
+
+export default defaultProps

package/src/components/draggableCard/draggableCard.spec.js

@@ -1,153 +1,153 @@
-import { mount } from '@vue/test-utils'
-import DraggableCard from '@/components/draggableCard'
-import defaultProps from './defaultProps'
-import theme from '@/assets/theme'
-
-// Mock Icon component
-jest.mock('@/components/icon', () => ({
-  name: 'Icon',
-  template: '<div class="mock-icon"></div>',
-}))
-
-// Mock InfoText component
-jest.mock('@/components/infoText', () => ({
-  name: 'InfoText',
-  template: '<div data-test-id="info_text_wrapper"><slot></slot></div>',
-  props: ['text', 'size', 'infoPosition'],
-}))
-
-describe('DraggableCard.vue', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(DraggableCard, {
-      props: {
-        title: 'Test Title',
-        isCollapsed: false,
-        width: '300px',
-        initialPosition: { top: '0px', left: '0px' },
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-
-  it('renders card with title', () => {
-    const header = wrapper.find('[data-test-id="draggable_card_header"]')
-    expect(header.exists()).toBe(true)
-    expect(header.text()).toContain('Test Title')
-  })
-
-  it('renders properly with required props', () => {
-    expect(
-      wrapper.find('[data-test-id="draggable_card_header"]').exists()
-    ).toBe(true)
-
-    // Expect no footer rendered if not provided
-    const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
-    expect(footerElement.exists()).toBe(false)
-  })
-
-  it('renders body slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: {
-        ...defaultProps,
-        width: '300px',
-        initialPosition: { top: '0px', left: '0px' },
-      },
-      slots: {
-        body: `
-          <div class="custom_body1">${defaultProps.sampleBody1}</div>
-          <div class="custom_body2">${defaultProps.sampleBody2}</div>
-        `,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-    expect(wrapper.find('.custom_body1').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody1)
-    expect(wrapper.find('.custom_body2').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody2)
-  })
-
-  it('renders footer slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: {
-        ...defaultProps,
-        width: '300px',
-        initialPosition: { top: '0px', left: '0px' },
-      },
-      slots: {
-        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_footer"]').exists()
-    ).toBe(true)
-    expect(wrapper.find('.custom_footer').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleFooter)
-  })
-
-  it('emits "on-close" when close button is clicked', async () => {
-    await wrapper
-      .find('[data-test-id="draggable_card_close_button"]')
-      .trigger('click')
-    expect(wrapper.emitted('on-close')).toBeTruthy()
-  })
-
-  it('toggles collapse state when clicked', async () => {
-    const collapseButton = wrapper.find(
-      '[data-test-id="draggable_card_collapse_button"]'
-    )
-    expect(collapseButton.exists()).toBe(true)
-
-    await collapseButton.trigger('click')
-    expect(wrapper.vm.isCollapsed).toBe(true)
-  })
-
-  it('handles drag events', async () => {
-    const dragIcon = wrapper.find('[data-test-id="draggable_card_drag_icon"]')
-    expect(dragIcon.exists()).toBe(true)
-
-    await dragIcon.trigger('mousedown', { clientX: 100, clientY: 100 })
-    expect(wrapper.vm.isDragging).toBe(true)
-
-    await wrapper.trigger('mousemove', { clientX: 200, clientY: 200 })
-    expect(wrapper.vm.eventCoordinates).toEqual({ x: 100, y: 100 })
-
-    // Reset drag state
-    wrapper.vm.isDragging = false
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.isDragging).toBe(false)
-  })
-
-  it('should apply custom class when provided', () => {
-    const customClass = 'test-class'
-    const wrapper = mount(DraggableCard, {
-      props: {
-        ...defaultProps,
-        customClass,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const container = wrapper.find('[data-test-id="draggable_card_container"]')
-    expect(container.exists()).toBe(true)
-    expect(container.classes()).toContain(customClass)
-  })
-})
+import { mount } from '@vue/test-utils'
+import DraggableCard from '@/components/draggableCard'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+
+// Mock Icon component
+jest.mock('@/components/icon', () => ({
+  name: 'Icon',
+  template: '<div class="mock-icon"></div>',
+}))
+
+// Mock InfoText component
+jest.mock('@/components/infoText', () => ({
+  name: 'InfoText',
+  template: '<div data-test-id="info_text_wrapper"><slot></slot></div>',
+  props: ['text', 'size', 'infoPosition'],
+}))
+
+describe('DraggableCard.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(DraggableCard, {
+      props: {
+        title: 'Test Title',
+        isCollapsed: false,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  it('renders card with title', () => {
+    const header = wrapper.find('[data-test-id="draggable_card_header"]')
+    expect(header.exists()).toBe(true)
+    expect(header.text()).toContain('Test Title')
+  })
+
+  it('renders properly with required props', () => {
+    expect(
+      wrapper.find('[data-test-id="draggable_card_header"]').exists()
+    ).toBe(true)
+
+    // Expect no footer rendered if not provided
+    const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
+    expect(footerElement.exists()).toBe(false)
+  })
+
+  it('renders body slot content correctly', () => {
+    const wrapper = mount(DraggableCard, {
+      props: {
+        ...defaultProps,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
+      slots: {
+        body: `
+          <div class="custom_body1">${defaultProps.sampleBody1}</div>
+          <div class="custom_body2">${defaultProps.sampleBody2}</div>
+        `,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(wrapper.find('.custom_body1').exists()).toBe(true)
+    expect(wrapper.text()).toContain(defaultProps.sampleBody1)
+    expect(wrapper.find('.custom_body2').exists()).toBe(true)
+    expect(wrapper.text()).toContain(defaultProps.sampleBody2)
+  })
+
+  it('renders footer slot content correctly', () => {
+    const wrapper = mount(DraggableCard, {
+      props: {
+        ...defaultProps,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
+      slots: {
+        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(
+      wrapper.find('[data-test-id="draggable_card_footer"]').exists()
+    ).toBe(true)
+    expect(wrapper.find('.custom_footer').exists()).toBe(true)
+    expect(wrapper.text()).toContain(defaultProps.sampleFooter)
+  })
+
+  it('emits "on-close" when close button is clicked', async () => {
+    await wrapper
+      .find('[data-test-id="draggable_card_close_button"]')
+      .trigger('click')
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+
+  it('toggles collapse state when clicked', async () => {
+    const collapseButton = wrapper.find(
+      '[data-test-id="draggable_card_collapse_button"]'
+    )
+    expect(collapseButton.exists()).toBe(true)
+
+    await collapseButton.trigger('click')
+    expect(wrapper.vm.isCollapsed).toBe(true)
+  })
+
+  it('handles drag events', async () => {
+    const dragIcon = wrapper.find('[data-test-id="draggable_card_drag_icon"]')
+    expect(dragIcon.exists()).toBe(true)
+
+    await dragIcon.trigger('mousedown', { clientX: 100, clientY: 100 })
+    expect(wrapper.vm.isDragging).toBe(true)
+
+    await wrapper.trigger('mousemove', { clientX: 200, clientY: 200 })
+    expect(wrapper.vm.eventCoordinates).toEqual({ x: 100, y: 100 })
+
+    // Reset drag state
+    wrapper.vm.isDragging = false
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isDragging).toBe(false)
+  })
+
+  it('should apply custom class when provided', () => {
+    const customClass = 'test-class'
+    const wrapper = mount(DraggableCard, {
+      props: {
+        ...defaultProps,
+        customClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const container = wrapper.find('[data-test-id="draggable_card_container"]')
+    expect(container.exists()).toBe(true)
+    expect(container.classes()).toContain(customClass)
+  })
+})