Is documented
The component is fully documented
Take Overs are used to complete focused and more complex interactions within the scope of a broader process like editing a Journey or selecting lists for a campaign.
The Take Over component has different atomic sections with properties that can be applied based on the context and location of the Take Over.
The Take Over component includes:
The Take Over has 4 sizes:
While the sizes for Small, Medium, and Large have static px values, the Xlarge version is calculated based on the viewport width.
export const SIZE_WIDTHS = {
[DRAWER_SIZES.FULL]: 100vw;
[DRAWER_SIZES.XLARGE]: `calc(100vw - ${spacing.x4})`,
[DRAWER_SIZES.LARGE]: pxToRem(928),
[DRAWER_SIZES.MEDIUM]: pxToRem(672),
[DRAWER_SIZES.SMALL]: pxToRem(525),};
// default size is LARGE.
The Take Over nav bar is primarily used in situations where the Take Over covers more than 50% of the screen (XL or LG variants require it). It can also be used optionally at smaller sizes, such as the sidebar in Journey Studio.
When the primary action is editing/creation, the purple nav bar should be used—this is also referred to as ‘Edit mode’. When the function of the screen is for review or read only sections, the white header should be used or also referred to as ‘Focus’ mode.
The Take Over header has a number of props that can be enabled based on the location and context of the Take Over.
There are a handful of Studio-only items that can be used in the header:
The body slot component can be swapped out with local body components. The default Takeover body uses the same padding as our cards, 24px / ${spacing.cardPadding}
Examples coming soon.
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated