diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-02 08:28:04 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-02 08:28:04 +0800 |
commit | 95086a75e6d08b930c196ccf6d0926c4e0f4cd48 (patch) | |
tree | de4159b6af049cdc7df34a30da55c1535754115f /packages/website/ts/components/ui/text.tsx | |
parent | 62e60e2ba6d07b9b892b4f2e92a5421c54f5fa20 (diff) | |
parent | 073a96cf63a8b2e5639d15133d09545f7bde1388 (diff) | |
download | dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar.gz dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar.bz2 dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar.lz dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar.xz dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.tar.zst dexon-sol-tools-95086a75e6d08b930c196ccf6d0926c4e0f4cd48.zip |
Merge branch 'feature/website/landing-subscribe-button' into feature/website/landing-subscribe-button-2
Diffstat (limited to 'packages/website/ts/components/ui/text.tsx')
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 56 |
1 files changed, 56 insertions, 0 deletions
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<TextProps> = ({ children, className, Tag }) => ( + <Tag className={className}>{children}</Tag> +); + +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<TranslatedTextProps> = ({ + translate, + children, + deco, + ...textProps +}) => <Text {...textProps}>{translate.get(children, deco)}</Text>; |