From ae697440b40a9b80f190fd5493a0eb07c572f542 Mon Sep 17 00:00:00 2001
From: jaasen-livefront <jaasen@livefront.com>
Date: Fri, 17 Oct 2025 11:50:47 -0700
Subject: [PATCH] add wrapped story

---
 .../src/callout/callout.component.html          |  7 ++++---
 libs/components/src/callout/callout.stories.ts  | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 0336cf95cda..76b34f57246 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -5,6 +5,7 @@
 >
   @let title = titleComputed();
   @let icon = iconComputed();
+  @let _truncate = truncate();
 
   @if (icon) {
     <i
@@ -13,17 +14,17 @@
       aria-hidden="true"
     ></i>
   }
-  <div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="truncate ? 'tw-truncate' : ''">
+  <div class="tw-flex tw-flex-col tw-gap-0.5" [ngClass]="_truncate ? 'tw-truncate' : ''">
     @if (title) {
       <header
         id="{{ titleId }}"
         class="tw-text-base tw-font-semibold"
-        [ngClass]="truncate ? 'tw-truncate' : ''"
+        [ngClass]="_truncate ? 'tw-truncate' : ''"
       >
         {{ title }}
       </header>
     }
-    <div bitTypography="body2" [ngClass]="truncate ? 'tw-truncate' : ''">
+    <div bitTypography="body2" [ngClass]="_truncate ? 'tw-truncate' : ''">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index 2b10c6e7d13..9ee3e8eafd0 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -123,6 +123,23 @@ export const WithTextButton: Story = {
   },
 };
 
+export const WithWrappingContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+        This is a really long callout that should wrap when it reaches the end of the container. This is a really long callout that should wrap when it reaches the end of the container.
+      </bit-callout>
+    `,
+  }),
+  args: {
+    type: "default",
+    icon: "bwi-globe",
+  },
+};
+
 export const Truncate: Story = {
   render: (args) => ({
     props: args,