box-ui-elements-mlh/src/components/guide-tooltip/GuideTooltip.js.flow

Box UI Elements

// @flow
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';

import Tooltip from '../tooltip';
import Button from '../button';
import messages from './messages';

import './GuideTooltip.scss';

type TooltipProps = $Diff<
    React.ElementConfig<typeof Tooltip>,
    {|
        text: any,
        theme: any,
    |},
>;

type Props = {|
    ...$Exact<TooltipProps>,
    body: React.Node,
    icon?: React.Node,
    primaryButtonProps?: React.ElementConfig<typeof Button>,
    secondaryButtonProps?: React.ElementConfig<typeof Button>,
    steps?: [number, number],
    title?: React.Node,
|};

function GuideTooltip({
    body,
    children,
    className = '',
    icon,
    isShown = true,
    primaryButtonProps,
    steps,
    secondaryButtonProps,
    showCloseButton = true,
    title,
    ...rest
}: Props) {
    return (
        <Tooltip
            {...rest}
            className={`bdl-GuideTooltip ${className}`}
            isShown={isShown}
            showCloseButton={showCloseButton}
            text={
                <>
                    {icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}
                    <div className="bdl-GuideTooltip-right">
                        {title && <div className="bdl-GuideTooltip-title">{title}</div>}
                        <div className="bdl-GuideTooltip-body">{body}</div>
                        {(secondaryButtonProps || primaryButtonProps || steps) && (
                            <div className="bdl-GuideTooltip-bottom">
                                {(secondaryButtonProps || primaryButtonProps) && (
                                    <div className="bdl-GuideTooltip-navigation">
                                        {secondaryButtonProps && (
                                            <Button
                                                {...secondaryButtonProps}
                                                className={classNames(
                                                    'bdl-GuideTooltip-previousButton',
                                                    secondaryButtonProps.className,
                                                )}
                                            />
                                        )}
                                        {primaryButtonProps && (
                                            <Button
                                                {...primaryButtonProps}
                                                className={classNames(
                                                    'bdl-GuideTooltip-nextButton',
                                                    primaryButtonProps.className,
                                                )}
                                            />
                                        )}
                                    </div>
                                )}
                                {steps && (
                                    <div className="bdl-GuideTooltip-steps">
                                        <FormattedMessage
                                            {...messages.navigation}
                                            values={{ currentStepIndex: steps[0], totalNumSteps: steps[1] }}
                                        />
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </>
            }
            theme="callout"
        >
            {children}
        </Tooltip>
    );
}

export default GuideTooltip;