@eturnity/eturnity_reusable_components 8.16.1 → 8.16.2--EPDM-14330.2

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.1",
+  "version": "8.16.2--EPDM-14330.2",
   "files": [
     "dist",
     "src"

package/src/assets/icons/collapse_arrow_icon_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5"><g data-name="Layer 2"><path fill="#ffffff" d="M0 0h8L4 5 0 0z" data-name="Layer 1"/></g></svg>

package/src/assets/svgIcons/download.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="42" viewbox="-1 -1 42 42" width="42" xmlns="http://www.w3.org/2000/svg">
-<rect fill="white" height="40" rx="4" width="40"></rect>
-<path clip-rule="evenodd" d="M27 17.9975H22.6923V13H17.3077V17.9975H13L20 23.2339L27 17.9975ZM13 24.994L13.0075 27H26.9925L27 24.994H13Z" fill="#505CA6" fill-rule="evenodd"></path>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6.5L7 10.5L3 6.5" fill="white"/>
+<path d="M13 13H1M11 6.5L7 10.5M7 10.5L3 6.5M7 10.5V1" stroke="#6F20DC" stroke-linecap="round" stroke-linejoin="round"/>
 </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/kanban_view.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2C2.44772 2 2 2.44772 2 3V9C2 9.55229 2.44772 10 3 10H3.5C4.05228 10 4.5 9.55229 4.5 9V3C4.5 2.44772 4.05228 2 3.5 2H3Z" fill="#6F20DC"/>
+<path d="M5.75 3C5.75 2.44772 6.19772 2 6.75 2H7.25C7.80228 2 8.25 2.44772 8.25 3V5C8.25 5.55228 7.80228 6 7.25 6H6.75C6.19772 6 5.75 5.55228 5.75 5V3Z" fill="#6F20DC"/>
+<path d="M10.5 2C9.94771 2 9.5 2.44772 9.5 3V11C9.5 11.5523 9.94771 12 10.5 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2H10.5Z" fill="#6F20DC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.89543 0.895431 0 2 0H12C13.1046 0 14 0.895431 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2ZM2 1H12C12.5523 1 13 1.44772 13 2V12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2C1 1.44772 1.44772 1 2 1Z" fill="#6F20DC"/>
+</svg>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
-<path d="M10 0H12V22H10V0Z" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1C6 0.447716 6.44772 0 7 0C7.55228 0 8 0.447715 8 1V13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13V1Z" fill="white"/>
+<path d="M13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8H1C0.447716 8 1.95702e-08 7.55228 4.37113e-08 7C6.78524e-08 6.44772 0.447715 6 1 6L13 6Z" fill="white"/>
 </svg>

package/src/assets/svgIcons/table_view.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 fill-rule="evenodd" clip-rule="evenodd" d="M0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2C0.895431 0 0 0.89543 0 2ZM7.5 3.5H13V6H7.5V3.5ZM6.5 3.5H1V6H6.5V3.5ZM1 7V9.5H6.5V7H1ZM1 10.5V12C1 12.5523 1.44772 13 2 13H6.5V10.5H1ZM7.5 13H12C12.5523 13 13 12.5523 13 12V10.5H7.5V13ZM13 9.5V7H7.5V9.5H13Z" fill="#263238"/>
+</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/buttons/buttonIcon/index.vue

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :fill-type="fillType"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -231,6 +232,11 @@
         default: false,
         type: Boolean,
       },
+      fillType: {
+        required: false,
+        default: 'fill',
+        type: String,
+      },
     },
     data() {
       return {

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