merge v2-prototype

1 files changed, 40 insertions, 14 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 1f4c6df82..c2b4a4ca7 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -6,13 +6,29 @@ import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboardi
 import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
+import { PointerDirection } from 'ts/components/ui/pointer';
 import { zIndex } from 'ts/style/z_index';
 
-export interface Step {
+export interface FixedPositionSettings {
+    type: 'fixed';
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    pointerDirection?: PointerDirection;
+}
+
+export interface TargetPositionSettings {
+    type: 'target';
     target: string;
+    placement: Placement;
+}
+
+export interface Step {
+    // Provide either a CSS selector, or fixed position settings. Only applies to desktop.
+    position: TargetPositionSettings | FixedPositionSettings;
     title?: string;
     content: React.ReactNode;
-    placement?: Placement;
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
@@ -40,18 +56,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             return null;
         }
         let onboardingElement = null;
+        const currentStep = this._getCurrentStep();
         if (this.props.isMobile) {
-            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
-        } else {
+            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardingCard()}</Animation>;
+        } else if (currentStep.position.type === 'target') {
+            const { placement, target } = currentStep.position;
             onboardingElement = (
-                <Popper
-                    referenceElement={this._getElementForStep()}
-                    placement={this._getCurrentStep().placement}
-                    positionFixed={true}
-                >
+                <Popper referenceElement={document.querySelector(target)} placement={placement} positionFixed={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
+        } else if (currentStep.position.type === 'fixed') {
+            const { top, right, bottom, left, pointerDirection } = currentStep.position;
+            onboardingElement = (
+                <Container
+                    position="fixed"
+                    zIndex={zIndex.aboveOverlay}
+                    top={top}
+                    right={right}
+                    bottom={bottom}
+                    left={left}
+                >
+                    {this._renderToolTip(pointerDirection)}
+                </Container>
+            );
         }
         if (this.props.disableOverlay) {
             return onboardingElement;
@@ -63,9 +91,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _getElementForStep(): Element {
-        return document.querySelector(this._getCurrentStep().target);
-    }
     private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         const customStyles = { zIndex: zIndex.aboveOverlay };
         // On re-render, we want to re-center the popper.
@@ -76,7 +101,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _renderToolTip(): React.ReactNode {
+    private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
@@ -94,12 +119,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
+                    pointerDirection={pointerDirection}
                 />
             </Container>
         );
     }
 
-    private _renderOnboardignCard(): React.ReactNode {
+    private _renderOnboardingCard(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;