Add Pointer component

packages/website/ts/components/onboarding/onboarding_tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
 import { Island } from 'ts/components/ui/island';
+import { Pointer } from 'ts/components/ui/pointer';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
@@ -34,22 +35,24 @@ export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (pr
 };
 
 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>
+    <Pointer direction="left">
+        <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>
+    </Pointer>
 );
 
 OnboardingTooltip.displayName = 'OnboardingTooltip';

packages/website/ts/components/ui/pointer.tsx

@@ -0,0 +1,68 @@
+import { colors } from '@0xproject/react-shared';
+import { Island } from 'ts/components/ui/island';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+export type PointerDirection = 'top' | 'right' | 'bottom' | 'left';
+
+export interface PointerProps {
+    className?: string;
+    color?: string;
+    size?: number;
+    direction: PointerDirection;
+}
+
+const PlainPointer: React.StatelessComponent<PointerProps> =  props => <div {...props}/>;
+
+const positionToCss = (props: PointerProps) => {
+    const position = {
+        top: `bottom: 100%; left: 50%;`,
+        right: `left: 100%; top: 50%;`,
+        bottom: `top: 100%; left: 50%;`,
+        left: `right: 100%; top: 50%;`,
+    }[props.direction];
+
+    const borderColorSide = {
+        top: 'border-bottom-color',
+        right: 'border-left-color',
+        bottom: 'border-top-color',
+        left: 'border-right-color',
+    }[props.direction];
+    const border = `${borderColorSide}: ${props.color};`;
+    const marginSide = {
+        top: 'margin-left',
+        right: 'margin-top',
+        bottom: 'margin-left',
+        left: 'margin-top',
+    }[props.direction];
+    const margin = `${marginSide}: -${props.size}px`;
+    return {
+        position,
+        border,
+        margin,
+    };
+};
+
+export const Pointer = styled(PlainPointer)`
+    position: relative;
+    &:after {
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: rgba(136, 183, 213, 0);
+        border-width: ${props => `${props.size}px`};
+        ${props => positionToCss(props).position}
+        ${props => positionToCss(props).border}
+        ${props => positionToCss(props).margin}
+    }
+`;
+
+Pointer.defaultProps = {
+    color: colors.white,
+    size: 16,
+};
+
+Pointer.displayName = 'Pointer';