From 4aa853d02459b4aeadd587c0d874695b4935f5dc Mon Sep 17 00:00:00 2001
From: Bogdan Bosca <109202804+endv-bogdanb@users.noreply.github.com>
Date: Fri, 17 May 2024 16:51:06 +0300
Subject: [PATCH] feat(Drawer): add support for custom footer divider (#1060)

---
 .../drawer/_storybook/bq-drawer.stories.tsx   | 20 +++++++++++++++++--
 .../beeq/src/components/drawer/bq-drawer.tsx  |  4 +++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx
index 1a8c26404..f84aa70eb 100644
--- a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx
+++ b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx
@@ -25,6 +25,7 @@ const meta: Meta = {
     bqAfterClose: { action: 'bqAfterClose' },
     // Not part of the component API
     noFooter: { control: 'boolean', table: { disable: true } },
+    customFooterDivider: { control: 'boolean', table: { disable: true } },
   },
   args: {
     open: false,
@@ -40,10 +41,14 @@ type Story = StoryObj;
 
 const Template = (args: Args) => {
   const handleOpenDrawer = async () => {
-    const dialogElem = document.querySelector('bq-drawer');
-    await dialogElem.show();
+    const drawerElem = document.querySelector('bq-drawer');
+    await drawerElem.show();
   };
 
+  const customFooterDivider = args.customFooterDivider
+    ? html`<bq-divider slot="footer-divider" class="mb-m block" stroke-color="stroke--primary" stroke-thickness="1" />`
+    : nothing;
+
   return html`
     <bq-button @bqClick=${handleOpenDrawer}>Open Drawer</bq-button>
     <bq-drawer
@@ -68,6 +73,7 @@ const Template = (args: Args) => {
       </div>
       ${!args.noFooter
         ? html`
+            ${customFooterDivider}
             <div class="flex flex-1 justify-center gap-xs" slot="footer">
               <bq-button appearance="primary" block size="small"> Button </bq-button>
               <bq-button appearance="link" block size="small"> Button </bq-button>
@@ -111,3 +117,13 @@ export const WithBackdrop: Story = {
     'enable-backdrop': true,
   },
 };
+
+export const WithCustomFooterDivider: Story = {
+  render: Template,
+  args: {
+    open: false,
+    placement: 'right',
+    'enable-backdrop': true,
+    customFooterDivider: true,
+  },
+};
diff --git a/packages/beeq/src/components/drawer/bq-drawer.tsx b/packages/beeq/src/components/drawer/bq-drawer.tsx
index 3b9569cd9..1c0999f5c 100644
--- a/packages/beeq/src/components/drawer/bq-drawer.tsx
+++ b/packages/beeq/src/components/drawer/bq-drawer.tsx
@@ -268,7 +268,9 @@ export class BqDrawer {
             ref={(footerElem) => (this.footerElem = footerElem)}
             part="footer"
           >
-            <bq-divider class="mb-m block" stroke-color="ui--secondary" dashed />
+            <slot name="footer-divider">
+              <bq-divider class="mb-m block" stroke-color="ui--secondary" dashed />
+            </slot>
             <slot name="footer" onSlotchange={this.handleFooterSlotChange} />
           </footer>
         </div>