From 2a16f41d93432228831e0d1813be6842b930c672 Mon Sep 17 00:00:00 2001
From: carocao-msft <96077406+carocao-msft@users.noreply.github.com>
Date: Thu, 30 Jan 2025 12:51:31 -0800
Subject: [PATCH] storybook (#5598)

---
 .../snippets/CaptionsBanner.snippet.tsx             | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/storybook8/stories/Components/CaptionsBanner/snippets/CaptionsBanner.snippet.tsx b/packages/storybook8/stories/Components/CaptionsBanner/snippets/CaptionsBanner.snippet.tsx
index 3d7420834e9..e6900590658 100644
--- a/packages/storybook8/stories/Components/CaptionsBanner/snippets/CaptionsBanner.snippet.tsx
+++ b/packages/storybook8/stories/Components/CaptionsBanner/snippets/CaptionsBanner.snippet.tsx
@@ -5,12 +5,11 @@ import { CaptionsBanner, usePropsFor } from '@azure/communication-react';
 import React from 'react';
 
 export const CaptionsBannerStory = (): JSX.Element => {
+  /**
+   * This is a snippet for the CaptionsBanner component.
+   * For this snippet we set the isCaptionsOn and isRealTimeTextOn to true so the captions banner will be visible at all times with both functionalities enabled.
+   * Without setting the isCaptionsOn and isRealTimeTextOn to true, the captions banner will not be visible until start Captions is called or a first real time text message is received.
+   */
   const captionsBannerProps = usePropsFor(CaptionsBanner);
-  return (
-    <>
-      {(captionsBannerProps?.isCaptionsOn || captionsBannerProps?.isRealTimeTextOn) && (
-        <CaptionsBanner {...captionsBannerProps} />
-      )}
-    </>
-  );
+  return <CaptionsBanner {...captionsBannerProps} isCaptionsOn={true} isRealTimeTextOn={true} />;
 };