From 86acca5e1c37bf24bef393700fbf0909b58b9df3 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 11 Dec 2018 12:11:22 +0100 Subject: WIP dropdown menus --- packages/website/ts/@next/components/button.tsx | 10 +- .../components/dropdowns/dropdown_developers.tsx | 141 +++++++++++++++++---- .../components/dropdowns/dropdown_products.tsx | 24 ++-- packages/website/ts/@next/components/header.tsx | 14 +- packages/website/ts/@next/components/layout.tsx | 1 - packages/website/ts/@next/components/text.tsx | 6 +- packages/website/ts/@next/pages/why.tsx | 2 +- 7 files changed, 153 insertions(+), 45 deletions(-) (limited to 'packages') 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` 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 ( - + {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 = () => ( <> - - - Getting Started - - - - Build a relayer - Develop on Ethereum - Make & take orders - Use networked liquidity - - - - - asdf - + +
+ + Getting Started + + + + {_.map(introData, (item, index) => ( + + {item.label} + + ))} + +
+ + + + + Popular Docs + + +
    + {_.map(docsData, (item, index) => ( +
  • + + {item.label} + +
    • + ))} +
+ + + + + Useful Links + + +
    + {_.map(linksData, (item, index) => ( +
  • + + {item.label} + +
    • + ))} +
+ + + + + View All Documentation + + ); -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 = () => ( {_.map(navData, (item, index) => (
  • - - {item.title} - + + + {item.title} + - {item.description && - - {item.description} - - } + {item.description && + + {item.description} + + } +
    • ))}     ); 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` 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 = 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 {
    - + Benefits Use Cases Features -- cgit