diff options
author | Fabio Berger <me@fabioberger.com> | 2018-06-06 18:31:30 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-06-06 18:31:30 +0800 |
commit | 271fa26890c7d86fe516b51d653a308b2789d2c2 (patch) | |
tree | eff3a17c8dd56cd1fbe4da76557b904253792cd2 /packages/website/ts/components/ui/text.tsx | |
parent | fe437da7517b4ea8e308a7210a34e66b715d5c78 (diff) | |
parent | cc39eea9991306eabadd912256452f67fb49c20b (diff) | |
download | dexon-0x-contracts-271fa26890c7d86fe516b51d653a308b2789d2c2.tar.gz dexon-0x-contracts-271fa26890c7d86fe516b51d653a308b2789d2c2.tar.zst dexon-0x-contracts-271fa26890c7d86fe516b51d653a308b2789d2c2.zip |
merge v2-prototype
Diffstat (limited to 'packages/website/ts/components/ui/text.tsx')
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 41 |
1 files changed, 41 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..99bf89966 --- /dev/null +++ b/packages/website/ts/components/ui/text.tsx @@ -0,0 +1,41 @@ +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'; |