From 1ba4c3f92ebe47182ff6f3095bff44dd1611c669 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Wed, 7 Aug 2024 16:01:15 +0300
Subject: [PATCH 1/8] feat: Add FwbBanner and FwbBannerCollapseButton
 components

The code changes introduce two new components, FwbBanner and FwbBannerCollapseButton, which are used for displaying a banner and a collapse button respectively. These components are added to the index.ts file for easier import and usage.
---
 src/components/FwbBanner/FwbBanner.vue        | 38 +++++++++++++
 .../FwbBanner/FwbBannerCollapseButton.vue     | 56 +++++++++++++++++++
 src/index.ts                                  |  2 +
 3 files changed, 96 insertions(+)
 create mode 100644 src/components/FwbBanner/FwbBanner.vue
 create mode 100644 src/components/FwbBanner/FwbBannerCollapseButton.vue

diff --git a/src/components/FwbBanner/FwbBanner.vue b/src/components/FwbBanner/FwbBanner.vue
new file mode 100644
index 00000000..41d97172
--- /dev/null
+++ b/src/components/FwbBanner/FwbBanner.vue
@@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="bannerClasses"
+    tabindex="-1"
+    role="banner"
+    aria-label="Banner"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
+type BannerPosition = 'top' | 'bottom'
+
+type BannerProps = {
+    class?: string
+    position?: BannerPosition
+}
+
+const props: BannerProps = withDefaults(defineProps<BannerProps>(), {
+  class: '',
+  position: 'top',
+})
+
+const defaultBannerClass = 'fixed start-0 z-50 flex justify-between w-full p-4 bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
+const positionDefaultClass = 'top-0 border-b border-gray-200 dark:border-gray-600'
+const positionBottomClass = 'bottom-0 border-t border-gray-200 dark:border-gray-600'
+
+const bannerClasses = computed(() => useMergeClasses([
+  defaultBannerClass,
+  props.position === 'top' ? positionDefaultClass : positionBottomClass,
+  props.class ?? '',
+]))
+
+</script>
diff --git a/src/components/FwbBanner/FwbBannerCollapseButton.vue b/src/components/FwbBanner/FwbBannerCollapseButton.vue
new file mode 100644
index 00000000..6299baec
--- /dev/null
+++ b/src/components/FwbBanner/FwbBannerCollapseButton.vue
@@ -0,0 +1,56 @@
+<template>
+  <button
+    :class="collapseButtonClasses"
+    aria-label="Collapse"
+    type="button"
+    @click="handleCollapse"
+  >
+    <svg
+      class="w-6 h-6"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M6 18 17.94 6M18 18 6.06 6"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
+type CollapseButtonProps = {
+    class?: string
+}
+
+const props: CollapseButtonProps = withDefaults(defineProps<CollapseButtonProps>(), {
+  class: '',
+})
+
+const defaultCollapseButtonClass = 'flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white'
+
+const collapseButtonClasses = computed(() => useMergeClasses([
+  defaultCollapseButtonClass,
+  props.class ?? '',
+]))
+
+const handleCollapse = (e: MouseEvent) => {
+  const collapseButton = e.target as HTMLElement
+  const banner = collapseButton.closest('[role="banner"]') as HTMLElement | null
+
+  if (banner) {
+    banner.remove()
+  }
+}
+
+</script>
diff --git a/src/index.ts b/src/index.ts
index 994321a8..a42d2c39 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,8 @@ export { default as FwbAvatar } from './components/FwbAvatar/FwbAvatar.vue'
 export { default as FwbAvatarStack } from './components/FwbAvatar/FwbAvatarStack.vue'
 export { default as FwbAvatarStackCounter } from './components/FwbAvatar/FwbAvatarStackCounter.vue'
 export { default as FwbBadge } from './components/FwbBadge/FwbBadge.vue'
+export { default as FwbBanner } from './components/FwbBanner/FwbBanner.vue'
+export { default as FwbBannerCollapseButton } from './components/FwbBanner/FwbBannerCollapseButton.vue'
 export { default as FwbBreadcrumb } from './components/FwbBreadcrumb/FwbBreadcrumb.vue'
 export { default as FwbBreadcrumbItem } from './components/FwbBreadcrumb/FwbBreadcrumbItem.vue'
 export { default as FwbButton } from './components/FwbButton/FwbButton.vue'

From 4e220cdc58781b0525e2a7b26ced2bdbecbfefe3 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Wed, 7 Aug 2024 16:01:36 +0300
Subject: [PATCH 2/8] chore: Add default banner example to documentation

---
 docs/components/banner.md                     | 88 +++++++++++++++++
 .../examples/FwbBannerBottomExample.vue       | 97 +++++++++++++++++++
 .../examples/FwbBannerDefaultExample.vue      | 94 ++++++++++++++++++
 3 files changed, 279 insertions(+)
 create mode 100644 docs/components/banner.md
 create mode 100644 docs/components/banner/examples/FwbBannerBottomExample.vue
 create mode 100644 docs/components/banner/examples/FwbBannerDefaultExample.vue

diff --git a/docs/components/banner.md b/docs/components/banner.md
new file mode 100644
index 00000000..1f71d815
--- /dev/null
+++ b/docs/components/banner.md
@@ -0,0 +1,88 @@
+<script setup>
+import FwbBannerDefaultExample from './banner/examples/FwbBannerDefaultExample.vue'
+import FwbBannerBottomExample from './banner/examples/FwbBannerBottomExample.vue'
+</script>
+
+# Vue Banner - Flowbite
+
+### Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/banner/](https://flowbite.com/docs/components/banner/)
+:::
+
+Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.
+
+## Default sticky banner
+
+Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.
+
+<fwb-banner-default-example />
+
+
+```vue
+<template>
+<fwb-banner>
+    <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div className="mx-auto flex items-center">
+            <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
+                    viewBox="0 0 24 24">
+                    <path fill-rule="evenodd"
+                        d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
+                    />
+                </svg>
+                <span className="[&_p]:inline">
+                    New brand identity has been launched for the&nbsp;
+                    <a href="https://flowbite.com"
+                        className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+                            Flowbite Library
+                    </a>
+                </span>
+            </p>
+        </div>
+        <fwb-banner-collapse-button />
+    </div>
+</fwb-banner>
+</template>
+```
+
+
+## Bottom banner position
+
+This example can be used to position the sticky banner to the bottom side of the page instead of the top side.
+
+<fwb-banner-bottom-example />
+
+```vue
+<template>
+<fwb-banner position="bottom">
+    <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div className="mx-auto flex items-center">
+            <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
+                    viewBox="0 0 24 24">
+                    <path fill-rule="evenodd"
+                        d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
+                    />
+                </svg>
+                <span className="[&_p]:inline">
+                    New brand identity has been launched for the&nbsp;
+                    <a href="https://flowbite.com"
+                        className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+                            Flowbite Library
+                    </a>
+                </span>
+            </p>
+        </div>
+        <fwb-banner-collapse-button />
+    </div>
+</fwb-banner>
+</template>
+```
+
+## More Examples
+
+For more sticky banner examples you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks.
\ No newline at end of file
diff --git a/docs/components/banner/examples/FwbBannerBottomExample.vue b/docs/components/banner/examples/FwbBannerBottomExample.vue
new file mode 100644
index 00000000..4f3b63ed
--- /dev/null
+++ b/docs/components/banner/examples/FwbBannerBottomExample.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
+    <div class="px-8 py-4">
+      <div class="pb-4 mb-8 border-b border-gray-200 dark:border-gray-800">
+        <h1
+          id="content"
+          class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+        >
+          Flowbite - Tailwind CSS component library
+        </h1>
+        <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
+          Get started with the most popular
+          open-source library of interactive UI components built with the utility classes from Tailwind
+          CSS
+        </p>
+      </div>
+
+      <h2 class="relative group text-xl font-semibold leading-8 mb-4 mt-8">
+        Introduction
+        <span
+          id="introduction"
+          class="absolute -top-[140px]"
+        /> <a
+          class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100"
+          href="#introduction"
+          aria-label="Link to this section: Introduction"
+        >#</a>
+      </h2>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        Flowbite is an open-source
+        library of UI components based on the utility-first Tailwind CSS framework
+        featuring dark mode support, a Figma design system, templates, and more.
+      </p>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        It includes all of the
+        commonly used components that a website requires, such as buttons, dropdowns,
+        navigation bars, modals, but also some more advanced interactive elements such as datepickers.
+      </p>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        All of the elements are built
+        using the utility classes from Tailwind CSS and vanilla JavaScript with
+        support for TypeScript.
+      </p>
+      <iframe
+        width="100%"
+        height="500px"
+        class="my-8 rounded-lg shadow-lg yt-video"
+        src="https://www.youtube.com/embed/KaLxCiilHns"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen=""
+      />
+    </div>
+    <fwb-banner
+      class="sticky bottom-0 left-0"
+      position="bottom"
+    >
+      <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div className="mx-auto flex items-center">
+          <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+            <svg
+              class="w-6 h-6 text-gray-800 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+
+            <span className="[&_p]:inline">
+              New brand identity has been launched for the&nbsp;
+              <a
+                href="https://flowbite.com"
+                className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
+              >
+                Flowbite Library
+              </a>
+            </span>
+          </p>
+        </div>
+        <fwb-banner-collapse-button />
+      </div>
+    </fwb-banner>
+  </div>
+</template>
+
+<script setup>
+import { FwbBanner, FwbBannerCollapseButton } from '../../../../src/index'
+</script>
diff --git a/docs/components/banner/examples/FwbBannerDefaultExample.vue b/docs/components/banner/examples/FwbBannerDefaultExample.vue
new file mode 100644
index 00000000..ea9aad7e
--- /dev/null
+++ b/docs/components/banner/examples/FwbBannerDefaultExample.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
+    <fwb-banner class="sticky top-0 left-0">
+      <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div className="mx-auto flex items-center">
+          <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+            <svg
+              class="w-6 h-6 text-gray-800 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+
+            <span className="[&_p]:inline">
+              New brand identity has been launched for the&nbsp;
+              <a
+                href="https://flowbite.com"
+                className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
+              >
+                Flowbite Library
+              </a>
+            </span>
+          </p>
+        </div>
+        <fwb-banner-collapse-button />
+      </div>
+    </fwb-banner>
+    <div class="px-8 py-4">
+      <div class="pb-4 mb-8 border-b border-gray-200 dark:border-gray-800">
+        <h1
+          id="content"
+          class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+        >
+          Flowbite - Tailwind CSS component library
+        </h1>
+        <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
+          Get started with the most popular
+          open-source library of interactive UI components built with the utility classes from Tailwind
+          CSS
+        </p>
+      </div>
+
+      <h2 class="relative group text-xl font-semibold leading-8 mb-4 mt-8">
+        Introduction
+        <span
+          id="introduction"
+          class="absolute -top-[140px]"
+        /> <a
+          class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100"
+          href="#introduction"
+          aria-label="Link to this section: Introduction"
+        >#</a>
+      </h2>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        Flowbite is an open-source
+        library of UI components based on the utility-first Tailwind CSS framework
+        featuring dark mode support, a Figma design system, templates, and more.
+      </p>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        It includes all of the
+        commonly used components that a website requires, such as buttons, dropdowns,
+        navigation bars, modals, but also some more advanced interactive elements such as datepickers.
+      </p>
+      <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
+        All of the elements are built
+        using the utility classes from Tailwind CSS and vanilla JavaScript with
+        support for TypeScript.
+      </p>
+      <iframe
+        width="100%"
+        height="500px"
+        class="my-8 rounded-lg shadow-lg yt-video"
+        src="https://www.youtube.com/embed/KaLxCiilHns"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen=""
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FwbBanner, FwbBannerCollapseButton } from '../../../../src/index'
+</script>

From cba7e2206136fd0ee74d6ee8ad6824567e40791e Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Wed, 7 Aug 2024 16:01:42 +0300
Subject: [PATCH 3/8] feat: Add Banner component to documentation

The code changes include adding the Banner component to the documentation. This component allows users to display a banner on their website. The Banner component is now listed in the navigation menu with a link to its documentation page.
---
 docs/.vitepress/config.mts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index ccd469fc..3ebb1e11 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -39,6 +39,7 @@ function getComponents() {
     { text: 'Alert', link: '/components/alert' },
     { text: 'Avatar', link: '/components/avatar' },
     { text: 'Badge', link: '/components/badge' },
+    { text: 'Banner', link: '/components/banner' },
     { text: 'Breadcrumb', link: '/components/breadcrumb' },
     { text: 'Button', link: '/components/button' },
     { text: 'Button Group', link: '/components/button-group' },

From 6a83ec85fcc64c60a475125011a2aebd9d477ba3 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Wed, 7 Aug 2024 16:27:42 +0300
Subject: [PATCH 4/8] refactor: Update banner examples with sandbox attribute
 and fix lint problem

---
 docs/components/banner.md                     | 28 +++++++++----------
 .../examples/FwbBannerBottomExample.vue       | 11 ++++----
 .../examples/FwbBannerDefaultExample.vue      | 11 ++++----
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/docs/components/banner.md b/docs/components/banner.md
index 1f71d815..f445c6bb 100644
--- a/docs/components/banner.md
+++ b/docs/components/banner.md
@@ -5,7 +5,7 @@ import FwbBannerBottomExample from './banner/examples/FwbBannerBottomExample.vue
 
 # Vue Banner - Flowbite
 
-### Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
+## Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
 
 ---
 
@@ -13,11 +13,11 @@ import FwbBannerBottomExample from './banner/examples/FwbBannerBottomExample.vue
 Original reference: [https://flowbite.com/docs/components/banner/](https://flowbite.com/docs/components/banner/)
 :::
 
-Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.
+Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scrolls down the main content area.
 
 ## Default sticky banner
 
-Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.
+Use this free example to show a text message for an announcement with a CTA link, an icon element and a close button to dismiss the banner.
 
 <fwb-banner-default-example />
 
@@ -25,19 +25,19 @@ Use this free example to show a text message for announcement with a CTA link, a
 ```vue
 <template>
 <fwb-banner>
-    <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div className="mx-auto flex items-center">
-            <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+    <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div class="mx-auto flex items-center">
+            <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
                 <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
                     viewBox="0 0 24 24">
                     <path fill-rule="evenodd"
                         d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
                     />
                 </svg>
-                <span className="[&_p]:inline">
+                <span class="[&_p]:inline">
                     New brand identity has been launched for the&nbsp;
                     <a href="https://flowbite.com"
-                        className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+                        class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
                             Flowbite Library
                     </a>
                 </span>
@@ -52,26 +52,26 @@ Use this free example to show a text message for announcement with a CTA link, a
 
 ## Bottom banner position
 
-This example can be used to position the sticky banner to the bottom side of the page instead of the top side.
+This example can be used to position the sticky banner on the bottom side of the page instead of the top side.
 
 <fwb-banner-bottom-example />
 
 ```vue
 <template>
 <fwb-banner position="bottom">
-    <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div className="mx-auto flex items-center">
-            <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+    <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div class="mx-auto flex items-center">
+            <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
                 <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
                     viewBox="0 0 24 24">
                     <path fill-rule="evenodd"
                         d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
                     />
                 </svg>
-                <span className="[&_p]:inline">
+                <span class="[&_p]:inline">
                     New brand identity has been launched for the&nbsp;
                     <a href="https://flowbite.com"
-                        className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+                        class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
                             Flowbite Library
                     </a>
                 </span>
diff --git a/docs/components/banner/examples/FwbBannerBottomExample.vue b/docs/components/banner/examples/FwbBannerBottomExample.vue
index 4f3b63ed..40eebdb0 100644
--- a/docs/components/banner/examples/FwbBannerBottomExample.vue
+++ b/docs/components/banner/examples/FwbBannerBottomExample.vue
@@ -42,6 +42,7 @@
         support for TypeScript.
       </p>
       <iframe
+        sandbox="allow-same-origin allow-scripts"
         width="100%"
         height="500px"
         class="my-8 rounded-lg shadow-lg yt-video"
@@ -56,9 +57,9 @@
       class="sticky bottom-0 left-0"
       position="bottom"
     >
-      <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div className="mx-auto flex items-center">
-          <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+      <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div class="mx-auto flex items-center">
+          <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
             <svg
               class="w-6 h-6 text-gray-800 dark:text-gray-400"
               aria-hidden="true"
@@ -75,11 +76,11 @@
               />
             </svg>
 
-            <span className="[&_p]:inline">
+            <span class="[&_p]:inline">
               New brand identity has been launched for the&nbsp;
               <a
                 href="https://flowbite.com"
-                className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
+                class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
               >
                 Flowbite Library
               </a>
diff --git a/docs/components/banner/examples/FwbBannerDefaultExample.vue b/docs/components/banner/examples/FwbBannerDefaultExample.vue
index ea9aad7e..61b4b6fc 100644
--- a/docs/components/banner/examples/FwbBannerDefaultExample.vue
+++ b/docs/components/banner/examples/FwbBannerDefaultExample.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
     <fwb-banner class="sticky top-0 left-0">
-      <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div className="mx-auto flex items-center">
-          <p className="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+      <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
+        <div class="mx-auto flex items-center">
+          <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
             <svg
               class="w-6 h-6 text-gray-800 dark:text-gray-400"
               aria-hidden="true"
@@ -20,11 +20,11 @@
               />
             </svg>
 
-            <span className="[&_p]:inline">
+            <span class="[&_p]:inline">
               New brand identity has been launched for the&nbsp;
               <a
                 href="https://flowbite.com"
-                className="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
+                class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
               >
                 Flowbite Library
               </a>
@@ -76,6 +76,7 @@
         support for TypeScript.
       </p>
       <iframe
+        sandbox="allow-same-origin allow-scripts"
         width="100%"
         height="500px"
         class="my-8 rounded-lg shadow-lg yt-video"

From 52623d258f18721eb787866d9d64170c985091f8 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Tue, 20 Aug 2024 10:50:51 +0300
Subject: [PATCH 5/8] refactor: Remove FwbBannerCollapseButton component

---
 .../FwbBanner/FwbBannerCollapseButton.vue     | 56 -------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 src/components/FwbBanner/FwbBannerCollapseButton.vue

diff --git a/src/components/FwbBanner/FwbBannerCollapseButton.vue b/src/components/FwbBanner/FwbBannerCollapseButton.vue
deleted file mode 100644
index 6299baec..00000000
--- a/src/components/FwbBanner/FwbBannerCollapseButton.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <button
-    :class="collapseButtonClasses"
-    aria-label="Collapse"
-    type="button"
-    @click="handleCollapse"
-  >
-    <svg
-      class="w-6 h-6"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M6 18 17.94 6M18 18 6.06 6"
-      />
-    </svg>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useMergeClasses } from '@/composables/useMergeClasses'
-
-type CollapseButtonProps = {
-    class?: string
-}
-
-const props: CollapseButtonProps = withDefaults(defineProps<CollapseButtonProps>(), {
-  class: '',
-})
-
-const defaultCollapseButtonClass = 'flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white'
-
-const collapseButtonClasses = computed(() => useMergeClasses([
-  defaultCollapseButtonClass,
-  props.class ?? '',
-]))
-
-const handleCollapse = (e: MouseEvent) => {
-  const collapseButton = e.target as HTMLElement
-  const banner = collapseButton.closest('[role="banner"]') as HTMLElement | null
-
-  if (banner) {
-    banner.remove()
-  }
-}
-
-</script>

From 316d0beceaf3bf5fea18c249e5b74c22ecca73fb Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Tue, 20 Aug 2024 10:51:23 +0300
Subject: [PATCH 6/8] chore: Update example with new banner design

---
 .../examples/FwbBannerBottomExample.vue       | 85 ++++++-------------
 .../examples/FwbBannerDefaultExample.vue      | 81 ++++++------------
 2 files changed, 54 insertions(+), 112 deletions(-)

diff --git a/docs/components/banner/examples/FwbBannerBottomExample.vue b/docs/components/banner/examples/FwbBannerBottomExample.vue
index 40eebdb0..5c0ad46b 100644
--- a/docs/components/banner/examples/FwbBannerBottomExample.vue
+++ b/docs/components/banner/examples/FwbBannerBottomExample.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
+  <div
+    class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
     <div class="px-8 py-4">
       <div class="pb-4 mb-8 border-b border-gray-200 dark:border-gray-800">
-        <h1
-          id="content"
-          class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white"
-        >
+        <h1 id="content" class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
           Flowbite - Tailwind CSS component library
         </h1>
         <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
@@ -17,14 +15,9 @@
 
       <h2 class="relative group text-xl font-semibold leading-8 mb-4 mt-8">
         Introduction
-        <span
-          id="introduction"
-          class="absolute -top-[140px]"
-        /> <a
+        <span id="introduction" class="absolute -top-[140px]" /> <a
           class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100"
-          href="#introduction"
-          aria-label="Link to this section: Introduction"
-        >#</a>
+          href="#introduction" aria-label="Link to this section: Introduction">#</a>
       </h2>
       <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
         Flowbite is an open-source
@@ -41,58 +34,34 @@
         using the utility classes from Tailwind CSS and vanilla JavaScript with
         support for TypeScript.
       </p>
-      <iframe
-        sandbox="allow-same-origin allow-scripts"
-        width="100%"
-        height="500px"
-        class="my-8 rounded-lg shadow-lg yt-video"
-        src="https://www.youtube.com/embed/KaLxCiilHns"
-        title="YouTube video player"
-        frameborder="0"
+      <iframe sandbox="allow-same-origin allow-scripts" width="100%" height="500px"
+        class="my-8 rounded-lg shadow-lg yt-video" src="https://www.youtube.com/embed/KaLxCiilHns"
+        title="YouTube video player" frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen=""
-      />
+        allowfullscreen="" />
     </div>
-    <fwb-banner
-      class="sticky bottom-0 left-0"
-      position="bottom"
-    >
-      <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div class="mx-auto flex items-center">
-          <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
-            <svg
-              class="w-6 h-6 text-gray-800 dark:text-gray-400"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-
-            <span class="[&_p]:inline">
-              New brand identity has been launched for the&nbsp;
-              <a
-                href="https://flowbite.com"
-                class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
-              >
-                Flowbite Library
-              </a>
-            </span>
-          </p>
-        </div>
-        <fwb-banner-collapse-button />
+    <fwb-banner class="sticky bottom-0 left-0" position="bottom" closable>
+      <div class="bg-gray-50 p-4 dark:bg-gray-700">
+        <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+          <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd"
+              d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+              clip-rule="evenodd" />
+          </svg>
+          <span class="[&_p]:inline">
+            New brand identity has been launched for the&nbsp;
+            <a href="https://flowbite.com"
+              class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+              Flowbite Library
+            </a>
+          </span>
+        </p>
       </div>
     </fwb-banner>
   </div>
 </template>
 
 <script setup>
-import { FwbBanner, FwbBannerCollapseButton } from '../../../../src/index'
+import { FwbBanner } from '../../../../src/index'
 </script>
diff --git a/docs/components/banner/examples/FwbBannerDefaultExample.vue b/docs/components/banner/examples/FwbBannerDefaultExample.vue
index 61b4b6fc..b5390421 100644
--- a/docs/components/banner/examples/FwbBannerDefaultExample.vue
+++ b/docs/components/banner/examples/FwbBannerDefaultExample.vue
@@ -1,45 +1,29 @@
 <template>
-  <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
-    <fwb-banner class="sticky top-0 left-0">
-      <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div class="mx-auto flex items-center">
-          <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
-            <svg
-              class="w-6 h-6 text-gray-800 dark:text-gray-400"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
-                clip-rule="evenodd"
-              />
-            </svg>
+  <div
+    class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
+    <fwb-banner class="sticky top-0 left-0" closable>
+      <div class="bg-gray-50 p-4 dark:bg-gray-700">
+        <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+          <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd"
+              d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+              clip-rule="evenodd" />
+          </svg>
 
-            <span class="[&_p]:inline">
-              New brand identity has been launched for the&nbsp;
-              <a
-                href="https://flowbite.com"
-                class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
-              >
-                Flowbite Library
-              </a>
-            </span>
-          </p>
-        </div>
-        <fwb-banner-collapse-button />
+          <span class="[&_p]:inline">
+            New brand identity has been launched for the&nbsp;
+            <a href="https://flowbite.com"
+              class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+              Flowbite Library
+            </a>
+          </span>
+        </p>
       </div>
     </fwb-banner>
     <div class="px-8 py-4">
       <div class="pb-4 mb-8 border-b border-gray-200 dark:border-gray-800">
-        <h1
-          id="content"
-          class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white"
-        >
+        <h1 id="content" class="inline-block mb-2 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
           Flowbite - Tailwind CSS component library
         </h1>
         <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
@@ -51,14 +35,9 @@
 
       <h2 class="relative group text-xl font-semibold leading-8 mb-4 mt-8">
         Introduction
-        <span
-          id="introduction"
-          class="absolute -top-[140px]"
-        /> <a
+        <span id="introduction" class="absolute -top-[140px]" /> <a
           class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100"
-          href="#introduction"
-          aria-label="Link to this section: Introduction"
-        >#</a>
+          href="#introduction" aria-label="Link to this section: Introduction">#</a>
       </h2>
       <p class="text-gray-700 text-opacity-100 text-base font-normal leading-6 mb-4 dark:text-gray-400">
         Flowbite is an open-source
@@ -75,21 +54,15 @@
         using the utility classes from Tailwind CSS and vanilla JavaScript with
         support for TypeScript.
       </p>
-      <iframe
-        sandbox="allow-same-origin allow-scripts"
-        width="100%"
-        height="500px"
-        class="my-8 rounded-lg shadow-lg yt-video"
-        src="https://www.youtube.com/embed/KaLxCiilHns"
-        title="YouTube video player"
-        frameborder="0"
+      <iframe sandbox="allow-same-origin allow-scripts" width="100%" height="500px"
+        class="my-8 rounded-lg shadow-lg yt-video" src="https://www.youtube.com/embed/KaLxCiilHns"
+        title="YouTube video player" frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen=""
-      />
+        allowfullscreen="" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { FwbBanner, FwbBannerCollapseButton } from '../../../../src/index'
+import { FwbBanner } from '../../../../src/index'
 </script>

From 4ceb76932ae4f3f239824aa814bf4acb51028b48 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Tue, 20 Aug 2024 10:51:30 +0300
Subject: [PATCH 7/8] refactor: Remove FwbBannerCollapseButton component

---
 src/components/FwbBanner/FwbBanner.vue | 33 +++++++++++++++++++-------
 src/index.ts                           |  1 -
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/FwbBanner/FwbBanner.vue b/src/components/FwbBanner/FwbBanner.vue
index 41d97172..34bb9f85 100644
--- a/src/components/FwbBanner/FwbBanner.vue
+++ b/src/components/FwbBanner/FwbBanner.vue
@@ -1,11 +1,13 @@
 <template>
-  <div
-    :class="bannerClasses"
-    tabindex="-1"
-    role="banner"
-    aria-label="Banner"
-  >
+  <div :class="bannerClasses" tabindex="-1" role="banner" aria-label="Banner">
     <slot />
+    <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Collapse" type="button" @click="handleCollapse">
+      <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
+        viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M6 18 17.94 6M18 18 6.06 6" />
+      </svg>
+    </button>
   </div>
 </template>
 
@@ -16,23 +18,36 @@ import { useMergeClasses } from '@/composables/useMergeClasses'
 type BannerPosition = 'top' | 'bottom'
 
 type BannerProps = {
-    class?: string
-    position?: BannerPosition
+  class?: string
+  position?: BannerPosition
+  closable?: boolean
 }
 
 const props: BannerProps = withDefaults(defineProps<BannerProps>(), {
   class: '',
   position: 'top',
+  closable: false,
 })
 
-const defaultBannerClass = 'fixed start-0 z-50 flex justify-between w-full p-4 bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
+const defaultBannerClass = 'fixed start-0 z-50 flex justify-between items-center w-full p-4 bg-gray-50 dark:bg-gray-700'
 const positionDefaultClass = 'top-0 border-b border-gray-200 dark:border-gray-600'
 const positionBottomClass = 'bottom-0 border-t border-gray-200 dark:border-gray-600'
 
+const defaultCollapseButtonClass = 'flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 border-none hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white'
+
 const bannerClasses = computed(() => useMergeClasses([
   defaultBannerClass,
   props.position === 'top' ? positionDefaultClass : positionBottomClass,
   props.class ?? '',
 ]))
 
+const handleCollapse = (e: MouseEvent) => {
+  const collapseButton = e.target as HTMLElement
+  const banner = collapseButton.closest('[role="banner"]') as HTMLElement | null
+
+  if (banner) {
+    banner.remove()
+  }
+}
+
 </script>
diff --git a/src/index.ts b/src/index.ts
index a42d2c39..fb4ce260 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,7 +8,6 @@ export { default as FwbAvatarStack } from './components/FwbAvatar/FwbAvatarStack
 export { default as FwbAvatarStackCounter } from './components/FwbAvatar/FwbAvatarStackCounter.vue'
 export { default as FwbBadge } from './components/FwbBadge/FwbBadge.vue'
 export { default as FwbBanner } from './components/FwbBanner/FwbBanner.vue'
-export { default as FwbBannerCollapseButton } from './components/FwbBanner/FwbBannerCollapseButton.vue'
 export { default as FwbBreadcrumb } from './components/FwbBreadcrumb/FwbBreadcrumb.vue'
 export { default as FwbBreadcrumbItem } from './components/FwbBreadcrumb/FwbBreadcrumbItem.vue'
 export { default as FwbButton } from './components/FwbButton/FwbButton.vue'

From 7330c521887514b80a0a969c6b420bedf610d849 Mon Sep 17 00:00:00 2001
From: ogzCode <oguzguc44@gmail.com>
Date: Tue, 20 Aug 2024 10:51:37 +0300
Subject: [PATCH 8/8] refactor: Update banner examples with new design and fix
 linting issues

---
 docs/components/banner.md | 83 ++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 45 deletions(-)

diff --git a/docs/components/banner.md b/docs/components/banner.md
index f445c6bb..daf44bfd 100644
--- a/docs/components/banner.md
+++ b/docs/components/banner.md
@@ -24,32 +24,28 @@ Use this free example to show a text message for an announcement with a CTA link
 
 ```vue
 <template>
-<fwb-banner>
-    <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div class="mx-auto flex items-center">
-            <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
-                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
-                    viewBox="0 0 24 24">
-                    <path fill-rule="evenodd"
-                        d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
-                    />
-                </svg>
-                <span class="[&_p]:inline">
-                    New brand identity has been launched for the&nbsp;
-                    <a href="https://flowbite.com"
-                        class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
-                            Flowbite Library
-                    </a>
-                </span>
-            </p>
-        </div>
-        <fwb-banner-collapse-button />
-    </div>
-</fwb-banner>
+<fwb-banner closable>
+      <div class="bg-gray-50 p-4 dark:bg-gray-700">
+        <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+          <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd"
+              d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+              clip-rule="evenodd" />
+          </svg>
+          <span class="[&_p]:inline">
+            New brand identity has been launched for the&nbsp;
+            <a href="https://flowbite.com"
+              class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+              Flowbite Library
+            </a>
+          </span>
+        </p>
+      </div>
+    </fwb-banner>
 </template>
 ```
 
-
 ## Bottom banner position
 
 This example can be used to position the sticky banner on the bottom side of the page instead of the top side.
@@ -58,28 +54,25 @@ This example can be used to position the sticky banner on the bottom side of the
 
 ```vue
 <template>
-<fwb-banner position="bottom">
-    <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
-        <div class="mx-auto flex items-center">
-            <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
-                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
-                    viewBox="0 0 24 24">
-                    <path fill-rule="evenodd"
-                        d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" 
-                    />
-                </svg>
-                <span class="[&_p]:inline">
-                    New brand identity has been launched for the&nbsp;
-                    <a href="https://flowbite.com"
-                        class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
-                            Flowbite Library
-                    </a>
-                </span>
-            </p>
-        </div>
-        <fwb-banner-collapse-button />
-    </div>
-</fwb-banner>
+<fwb-banner position="bottom" closable>
+      <div class="bg-gray-50 p-4 dark:bg-gray-700">
+        <p class="flex items-center gap-2 text-sm font-normal text-gray-500 dark:text-gray-400">
+          <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd"
+              d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z"
+              clip-rule="evenodd" />
+          </svg>
+          <span class="[&_p]:inline">
+            New brand identity has been launched for the&nbsp;
+            <a href="https://flowbite.com"
+              class="inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500">
+              Flowbite Library
+            </a>
+          </span>
+        </p>
+      </div>
+    </fwb-banner>
 </template>
 ```