@eturnity/eturnity_reusable_components 8.10.3-EPDM-13568.6 → 8.10.3-EPDM-14085.2

package/src/components/buttons/buttonIcon/index.vue

@@ -2,34 +2,19 @@
   <PageContainer>
     <ButtonWrapper
       :app-theme="appTheme"
-      :button-size="buttonSize"
       :custom-color="customColor"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
-      :type="type"
-      :variant="variant"
     >
-      <IconContainer
-        :app-theme="appTheme"
-        :button-size="buttonSize"
-        :type="type"
-        :variant="variant"
-      >
+      <IconContainer :width="height">
         <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          :hovered-color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
+          :color="fontColor ? fontColor : theme.colors.white"
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -46,6 +31,7 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
+  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -55,107 +41,67 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
-    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    buttonSize: String,
-    variant: String,
     appTheme: String,
     isActive: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
     grid-template-columns: auto 1fr;
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.black
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
-        : props.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
+        : props.appTheme === 'dark'
+        ? props.isActive
+          ? 'rgba(255, 255, 255, 0.2)'
+          : props.theme.colors.black
+        : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => props.minWidth || 'initial'};
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      opacity: 1;
     }
   `
 
   const ButtonContainerAttrs = {
-    buttonSize: String,
+    fontSize: String,
+    fontColor: String,
   }
   const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    padding: 5px 10px;
     white-space: nowrap;
   `
 
   const IconContainerAttrs = {
-    buttonSize: String,
-    appTheme: String,
-    type: String,
-    variant: String,
+    width: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.appTheme][props.type][props.variant]
-          .default.borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+    padding: 5px;
   `
 
   export default {
@@ -168,26 +114,6 @@
       Icon,
     },
     props: {
-      type: {
-        required: false,
-        default: 'primary',
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main',
-        type: String,
-      },
-      themeType: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
       isDisabled: {
         required: false,
         default: false,
@@ -211,7 +137,7 @@
         required: true,
         type: String,
       },
-      iconColor: {
+      fontColor: {
         required: false,
         default: null,
         type: String,
@@ -231,20 +157,16 @@
         default: false,
         type: Boolean,
       },
+      height: {
+        required: false,
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
   }
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -2,25 +2,18 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
+      :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
+      :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
-      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon
-          v-if="icon"
-          :color="getIconColor"
-          :hovered-color="getIconColor"
-          :name="icon"
-          size="14px"
-        />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -42,7 +35,6 @@
 
   import styled from 'vue3-styled-components'
   import Icon from '../../icon'
-  import theme from '../../../assets/theme'
 
   const PageContainer = styled.div``
 
@@ -50,39 +42,34 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    customColor: String,
+    fontColor: String,
     noWrap: Boolean,
     height: String,
-    variant: String,
-    buttonSize: String,
-    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
+    padding: 7px 15px;
+    font-size: 14px;
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -92,21 +79,11 @@
     height: ${(props) => props.height};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      opacity: 1;
     }
   `
 
@@ -132,12 +109,7 @@
     props: {
       type: {
         required: false,
-        default: 'primary', // primary, secondary, tertiary, ghost
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main', // main, cancel
+        default: 'primary',
         type: String,
       },
       isDisabled: {
@@ -159,6 +131,16 @@
         required: true,
         type: String,
       },
+      customColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      fontColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
       noWrap: {
         required: false,
         default: false,
@@ -187,27 +169,6 @@
         type: String,
         default: '',
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
-    },
-    computed: {
-      theme() {
-        return theme
-      },
-      getIconColor() {
-        return this.isDisabled
-          ? this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .disabled.textColor
-          : this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .default.textColor
-      },
     },
   }
 </script>

package/src/components/draggableCard/defaultProps.js

@@ -0,0 +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

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

@@ -0,0 +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)
+  })
+})

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

@@ -0,0 +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,
+}