npm package: @highlight-ui/drawer
Description: A modal panel that slides in from the side of the page
Author: Personio GmbH & Co. KG
Latest version: 5.6.2

[![npm](https://img.shields.io/npm/v/@highlight-ui/drawer)](https://www.npmjs.com/package/@highlight-ui/drawer)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/06b5dc-drawer/b/10b28a)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-drawer--drawer-with-header-and-body)

# @highlight-ui/drawer

## Installation

Using npm:

```bash
npm install @highlight-ui/drawer
```

Using yarn:

```bash
yarn add @highlight-ui/drawer
```

Using pnpm:

```bash
pnpm install @highlight-ui/drawer
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/drawer');
```

Once the package is installed, you can import the library:

```ts
import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';
```

## Usage

```tsx
import React from 'react';
import { Drawer, DrawerHeader, DrawerBody } from '@highlight-ui/drawer';

export default function DrawerExample() {
  return (
    <Drawer visible={false} onClose={handleOnClose} onOpen={handleOnOpen}>
      <DrawerHeader>
        <Typography component="h1" token="heading-2xl">
          Drawer
        </Typography>
      </DrawerHeader>
      <DrawerBody>Drawer content</DrawerBody>
    </Drawer>
  );
}
```

## Props 📜

### Drawer

| Prop                    | Type                          | Required | Default  | Description                                                                                    |
| :---------------------- | :---------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------- |
| `visible`               | `boolean`                     | No       | `false`  | Controls the visibility of the drawer                                                          |
| `children`              | `React.ReactNode`             | No       |          | Should be an instance of `DrawerHeader` followed by an instance of `DrawerBody`                |
| `drawerClassName`       | `string`                      | No       |          | Allows providing a custom class name for the drawer                                            |
| `closeKey`              | `React.KeyboardEvent['key']`  | No       | `Escape` | Event keycode that should trigger the drawer to close                                          |
| `disabledBodyScrolling` | `boolean`                     | No       | `true`   | Controls the scrolling behavior of the document when the drawer is open                        |
| `leftOffset`            | `React.CSSProperties['left']` | No       | `280px`  | Controls the width of the drawer: `(100% - leftOffset)`                                        |
| `topOffset`             | `React.CSSProperties['top']`  | No       | `0px`    | Controls the height of the drawer: `(100% - topOffset)`                                        |
| `onClose`               | `() => void`                  | No       |          | Callback that is invoked after the drawer is closed                                            |
| `onOpen`                | `() => void`                  | No       |          | Callback that is invoked after the drawer is opened                                            |
| `onRequestToClose`      | `() => void`                  | No       |          | Callback that is invoked when the close key is pressed (if `preventToClose` is set to `false`) |
| `preventToClose`        | `boolean`                     | No       | `false`  | Controls whether the `onRequestToClose` callback should be executed or not                     |
| `enableBackdrop`        | `boolean`                     | No       | `false`  | Controls the visibility of the backdrop                                                        |
| `onBackdropClick`       | `() => void`                  | No       |          | Callback that is invoked when user clicks on the backdrop                                      |
| `backdropClassName`     | `string`                      | No       |          | Allows providing a custom class name for the backdrop                                          |

### DrawerHeader

| Prop        | Type      | Required | Default | Description                                                         |
| :---------- | :-------- | :------- | :------ | :------------------------------------------------------------------ |
| `fixed`     | `boolean` | No       | `false` | Controls whether the drawer header should be fixed (when scrolling) |
| `className` | `string`  | No       |         | Allows providing a custom class name                                |

### DrawerBody

| Prop        | Type     | Required | Default | Description                          |
| :---------- | :------- | :------- | :------ | :----------------------------------- |
| `className` | `string` | No       |         | Allows providing a custom class name |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/06b5dc-drawer/b/10b28a) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).