Feat: Drawer component

[dgonzalezr]

Describe the feature

We need a Drawer component that consumers can use in their projects/apps.

Describe the use case for this feature

Sometimes users or consumers need to display information details from a list without navigating away from it.

Describe the solution you'd like

The drawer should have 3 slots:

• Header or Title
• Body
• Footer

The drawer should be able to slide in/out from a side of the page, the side can be set through a property/attribute (e.g.: placement: 'left' | 'right'. Should we consider the top and bottom as well? (e.g.: https://ant.design/components/drawer).

The user can close the drawer by clicking the X icon on the Header (near the title) or clicking outside the drawer. Still, this behavior should be flexible, meaning that the drawer should allow consumers to set whether the drawer closes when clicking outside (true by default).

The width of the drawer can be customized as well, according to Figma: 320px default.

Events to consider

• open: triggered when the drawer will open
• close: triggered when the drawer will close
• afterClose: triggered after the drawer has closed
• afterOpen: triggered after the drawer has open

Related Code

No response

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54955&mode=design&t=IM6eKno8O3mv7ODZ-1