@eturnity/eturnity_reusable_components 8.13.3-EPDM-14657.2 → 8.13.3-EPDM-14657.3

package/src/assets/svgIcons/ed_stringwithoptimizer.svg

@@ -0,0 +1,33 @@
+<svg width="606" height="80" viewBox="0 0 606 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M176.756 10.2559L200.171 10.2559V9.25586H176.756V10.2559Z" fill="black"/>
+<path d="M176.756 17.0851H181.634V16.0851H176.756V17.0851Z" fill="black"/>
+<path d="M200.171 17.085H195.293V16.085H200.171V17.085Z" fill="black"/>
+<path d="M185.537 17.085H191.391V16.085H185.537V17.085Z" fill="black"/>
+<path d="M237.243 63.915H213.828V62.915H237.243V63.915Z" fill="black"/>
+<path d="M218.706 70.7443H213.828V69.7443H218.706V70.7443Z" fill="black"/>
+<path d="M232.365 70.7441H237.243V69.7441H232.365V70.7441Z" fill="black"/>
+<path d="M228.463 70.7441H222.609V69.7441H228.463V70.7441Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V80H247V40.5H249V39.5H247V0H0ZM1 79V1H167L116 40.0244L167 79H1ZM245.294 1L168 78.2938V1H245.294ZM168.708 79H246V1.70804L168.708 79Z" fill="black"/>
+<path d="M559.17 10.2559L535.756 10.2559V9.25586H559.17V10.2559Z" fill="black"/>
+<path d="M540.634 17.0851H535.756V16.0851H540.634V17.0851Z" fill="black"/>
+<path d="M554.293 17.085H559.171V16.085H554.293V17.085Z" fill="black"/>
+<path d="M550.391 17.085H544.537V16.085H550.391V17.085Z" fill="black"/>
+<path d="M572.828 63.915H596.243V62.915H572.828V63.915Z" fill="black"/>
+<path d="M572.828 70.7443H577.706V69.7443H572.828V70.7443Z" fill="black"/>
+<path d="M596.243 70.7441H591.365V69.7441H596.243V70.7441Z" fill="black"/>
+<path d="M581.609 70.7441H587.463V69.7441H581.609V70.7441Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M359 80V40.5H357V39.5H359V0H606V80H359ZM360 79V1H526L475 40.0244L526 79H360ZM527 78.2938L604.294 1H527V78.2938ZM605 79H527.708L605 1.70804V79Z" fill="black"/>
+<path d="M253 40.5H257V39.5H253V40.5Z" fill="black"/>
+<path d="M261 40.5H265V39.5H261V40.5Z" fill="black"/>
+<path d="M269 40.5H273V39.5H269V40.5Z" fill="black"/>
+<path d="M277 40.5H281V39.5H277V40.5Z" fill="black"/>
+<path d="M285 40.5H289V39.5H285V40.5Z" fill="black"/>
+<path d="M293 40.5H297V39.5H293V40.5Z" fill="black"/>
+<path d="M301 40.5H305V39.5H301V40.5Z" fill="black"/>
+<path d="M309 40.5H313V39.5H309V40.5Z" fill="black"/>
+<path d="M317 40.5H321V39.5H317V40.5Z" fill="black"/>
+<path d="M325 40.5H329V39.5H325V40.5Z" fill="black"/>
+<path d="M333 40.5H337V39.5H333V40.5Z" fill="black"/>
+<path d="M341 40.5H345V39.5H341V40.5Z" fill="black"/>
+<path d="M349 40.5H353V39.5H349V40.5Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/ed_stringwithoutoptimizer.svg

@@ -0,0 +1,17 @@
+<svg width="448" height="80" viewBox="0 0 448 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V80H168V40.5H170V39.5H168V0H0ZM1 79V1H166.9L116.025 40.001L166.897 79H1ZM166.93 79H167V1H166.93V79Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M280 0V39.5H278V40.5H280V80H448V0H280ZM281 79V1H446.9L396.025 40.001L446.897 79H281ZM446.93 79H447V1H446.93V79Z" fill="black"/>
+<path d="M174 40.5H178V39.5H174V40.5Z" fill="black"/>
+<path d="M182 40.5H186V39.5H182V40.5Z" fill="black"/>
+<path d="M190 40.5H194V39.5H190V40.5Z" fill="black"/>
+<path d="M198 40.5H202V39.5H198V40.5Z" fill="black"/>
+<path d="M206 40.5H210V39.5H206V40.5Z" fill="black"/>
+<path d="M214 40.5H218V39.5H214V40.5Z" fill="black"/>
+<path d="M222 40.5H226V39.5H222V40.5Z" fill="black"/>
+<path d="M230 40.5H234V39.5H230V40.5Z" fill="black"/>
+<path d="M238 40.5H242V39.5H238V40.5Z" fill="black"/>
+<path d="M246 40.5H250V39.5H246V40.5Z" fill="black"/>
+<path d="M254 40.5H258V39.5H254V40.5Z" fill="black"/>
+<path d="M262 40.5H266V39.5H262V40.5Z" fill="black"/>
+<path d="M270 40.5H274V39.5H270V40.5Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/ed_transformer.svg

@@ -0,0 +1,3 @@
+<svg width="174" height="45" viewBox="0 0 174 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.5223 21.5H0.5V22.5H51.5C51.5 34.6461 61.3539 44.5 73.5 44.5C78.3624 44.5 82.8574 42.9208 86.5 40.2476C90.1426 42.9208 94.6376 44.5 99.5 44.5C111.646 44.5 121.5 34.6461 121.5 22.5H173.5V21.5H121.478C120.954 9.81759 111.311 0.5 99.5 0.5C94.6376 0.5 90.1426 2.07918 86.5 4.75242C82.8574 2.07918 78.3624 0.5 73.5 0.5C61.689 0.5 52.0455 9.81759 51.5223 21.5ZM52.5 22.5C52.5 10.9061 61.9061 1.5 73.5 1.5C78.0373 1.5 82.2395 2.9406 85.674 5.38916C80.6886 9.42308 77.5 15.5907 77.5 22.5C77.5 29.4093 80.6886 35.5769 85.674 39.6108C82.2395 42.0594 78.0373 43.5 73.5 43.5C61.9061 43.5 52.5 34.0939 52.5 22.5ZM99.5 1.5C111.094 1.5 120.5 10.9061 120.5 22.5C120.5 34.0939 111.094 43.5 99.5 43.5C94.9627 43.5 90.7605 42.0594 87.326 39.6108C92.3114 35.5769 95.5 29.4093 95.5 22.5C95.5 15.5907 92.3114 9.42308 87.326 5.38916C90.7605 2.94061 94.9627 1.5 99.5 1.5ZM86.5 6.00912C91.3719 9.85562 94.5 15.814 94.5 22.5C94.5 29.186 91.3719 35.1444 86.5 38.9909C81.6281 35.1444 78.5 29.186 78.5 22.5C78.5 15.814 81.6281 9.85562 86.5 6.00912Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/ground_symbol.svg

@@ -0,0 +1,28 @@
+<svg
+   width="50"
+   height="50"
+   viewBox="0 0 25 50"
+   fill='white'
+   >
+  <defs
+     id="defs4" />
+  <g
+     id="layer1">
+    <path
+       d="M 0.5,24.5 L 24.5,24.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4098" />
+    <path
+       d="M 4.5,27.5 L 20.5,27.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4100" />
+    <path
+       d="M 16.5,30.5 L 8.5,30.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4102" />
+    <path
+       d="M 12.5,24.5 L 12.5,4.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4104" />
+  </g>
+</svg>

package/src/assets/svgIcons/house_sun.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C8.27614 0.5 8.5 0.723858 8.5 1V2.86667C8.5 3.14281 8.27614 3.36667 8 3.36667C7.72386 3.36667 7.5 3.14281 7.5 2.86667V1C7.5 0.723858 7.72386 0.5 8 0.5ZM0.5 8C0.5 7.72386 0.723858 7.5 1 7.5H2.86667C3.14281 7.5 3.36667 7.72386 3.36667 8C3.36667 8.27614 3.14281 8.5 2.86667 8.5H1C0.723858 8.5 0.5 8.27614 0.5 8ZM12.6333 8C12.6333 7.72386 12.8572 7.5 13.1333 7.5H15C15.2761 7.5 15.5 7.72386 15.5 8C15.5 8.27614 15.2761 8.5 15 8.5H13.1333C12.8572 8.5 12.6333 8.27614 12.6333 8ZM8.99987 10.8145C9.09475 11.0816 9.39061 11.2244 9.64095 11.0915C10.059 10.8696 10.4293 10.5644 10.728 10.1927C11.1343 9.6872 11.3922 9.0787 11.4728 8.43514C11.5535 7.79158 11.4537 7.13827 11.1847 6.54812C10.9156 5.95796 10.4879 5.45417 9.94915 5.09297C9.41045 4.73177 8.78197 4.52736 8.13385 4.50256C7.48573 4.47776 6.84347 4.63353 6.27873 4.9525C5.71399 5.27148 5.24899 5.7411 4.93563 6.30896C4.70526 6.72642 4.56349 7.1849 4.51696 7.65586C4.48909 7.93792 4.73355 8.15738 5.01665 8.14374C5.29975 8.1301 5.51274 7.8874 5.55771 7.60756C5.60274 7.32731 5.69588 7.05561 5.83426 6.80486C6.05573 6.40352 6.38437 6.07162 6.7835 5.84619C7.18262 5.62076 7.63654 5.51066 8.0946 5.52819C8.55265 5.54572 8.99683 5.69019 9.37756 5.94546C9.75829 6.20074 10.0606 6.55679 10.2507 6.97388C10.4409 7.39098 10.5114 7.8527 10.4544 8.30754C10.3974 8.76237 10.2152 9.19242 9.928 9.54971C9.74858 9.77293 9.5326 9.96227 9.29044 10.1103C9.04864 10.2582 8.90499 10.5474 8.99987 10.8145ZM5.17261 9.95833C5.36097 9.79137 5.64409 9.79046 5.83352 9.95621L8.82925 12.5775C8.93776 12.6724 9 12.8096 9 12.9538V14.5C9 14.7761 9.22386 15 9.5 15C9.77614 15 10 14.7761 10 14.5V12.9538C10 12.5212 9.81328 12.1097 9.48776 11.8249L6.49202 9.20363C5.92373 8.70638 5.0744 8.7091 4.5093 9.20998L1.50504 11.8728C1.18385 12.1575 1 12.5662 1 12.9954V14.5C1 14.7761 1.22386 15 1.5 15C1.77614 15 2 14.7761 2 14.5V12.9954C2 12.8523 2.06128 12.7161 2.16835 12.6212L5.17261 9.95833ZM3.40391 2.69668C3.20865 2.50142 2.89206 2.50142 2.6968 2.69668C2.50154 2.89194 2.50154 3.20852 2.6968 3.40379L4.01673 4.72372C4.212 4.91898 4.52858 4.91898 4.72384 4.72372C4.9191 4.52846 4.9191 4.21187 4.72384 4.01661L3.40391 2.69668ZM11.2764 4.01661C11.0811 4.21187 11.0811 4.52846 11.2764 4.72372C11.4716 4.91898 11.7882 4.91898 11.9835 4.72372L13.3034 3.40379C13.4987 3.20852 13.4987 2.89194 13.3034 2.69668C13.1081 2.50142 12.7916 2.50142 12.5963 2.69668L11.2764 4.01661ZM11.9835 11.2762C11.7882 11.081 11.4716 11.081 11.2764 11.2762C11.0811 11.4715 11.0811 11.7881 11.2764 11.9833L12.5963 13.3033C12.7916 13.4985 13.1081 13.4985 13.3034 13.3033C13.4987 13.108 13.4987 12.7914 13.3034 12.5962L11.9835 11.2762Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/move_left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5" transform="rotate(-90 7 7)"/>
+</svg>

package/src/assets/svgIcons/move_right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5" transform="rotate(90 7 7)"/>
+</svg>

package/src/assets/svgIcons/rectangle.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="2.5" width="11" height="11" rx="0.5" stroke="white"/>
+</svg>

package/src/assets/svgIcons/text_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3C3.22386 3 3 3.22386 3 3.5V4.5C3 4.77614 2.77614 5 2.5 5C2.22386 5 2 4.77614 2 4.5V3.5C2 2.67157 2.67157 2 3.5 2H8H12.5C13.3284 2 14 2.67157 14 3.5V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3.5C13 3.22386 12.7761 3 12.5 3H8.5V13H10.5C10.7761 13 11 13.2239 11 13.5C11 13.7761 10.7761 14 10.5 14H8H5.5C5.22386 14 5 13.7761 5 13.5C5 13.2239 5.22386 13 5.5 13H7.5V3H3.5Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -71,6 +71,7 @@ const theme = (() => {
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
     transparentBlack1: '#263238e6',
+    transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
     eturnityGrey: '#263238',

package/src/components/banner/infoBanner/InfoBanner.spec.js

@@ -1,5 +1,4 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import InfoBanner from '@/components/banner/infoBanner'
 import theme from '@/assets/theme'
@@ -10,59 +9,47 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('Info Banner Component', () => {
-  const props = {
-    isOpen: false,
-    buttonLabel: 'Gotcha',
-  }
-
-  const global = {
-    provide: {
-      theme,
-    },
-  }
-
-  it('info banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(InfoBanner, {
-      props,
-      global,
+  let wrapper
+
+   beforeEach(() => {
+      wrapper = mount(InfoBanner, {
+        props: {
+          isOpen: true,
+          buttonLabel: 'Gotcha',
+        },
+        slots: {
+          title: 'Sample title',
+          body: 'Sample body text',
+        },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
     })
 
+    
+  it('info banner is shown when isOpen props is true', async () => {
+    
     const bannerWrapper = wrapper.find('[data-test-id="info_banner_wrapper"]')
     expect(bannerWrapper.exists()).toBe(true)
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
-    await wrapper.setProps({ isOpen: true })
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
   })
 
-  it('info banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-
-    const wrapper = mount(InfoBanner, {
-      props,
-      slots: {
-        title: titleText,
-        body: bodyText,
-      },
-      global,
-    })
-
+  
+  it('info banner slots is display when user passed slots content', () => {
     const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
+    expect(modalTitleEl.text()).toBe('Sample title')
     const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
+    expect(modalBodyEl.text()).toBe('Sample body text')
   })
 
   it('info banner on-close event is emitted when modal close button is clicked', async () => {
-    const wrapper = mount(InfoBanner, {
-      props,
-      global,
-    })
-
     const modalCloseButton = wrapper.find('.close')
-    await modalCloseButton.trigger('click')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+
     expect(wrapper.emitted('on-close')).toBeTruthy()
     const emittedEvent = wrapper.emitted('on-close')
     expect(emittedEvent).toHaveLength(1)

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

@@ -75,7 +75,7 @@
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
         : props.customColor
-        ? props.theme.colors.black
+        ? props.theme.colors.white
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.textColor};
     background-color: ${(props) =>

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