Merge pull request #711 from 0xProject/website/feature/prettier-onboarding-components

Made onboarding look like the mocks

1 files changed, 67 insertions, 0 deletions

diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
new file mode 100644
index 000000000..448786bb4
--- /dev/null
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -0,0 +1,67 @@
+import { colors } from '@0xproject/react-shared';
+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';