@eturnity/eturnity_reusable_components 8.19.0 → 8.19.1

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.19.0",
+  "version": "8.19.1",
   "files": [
     "dist",
     "src"

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/filter.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="M13.4158 2.25103L13.4158 2.25108L8.42717 7.31882C8.42716 7.31884 8.42714 7.31885 8.42712 7.31887C8.1884 7.56134 8.05563 7.88855 8.05556 8.22814V8.22824V13.2099C8.05555 13.2553 8.04535 13.2998 8.02606 13.3399L8.47674 13.5565L8.02606 13.3399C8.00678 13.38 7.97909 13.4145 7.94567 13.441C7.91227 13.4674 7.87394 13.4854 7.83373 13.494C7.79354 13.5027 7.752 13.5019 7.71209 13.4918L7.71185 13.4917L6.15653 13.0967C6.09806 13.0818 6.0446 13.0471 6.00557 12.9963C5.96643 12.9454 5.94445 12.8815 5.94444 12.8148V8.22824V8.22814C5.94437 7.88855 5.8116 7.56134 5.57288 7.31887C5.57286 7.31885 5.57284 7.31883 5.57283 7.31882L0.584213 2.25108L0.58416 2.25103C0.531197 2.19724 0.500044 2.12265 0.5 2.04323C0.5 2.0432 0.5 2.04316 0.5 2.04313V0.790114C0.5 0.710654 0.531146 0.636004 0.58413 0.58218C0.636851 0.528623 0.706668 0.5 0.777778 0.5H13.2222C13.2933 0.5 13.3631 0.528623 13.4159 0.58218C13.4689 0.636003 13.5 0.710653 13.5 0.790114V2.04313C13.5 2.04316 13.5 2.0432 13.5 2.04323C13.5 2.12265 13.4688 2.19724 13.4158 2.25103Z" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+</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

@@ -333,7 +333,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },
@@ -377,12 +377,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.purple[200],
               textColor: semanticColors.purple[700],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[600],
               borderColor: '',
             },
@@ -416,6 +416,30 @@ const theme = (() => {
             },
           },
         },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[50],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
       },
       dark: {
         // theme
@@ -429,12 +453,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
@@ -615,6 +639,30 @@ const theme = (() => {
             },
           },
         },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
       },
       size: {
         large: {

package/src/components/banner/banner/Banner.stories.js

@@ -5,60 +5,116 @@ export default {
   title: 'Banner',
   component: Banner,
   tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the banner is visible',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether to show a loading spinner',
+    },
+    hideClose: {
+      control: 'boolean',
+      description: 'Whether to hide the close button',
+    },
+    backdrop: {
+      control: 'select',
+      options: ['white', 'dark'],
+      description: 'Type of backdrop overlay',
+    },
+    position: {
+      control: 'select',
+      options: ['fixed', 'absolute', 'relative'],
+      description: 'Position of the banner',
+    },
+    stopPropagation: {
+      control: 'boolean',
+      description:
+        'Whether to stop event propagation when clicking the modal container',
+    },
+  },
 }
 
-// To use:
-// <RCBanner
-//   backdrop="white" // white, dark
-//   :hideClose="true"
-//   :isLoading="true"
-//   :isOpen="true"
-//   position="fixed"
-//   stopPropagation="false"
-//   @on-close="handleClose"
-// />
-
-export const Default = {
-  args: {
-    isOpen: false,
-    isLoading: false,
-    hideClose: false,
-    backdrop: 'white',
-    position: 'fixed',
-    stopPropagation: true,
+const Template = (args) => ({
+  components: { Banner },
+  setup() {
+    return { args }
+  },
+  template: `
+    <Banner v-bind="args" @on-close="onClose">
+      <div style="padding: 20px;">
+        <h2>Banner Content</h2>
+        <p>This is some example content inside the banner.</p>
+      </div>
+    </Banner>
+  `,
+  methods: {
+    onClose() {
+      console.log('Banner closed')
+    },
   },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isOpen: false,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const OpenedBanner = {
-  args: {
-    isOpen: true,
-  },
+export const OpenedBanner = Template.bind({})
+OpenedBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const LoadingBanner = {
-  args: {
-    isOpen: true,
-    isLoading: true,
-  },
+export const LoadingBanner = Template.bind({})
+LoadingBanner.args = {
+  isOpen: true,
+  isLoading: true,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const HiddenCloseButton = {
-  args: {
-    isOpen: true,
-    hideClose: true,
-  },
+export const HiddenCloseButton = Template.bind({})
+HiddenCloseButton.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: true,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const DarkBackdrop = {
-  args: {
-    isOpen: true,
-    backdrop: 'dark',
-  },
+export const DarkBackdrop = Template.bind({})
+DarkBackdrop.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const AbsolutePositionBanner = {
-  args: {
-    isOpen: true,
-    position: 'absolute',
-  },
+export const AbsolutePositionBanner = Template.bind({})
+AbsolutePositionBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'absolute',
+  stopPropagation: true,
 }

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

@@ -1,42 +1,84 @@
 import InfoBanner from './index.vue'
 import theme from '@/assets/theme'
+
 export default {
   title: 'InfoBanner',
   component: InfoBanner,
   tags: ['autodocs'],
-}
-
-// <RCInfoBanner
-//   :isOpen="true"
-//   buttonLabel="Got it"
-//   @on-close="handleClose"
-// >
-//   <template #title>Sample title</template>
-//   <template #body>Sample body</template>
-// </RCInfoBanner>
-
-export const Default = {
-  args: {
-    isOpen: false,
-    buttonLabel: 'Got it',
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the banner is visible',
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Custom label for the confirmation button',
+    },
   },
 }
 
-export const OpenedInfoBanner = {
-  args: {
-    isOpen: true,
-    buttonLabel: 'Got it',
+const Template = (args) => ({
+  components: { InfoBanner },
+  setup() {
+    return { args }
   },
-  render: (args) => ({
-    components: { InfoBanner },
-    setup() {
-      return { args }
+  template: `
+    <InfoBanner v-bind="args" @on-close="onClose">
+      <template #title>
+        <h2>Information Title</h2>
+      </template>
+      <template #body>
+        <p>This is some important information that needs to be displayed to the user. It can contain multiple paragraphs and will be properly formatted.</p>
+      </template>
+    </InfoBanner>
+  `,
+  methods: {
+    onClose() {
+      console.log('InfoBanner closed')
     },
-    template: `
-      <InfoBanner v-bind="args">
-        <template #title>Sample title</template>
-        <template #body>Sample body</template>
-      </InfoBanner>
-    `,
-  }),
+  },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isOpen: false,
+  buttonLabel: 'Got it',
+}
+
+export const OpenedInfoBanner = Template.bind({})
+OpenedInfoBanner.args = {
+  isOpen: true,
+  buttonLabel: 'Got it',
+}
+
+export const CustomButtonLabel = Template.bind({})
+CustomButtonLabel.args = {
+  isOpen: true,
+  buttonLabel: 'I understand',
+}
+
+export const LongContent = Template.bind({})
+LongContent.args = {
+  isOpen: true,
+  buttonLabel: 'Got it',
 }
+LongContent.template = `
+  <InfoBanner v-bind="args" @on-close="onClose">
+    <template #title>
+      <h2>Detailed Information</h2>
+    </template>
+    <template #body>
+      <p>This is a longer piece of content that demonstrates how the InfoBanner handles multiple paragraphs and longer text.</p>
+      <p>It includes:</p>
+      <ul>
+        <li>Multiple paragraphs</li>
+        <li>Bullet points</li>
+        <li>Different types of content</li>
+      </ul>
+      <p>All of this content should be properly formatted and scrollable if needed.</p>
+    </template>
+  </InfoBanner>
+`