From 81690d1ce508fc40ab90aff3539359efe7a93dba Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 16:39:03 +0100 Subject: Removes component, clean up Button.tsx --- .../ts/@next/components/aboutPageLayout.tsx | 11 +- packages/website/ts/@next/components/banner.tsx | 16 ++- .../website/ts/@next/components/blockIconLink.tsx | 37 ++---- packages/website/ts/@next/components/button.tsx | 115 ++++++------------ .../website/ts/@next/components/definition.tsx | 8 +- .../components/dropdowns/dropdown_developers.tsx | 4 +- packages/website/ts/@next/components/header.tsx | 135 ++++++++------------- .../ts/@next/components/sections/landing/cta.tsx | 4 +- .../ts/@next/components/sections/landing/hero.tsx | 2 +- packages/website/ts/@next/pages/about/press.tsx | 4 +- packages/website/ts/@next/pages/why.tsx | 7 +- 11 files changed, 127 insertions(+), 216 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 2d871ac71..a5e8df7e8 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { ChapterLink } from 'ts/@next/components/chapter_link'; import { Column, Section } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; @@ -37,9 +37,12 @@ export const AboutPageLayout = (props: Props) => ( {(props.linkLabel && props.linkUrl) && - + {props.linkLabel} - + } @@ -57,6 +60,6 @@ const AnimatedParagraph = styled(Paragraph)` ${addFadeInAnimation('0.5s', '0.15s')} `; -const AnimatedLink = styled(Link)` +const AnimatedLink = styled(Button)` ${addFadeInAnimation('0.6s', '0.3s')} `; diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 6b7603a10..a3740c25a 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import {colors} from 'ts/style/colors'; -import {Button, Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Wrap, WrapCentered} from 'ts/@next/components/layout'; import {ThemeInterface} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; @@ -56,11 +56,21 @@ export const Banner: React.StatelessComponent = (props: Props) => { {mainCta && - {mainCta.text} + } {secondaryCta && - + } diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 42b260731..7033ec88d 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import styled from 'styled-components'; -import {Button, Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Icon} from 'ts/@next/components/icon'; interface Props { icon: string; title: string; linkLabel: string; - linkUrl?: string; - onClick?: () => void; + linkUrl: string; + linkAction: () => void; } export const BlockIconLink = (props: Props) => ( @@ -25,29 +25,14 @@ export const BlockIconLink = (props: Props) => ( {props.title} - {props.linkUrl && - - {props.linkLabel} - - } - - {props.onClick && - - } + ); diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 377d1d820..cbe90c7c2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom'; import styled from 'styled-components'; -import { BREAKPOINTS } from 'ts/@next/components/layout'; import { colors } from 'ts/style/colors'; interface ButtonInterface { @@ -11,7 +10,6 @@ interface ButtonInterface { children?: Node | string; isTransparent?: boolean; isNoBorder?: boolean; - isCentered?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; isAccentColor?: boolean; @@ -25,11 +23,41 @@ interface ButtonInterface { }; } -export const Button = styled.button` +export const Button = (props: ButtonInterface) => { + const { + children, + href, + isWithArrow, + to, + } = props; + let linkElem; + + if (props.href) { linkElem = 'a'; } + if (props.to) { linkElem = ReactRouterLink; } + + const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + + return ( + + {props.children} + + { isWithArrow && + + + + } + + ); +}; + +const ButtonBase = styled.button` appearance: none; - border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`}; + border: 1px solid transparent; display: inline-block; - background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}; + background-color: ${props => props.bgColor || colors.brandLight}; + background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'} border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; @@ -38,6 +66,7 @@ export const Button = styled.button` line-height: normal; text-decoration: none; cursor: pointer; + outline: none; transition: background-color 0.35s, border-color 0.35s; svg { @@ -51,7 +80,7 @@ export const Button = styled.button` } &:hover { - background-color: ${props => !props.isTransparent && '#04BEA8'}; + background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; svg { @@ -59,77 +88,3 @@ export const Button = styled.button` } } `; - -export const Link: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterLink); - - return ( - - {children} - - { isWithArrow && - - - - } - - ); -}; - -Link.defaultProps = { - isTransparent: true, -}; - -export const NavLink: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterNavLink); - - return ( - - {children} - - { isWithArrow && - - - - } - - ); -}; - -NavLink.defaultProps = { - isTransparent: true, -}; - -// Added this, & + & doesnt really work since we switch with element types... -export const ButtonWrap = styled.div` - button + button, - a + a, - a + button, - button + a { - @media (min-width: ${BREAKPOINTS.mobile}) { - margin-left: 10px; - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - margin: 0 10px; - } - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - white-space: nowrap; - } -`; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index cab153361..e19f041c7 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import {Link} from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { Paragraph } from 'ts/@next/components/text'; @@ -42,15 +42,13 @@ export const Definition = (props: Props) => ( {props.actions && {props.actions.map((item, index) => ( - {item.label} - + ))} } diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index 933ee7034..8a4db2656 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {Link as RouterLink} from 'react-router-dom'; import styled, {withTheme} from 'styled-components'; -import {Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout'; import {Heading} from 'ts/@next/components/text'; import {GlobalStyle} from 'ts/@next/constants/globalStyle'; @@ -172,7 +172,7 @@ const StyledWrap = styled(Wrap)` } `; -const StyledLink = styled(Link)` +const StyledLink = styled(Button)` width: 100%; position: absolute; bottom: 0; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 72082ce9f..35d53d21f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, Link, NavLink } from 'ts/@next/components/button'; +import { Button } 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'; @@ -85,29 +85,6 @@ class HeaderBase extends React.Component { }); } - public getNavItem = (link: NavItem, index: number): React.ReactNode => { - const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; - const Subnav = link.dropdownComponent; - - return ( - - - {link.text} - - - {link.dropdownComponent && - - - - } - - ); - } - public render(): React.ReactNode { const { isOpen } = this.state; const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -121,7 +98,7 @@ class HeaderBase extends React.Component { {_.map(navItems, (link, index) => ( - this.getNavItem(link, index) + ))} @@ -143,6 +120,30 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); +const NavItem = (props): React.ReactNode => { + const { link, index } = props; + const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; + const Subnav = link.dropdownComponent; + + return ( + + + {link.text} + + + {link.dropdownComponent && + + + + } + + ); +}; + const StyledHeader = styled(Section.withComponent('header'))` @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; @@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))` } `; -const StyledNavLink = styled(NavLink).attrs({ +const LinkWrap = styled.div` + position: relative; + + a { + display: block; + } + + @media (min-width: 800px) { + &:hover > div { + display: block; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0); + transition: opacity 0.35s, transform 0.35s, visibility 0s; + } + } +`; + +const StyledNavLink = styled(ReactRouterLink).attrs({ activeStyle: { opacity: 1 }, })` + color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; + padding: 15px 0; + margin: 0 30px; &:hover { opacity: 1; @@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div` @media (max-width: 800px) { display: none; } - -/* - @media (max-width: 800px) { - background-color: #022924; - display: flex; - flex-wrap: wrap; - padding: 20px 20px; - - a { - text-align: left; - padding-left: 0; - } - - a + a { - margin-left: 0; - } - } */ -`; - -const MobileProductLinksWrap = styled(StyledButtonWrap)` - display: none; - - @media (max-width: 800px) { - display: block; - background-color: transparent; - flex-direction: column; - - a { - display: block; - width: 100%; - } - } -`; - -const LinkWrap = styled.div` - position: relative; - - a { - display: block; - } - - @media (min-width: 800px) { - &:hover > div { - display: block; - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0); - transition: opacity 0.35s, transform 0.35s, visibility 0s; - } - } `; const DropdownWrap = styled.div` @@ -282,17 +254,6 @@ const DropdownWrap = styled.div` } `; -const Nav = styled.div` - @media (max-width: 800px) { - background-color: ${props => props.theme.bgColor}; - position: absolute; - top: 0; - left: 0; - right: 0; - padding-top: 65px; - } -`; - const TradeButton = styled(Button)` padding: 14px 22px; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index 3aac7f5d8..5a0617256 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -24,13 +24,13 @@ export const SectionLandingCta = (props: Props) => ( icon="getStarted" title="Ready to build on 0x?" linkLabel="Get Started" - linkUrl="#" + linkUrl="https://0xproject.com/docs" /> ); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 513fa9867..8c9d4376f 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -21,7 +21,7 @@ const HeroActions = () => ( Get Started - diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index 259618d13..92c076266 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; import { Separator } from 'ts/@next/components/separator'; import { Heading, Paragraph } from 'ts/@next/components/text'; @@ -61,7 +61,7 @@ const Highlight = ({ highlight }) => ( {highlight.text} - Read Article + ); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 75269d7ef..bb9b058e2 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -8,7 +8,7 @@ import { colors } from 'ts/style/colors'; import {Hero} from 'ts/@next/components/hero'; import { Banner } from 'ts/@next/components/banner'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; @@ -84,14 +84,13 @@ export class NextWhy extends React.PureComponent { title="The exchange layer for the crypto economy" description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens." actions={ - Build on 0x - + } /> -- cgit v1.2.3