@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.3 → 8.7.5-EPIC-8593.4

package/src/components/barchart/styles/chartControls.js

@@ -0,0 +1,59 @@
+import styled from 'vue3-styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+`
+
+export const LegendAndControlsWrapper = styled('div', { leftMargin: String })`
+  margin-left: ${(props) => props.leftMargin};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const LeftSection = styled.div`
+  flex: 1;
+`
+
+export const SplitButtonsContainer = styled('div', { position: String })`
+  align-self: ${(props) =>
+    props.position === 'top' ? 'flex-end' : 'flex-start'};
+`
+
+export const LegendGroups = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const LegendRow = styled('div', { rowIndex: Number })`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: ${(props) =>
+    props.rowIndex === 0 ? 'flex-start' : 'flex-end'};
+`
+
+export const LegendItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`
+
+export const LegendColor = styled('div', {
+  gradientFrom: String,
+  gradientTo: String,
+})`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: ${(props) =>
+    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
+`
+
+export const LegendText = styled.span`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props) => props.theme.semanticColors.teal[800]};
+  white-space: nowrap;
+`

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

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :disable-hover="disableIconHover"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -231,6 +232,10 @@
         default: false,
         type: Boolean,
       },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -0,0 +1,86 @@
+<template>
+  <Container>
+    <SplitButton
+      v-for="(option, index) in options"
+      :data-id-key="`${dataIdKey}_${option.value}`"
+      :key="index"
+      :length="options.length"
+      :position="getButtonPosition(index)"
+      :selected="modelValue === option.value"
+      @click.stop="handleSelect(option.value)"
+    >
+      {{ option.label }}
+    </SplitButton>
+  </Container>
+</template>
+
+<script setup>
+  import styled from 'vue3-styled-components'
+  import { computed } from 'vue'
+
+  const Container = styled.div`
+    display: flex;
+    width: fit-content;
+  `
+  const SplitButton = styled('button', {
+    selected: Boolean,
+    position: String,
+    length: Number,
+  })`
+    padding: 8px 16px;
+    border: 1px solid ${(props) => props.theme.semanticColors.teal[100]};
+    ${(props) =>
+      props.position === 'middle'
+        ? `
+      border-left: none;
+      border-right: none;
+    `
+        : props.length === 2 && props.position === 'first'
+        ? 'border-right: none;'
+        : ''}
+    border-radius: ${(props) =>
+      props.position === 'first'
+        ? '4px 0 0 4px'
+        : props.position === 'last'
+        ? '0 4px 4px 0'
+        : '0'};
+    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 100%;
+    cursor: pointer;
+    background: ${(props) =>
+      props.selected ? props.theme.semanticColors.purple[50] : 'transparent'};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+  `
+
+  const props = defineProps({
+    options: {
+      type: Array,
+      required: true,
+      // expects array of {label: string, value: string}
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    dataIdKey: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const getButtonPosition = computed(() => (index) => {
+    if (index === 0) return 'first'
+    if (index === props.options.length - 1) return 'last'
+
+    return 'middle'
+  })
+
+  const handleSelect = (value) => {
+    emit('update:modelValue', value)
+    emit('click', value)
+  }
+</script>

package/src/components/collapsableInfoText/index.vue

@@ -33,7 +33,7 @@
   const Text = styled('p', TextAttrs)`
     display: block;
     display: -webkit-box;
-    line-height: 1.3em;
+    line-height: 1.5;
     -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -49,7 +49,7 @@
   const ToggleButton = styled('p', TextAttrs)`
     font-size: ${(props) => props.fontSize}px;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.blue};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
   `
 
   export default {

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