Merge pull request #13189 from tutizaraz/add-bugbountybanner-story

add story for DismissableBanner component [Fixes #13044]

Author: corwintines

src/components/Banners/BugBountyBanner.tsx renamed to src/components/Banners/BugBountyBanner/index.tsx

@@ -3,7 +3,7 @@ import React from "react"
 import { Center, Text } from "@chakra-ui/react"
 
 // Components
-import BannerNotification from "../BannerNotification"
+import BannerNotification from "@/components/BannerNotification"
 
 const BugBountyBanner = () => (
   <BannerNotification shouldShow>

src/components/Banners/DismissableBanner/DismissableBanner.stories.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { FaInfoCircle } from "react-icons/fa"
+import { Center, Container, Icon, Text } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import DismissableBanner from "."
+
+const meta = {
+  title: "Molecules / Navigation / DismissableBanner",
+  component: DismissableBanner,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <Container mx="auto" maxW="1504px">
+        <Story />
+      </Container>
+    ),
+  ],
+} satisfies Meta<typeof DismissableBanner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: {
+    storageKey: "dismissable-banner-1",
+    children: <Text>This is a dismissable banner notification.</Text>,
+  },
+}
+
+export const WithLongText: Story = {
+  args: {
+    storageKey: "dismissable-banner-2",
+    children: (
+      <Text>
+        This is a dismissable banner with a very long text content to see how it
+        handles overflow and wrapping. It should be able to manage the text
+        properly without breaking the layout.
+      </Text>
+    ),
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    storageKey: "dismissable-banner-3",
+    children: (
+      <Center>
+        <Icon as={FaInfoCircle} mr={2} />
+        This banner includes an icon.
+      </Center>
+    ),
+  },
+}

src/components/Banners/DismissableBanner.tsx renamed to src/components/Banners/DismissableBanner/index.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"
 import { Center, CloseButton } from "@chakra-ui/react"
 
 // Components
-import BannerNotification from "../BannerNotification"
+import BannerNotification from "@/components/BannerNotification"
 
 // Interface
 export type DismissableBannerProps = {