@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 | |

Usage

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

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

Basic Example

<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

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG