diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-06-22 04:16:13 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-22 04:16:13 +0800 |
commit | c740539f48a57f44f246e35d8da9635402125f9f (patch) | |
tree | e3ed3c0b6dd8f9fe895ad6448756169a882a6503 /packages/website/ts/components/onboarding/onboarding_tooltip.tsx | |
parent | 8ab65fdde4629efd4c7effe9f4ae019e6e058b8c (diff) | |
parent | 5edfec68cf19f50977cfb8390528b5601a920936 (diff) | |
download | dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar.gz dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar.bz2 dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar.lz dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar.xz dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.tar.zst dexon-sol-tools-c740539f48a57f44f246e35d8da9635402125f9f.zip |
Merge pull request #739 from 0xProject/feature/website/mobile-friendly-onboarding
Add support for mobile-friendly onboarding flows
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_tooltip.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_tooltip.tsx | 87 |
1 files changed, 11 insertions, 76 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 45851b4de..d8065625d 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -1,90 +1,25 @@ -import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -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 { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card'; import { Pointer, PointerDirection } from 'ts/components/ui/pointer'; -import { Text, Title } from 'ts/components/ui/text'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; -export interface OnboardingTooltipProps { - title?: string; - content: React.ReactNode; - isLastStep: boolean; - onClose: () => void; - onClickNext: () => void; - onClickBack: () => void; - continueButtonDisplay?: ContinueButtonDisplay; - shouldHideBackButton?: boolean; - shouldHideNextButton?: boolean; - pointerDirection?: PointerDirection; - continueButtonText?: string; +export interface OnboardingTooltipProps extends OnboardingCardProps { className?: string; + pointerDirection?: PointerDirection; } -export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({ - title, - content, - continueButtonDisplay, - continueButtonText, - onClickNext, - onClickBack, - onClose, - shouldHideBackButton, - shouldHideNextButton, - pointerDirection, - className, -}) => ( - <Pointer className={className} direction={pointerDirection}> - <Island> - <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px"> - <div className="flex flex-column"> - <div className="flex justify-between"> - <Title>{title}</Title> - <Container position="relative" bottom="20px" left="15px"> - <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}> - Close - </IconButton> - </Container> - </div> - <Container marginBottom="15px"> - <Text>{content}</Text> - </Container> - {continueButtonDisplay && ( - <Button - isDisabled={continueButtonDisplay === 'disabled'} - onClick={onClickNext} - fontColor={colors.white} - fontSize="15px" - backgroundColor={colors.mediumBlue} - > - {continueButtonText} - </Button> - )} - <Container className="flex justify-between" marginTop="15px"> - {!shouldHideBackButton && ( - <Text fontColor={colors.grey} onClick={onClickBack}> - Back - </Text> - )} - {!shouldHideNextButton && ( - <Text fontColor={colors.grey} onClick={onClickNext}> - Skip - </Text> - )} - </Container> - </div> - </Container> - </Island> - </Pointer> -); - +export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => { + const { pointerDirection, className, ...cardProps } = props; + return ( + <Pointer className={className} direction={pointerDirection}> + <OnboardingCard {...cardProps} /> + </Pointer> + ); +}; OnboardingTooltip.defaultProps = { pointerDirection: 'left', - continueButtonText: 'Continue', }; OnboardingTooltip.displayName = 'OnboardingTooltip'; |