aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/ui/button.tsx60
-rw-r--r--packages/dev-tools-pages/ts/components/ui/container.tsx55
-rw-r--r--packages/dev-tools-pages/ts/components/ui/text.tsx74
-rw-r--r--packages/dev-tools-pages/ts/index.tsx4
-rw-r--r--packages/dev-tools-pages/ts/pages/landing.tsx (renamed from packages/dev-tools-pages/ts/pages/landing/landing.tsx)9
5 files changed, 200 insertions, 2 deletions
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<HTMLElement>) => void;
+ className?: string;
+}
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+ <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
+ {children}
+ </button>
+);
+
+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<HTMLElement>) => void;
+ overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+ const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+ const visibility = isHidden ? 'hidden' : undefined;
+ return (
+ <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
+ {children}
+ </Tag>
+ );
+};
+
+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<HTMLElement>) => void;
+ hoverColor?: string;
+ noWrap?: boolean;
+ display?: string;
+}
+
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+ <Tag className={className} onClick={onClick}>
+ {children}
+ </Tag>
+);
+
+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<TextProps> = props => <Text {...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/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
index a6cb89a7b..e89cfa665 100644
--- a/packages/dev-tools-pages/ts/pages/landing/landing.tsx
+++ b/packages/dev-tools-pages/ts/pages/landing.tsx
@@ -1,6 +1,9 @@
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 {}
@@ -10,6 +13,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
super(props);
}
public render(): React.ReactNode {
- return <div id="landing" className="clearfix" />;
+ return (
+ <Container id="landing" className="clearfix">
+ <Button>Click me!</Button>
+ </Container>
+ );
}
}