@paprika/takeover NPM

@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