From 073a96cf63a8b2e5639d15133d09545f7bde1388 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 1 Jun 2018 17:25:50 -0700 Subject: Implement subscription form --- packages/website/ts/components/ui/text.tsx | 56 ++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 packages/website/ts/components/ui/text.tsx (limited to 'packages/website/ts/components/ui/text.tsx') 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