npm package: @paprika/takeover
Description: The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
Author: @paprika
Latest version: 4.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/takeover

## Description

The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.

## Installation

```
yarn add @paprika/takeover
```

or with npm:

```
npm install @paprika/takeover
```

## Props

### Takeover

| Prop         | Type   | required | default   | Description                                                  |
| ------------ | ------ | -------- | --------- | ------------------------------------------------------------ |
| a11yText     | string | false    | null      |                                                              |
| children     | node   | true     | -         | The content for the Takeover                                 |
| isOpen       | bool   | true     | -         | Control the visibility of the Takeover                       |
| onAfterClose | func   | false    | () => {}  | Callback once the Takeover has been closed event             |
| onAfterOpen  | func   | false    | () => {}  | Callback once the Takeover has been opened event             |
| onClose      | func   | false    | () => {}  | Callback triggered when the takeover needs to be close       |
| zIndex       | number | false    | zValue(5) | The z-index of the Takeover content                          |
| isFullWidth  | bool   | false    | false     | Set Takeover to full width without any margins and max-width |

### Takeover.Header

| Prop           | Type                                                    | required | default                   | Description                                                           |
| -------------- | ------------------------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------- |
| children       | node                                                    | true     | -                         |                                                                       |
| hasCloseButton | bool                                                    | false    | true                      |                                                                       |
| kind           | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false    | Header.types.kind.DEFAULT |                                                                       |
| level          | [ 1, 2, 3, 4, 5, 6]                                     | false    | 2                         |                                                                       |
| onClose        | func                                                    | false    | () => {}                  |                                                                       |
| refHeading     | custom                                                  | false    | null                      |                                                                       |
| tools          | node                                                    | false    | null                      | Add node object to the right side of heading next to the close button |

### Takeover.Footer

| Prop          | Type | required | default  | Description                                                                        |
| ------------- | ---- | -------- | -------- | ---------------------------------------------------------------------------------- |
| children      | node | false    | null     | The footer for the Takeover. Button size needs to be LARGE as per design guideline |
| onSaveClick   | func | false    | () => {} | Save Callback triggered when want to use default layout of the footer              |
| onCancelClick | func | false    | () => {} | Cancel Callback triggered when want to use default layout of the footer            |

### Takeover.FocusLock

| Prop        | Type | required | default | Description |
| ----------- | ---- | -------- | ------- | ----------- |
| returnFocus | -    | false    | true    |             |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

You can use any of the following components to compose the Takeover:

```jsx
<Takeover.Header />
<Takeover.Content />
<Takeover.Footer />
<Takeover.FocusLock />
```

Basic Example

```jsx
<Takeover isOpen={isOpen} onClose={toggle}>
  <Takeover.Header>Header</Takeover.Header>
  <Takeover.Content>My content</Takeover.Content>
  <Takeover.Footer onSaveClick={toggle} onCancelClick={toggle} />
</Takeover>
```

## Warnings

If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-takeover--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Takeover/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/takeover%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Takeover/CHANGELOG.md)