Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/beta-render-et-al

6 files changed, 126 insertions, 41 deletions

diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index b279566e0..6e85c1499 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -89,26 +89,22 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
         );
     }
     private _renderDropdownMenu(): React.ReactNode {
+        const sectionPadding = '28px';
         const dropdownMenu = (
             <Container>
-                <Container padding="1.75rem">
-                    {this._renderTitle('Getting started')}
-                    <Container className="flex">
-                        <Container className="pr4 mr2">
-                            {this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
-                        </Container>
-                        <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
+                <Container className="flex" padding={sectionPadding}>
+                    <Container paddingRight="45px">
+                        {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')}
                     </Container>
+                    <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
                 </Container>
                 <Container width="100%" height="1px" backgroundColor={colors.grey300} />
-                <Container className="flex" padding="1.75rem">
-                    <Container className="pr4 mr2">
-                        <Container>{this._renderTitle('Popular docs')}</Container>
-                        <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container>
+                <Container className="flex" padding={sectionPadding}>
+                    <Container paddingRight="62px">
+                        <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container>
                     </Container>
                     <Container>
-                        <Container>{this._renderTitle('Useful links')}</Container>
-                        <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container>
+                        <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container>
                     </Container>
                 </Container>
                 <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
@@ -127,16 +123,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
         );
         return dropdownMenu;
     }
-    private _renderTitle(title: string): React.ReactNode {
-        return (
-            <Container paddingBottom="12px">
-                <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
-                    {title.toUpperCase()}
-                </Text>
-            </Container>
-        );
-    }
-    private _renderLinkSection(links: ALink[]): React.ReactNode {
+    private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode {
         const numLinks = links.length;
         let i = 0;
         const renderLinks = _.map(links, (link: ALink) => {
@@ -159,6 +146,17 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
                 </Container>
             );
         });
-        return <Container>{renderLinks}</Container>;
+        return (
+            <Container>
+                <Container height="33px">
+                    {!_.isEmpty(title) && (
+                        <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
+                            {title.toUpperCase()}
+                        </Text>
+                    )}
+                </Container>
+                {renderLinks}
+            </Container>
+        );
     }
 }
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
new file mode 100644
index 000000000..db7d55261
--- /dev/null
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -0,0 +1,92 @@
+import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Text } from 'ts/components/ui/text';
+
+export interface NestedSidebarMenuProps {
+    sectionNameToLinks: ObjectMap<ALink[]>;
+    sidebarHeader?: React.ReactNode;
+    shouldReformatMenuItemNames?: boolean;
+}
+
+export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
+    const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
+        const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName);
+        const menuItems = _.map(links, (link, i) => {
+            const menuItemTitle = props.shouldReformatMenuItemNames
+                ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title))
+                : link.title;
+            const finalLink = {
+                ...link,
+                title: menuItemTitle,
+            };
+            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+        });
+        // tslint:disable-next-line:no-unused-variable
+        return (
+            <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+                <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1">
+                    {finalSectionName.toUpperCase()}
+                </Text>
+                {menuItems}
+            </div>
+        );
+    });
+    return (
+        <div>
+            {props.sidebarHeader}
+            <div>{navigation}</div>
+        </div>
+    );
+};
+
+export interface MenuItemProps {
+    link: ALink;
+}
+
+export interface MenuItemState {
+    isActive: boolean;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
+    constructor(props: MenuItemProps) {
+        super(props);
+        const isActive = window.location.hash.slice(1) === props.link.to;
+        this.state = {
+            isActive,
+        };
+    }
+    public render(): React.ReactNode {
+        const isActive = this.state.isActive;
+        return (
+            <Link
+                to={this.props.link.to}
+                shouldOpenInNewTab={this.props.link.shouldOpenInNewTab}
+                onActivityChanged={this._onActivityChanged.bind(this)}
+            >
+                <Button
+                    borderRadius="4px"
+                    padding="0.4em 0.375em"
+                    width="100%"
+                    backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
+                    fontSize="14px"
+                    textAlign="left"
+                >
+                    <Text
+                        fontWeight={isActive ? 'bold' : 'normal'}
+                        fontColor={isActive ? colors.white : colors.grey800}
+                    >
+                        {this.props.link.title}
+                    </Text>
+                </Button>
+            </Link>
+        );
+    }
+    private _onActivityChanged(isActive: boolean): void {
+        this.setState({
+            isActive,
+        });
+    }
+}
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 30b79552f..361dbc86e 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -6,6 +6,7 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
 import { Container } from 'ts/components/ui/container';
 import { Dispatcher } from 'ts/redux/dispatcher';
+import { media } from 'ts/style/media';
 import { styled } from 'ts/style/theme';
 import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
@@ -72,7 +73,6 @@ const SidebarContainer =
     `
     ${scrollableContainerStyles}
     padding-top: 27px;
-    padding-bottom: 100px;
     padding-left: ${SIDEBAR_PADDING}px;
     padding-right: ${SIDEBAR_PADDING}px;
     overflow: hidden;
@@ -99,14 +99,14 @@ const MainContentContainer =
         padding-right: ${50 - SCROLLBAR_WIDTH}px;
         overflow: auto;
     }
-    @media (max-width: 40em) {
+    ${media.small`
         padding-left: 20px;
         padding-right: 20px;
         &:hover {
             padding-right: ${20 - SCROLLBAR_WIDTH}px;
             overflow: auto;
         }
-    }
+    `}
 `;
 
 export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> {
@@ -163,7 +163,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             </Container>
                         </Container>
                         <SidebarContainer onWheel={this._throttledSidebarScrolling}>
-                            {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
+                            <Container paddingBottom="100px">
+                                {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
+                            </Container>
                         </SidebarContainer>
                     </Container>
                     <Container
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 7157abfc9..28bf2dba1 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -6,13 +6,13 @@ import {
     SupportedDocJson,
     TypeDocUtils,
 } from '@0x/react-docs';
-import { NestedSidebarMenu } from '@0x/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import semverSort = require('semver-sort');
 import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Container } from 'ts/components/ui/container';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index cf229cb3b..bbbee2d2d 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -1,8 +1,9 @@
-import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared';
+import { ALink, colors, Link } from '@0x/react-shared';
 import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { OverviewContent } from 'ts/components/documentation/overview_content';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Button } from 'ts/components/ui/button';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
@@ -368,7 +369,7 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
                 >
                     <Button
                         borderRadius="4px"
-                        padding="0.4em 6px"
+                        padding="0.4em 0.375em"
                         width="100%"
                         fontColor={colors.grey800}
                         fontSize="14px"
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index e62300ddf..c1802b1f8 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -5,7 +5,6 @@ import {
     HeaderSizes,
     Link,
     MarkdownSection,
-    NestedSidebarMenu,
     utils as sharedUtils,
 } from '@0x/react-shared';
 import { ObjectMap } from '@0x/types';
@@ -13,6 +12,7 @@ import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import { SidebarHeader } from 'ts/components/documentation/sidebar_header';
+import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { DevelopersPage } from 'ts/pages/documentation/developers_page';
@@ -49,9 +49,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             isHoveringSidebar: false,
         };
     }
-    public componentDidMount(): void {
-        window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
-    }
     public componentWillMount(): void {
         // tslint:disable-next-line:no-floating-promises
         this._fetchArticlesBySectionAsync();
@@ -59,7 +56,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
     public componentWillUnmount(): void {
         this._isUnmounted = true;
         clearTimeout(this._wikiBackoffTimeoutId);
-        window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
     }
     public render(): React.ReactNode {
         const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
@@ -103,7 +99,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 >
                     <Button
                         borderRadius="4px"
-                        padding="0.4em 6px"
+                        padding="0.4em 0.375em"
                         width="100%"
                         fontColor={colors.grey800}
                         fontSize="14px"
@@ -198,8 +194,4 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         }
         return sectionNameToLinks;
     }
-    private _onHashChanged(_event: any): void {
-        const hash = window.location.hash.slice(1);
-        sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
-    }
 }