diff options
Diffstat (limited to 'packages/website/ts/components/ui')
| -rw-r--r-- | packages/website/ts/components/ui/button.tsx | 17 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/icon_button.tsx | 9 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/image.tsx | 37 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/pointer.tsx | 67 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/text.tsx | 31 |
6 files changed, 152 insertions, 16 deletions
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 1f88297de..cb542a386 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,5 +1,5 @@ import { colors } from '@0xproject/react-shared'; -import { darken } from 'polished'; +import { darken, grayscale } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,32 +12,34 @@ export interface ButtonProps { borderColor?: string; width?: string; type?: string; + isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; } -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => ( - <button type={type} className={className} onClick={onClick}> +const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( + <button type={type} className={className} onClick={isDisabled ? undefined : onClick}> {children} </button> ); export const Button = styled(PlainButton)` - cursor: pointer; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; + transition: background-color 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => props.backgroundColor}; + background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => darken(0.1, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; } &:active { - background-color: ${props => darken(0.2, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } `; @@ -46,6 +48,7 @@ Button.defaultProps = { backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', + isDisabled: false, }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c6a78e181..1776345da 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -14,8 +14,15 @@ export interface ContainerProps { backgroundColor?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; + width?: StringOrNum; isHidden?: boolean; className?: string; + position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; + top?: string; + left?: string; + right?: string; + bottom?: string; } export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => { diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 2f5172f05..13cd239da 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -5,15 +5,15 @@ import * as React from 'react'; export interface IconButtonProps { iconName: string; labelText?: string; - onClick: () => void; + onClick?: () => void; color?: string; + display?: string; } interface IconButtonState { isHovering: boolean; } export class IconButton extends React.Component<IconButtonProps, IconButtonState> { public static defaultProps: Partial<IconButtonProps> = { - onClick: _.noop, labelText: '', color: colors.mediumBlue, }; @@ -26,8 +26,9 @@ export class IconButton extends React.Component<IconButtonProps, IconButtonState public render(): React.ReactNode { const styles: Styles = { root: { - cursor: 'pointer', - opacity: this.state.isHovering ? 0.5 : 1, + cursor: this.props.onClick ? 'pointer' : 'undefined', + opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1, + display: this.props.display, }, icon: { color: this.props.color, diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx new file mode 100644 index 000000000..0958d2e5e --- /dev/null +++ b/packages/website/ts/components/ui/image.tsx @@ -0,0 +1,37 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface ImageProps { + className?: string; + src?: string; + fallbackSrc?: string; + height?: string; +} +interface ImageState { + imageLoadFailed: boolean; +} +export class Image extends React.Component<ImageProps, ImageState> { + constructor(props: ImageProps) { + super(props); + this.state = { + imageLoadFailed: false, + }; + } + public render(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ( + <img + className={this.props.className} + onError={this._onError.bind(this)} + src={src} + height={this.props.height} + /> + ); + } + private _onError(): void { + this.setState({ + imageLoadFailed: true, + }); + } +} diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx new file mode 100644 index 000000000..448786bb4 --- /dev/null +++ b/packages/website/ts/components/ui/pointer.tsx @@ -0,0 +1,67 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; + +export interface PointerProps { + className?: string; + color?: string; + size?: number; + direction: PointerDirection; +} + +const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props} />; + +const positionToCss = (props: PointerProps) => { + const position = { + top: `bottom: 100%; left: 50%;`, + right: `left: 100%; top: 50%;`, + bottom: `top: 100%; left: 50%;`, + left: `right: 100%; top: 50%;`, + }[props.direction]; + + const borderColorSide = { + top: 'border-bottom-color', + right: 'border-left-color', + bottom: 'border-top-color', + left: 'border-right-color', + }[props.direction]; + const border = `${borderColorSide}: ${props.color};`; + const marginSide = { + top: 'margin-left', + right: 'margin-top', + bottom: 'margin-left', + left: 'margin-top', + }[props.direction]; + const margin = `${marginSide}: -${props.size}px`; + return { + position, + border, + margin, + }; +}; + +export const Pointer = styled(PlainPointer)` + position: relative; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: ${props => `${props.size}px`}; + ${props => positionToCss(props).position} + ${props => positionToCss(props).border} + ${props => positionToCss(props).margin} + } +`; + +Pointer.defaultProps = { + color: colors.white, + size: 16, +}; + +Pointer.displayName = 'Pointer'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 7e47f1d09..1e2a123b7 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,8 +1,9 @@ import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label'; +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4'; export interface TextProps { className?: string; @@ -14,10 +15,13 @@ export interface TextProps { minHeight?: string; center?: boolean; fontWeight?: number | string; + onClick?: () => void; } -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => ( - <Tag className={className}>{children}</Tag> +const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( + <Tag className={className} onClick={onClick}> + {children} + </Tag> ); export const Text = styled(PlainText)` @@ -28,14 +32,31 @@ export const Text = styled(PlainText)` ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; + ${props => (props.onClick ? 'cursor: pointer' : '')}; + transition: color 0.5s ease; + &:hover { + ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')}; + } `; Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, - fontColor: colors.white, - fontSize: '14px', + fontColor: colors.black, + fontSize: '15px', + lineHeight: '1.5em', Tag: 'div', }; Text.displayName = 'Text'; + +export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; |