move BugBountyBanner and DismissableBanner components and their stories in different folders [Fixes #13044]

Author: dbarabashh

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

@@ -1,8 +1,9 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import BugBountyBanner from "../Banners/BugBountyBanner"
-import DismissableBanner from "../Banners/DismissableBanner"
+import DismissableBanner from "../DismissableBanner"
+
+import BugBountyBanner from "."
 
 const meta = {
   component: BugBountyBanner,

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 "../../BannerNotification"
 
 const BugBountyBanner = () => (
   <BannerNotification shouldShow>

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

@@ -0,0 +1,54 @@
+import React from "react"
+import { FaInfoCircle } from "react-icons/fa"
+import { Button, Center, Icon, Text } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import DismissableBanner from "."
+
+const meta = {
+  title: "DismissableBanner",
+  component: DismissableBanner,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+} satisfies Meta<typeof DismissableBanner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: {
+    storageKey: "dismissable-banner-1",
+    children: <Center>This is a dismissable banner notification.</Center>,
+  },
+  render: (args) => <DismissableBanner {...args} />,
+}
+
+export const WithLongText: Story = {
+  args: {
+    storageKey: "dismissable-banner-5",
+    children: (
+      <Center>
+        <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>
+      </Center>
+    ),
+  },
+  render: (args) => <DismissableBanner {...args} />,
+}
+
+export const WithIcon: Story = {
+  args: {
+    storageKey: "dismissable-banner-6",
+    children: (
+      <Center>
+        <Icon as={FaInfoCircle} mr={2} />
+        This banner includes an icon.
+      </Center>
+    ),
+  },
+  render: (args) => <DismissableBanner {...args} />,
+}

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 "../../BannerNotification"
 
 // Interface
 export type DismissableBannerProps = {