Merge pull request #1027 from 0xProject/dev-dropdown

New Topbar Developers Dropdown

3 files changed, 197 insertions, 123 deletions

diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
new file mode 100644
index 000000000..d66e75722
--- /dev/null
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,188 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Container } from 'ts/components/ui/container';
+import { DropDown } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface LinkInfo {
+    link: string;
+    shouldOpenNewTab: boolean;
+}
+
+const gettingStartedKeyToLinkInfo1: ObjectMap<LinkInfo> = {
+    [Key.BuildARelayer]: {
+        link: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+        shouldOpenNewTab: false,
+    },
+    [Key.IntroTutorial]: {
+        link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+        shouldOpenNewTab: false,
+    },
+};
+const gettingStartedKeyToLinkInfo2: ObjectMap<LinkInfo> = {
+    [Key.TradingTutorial]: {
+        link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+        shouldOpenNewTab: false,
+    },
+    [Key.EthereumDevelopment]: {
+        link: `${WebsitePaths.Wiki}#Ethereum-Development`,
+        shouldOpenNewTab: false,
+    },
+};
+const popularDocsToLinkInfos: ObjectMap<LinkInfo> = {
+    [Key.ZeroExJs]: {
+        link: WebsitePaths.ZeroExJs,
+        shouldOpenNewTab: false,
+    },
+    [Key.Connect]: {
+        link: WebsitePaths.Connect,
+        shouldOpenNewTab: false,
+    },
+    [Key.SmartContract]: {
+        link: WebsitePaths.SmartContracts,
+        shouldOpenNewTab: false,
+    },
+};
+const usefulLinksToLinkInfo: ObjectMap<LinkInfo> = {
+    [Key.Github]: {
+        link: constants.URL_GITHUB_ORG,
+        shouldOpenNewTab: true,
+    },
+    [Key.Whitepaper]: {
+        link: WebsitePaths.Whitepaper,
+        shouldOpenNewTab: true,
+    },
+    [Key.Sandbox]: {
+        link: constants.URL_SANDBOX,
+        shouldOpenNewTab: true,
+    },
+};
+
+interface DevelopersDropDownProps {
+    translate: Translate;
+    menuItemStyles: React.CSSProperties;
+    menuIconStyle: React.CSSProperties;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+    public render(): React.ReactNode {
+        const activeNode = (
+            <Container className="flex relative" paddingRight="10">
+                <Text fontColor={this.props.menuIconStyle.color}>
+                    {this.props.translate.get(Key.Developers, Deco.Cap)}
+                </Text>
+            </Container>
+        );
+        return (
+            <DropDown
+                activeNode={activeNode}
+                popoverContent={this._renderDropdownMenu()}
+                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+                style={this.props.menuItemStyles}
+                popoverStyle={{ borderRadius: 4, width: 427, height: 373, marginTop: 10 }}
+            />
+        );
+    }
+    private _renderDropdownMenu(): React.ReactNode {
+        const dropdownMenu = (
+            <div>
+                <Container padding="1.75rem">
+                    {this._renderTitle('Getting started')}
+                    <div className="flex">
+                        <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div>
+                        <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div>
+                    </div>
+                </Container>
+                <div
+                    style={{
+                        width: '100%',
+                        height: 1,
+                        backgroundColor: colors.grey300,
+                    }}
+                />
+                <div className="flex" style={{ padding: '1.75rem' }}>
+                    <div className="pr4 mr2">
+                        <div>{this._renderTitle('Popular docs')}</div>
+                        <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div>
+                    </div>
+                    <div>
+                        <div>{this._renderTitle('Useful links')}</div>
+                        <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div>
+                    </div>
+                </div>
+                <div
+                    style={{
+                        padding: '0.8rem',
+                        textAlign: 'center',
+                        backgroundColor: colors.lightBgGrey,
+                        borderBottomLeftRadius: 4,
+                        borderBottomRightRadius: 4,
+                    }}
+                >
+                    <Link
+                        to={WebsitePaths.ZeroExJs}
+                        className="text-decoration-none"
+                        style={{
+                            color: colors.lightBlueA700,
+                            fontWeight: 'bold',
+                            fontSize: 14,
+                        }}
+                    >
+                        {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
+                    </Link>
+                </div>
+            </div>
+        );
+        return dropdownMenu;
+    }
+    private _renderTitle(title: string): React.ReactNode {
+        return (
+            <div
+                style={{
+                    color: colors.linkSectionGrey,
+                    fontSize: 14,
+                    paddingBottom: 12,
+                    fontWeight: 600,
+                    letterSpacing: 1,
+                }}
+            >
+                {title.toUpperCase()}
+            </div>
+        );
+    }
+    private _renderLinkSection(keyToLinkInfo: ObjectMap<LinkInfo>): React.ReactNode {
+        const linkStyle: React.CSSProperties = {
+            color: colors.lightBlueA700,
+            fontFamily: 'Roboto, Roboto Mono',
+        };
+        const numLinks = _.size(keyToLinkInfo);
+        let i = 0;
+        const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => {
+            i++;
+            const isLast = i === numLinks;
+            const linkText = this.props.translate.get(key as Key, Deco.CapWords);
+            return (
+                <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}>
+                    {linkInfo.shouldOpenNewTab ? (
+                        <a target="_blank" className="text-decoration-none" style={linkStyle} href={linkInfo.link}>
+                            {linkText}
+                        </a>
+                    ) : (
+                        <Link to={linkInfo.link} className="text-decoration-none" style={linkStyle}>
+                            {linkText}
+                        </Link>
+                    )}
+                </div>
+            );
+        });
+        return <div>{links}</div>;
+    }
+}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 9ef8211a9..8f1137b44 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -8,18 +8,17 @@ import {
 } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
-import Menu from 'material-ui/Menu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
+import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
 import { DrawerMenu } from 'ts/components/portal/drawer_menu';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
-import { DropDown } from 'ts/components/ui/drop_down';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -129,111 +128,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             ? 'flex mx-auto items-center max-width-4'
             : 'flex mx-auto items-center';
         const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
-        const developerSectionMenuItems = [
-            <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
-            </Link>,
-            <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)}
-                />
-            </Link>,
-            <a
-                key="subMenuItem-standard-relayer-api"
-                target="_blank"
-                className="text-decoration-none"
-                href={constants.URL_STANDARD_RELAYER_API_GITHUB}
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)}
-                />
-            </a>,
-            <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
-                />
-            </Link>,
-            <Link
-                key="subMenuItem-contractWrappers"
-                to={WebsitePaths.ContractWrappers}
-                className="text-decoration-none"
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)}
-                />
-            </Link>,
-            <a
-                key="subMenuItem-whitePaper"
-                target="_blank"
-                className="text-decoration-none"
-                href={`${WebsitePaths.Whitepaper}`}
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
-                />
-            </a>,
-            <a
-                key="subMenuItem-github"
-                target="_blank"
-                className="text-decoration-none"
-                href={constants.URL_GITHUB_ORG}
-            >
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
-            </a>,
-        ];
         const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
         const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
         const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
@@ -245,15 +139,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             color: isNightVersion ? 'white' : 'black',
             cursor: 'pointer',
         };
-        const activeNode = (
-            <div className="flex relative" style={{ color: menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
-                <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
-                    <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
-                </div>
-            </div>
-        );
-        const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
         return (
             <div
                 style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }}
@@ -273,12 +158,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     {!this._isViewingPortal() && (
                         <div className={menuClasses}>
                             <div className="flex items-center justify-between">
-                                <DropDown
-                                    activeNode={activeNode}
-                                    popoverContent={popoverContent}
-                                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
-                                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
-                                    style={styles.menuItem}
+                                <DevelopersDropDown
+                                    menuItemStyles={styles.menuItem}
+                                    translate={this.props.translate}
+                                    menuIconStyle={menuIconStyle}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Wiki, Deco.Cap)}
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 4d5caef08..1daaeb1c3 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -21,6 +21,7 @@ export interface DropDownProps {
     zDepth?: number;
     activateEvent?: DropdownMouseEvent;
     closeEvent?: DropdownMouseEvent;
+    popoverStyle?: React.CSSProperties;
 }
 
 interface DropDownState {
@@ -34,6 +35,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         zDepth: 1,
         activateEvent: DropdownMouseEvent.Hover,
         closeEvent: DropdownMouseEvent.Hover,
+        popoverStyle: {},
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -77,6 +79,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
                     animated={false}
                     zDepth={this.props.zDepth}
+                    style={this.props.popoverStyle}
                 >
                     <div
                         onMouseEnter={this._onHover.bind(this)}