@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9-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,79 +1,79 @@
-import defaultProps from './defaultProps'
-import DraggableCard from './index.vue'
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'DraggableCard',
-  component: DraggableCard,
-  tags: ['autodocs'],
-}
-
-const TextContainer = styled.div`
-  font-family: ${theme.fonts.mainFont};
-  color: ${theme.colors.white};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 0%;
-`
-
-const CompleteTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      <template #footer>
-        <TextContainer>{{ args.sampleFooter }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const Default = CompleteTemplate.bind({})
-Default.args = {
-  ...defaultProps,
-}
-
-export const NotCollapsible = CompleteTemplate.bind({})
-NotCollapsible.args = {
-  ...defaultProps,
-  isCollapsible: false,
-}
-
-export const AdjustWidth = CompleteTemplate.bind({})
-AdjustWidth.args = {
-  ...defaultProps,
-  minWidth: '100px',
-  maxWidth: '500px',
-}
-
-const NoFooterTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const NoFooter = NoFooterTemplate.bind({})
-NoFooter.args = {
-  ...defaultProps,
-}
+import defaultProps from './defaultProps'
+import DraggableCard from './index.vue'
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'DraggableCard',
+  component: DraggableCard,
+  tags: ['autodocs'],
+}
+
+const TextContainer = styled.div`
+  font-family: ${theme.fonts.mainFont};
+  color: ${theme.colors.white};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: 0%;
+`
+
+const CompleteTemplate = (args) => {
+  return {
+    components: { DraggableCard, TextContainer },
+    setup() {
+      return { args }
+    },
+    template: `
+      <DraggableCard v-bind="args">
+      <template #body>
+        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
+        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
+      </template>
+      <template #footer>
+        <TextContainer>{{ args.sampleFooter }}</TextContainer>
+      </template>
+      </DraggableCard>
+    `,
+  }
+}
+
+export const Default = CompleteTemplate.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const NotCollapsible = CompleteTemplate.bind({})
+NotCollapsible.args = {
+  ...defaultProps,
+  isCollapsible: false,
+}
+
+export const AdjustWidth = CompleteTemplate.bind({})
+AdjustWidth.args = {
+  ...defaultProps,
+  minWidth: '100px',
+  maxWidth: '500px',
+}
+
+const NoFooterTemplate = (args) => {
+  return {
+    components: { DraggableCard, TextContainer },
+    setup() {
+      return { args }
+    },
+    template: `
+      <DraggableCard v-bind="args">
+      <template #body>
+        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
+        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
+      </template>
+      </DraggableCard>
+    `,
+  }
+}
+
+export const NoFooter = NoFooterTemplate.bind({})
+NoFooter.args = {
+  ...defaultProps,
+}