Skip to content

Commit

Permalink
feat(Drawer): refactor css style and add placement prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cata1989
Cata1989 committed Mar 11, 2024
1 parent 4767cc1 commit 09a7ced
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 58 deletions.
4 changes: 4 additions & 0 deletions packages/beeq/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { TButtonAppearance, TButtonBorderRadius, TButtonSize, TButtonType, TButt
import { TCardBorderRadius, TCardType } from "./components/card/bq-card.types";
import { TDialogBorderRadius, TDialogFooterAppearance, TDialogSize } from "./components/dialog/bq-dialog.types";
import { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from "./components/divider/bq-divider.types";
import { TDrawerPlacement } from "./components/drawer/bq-drawer.types";
import { FloatingUIPlacement } from "./services/interfaces";
import { TEmptyStateSize } from "./components/empty-state/bq-empty-state.types";
import { TIconWeight } from "./components/icon/bq-icon.types";
Expand All @@ -38,6 +39,7 @@ export { TButtonAppearance, TButtonBorderRadius, TButtonSize, TButtonType, TButt
export { TCardBorderRadius, TCardType } from "./components/card/bq-card.types";
export { TDialogBorderRadius, TDialogFooterAppearance, TDialogSize } from "./components/dialog/bq-dialog.types";
export { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from "./components/divider/bq-divider.types";
export { TDrawerPlacement } from "./components/drawer/bq-drawer.types";
export { FloatingUIPlacement } from "./services/interfaces";
export { TEmptyStateSize } from "./components/empty-state/bq-empty-state.types";
export { TIconWeight } from "./components/icon/bq-icon.types";
Expand Down Expand Up @@ -408,6 +410,7 @@ export namespace Components {
* If true, the drawer component will be shown
*/
"open": boolean;
"placement"?: TDrawerPlacement;
/**
* Method to be called to show the notification component
*/
Expand Down Expand Up @@ -2437,6 +2440,7 @@ declare namespace LocalJSX {
* If true, the drawer component will be shown
*/
"open"?: boolean;
"placement"?: TDrawerPlacement;
}
interface BqDropdown {
/**
Expand Down
48 changes: 29 additions & 19 deletions packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit-html';

import mdx from './bq-drawer.mdx';
import { DRAWER_PLACEMENT } from '../bq-drawer.types';

const meta: Meta = {
title: 'Components/Drawer',
Expand All @@ -13,6 +14,7 @@ const meta: Meta = {
},
argTypes: {
open: { control: 'boolean' },
placement: { control: 'select', options: [...DRAWER_PLACEMENT] },
// Events
bqShow: { action: 'bqOpen' },
bqHide: { action: 'bqClose' },
Expand All @@ -21,46 +23,54 @@ const meta: Meta = {
},
args: {
open: false,
placement: 'left',
},
};
export default meta;

type Story = StoryObj;

const Template = (args: Args) => html`
<div class="flex gap-xl">
const Template = (args: Args) => {
const handleOpenDrawer = async () => {
const dialogElem = document.querySelector('bq-drawer');
await dialogElem.show();
};

return html`
<bq-button @bqClick=${handleOpenDrawer}>Open Drawer</bq-button>
<div class="w-80">
<bq-drawer ?open=${args.open}
>Title
<bq-drawer
?open=${args.open}
placement=${args.placement}
@bqCancel=${args.bqCancel}
@bqClose=${args.bqClose}
@bqOpen=${args.bqOpen}
@bqAfterOpen=${args.bqAfterOpen}
@bqAfterClose=${args.bqAfterClose}
>
<div class="flex gap-xs" slot="title">
<bq-icon name="user-circle" weight="bold" role="img" title="Info"></bq-icon>
Title
</div>
<div
class="flex h-60 items-center justify-center border-[0.2px] border-dashed border-stroke-brand bg-[var(--bq-danger-light)]"
class="flex h-full items-center justify-center rounded-xs border border-dashed border-stroke-brand bg-red-100"
slot="body"
>
Slot
</div>
<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>
</div></bq-drawer
>
</div>
<div class="w-80">
<bq-drawer ?open=${args.open}
><bq-icon name="user-circle" weight="bold" slot="icon"></bq-icon>Title
<div
class="flex h-60 items-center justify-center border-[0.2px] border-dashed border-stroke-brand bg-[var(--bq-danger-light)]"
slot="body"
>
Slot
</div>
</bq-drawer>
</div>
</div>
`;
`;
};

export const Default: Story = {
render: Template,
args: {
open: true,
open: false,
placement: 'left',
},
};
72 changes: 37 additions & 35 deletions packages/beeq/src/components/drawer/bq-drawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
import { enter, leave } from 'el-transition';

import { TDrawerPlacement } from './bq-drawer.types';
import { hasSlotContent } from '../../shared/utils';

@Component({
Expand All @@ -13,8 +14,7 @@ export class BqDrawer {
// ====================

private drawerElem: HTMLDivElement;
private footerElem: HTMLDivElement;
private iconElement: HTMLSpanElement;
private footerElem: HTMLElement;

// Reference to host HTML element
// ===================================
Expand All @@ -34,6 +34,9 @@ export class BqDrawer {
/** If true, the drawer component will be shown */
@Prop({ reflect: true, mutable: true }) open: boolean;

/* Defines the position of the drawer */
@Prop({ reflect: true, mutable: true }) placement?: TDrawerPlacement = 'left';

// Prop lifecycle events
// =======================

Expand Down Expand Up @@ -131,10 +134,6 @@ export class BqDrawer {
this.bqAfterClose.emit();
};

private handleIconSlotChange = () => {
this.hasIcon = hasSlotContent(this.iconElement, 'icon');
};

// render() function
// Always the last one in the class.
// ===================================
Expand All @@ -145,42 +144,45 @@ export class BqDrawer {
class={{ 'is-hidden': !this.open }}
aria-hidden={!this.open ? 'true' : 'false'}
hidden={!this.open ? 'true' : 'false'}
role="dialog"
>
<div class="bq-drawer" ref={(div) => (this.drawerElem = div)} part="wrapper">
<div class="flex items-center justify-between">
{/* Header */}
<div class="title-font flex items-center gap-2 font-bold leading-regular text-text-primary" part="header">
<div class="flex" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part="icon">
<slot name="icon" onSlotchange={this.handleIconSlotChange} />
{/* Backdrop */}
<div class={`bq-drawer-backdrop ${this.open ? 'open' : ''}`} onClick={() => this.hide()}></div>
<div class={{ [`bq-drawer ${this.placement}`]: true }} ref={(div) => (this.drawerElem = div)} part="wrapper">
<main class="bq-drawer__content" part="content">
<header class="bq-drawer__header" part="header">
<div class="bq-drawer__title" part="title">
<slot name="title" />
</div>
<div part="title">
<slot />
<div class="flex" role="button" part="button-close">
<slot name="button-close">
<bq-button
class="bq-drawer__close focus-visible:focus"
appearance="text"
size="small"
slot="button-close"
onClick={() => this.hide()}
>
<bq-icon weight="bold" name="x" role="img" title="Close" />
</bq-button>
</slot>
</div>
</header>
<div class="bq-drawer__body" part="body">
<slot name="body" />
</div>
{/* CLOSE BUTTON */}
<bq-button
class="bq-drawer__close focus-visible:focus"
appearance="text"
size="small"
onClick={() => this.hide()}
part="btn-close"
>
<bq-icon weight="bold" name="x" />
</bq-button>
</div>
{/* Body */}
<div class="bq-drawer__body" part="body">
<slot name="body" />
</div>
{this.hasFooter && <bq-divider dashed stroke-color="ui--secondary"></bq-divider>}
{/* Footer */}
<div
class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}
ref={(div) => (this.footerElem = div)}
{this.hasFooter && <bq-divider dashed stroke-color="ui--secondary"></bq-divider>}
</main>
<footer
class={{
'bq-drawer__footer': true,
'!hidden': !this.hasFooter,
}}
ref={(footerElem) => (this.footerElem = footerElem)}
part="footer"
>
<slot name="footer" onSlotchange={this.handleFooterSlotChange} />
</div>
</footer>
</div>
</Host>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/beeq/src/components/drawer/bq-drawer.types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const DRAWER_PLACEMENT = ['left', 'right'] as const;
export type TDrawerPlacement = (typeof DRAWER_PLACEMENT)[number];
37 changes: 35 additions & 2 deletions packages/beeq/src/components/drawer/scss/bq-drawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,24 @@
}

.bq-drawer {
@apply relative flex w-auto flex-col gap-[var(--bq-drawer--title-body-gap)] px-[var(--bq-drawer--wrapper-X-padding)] py-[var(--bq-drawer--wrapper-Y-padding)] transition-all;
@apply absolute z-20 flex h-screen w-80 flex-col overflow-auto bg-bg-primary px-[var(--bq-drawer--wrapper-X-padding)] py-[var(--bq-drawer--wrapper-Y-padding)] transition-all;

&.left {
@apply left-0 top-0;
}

&.right {
@apply right-0 top-0;
}
}

/* Styling for the backdrop */
.bq-drawer-backdrop {
@apply fixed inset-0 z-10 bg-bg-alt opacity-50;
}

.bq-drawer-backdrop.open {
display: block;
}

/**
Expand All @@ -23,6 +40,22 @@
@apply h-fit rounded-s border-0 p-0;
}

.bq-drawer__content {
@apply flex flex-1 flex-col gap-[var(--bq-drawer--title-body-gap)];
}

.bq-drawer__header {
@apply flex items-center;
}

.bq-drawer__title {
@apply flex flex-1 items-center justify-between font-bold leading-regular text-text-primary;
}

.bq-drawer__footer {
@apply flex items-start gap-xs pt-[var(--bq-drawer--footer-top-padding)];
}

.bq-drawer__body {
@apply h-auto p-[var(--bq-drawer--body-padding)];
@apply flex-1;
}
5 changes: 3 additions & 2 deletions packages/beeq/src/components/drawer/scss/bq-drawer.variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
* @prop ---bq-drawer--body-padding - Drawer default padding for body slot
*/
--bq-drawer--title-body-gap: theme('spacing.l');
--bq-drawer--wrapper-X-padding: theme('spacing.m');
--bq-drawer--wrapper-Y-padding: theme('spacing.l');
--bq-drawer--wrapper-X-padding: theme('spacing.l');
--bq-drawer--wrapper-Y-padding: theme('spacing.m');
--bq-drawer--footer-top-padding: theme('spacing.m');
--bq-drawer--body-padding: theme('spacing.xs');
}

0 comments on commit 09a7ced

Please sign in to comment.