@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

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,99 +1,99 @@
-import { mount } from '@vue/test-utils'
-import DraggableCard from '@/components/draggableCard'
-import defaultProps from './defaultProps'
-
-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')),
-}))
-
-describe('DraggableCard.vue', () => {
-  it('renders properly with required props', () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_header"]').text()
-    ).toContain(defaultProps.title)
-
-    // 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,
-      slots: {
-        body: `
-          <div class="custom_body1">${defaultProps.sampleBody1}</div>
-          <div class="custom_body2">${defaultProps.sampleBody2}</div>
-        `,
-      },
-    })
-    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,
-      slots: {
-        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
-      },
-    })
-    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 () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_close_button"]')
-      .trigger('click')
-    expect(wrapper.emitted('on-close')).toBeTruthy()
-  })
-
-  it('toggles collapse state when arrow icon is clicked', async () => {
-    const wrapper = mount(DraggableCard, {
-      props: { ...defaultProps, isCollapsible: true },
-    })
-    expect(wrapper.vm.isCollapsed).toBe(false)
-    await wrapper
-      .find('[data-test-id="draggable_card_collapse_button"]')
-      .trigger('click')
-    expect(wrapper.vm.isCollapsed).toBe(true)
-  })
-
-  it('handles drag start event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_drag_icon"]')
-      .trigger('mousedown', { clientX: 100, clientY: 100 })
-    expect(wrapper.vm.isDragging).toBe(true)
-  })
-
-  it('handles drag move event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
-    expect(wrapper.vm.eventCoordinates.x).toBe(120)
-    expect(wrapper.vm.eventCoordinates.y).toBe(120)
-  })
-
-  it('handles drag end event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDragEnd()
-    expect(wrapper.vm.isDragging).toBe(false)
-  })
-})
+import { mount } from '@vue/test-utils'
+import DraggableCard from '@/components/draggableCard'
+import defaultProps from './defaultProps'
+
+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')),
+}))
+
+describe('DraggableCard.vue', () => {
+  it('renders properly with required props', () => {
+    const wrapper = mount(DraggableCard, { props: defaultProps })
+    expect(
+      wrapper.find('[data-test-id="draggable_card_header"]').text()
+    ).toContain(defaultProps.title)
+
+    // 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,
+      slots: {
+        body: `
+          <div class="custom_body1">${defaultProps.sampleBody1}</div>
+          <div class="custom_body2">${defaultProps.sampleBody2}</div>
+        `,
+      },
+    })
+    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,
+      slots: {
+        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
+      },
+    })
+    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 () => {
+    const wrapper = mount(DraggableCard, { props: defaultProps })
+    await wrapper
+      .find('[data-test-id="draggable_card_close_button"]')
+      .trigger('click')
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+
+  it('toggles collapse state when arrow icon is clicked', async () => {
+    const wrapper = mount(DraggableCard, {
+      props: { ...defaultProps, isCollapsible: true },
+    })
+    expect(wrapper.vm.isCollapsed).toBe(false)
+    await wrapper
+      .find('[data-test-id="draggable_card_collapse_button"]')
+      .trigger('click')
+    expect(wrapper.vm.isCollapsed).toBe(true)
+  })
+
+  it('handles drag start event', async () => {
+    const wrapper = mount(DraggableCard, { props: defaultProps })
+    await wrapper
+      .find('[data-test-id="draggable_card_drag_icon"]')
+      .trigger('mousedown', { clientX: 100, clientY: 100 })
+    expect(wrapper.vm.isDragging).toBe(true)
+  })
+
+  it('handles drag move event', async () => {
+    const wrapper = mount(DraggableCard, { props: defaultProps })
+    wrapper.vm.onDragStart(
+      { preventDefault: () => {}, clientX: 100, clientY: 100 },
+      false
+    )
+    wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
+    expect(wrapper.vm.eventCoordinates.x).toBe(120)
+    expect(wrapper.vm.eventCoordinates.y).toBe(120)
+  })
+
+  it('handles drag end event', async () => {
+    const wrapper = mount(DraggableCard, { props: defaultProps })
+    wrapper.vm.onDragStart(
+      { preventDefault: () => {}, clientX: 100, clientY: 100 },
+      false
+    )
+    wrapper.vm.onDragEnd()
+    expect(wrapper.vm.isDragging).toBe(false)
+  })
+})

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,135 +1,135 @@
-import DraggableCard from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'DraggableCard',
-  component: DraggableCard,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: 'text',
-      description: 'Width of the card',
-    },
-    initialPosition: {
-      control: 'object',
-      description: 'Initial position of the card (top, right, bottom, left)',
-    },
-    title: {
-      control: 'text',
-      description: 'Title of the card',
-    },
-    titleDataId: {
-      control: 'text',
-      description: 'Data ID for the title',
-    },
-    isCollapsible: {
-      control: 'boolean',
-      description: 'Whether the card can be collapsed',
-    },
-    infoText: {
-      control: 'text',
-      description: 'Additional info text to display next to the title',
-    },
-    dragTargets: {
-      control: 'array',
-      description: 'Targets where the card can be dragged',
-    },
-    dragBounds: {
-      control: 'object',
-      description: 'Boundaries for dragging the card',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { DraggableCard },
-  setup() {
-    return { args }
-  },
-  template: `
-    <DraggableCard v-bind="args">
-      <template #body>
-        <div style="color: white;">Card body content</div>
-      </template>
-      <template #footer>
-        <div style="color: white;">Card footer content</div>
-      </template>
-    </DraggableCard>
-  `,
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Default Card',
-  isCollapsible: true,
-}
-
-export const WithInfoText = Template.bind({})
-WithInfoText.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Info',
-  infoText: 'This is some additional information',
-  isCollapsible: true,
-}
-
-export const NonCollapsible = Template.bind({})
-NonCollapsible.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Non-Collapsible Card',
-  isCollapsible: false,
-}
-
-export const WithDragBounds = Template.bind({})
-WithDragBounds.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Drag Bounds',
-  dragBounds: {
-    min: { top: 0, left: 0 },
-    max: { top: 500, left: 500 },
-  },
-  isCollapsible: true,
-}
-
-export const WithCustomDragTargets = Template.bind({})
-WithCustomDragTargets.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Custom Drag Targets',
-  dragTargets: ['document', 'parent'],
-  isCollapsible: true,
-}
-
-export const WithTitleDataId = Template.bind({})
-WithTitleDataId.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Data ID',
-  titleDataId: 'custom-data-id',
-  isCollapsible: true,
-}
+import DraggableCard from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'DraggableCard',
+  component: DraggableCard,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Width of the card',
+    },
+    initialPosition: {
+      control: 'object',
+      description: 'Initial position of the card (top, right, bottom, left)',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the card',
+    },
+    titleDataId: {
+      control: 'text',
+      description: 'Data ID for the title',
+    },
+    isCollapsible: {
+      control: 'boolean',
+      description: 'Whether the card can be collapsed',
+    },
+    infoText: {
+      control: 'text',
+      description: 'Additional info text to display next to the title',
+    },
+    dragTargets: {
+      control: 'array',
+      description: 'Targets where the card can be dragged',
+    },
+    dragBounds: {
+      control: 'object',
+      description: 'Boundaries for dragging the card',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { DraggableCard },
+  setup() {
+    return { args }
+  },
+  template: `
+    <DraggableCard v-bind="args">
+      <template #body>
+        <div style="color: white;">Card body content</div>
+      </template>
+      <template #footer>
+        <div style="color: white;">Card footer content</div>
+      </template>
+    </DraggableCard>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Default Card',
+  isCollapsible: true,
+}
+
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Info',
+  infoText: 'This is some additional information',
+  isCollapsible: true,
+}
+
+export const NonCollapsible = Template.bind({})
+NonCollapsible.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Non-Collapsible Card',
+  isCollapsible: false,
+}
+
+export const WithDragBounds = Template.bind({})
+WithDragBounds.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Drag Bounds',
+  dragBounds: {
+    min: { top: 0, left: 0 },
+    max: { top: 500, left: 500 },
+  },
+  isCollapsible: true,
+}
+
+export const WithCustomDragTargets = Template.bind({})
+WithCustomDragTargets.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Custom Drag Targets',
+  dragTargets: ['document', 'parent'],
+  isCollapsible: true,
+}
+
+export const WithTitleDataId = Template.bind({})
+WithTitleDataId.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Data ID',
+  titleDataId: 'custom-data-id',
+  isCollapsible: true,
+}