diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-12-18 07:24:30 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-18 07:24:30 +0800 |
commit | 8925317c95927111b48d29d15e44de19db432052 (patch) | |
tree | 530bb9824a29b346e645277d82d5edb294112068 /packages/website/ts/@next/components | |
parent | 4626921bb6deb3ec9a9768ba9afb01dd690292ec (diff) | |
parent | 6e0d622a1559937d8867216d571156564c666c77 (diff) | |
download | dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar.gz dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar.bz2 dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar.lz dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar.xz dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.tar.zst dexon-sol-tools-8925317c95927111b48d29d15e44de19db432052.zip |
Merge pull request #1444 from 0xProject/feature/website/0x-org-instant-config
[website] 0x.org Instant
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 47 | ||||
-rw-r--r-- | packages/website/ts/@next/components/definition.tsx | 37 | ||||
-rw-r--r-- | packages/website/ts/@next/components/link.tsx | 21 |
3 files changed, 59 insertions, 46 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index ab804b758..b686b27a2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -19,52 +19,55 @@ interface ButtonInterface { isInline?: boolean; href?: string; type?: string; + target?: string; to?: string; onClick?: () => any; theme?: ThemeInterface; + useAnchorTag?: boolean; } export const Button = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - to, - } = props; + const { children, href, isWithArrow, to, useAnchorTag, target } = props; let linkElem; - if (href) { linkElem = 'a'; } - if (to) { linkElem = ReactRouterLink; } + if (href || useAnchorTag) { + linkElem = 'a'; + } + if (to) { + linkElem = ReactRouterLink; + } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + const targetProp = href && target ? { target } : {}; return ( - <Component {...props}> + <Component {...props} {...targetProp}> {children} - { isWithArrow && + {isWithArrow && ( <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" - /> + <path d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" /> </svg> - } + )} </Component> ); }; -const ButtonBase = styled.button<ButtonInterface>` +const ButtonBase = + styled.button < + ButtonInterface > + ` appearance: none; border: 1px solid transparent; display: inline-block; 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'}; + 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'}; white-space: ${props => props.isWithArrow && 'nowrap'}; text-align: center; - font-size: ${props => props.isWithArrow ? '20px' : '18px'}; + font-size: ${props => (props.isWithArrow ? '20px' : '18px')}; text-decoration: none; cursor: pointer; outline: none; @@ -77,12 +80,12 @@ const ButtonBase = styled.button<ButtonInterface>` } path { - fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; + fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; } &:hover { - background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'}; - border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; + background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'}; + border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'}; svg { transform: translate3d(2px, -2px, 0); diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 77f837294..d203151b9 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -7,7 +7,9 @@ import { Heading, Paragraph } from 'ts/@next/components/text'; interface Action { label: string; - url: string; + url?: string; + onClick?: () => void; + useAnchorTag?: boolean; } interface Props { @@ -25,11 +27,7 @@ interface Props { export const Definition = (props: Props) => ( <Wrap {...props}> - <Icon - name={props.icon} - size={props.iconSize || 'medium'} - margin={[0, 0, 'default', 0]} - /> + <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} /> <TextWrap {...props}> <Heading @@ -42,34 +40,36 @@ export const Definition = (props: Props) => ( </Heading> {typeof props.description === 'string' ? ( - <Paragraph isMuted={true}> - {props.description} - </Paragraph> + <Paragraph isMuted={true}>{props.description}</Paragraph> ) : ( - <> - {props.description} - </> + <>{props.description}</> )} - {props.actions && + {props.actions && ( <LinkWrap> {props.actions.map((item, index) => ( <Button key={`dlink-${index}`} href={item.url} + onClick={item.onClick} isWithArrow={true} isAccentColor={true} + useAnchorTag={item.useAnchorTag} + target="_blank" > {item.label} </Button> ))} </LinkWrap> - } + )} </TextWrap> </Wrap> ); -const Wrap = styled.div<Props>` +const Wrap = + styled.div < + Props > + ` max-width: ${props => props.isInline && '354px'}; & + & { @@ -78,7 +78,7 @@ const Wrap = styled.div<Props>` } @media (min-width: 768px) { - width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'}; + width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')}; display: ${props => props.isInlineIcon && 'flex'}; justify-content: ${props => props.isInlineIcon && 'space-between'}; align-items: ${props => props.isInlineIcon && 'center'}; @@ -94,7 +94,10 @@ const Wrap = styled.div<Props>` } `; -const TextWrap = styled.div<Props>` +const TextWrap = + styled.div < + Props > + ` width: 100%; max-width: 560px; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c3633987a..0976a57a8 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -13,19 +13,23 @@ interface LinkInterface { theme?: { textColor: string; }; + target?: string; } export const Link = (props: LinkInterface) => { - const { - children, - isNoArrow, - href, - } = props; + const { children, isNoArrow, href, target } = props; return ( <StyledLink to={href} {...props}> {children} - {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>} + {!isNoArrow && ( + <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" + fill="currentColor" + /> + </svg> + )} </StyledLink> ); }; @@ -39,7 +43,10 @@ export const LinkWrap = styled.div` } `; -const StyledLink = styled(ReactRouterLink)<LinkInterface>` +const StyledLink = + styled(ReactRouterLink) < + LinkInterface > + ` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; |