From 073a96cf63a8b2e5639d15133d09545f7bde1388 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 17:25:50 -0700 Subject: Implement subscription form --- .../website/ts/components/forms/subscribe_form.tsx | 121 +++++++++++++++------ packages/website/ts/components/ui/button.tsx | 79 ++++++++++++++ packages/website/ts/components/ui/container.tsx | 15 ++- packages/website/ts/components/ui/input.tsx | 43 ++++++++ packages/website/ts/components/ui/text.tsx | 56 ++++++++++ 5 files changed, 276 insertions(+), 38 deletions(-) create mode 100644 packages/website/ts/components/ui/button.tsx create mode 100644 packages/website/ts/components/ui/input.tsx create mode 100644 packages/website/ts/components/ui/text.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 3a6d0901f..99686efce 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,7 +1,12 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import RaisedButton from 'material-ui/RaisedButton'; +import { Button } from 'ts/components/ui/button'; +import { Input } from 'ts/components/ui/input'; +import { Text } from 'ts/components/ui/text'; +import { logUtils } from '@0xproject/utils'; +import { Container } from 'ts/components/ui/container'; +import { styled } from 'ts/style/theme'; import { backendClient } from 'ts/utils/backend_client'; export interface SubscribeFormProps {} @@ -15,54 +20,102 @@ export enum SubscribeFormStatus { export interface SubscribeFormState { emailText: string; + lastSubmittedEmail: string; status: SubscribeFormStatus; } export class SubscribeForm extends React.Component { public state = { emailText: '', + lastSubmittedEmail: '', status: SubscribeFormStatus.None, }; public render(): React.ReactNode { + const formFontSize = '15px'; return ( -
- Subscribe to our newsletter for 0x relayer and dApp updates -
- - -
-
+ + + + Subscribe to our newsletter for 0x relayer and dApp updates + + +
+ + + + + + + + +
+ {this._renderMessage()} + ); } + private _renderMessage(): React.ReactNode { + let message = null; + switch (this.state.status) { + case SubscribeFormStatus.Error: + message = 'Sorry, something went wrong. Try again later.'; + break; + case SubscribeFormStatus.Loading: + message = 'One second...'; + break; + case SubscribeFormStatus.Success: + message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`; + break; + case SubscribeFormStatus.None: + break; + } + return ( + + + {message || 'spacer text'} + + + ); + } + private _handleEmailInputChange(event: React.ChangeEvent): void { this.setState({ emailText: event.target.value }); } - private async _handleSubscribeClickAsync(): Promise { - this._setStatus(SubscribeFormStatus.Loading); - const isSuccess = await backendClient.subscribeToNewsletterAsync(this.state.emailText); - const status = isSuccess ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; - this._setStatus(status); + private async _handleFormSubmitAsync(event: React.FormEvent): Promise { + event.preventDefault(); + if (!this.state.emailText) { + return; + } + this.setState({ + status: SubscribeFormStatus.Loading, + lastSubmittedEmail: this.state.emailText, + }); + try { + const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText); + const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; + this._setStatus(status); + } catch (error) { + logUtils.log(error); + this._setStatus(SubscribeFormStatus.Error); + } finally { + this.setState({ emailText: '' }); + } } - private _setStatus(status: SubscribeFormStatus): void { - this.setState({ status }); + private _setStatus(status: SubscribeFormStatus, then?: () => void): void { + this.setState({ status }, then); } } diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx new file mode 100644 index 000000000..e6e31374f --- /dev/null +++ b/packages/website/ts/components/ui/button.tsx @@ -0,0 +1,79 @@ +import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export interface ButtonProps { + className?: string; + fontSize?: string; + fontColor?: string; + backgroundColor?: string; + borderColor?: string; + width?: string; + type?: string; + onClick?: (event: React.MouseEvent) => void; +} + +const PlainButton: React.StatelessComponent = ({ children, onClick, type, className }) => ( + +); + +export const Button = styled(PlainButton)` + cursor: pointer; + font-size: ${props => props.fontSize}; + color: ${props => props.fontColor}; + padding: 0.8em 2.2em; + border-radius: 6px; + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); + font-weight: 500; + font-family: 'Roboto'; + width: ${props => props.width}; + background-color: ${props => props.backgroundColor}; + border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; + &:hover { + background-color: ${props => darken(0.1, props.backgroundColor)}; + } + &:active { + background-color: ${props => darken(0.2, props.backgroundColor)}; + } +`; + +Button.defaultProps = { + fontSize: '12px', + backgroundColor: colors.white, + width: 'auto', +}; + +Button.displayName = 'Button'; + +type CTAType = 'light' | 'dark'; + +export interface CTAProps { + type?: CTAType; + fontSize?: string; + width?: string; +} + +export const CTA: React.StatelessComponent = ({ children, type, fontSize, width }) => { + const isLight = type === 'light'; + const backgroundColor = isLight ? colors.white : colors.heroGrey; + const fontColor = isLight ? colors.heroGrey : colors.white; + const borderColor = isLight ? undefined : colors.white; + return ( + + ); +}; + +CTA.defaultProps = { + type: 'dark', +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index d577447b0..c6a78e181 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -11,13 +11,20 @@ export interface ContainerProps { paddingBottom?: StringOrNum; paddingRight?: StringOrNum; paddingLeft?: StringOrNum; + backgroundColor?: string; + borderRadius?: StringOrNum; maxWidth?: StringOrNum; - children?: React.ReactNode; + isHidden?: boolean; + className?: string; } -export const Container: React.StatelessComponent = (props: ContainerProps) => { - const { children, ...style } = props; - return
{children}
; +export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { + const visibility = isHidden ? 'hidden' : undefined; + return ( +
+ {children} +
+ ); }; Container.displayName = 'Container'; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx new file mode 100644 index 000000000..75a453eae --- /dev/null +++ b/packages/website/ts/components/ui/input.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export interface InputProps { + className?: string; + value?: string; + width?: string; + fontSize?: string; + fontColor?: string; + placeholderColor?: string; + placeholder?: string; + backgroundColor?: string; + onChange?: (event: React.ChangeEvent) => void; +} + +const PlainInput: React.StatelessComponent = ({ value, className, placeholder, onChange }) => ( + +); + +export const Input = styled(PlainInput)` + font-size: ${props => props.fontSize}; + width: ${props => props.width}; + padding: 0.8em 1.2em; + border-radius: 3px; + font-family: 'Roboto Mono'; + color: ${props => props.fontColor}; + border: none; + background-color: ${props => props.backgroundColor}; + &::placeholder { + color: ${props => props.placeholder}; + } +`; + +Input.defaultProps = { + width: 'auto', + backgroundColor: colors.white, + fontColor: colors.darkestGrey, + placeholderColor: colors.grey500, + fontSize: '12px', +}; + +Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx new file mode 100644 index 000000000..259365618 --- /dev/null +++ b/packages/website/ts/components/ui/text.tsx @@ -0,0 +1,56 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; +import { Deco, Key } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export type TextTag = 'p' | 'div' | 'span' | 'label'; + +export interface TextProps { + className?: string; + Tag?: TextTag; + fontSize?: string; + fontFamily?: string; + fontColor?: string; + lineHeight?: string; + center?: boolean; + fontWeight?: number; +} + +const PlainText: React.StatelessComponent = ({ children, className, Tag }) => ( + {children} +); + +export const Text = styled(PlainText)` + font-family: ${props => props.fontFamily}; + font-weight: ${props => props.fontWeight}; + font-size: ${props => props.fontSize}; + ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; + ${props => (props.center ? 'text-align: center' : '')}; + color: ${props => props.fontColor}; +`; + +Text.defaultProps = { + fontFamily: 'Roboto', + fontWeight: 400, + fontColor: colors.white, + fontSize: '14px', + Tag: 'div', +}; + +Text.displayName = 'Text'; + +interface TranslatedProps { + children: Key; + translate: Translate; + deco?: Deco; +} + +export type TranslatedTextProps = TextProps & TranslatedProps; + +export const TranslatedText: React.StatelessComponent = ({ + translate, + children, + deco, + ...textProps +}) => {translate.get(children, deco)}; -- cgit