aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_tooltip.tsx')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx103
1 files changed, 69 insertions, 34 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 155c70c5f..45851b4de 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,7 +1,12 @@
+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 { Pointer, PointerDirection } from 'ts/components/ui/pointer';
+import { Text, Title } from 'ts/components/ui/text';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
@@ -13,43 +18,73 @@ export interface OnboardingTooltipProps {
onClickNext: () => void;
onClickBack: () => void;
continueButtonDisplay?: ContinueButtonDisplay;
- hideBackButton?: boolean;
- hideNextButton?: boolean;
+ shouldHideBackButton?: boolean;
+ shouldHideNextButton?: boolean;
+ pointerDirection?: PointerDirection;
+ continueButtonText?: string;
+ className?: string;
}
-// TODO: Make this more general button.
-export interface ContinueButtonProps {
- display: ContinueButtonDisplay;
- children?: string;
- onClick: () => void;
-}
+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 ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
- const isDisabled = props.display === 'disabled';
- return (
- <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
- {props.children}
- </button>
- );
+OnboardingTooltip.defaultProps = {
+ pointerDirection: 'left',
+ continueButtonText: 'Continue',
};
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
- <Island>
- <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
- <div className="flex flex-column">
- {props.title}
- {props.content}
- {props.continueButtonDisplay && (
- <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
- Continue
- </ContinueButton>
- )}
- {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
- {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
- <button onClick={props.onClose}>Close</button>
- </div>
- </Container>
- </Island>
-);
-
OnboardingTooltip.displayName = 'OnboardingTooltip';