WIP dropdown menus

7 files changed, 153 insertions, 45 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index cd14c80ba..06a9f8c7a 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -6,6 +6,7 @@ import { BREAKPOINTS } from 'ts/@next/components/layout';
 import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
+    bgColor?: string;
     color?: string;
     children?: Node | string;
     isTransparent?: boolean;
@@ -26,13 +27,14 @@ export const Button = styled.button<ButtonInterface>`
     appearance: none;
     border: 1px solid transparent;
     display: ${props => props.isInline && 'inline-block'};
-    background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
+    background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
     border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
     text-align: center;
     font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
+    cursor: pointer;
 
     svg {
         margin-left: 12px;
@@ -52,7 +54,7 @@ export const Link = (props: ButtonInterface) => {
     const Component = Button.withComponent(ReactRouterLink);
 
     return (
-        <Component to={href} isTransparent={true} {...props}>
+        <Component to={href} {...props}>
             {children}
 
             { isWithArrow &&
@@ -66,6 +68,10 @@ export const Link = (props: ButtonInterface) => {
     );
 };
 
+Link.defaultProps = {
+    isTransparent: true,
+};
+
 // Added this, & + & doesnt really work since we switch with element types...
 export const ButtonWrap = styled.div`
     button + button,
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index a9cfed538..d87540511 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,37 +1,132 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {Link} from 'react-router-dom';
-import {WrapGrid} from 'ts/@next/components/layout';
+import {Link as RouterLink} from 'react-router-dom';
+import {Link} from 'ts/@next/components/button';
+import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
 import {Heading} from 'ts/@next/components/text';
 
+const introData = [
+    {
+        label: 'Build a relayer',
+        url: '#',
+    },
+    {
+        label: 'Develop on Ethereum',
+        url: '#',
+    },
+    {
+        label: 'Make & take orders',
+        url: '#',
+    },
+    {
+        label: 'Use networked liquidity',
+        url: '#',
+    },
+];
+
+const docsData = [
+    {
+        label: '0x.js',
+        url: '#',
+    },
+    {
+        label: '0x Connect',
+        url: '#',
+    },
+    {
+        label: 'Smart Contract',
+        url: '#',
+    },
+];
+
+const linksData = [
+    {
+        label: 'Wiki',
+        url: '#',
+    },
+    {
+        label: 'Github',
+        url: '#',
+    },
+    {
+        label: 'Whitepaper',
+        url: '#',
+    },
+];
+
 export const DropdownDevelopers = () => (
     <>
-        <Wrap>
-            <Heading size="small" color="#5d5d5d">
-                Getting Started
-            </Heading>
-
-            <WrapGrid isCentered={false} isWrapped={true}>
-                <Link to="#">Build a relayer</Link>
-                <Link to="#">Develop on Ethereum</Link>
-                <Link to="#">Make & take orders</Link>
-                <Link to="#">Use networked liquidity</Link>
-            </WrapGrid>
-        </Wrap>
-
-        <Wrap>
-            asdf
-        </Wrap>
+        <DropdownWrap>
+            <div>
+                <Heading size={14} color="#5d5d5d">
+                    Getting Started
+                </Heading>
+
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(introData, (item, index) => (
+                        <RouterLink to={item.url}>
+                            {item.label}
+                        </RouterLink>
+                    ))}
+                </WrapGrid>
+            </div>
+
+            <StyledWrap>
+                <Column colWidth="1/2" isNoPadding={true}>
+                    <Heading size={14} color="#5d5d5d">
+                        Popular Docs
+                    </Heading>
+
+                    <ul>
+                        {_.map(docsData, (item, index) => (
+                            <li>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+
+                <Column colWidth="1/2" isNoPadding={true}>
+                    <Heading size={14} color="#5d5d5d">
+                        Useful Links
+                    </Heading>
+
+                    <ul>
+                        {_.map(linksData, (item, index) => (
+                            <li>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+            </StyledWrap>
+
+            <StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
+                View All Documentation
+            </StyledLink>
+        </DropdownWrap>
     </>
 );
 
-const Wrap = styled.div`
-    padding: 15px 30px;
+const DropdownWrap = styled.div`
+    padding: 15px 30px 75px 15px;
+`;
+
+const StyledWrap = styled(Wrap)`
+    border-top: 1px solid #dadada;
+    padding-top: 20px;
+    margin-top: 30px;
 `;
 
 const StyledLink = styled(Link)`
-    width: calc(50% - 15px);
-    flex-shrink: 0;
-    color: #000000;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 `;
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 83d554f03..0271daf84 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
@@ -7,7 +8,7 @@ const navData = [
         {
             title: '0x Instant',
             description: 'Simple crypto purchasing',
-            url: '#',
+            url: '/next/0x-instant',
         },
         {
             title: '0x Launch kit',
@@ -24,22 +25,25 @@ export const DropdownProducts = () => (
     <List>
         {_.map(navData, (item, index) => (
             <li>
-                <Heading color="#000000" isNoMargin={true} size="small">
-                    {item.title}
-                </Heading>
+                <Link to={item.url}>
+                    <Heading color="#000000" isNoMargin={true} size="small">
+                        {item.title}
+                    </Heading>
 
-                {item.description &&
-                    <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
-                        {item.description}
-                    </Paragraph>
-                }
+                    {item.description &&
+                        <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+                            {item.description}
+                        </Paragraph>
+                    }
+                </Link>
             </li>
         ))}
     </List>
 );
 
 const List = styled.ul`
-    li {
+    a {
         padding: 15px 30px;
+        display: block;
     }
 `;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 4b5f8d346..165cba562 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -6,8 +6,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
-import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { Button, Link } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -50,7 +49,7 @@ const navItems: NavItem[] = [
         url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
-        dropdownWidth: 420,
+        dropdownWidth: 450,
     },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
@@ -154,8 +153,10 @@ const HeaderWrap = styled(Wrap)`
   }
 `;
 
-const StyledButtonWrap = styled(ButtonWrap)`
+const StyledButtonWrap = styled.div`
     display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     @media (max-width: 768px) {
         background-color: #022924;
@@ -166,7 +167,10 @@ const StyledButtonWrap = styled(ButtonWrap)`
         a {
             text-align: left;
             padding-left: 0;
-            margin: 0 !important;
+        }
+
+        a + a {
+            margin-left: 0;
         }
     }
 `;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 0559d6e3d..42468a27f 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -110,7 +110,6 @@ export const Wrap = styled(WrapBase)`
     @media (min-width: ${BREAKPOINTS.mobile}) {
         display: flex;
         justify-content: space-between;
-        flex-wrap: wrap;
         flex-direction: ${props => props.isReversed && 'row-reverse'};
     }
 `;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 74bf58701..bf471db2e 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
 
 interface BaseTextInterface extends PaddingInterface {
-    size?: 'default' | 'medium' | 'large' | 'small';
+    size?: 'default' | 'medium' | 'large' | 'small' | number;
     isCentered?: boolean;
 }
 
@@ -23,14 +23,14 @@ interface ParagraphProps extends BaseTextInterface {
 
 const StyledHeading = styled.h1<HeadingProps>`
     color: ${props => props.color || props.theme.textColor};
-    font-size: ${props => `var(--${props.size || 'default'}Heading)`};
+    font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
     padding: ${props => props.padding && getCSSPadding(props.padding)};
     line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
     margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
     text-align: ${props => props.isCentered && 'center'};
-    font-weight: 400;
     margin-left: ${props => props.isCentered && 'auto'};
     margin-right: ${props => props.isCentered && 'auto'};
+    font-weight: 400;
 `;
 
 export const Heading: React.StatelessComponent<HeadingProps> = props => {
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 43e37a74b..e9a31e67d 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -123,7 +123,7 @@ export class NextWhy extends React.PureComponent {
               <Section>
                 <Wrap>
                   <Column colWidth="1/3">
-                      <NavStickyWrap>
+                      <NavStickyWrap offsetTop="130px">
                           <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
                           <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
                           <ChapterLink offset="60" href="#functionality">Features</ChapterLink>