@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