diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-21 06:51:17 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-21 06:51:17 +0800 |
commit | 1e51af1d4b68bad9363411167fd4eb959e7a32dd (patch) | |
tree | 51146dff346547c8348a549064cf2362bb1a80e3 /packages/website/ts/components/onboarding/onboarding_card.tsx | |
parent | 39ccb2df0b43d3915337259789c393e4603b964c (diff) | |
download | dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.gz dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.bz2 dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.lz dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.xz dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.zst dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.zip |
Support mobile friendly onboarding flows
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_card.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_card.tsx | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx new file mode 100644 index 000000000..795a017e9 --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -0,0 +1,82 @@ +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 { Text, Title } from 'ts/components/ui/text'; + +export type ContinueButtonDisplay = 'enabled' | 'disabled'; + +export interface OnboardingCardProps { + title?: string; + content: React.ReactNode; + isLastStep: boolean; + onClose: () => void; + onClickNext: () => void; + onClickBack: () => void; + continueButtonDisplay?: ContinueButtonDisplay; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + continueButtonText?: string; +} + +export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({ + title, + content, + continueButtonDisplay, + continueButtonText, + onClickNext, + onClickBack, + onClose, + shouldHideBackButton, + shouldHideNextButton, +}) => ( + <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> +); + +OnboardingCard.defaultProps = { + continueButtonText: 'Continue', +}; + +OnboardingCard.displayName = 'OnboardingCard'; |