WIP dropdown menus

2018-12-11 12:11:22 +01:00
parent cb2b45bf04
commit 86acca5e1c
7 changed files with 151 additions and 43 deletions
--- 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,
--- 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>
+        <DropdownWrap>
+            <div>
+                <Heading size={14} 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>
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(introData, (item, index) => (
+                        <RouterLink to={item.url}>
+                            {item.label}
+                        </RouterLink>
+                    ))}
+                </WrapGrid>
+            </div>

-        <Wrap>
-            asdf
-        </Wrap>
+            <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;
 `;
--- 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;
    }
 `;
--- 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;
        }
    }
 `;
--- 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'};
    }
 `;
--- 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 => {
--- 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>