From fb882b0c7710151af7024c510d853f828a54f43a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 10 Oct 2018 17:22:31 +0200 Subject: Add stuff --- .../dev-tools-pages/ts/components/ui/button.tsx | 60 ++++++++++++++++++ .../dev-tools-pages/ts/components/ui/container.tsx | 55 ++++++++++++++++ packages/dev-tools-pages/ts/components/ui/text.tsx | 74 ++++++++++++++++++++++ packages/dev-tools-pages/ts/index.tsx | 4 +- packages/dev-tools-pages/ts/pages/landing.tsx | 22 +++++++ .../dev-tools-pages/ts/pages/landing/landing.tsx | 15 ----- 6 files changed, 214 insertions(+), 16 deletions(-) create mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx create mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx create mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx create mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx delete mode 100644 packages/dev-tools-pages/ts/pages/landing/landing.tsx (limited to 'packages/dev-tools-pages/ts') diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx new file mode 100644 index 000000000..7b2e33141 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -0,0 +1,60 @@ +import { darken, saturate } from 'polished'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { Container } from './container'; + +export interface ButtonProps { + backgroundColor?: string; + borderColor?: string; + width?: string; + padding?: string; + type?: string; + isDisabled?: boolean; + onClick?: (event: React.MouseEvent) => void; + className?: string; +} + +const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( + +); + +const darkenOnHoverAmount = 0.1; +const darkenOnActiveAmount = 0.2; +const saturateOnFocusAmount = 0.2; +export const Button = styled(PlainButton)` + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; + transition: background-color, opacity 0.5s ease; + padding: ${props => props.padding}; + border-radius: 3px; + outline: none; + width: ${props => props.width}; + background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled + ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) + : ''} !important; + } + &:active { + background-color: ${props => + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; + } +`; + +Button.defaultProps = { + backgroundColor: 'black', + width: 'auto', + isDisabled: false, + padding: '1em 2.2em', +}; +Button.displayName = 'Button'; diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx new file mode 100644 index 000000000..f2ae68b70 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/container.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; + +type StringOrNum = string | number; + +export type ContainerTag = 'div' | 'span'; + +export interface ContainerProps { + marginTop?: StringOrNum; + marginBottom?: StringOrNum; + marginRight?: StringOrNum; + marginLeft?: StringOrNum; + padding?: StringOrNum; + paddingTop?: StringOrNum; + paddingBottom?: StringOrNum; + paddingRight?: StringOrNum; + paddingLeft?: StringOrNum; + backgroundColor?: string; + borderRadius?: StringOrNum; + maxWidth?: StringOrNum; + maxHeight?: StringOrNum; + width?: StringOrNum; + height?: StringOrNum; + minWidth?: StringOrNum; + minHeight?: 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; + zIndex?: number; + Tag?: ContainerTag; + cursor?: string; + id?: string; + onClick?: (event: React.MouseEvent) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; +} + +export const Container: React.StatelessComponent = props => { + const { children, className, Tag, isHidden, id, onClick, ...style } = props; + const visibility = isHidden ? 'hidden' : undefined; + return ( + + {children} + + ); +}; + +Container.defaultProps = { + Tag: 'div', +}; + +Container.displayName = 'Container'; diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx new file mode 100644 index 000000000..8e314beae --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/text.tsx @@ -0,0 +1,74 @@ +import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; +import * as React from 'react'; +import styled from 'styled-components'; + +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; + +export interface TextProps { + className?: string; + Tag?: TextTag; + fontSize?: string; + fontFamily?: string; + fontStyle?: string; + fontColor?: string; + lineHeight?: string; + minHeight?: string; + center?: boolean; + fontWeight?: number | string; + textDecorationLine?: string; + onClick?: (event: React.MouseEvent) => void; + hoverColor?: string; + noWrap?: boolean; + display?: string; +} + +const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( + + {children} + +); + +export const Text = styled(PlainText)` + font-family: ${props => props.fontFamily}; + font-style: ${props => props.fontStyle}; + font-weight: ${props => props.fontWeight}; + font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; + ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; + ${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; + ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; + &:hover { + ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')}; + } +`; + +Text.defaultProps = { + fontFamily: 'Roboto', + fontStyle: 'normal', + fontWeight: 400, + fontColor: colors.black, + fontSize: '15px', + lineHeight: '1.5em', + textDecorationLine: 'none', + Tag: 'div', + noWrap: false, +}; + +Text.displayName = 'Text'; + +export const Title: React.StatelessComponent = props => ; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx index f4db2ea3c..4591c6d76 100644 --- a/packages/dev-tools-pages/ts/index.tsx +++ b/packages/dev-tools-pages/ts/index.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { render } from 'react-dom'; import { MetaTags } from 'ts/components/meta_tags'; -import { Landing } from 'ts/pages/landing/landing'; +import { Landing } from 'ts/pages/landing'; + +import 'basscss/css/basscss.css'; const DOCUMENT_TITLE = ''; const DOCUMENT_DESCRIPTION = ''; diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx new file mode 100644 index 000000000..e89cfa665 --- /dev/null +++ b/packages/dev-tools-pages/ts/pages/landing.tsx @@ -0,0 +1,22 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Button } from '../components/ui/button'; +import { Container } from '../components/ui/container'; + +interface LandingProps {} + +interface LandingState {} + +export class Landing extends React.Component { + constructor(props: LandingProps) { + super(props); + } + public render(): React.ReactNode { + return ( + + + + ); + } +} diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing/landing.tsx deleted file mode 100644 index a6cb89a7b..000000000 --- a/packages/dev-tools-pages/ts/pages/landing/landing.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -interface LandingProps {} - -interface LandingState {} - -export class Landing extends React.Component { - constructor(props: LandingProps) { - super(props); - } - public render(): React.ReactNode { - return
; - } -} -- cgit v1.2.3