feat(Drawer): add support for custom footer divider (#1060)

Endava · May 17, 2024 · 4aa853d · 4aa853d
1 parent 2a0f469
commit 4aa853d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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
@@ -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>