import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as _ from 'lodash'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Text, Title } from 'ts/components/ui/text'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; export interface OnboardingCardProps { title?: string; shouldCenterTitle?: boolean; content: React.ReactNode; isLastStep: boolean; onClose: () => void; onClickNext: () => void; onClickBack: () => void; onContinueButtonClick?: () => void; continueButtonDisplay?: ContinueButtonDisplay; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonText?: string; borderRadius?: string; // Used for super-custom content. shouldRemoveExtraSpacing?: boolean; } export const OnboardingCard: React.StatelessComponent = ({ title, shouldCenterTitle, content, continueButtonDisplay, continueButtonText, onContinueButtonClick, onClickNext, onClickBack, onClose, shouldHideBackButton, shouldHideNextButton, borderRadius, shouldRemoveExtraSpacing, }) => { const padding = shouldRemoveExtraSpacing ? {} : { paddingRight: '30px', paddingLeft: '30px', paddingTop: '15px', paddingBottom: '15px', }; const closeIconPositioning = shouldRemoveExtraSpacing ? { right: '15px', bottom: '3px' } : { bottom: '20px', left: '15px' }; return (
{title} Close {content} {continueButtonDisplay && ( )} {!(shouldHideBackButton && shouldHideNextButton) && (
{!shouldHideBackButton && ( Back )}
{!shouldHideNextButton && ( Skip )}
)}
); }; OnboardingCard.defaultProps = { continueButtonText: 'Continue', shouldCenterTitle: false, shouldRemoveExtraSpacing: false, }; OnboardingCard.displayName = 'OnboardingCard';