Takeover

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Takeover Title"
    backLabel="Previous Page"
    footer={
        <ButtonGroup>
            <Button>Cancel</Button>
            <Button primary>Continue</Button>
        </ButtonGroup>
    }
    onBack={function(){ return;}}
    onClose={function(){ return;}}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Takeover Title"
    backLabel="Previous Page"
    footer={
        <ButtonGroup>
            <Button>Cancel</Button>
            <Button primary>Continue</Button>
        </ButtonGroup>
    }
    onBack={function(){ return;}}
    onClose={function(){ return;}}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
</Takeover>

Multiple Content Sections

A Takeover can contain multiple content sections that span the width of the screen. These are useful for including navigation indicators like a Progress Tracker or other meta information about the page content.

<State initial={0}>
    {([index, setIndex]) => (
        <Takeover
            portal={false}
            focusTrapOptions={{ disabled: true }}
            title="Takeover Title"
            backLabel="Previous Page"
            complete={index === 4}
            footer={
                index < 4 && (
                    <Stack justifyContent="space-between" direction="row-reverse" className="w-100">
                        <ButtonGroup>
                            <Button onClick={() => setIndex(0)}>Cancel</Button>
                            <Button primary onClick={() => setIndex(index + 1)}>{index < 3 ? 'Continue' : 'Complete'}</Button>
                        </ButtonGroup>
                        {index > 0 && <Button fill="subtle" onClick={() => setIndex(index - 1)}>Back</Button>}
                    </Stack>
                )
            }
            onBack={function(){ return;}}
            onClose={function(){ return;}}
            sectioned
            contentWrapperClass="d-f flex-column"
        >
            <Takeover.Section>
                <ProgressTracker currentIndex={index}>
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                </ProgressTracker>
            </Takeover.Section>
            {(index === 0 || index === 2) &&
                <Takeover.Section className="of-auto">
                    <BodyText>Section {`${index + 1}`}</BodyText>
                    <br />
                    <Form>
                        {[0,3,6].map(item => (
                            <>
                            <Form.Group widths="equal">
                                <Form.Input placeholder="First data goes here..." label={`Data #${1 + item}`} />
                                <Form.Input placeholder="Second data goes here..." label={`Data #${2 + item}`} />
                            </Form.Group>
                            <Form.Input placeholder="Third data goes here..." label={`Data #${3 + item}`} />
                            <Form.ButtonToggle
                                label="Toggle"
                                options={[
                                    {text: 'Yes', value: 'Yes', selected: true},
                                    {text: 'No', value: 'No'}
                                ]}
                            />
                            </>
                        ))}
                    </Form>
                </Takeover.Section>
            }
            {(index === 1 || index === 3) &&
                <Takeover.Section className="of-auto">
                    <BodyText>Section {`${index + 1}`}</BodyText>
                </Takeover.Section>
            }
        </Takeover>
    )}
</State>

<State initial={0}>
    {([index, setIndex]) => (
        <Takeover
            portal={false}
            focusTrapOptions={{ disabled: true }}
            title="Takeover Title"
            backLabel="Previous Page"
            complete={index === 4}
            footer={
                index < 4 && (
                    <Stack justifyContent="space-between" direction="row-reverse" className="w-100">
                        <ButtonGroup>
                            <Button onClick={() => setIndex(0)}>Cancel</Button>
                            <Button primary onClick={() => setIndex(index + 1)}>{index < 3 ? 'Continue' : 'Complete'}</Button>
                        </ButtonGroup>
                        {index > 0 && <Button fill="subtle" onClick={() => setIndex(index - 1)}>Back</Button>}
                    </Stack>
                )
            }
            onBack={function(){ return;}}
            onClose={function(){ return;}}
            sectioned
            contentWrapperClass="d-f flex-column"
        >
            <Takeover.Section>
                <ProgressTracker currentIndex={index}>
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                    <ProgressTracker.Step />
                </ProgressTracker>
            </Takeover.Section>
            {(index === 0 || index === 2) &&
                <Takeover.Section className="of-auto">
                    <BodyText>Section {`${index + 1}`}</BodyText>
                    <br />
                    <Form>
                        {[0,3,6].map(item => (
                            <>
                            <Form.Group widths="equal">
                                <Form.Input placeholder="First data goes here..." label={`Data #${1 + item}`} />
                                <Form.Input placeholder="Second data goes here..." label={`Data #${2 + item}`} />
                            </Form.Group>
                            <Form.Input placeholder="Third data goes here..." label={`Data #${3 + item}`} />
                            <Form.ButtonToggle
                                label="Toggle"
                                options={[
                                    {text: 'Yes', value: 'Yes', selected: true},
                                    {text: 'No', value: 'No'}
                                ]}
                            />
                            </>
                        ))}
                    </Form>
                </Takeover.Section>
            }
            {(index === 1 || index === 3) &&
                <Takeover.Section className="of-auto">
                    <BodyText>Section {`${index + 1}`}</BodyText>
                </Takeover.Section>
            }
        </Takeover>
    )}
</State>

Light Theme

A takeover can also be in a light theme. This variation is useful when visualizing a context change to a user, such as with Takeovers within Takeovers.

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Takeover Title"
    theme="light"
    backLabel="Previous Page"
    footer={
        <ButtonGroup>
            <Button>Cancel</Button>
            <Button primary>Continue</Button>
        </ButtonGroup>
    }
    onBack={function(){ return;}}
    onClose={function(){ return;}}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Takeover Title"
    theme="light"
    backLabel="Previous Page"
    footer={
        <ButtonGroup>
            <Button>Cancel</Button>
            <Button primary>Continue</Button>
        </ButtonGroup>
    }
    onBack={function(){ return;}}
    onClose={function(){ return;}}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
</Takeover>

Takeover Header Actions

There are times where a Takeover has actions that can be performed on the content that aren't specific to moving backward or forward in a flow. These Takeover Actions can be added to the header of the Takeover.

<State initial={false}>
    {([open, setOpen]) => {
        const handleClick = () => setOpen(!open);
        const handleClickOutside = () => setOpen(false);

        return (
            <Takeover
                portal={false}
                focusTrapOptions={{ disabled: true }}
                title="Takeover Title"
                footer={
                    <ButtonGroup>
                        <Button>Cancel</Button>
                        <Button primary>Continue</Button>
                    </ButtonGroup>
                }
                onBack={function(){ return;}}
                onClose={function(){ return;}}
                actions={
                    <ActionMenu
                        trigger={<Button onClick={handleClick} small iconName="expand_more" iconPosition="right">Actions</Button>}
                        sharp={false}
                        width="xs"
                        direction="br"
                        open={open}
                        portal={false}
                        onClickOutside={handleClickOutside}
                    >
                        <ActionMenu.Item><BodyText>Print</BodyText></ActionMenu.Item>
                        <ActionMenu.Item><BodyText>Download</BodyText></ActionMenu.Item>
                    </ActionMenu>
                }
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
            </Takeover>
        )
    }}
</State>

<State initial={false}>
    {([open, setOpen]) => {
        const handleClick = () => setOpen(!open);
        const handleClickOutside = () => setOpen(false);

        return (
            <Takeover
                portal={false}
                focusTrapOptions={{ disabled: true }}
                title="Takeover Title"
                footer={
                    <ButtonGroup>
                        <Button>Cancel</Button>
                        <Button primary>Continue</Button>
                    </ButtonGroup>
                }
                onBack={function(){ return;}}
                onClose={function(){ return;}}
                actions={
                    <ActionMenu
                        trigger={<Button onClick={handleClick} small iconName="expand_more" iconPosition="right">Actions</Button>}
                        sharp={false}
                        width="xs"
                        direction="br"
                        open={open}
                        portal={false}
                        onClickOutside={handleClickOutside}
                    >
                        <ActionMenu.Item><BodyText>Print</BodyText></ActionMenu.Item>
                        <ActionMenu.Item><BodyText>Download</BodyText></ActionMenu.Item>
                    </ActionMenu>
                }
            >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.
            </Takeover>
        )
    }}
</State>

Takeover footers generally provide flow controls such as backward, forward, and submit. Like the modal, the footer layout can be customized for different needs.

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Double Right Aligned Buttons"
    footer={<ButtonGroup>
        <Button>Cancel</Button>
        <Button primary>Save</Button>
    </ButtonGroup>}
    theme="light"
>
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Double Right Aligned Buttons"
    footer={<ButtonGroup>
        <Button>Cancel</Button>
        <Button primary>Save</Button>
    </ButtonGroup>}
    theme="light"
>
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Split Buttons"
    footer={<React.Fragment>
        <Button>Cancel</Button>
        <Button primary>Save</Button>
    </React.Fragment>}
    footerAlign="space-between"
    theme="light"
>
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title="Split Buttons"
    footer={<React.Fragment>
        <Button>Cancel</Button>
        <Button primary>Save</Button>
    </React.Fragment>}
    footerAlign="space-between"
    theme="light"
>
</Takeover>

Custom Title

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title={
        <Stack alignItems="center" spacing="1">
            <Headline className="c-white m-b-0">
                <span className="c-neutral-80">Edit Audience:</span> Acquire - $250k and up
            </Headline>
            <Icon name="edit" className="c-neutral-80 cursor-pointer" size={16} />
        </Stack>
    }
>
</Takeover>

<Takeover
    portal={false}
    focusTrapOptions={{ disabled: true }}
    title={
        <Stack alignItems="center" spacing="1">
            <Headline className="c-white m-b-0">
                <span className="c-neutral-80">Edit Audience:</span> Acquire - $250k and up
            </Headline>
            <Icon name="edit" className="c-neutral-80 cursor-pointer" size={16} />
        </Stack>
    }
>
</Takeover>

Best Practices

A Takeover should:

Be used to display a multi-step workflow that does not need context of the previous page
Provide a title to clearly identify the content of the page
Include clear call-to-actions for the user to proceed, cancel, or close

For more context around the page the user came from, use a Modal component.
For critical information that requires a specific decision, use a Dialog component.

Importing

import { Takeover } from '@servicetitan/design-system';