Takeover Component

[nahumzs]

Takeover

Overview

Description

Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
More information at the design system site: https://design.wegalvanize.com/p/components/takeover

Context

The Takeover is part of the Panel family which includes the Modal and SidePanel, currently, we have a Takeover component working in our previous library which we want to migrate to Paprika.

The main tasks for doing so are:

• Make it work as a controlled component.
• Replace scss with styled-components, preferable using the css prop. In case you need it during this task you can take advantage of @paprika/tokens and @paprika/stylers
• Remove react-motion from the component, let's keep it for now with a basic fade-in/fade-out animation when opening the Takeover, later we can discuss with the designer how to improve it.
• Implementing trap focus via focus-trap-react focus trap on sidepanel
• Implementing a similar API to the SidePanel readme
• Add proper a11y requirements

Visual representation of the component

API

API intended, please feel free to modified or improve it.

// Content taking full width without padding
<Takeover>
   <Takeover.Header></Takeover.Header>
   [... your conent ...]
</Takeover>

// Content with proper padding according to design [${tokens.space * 2}](https://design.wegalvanize.com/tokens)
<Takeover>
   <Takeover.Header></Takeover.Header>
   <Takeover.Content>[... your conent ...]</Takeover.Content> {/* with padding */}
</Takeover>

// Ability to override the focus trap:
<Takeover>
   <Takeover.FocusTrap {...anyPropThatFocusTrapAccepst} />
   <Takeover.Header></Takeover.Header>
   <Takeover.Content>[... your conent ...]</Takeover.Content> {/* with padding */}
</Takeover>

Note: The Takeover should be able to either render in a React.Portal or as a regular Inline Element taking over an entire page. ref1, ref2

A11y considerations

Add any specific consideration related to a11y, keyboard shortcuts, screen reader behaviour.

Notes

Please take a moment and read some tips about migrating component to paprika in our wiki page