diff options
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_flow.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_flow.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx new file mode 100644 index 000000000..5bbf84e1b --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -0,0 +1,31 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import Joyride, { Step, StyleOptions } from 'react-joyride'; + +import { zIndex } from 'ts/utils/style'; + +interface OnboardingFlowProps { + steps: Step[]; + stepIndex?: number; + isRunning: boolean; +} + +const style: StyleOptions = { + zIndex: zIndex.overlay, +}; + +// Wrapper around Joyride with defaults and styles set +export class OnboardingFlow extends React.Component<OnboardingFlowProps> { + public render(): React.ReactNode { + const { steps, stepIndex, isRunning } = this.props; + return ( + <Joyride + run={isRunning} + debug={true} + steps={steps} + stepIndex={stepIndex} + styles={{ options: style }} + /> + ); + } +}; |