From 4b8348da8cc50ef0da6e6b2bb7d276f1246437cf Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 3 Oct 2018 16:20:39 -0700 Subject: Add some ui components --- packages/instant/src/components/ui/text.tsx | 75 +++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 packages/instant/src/components/ui/text.tsx (limited to 'packages/instant/src/components/ui/text.tsx') diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx new file mode 100644 index 000000000..a4b9d60d7 --- /dev/null +++ b/packages/instant/src/components/ui/text.tsx @@ -0,0 +1,75 @@ +import { darken } from 'polished'; +import * as React from 'react'; + +import { ColorOption, styled } from '../../style/theme'; + +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; + +export interface TextProps { + fontColor: ColorOption; + fontFamily: string; + fontStyle: string; + fontSize: string; + lineHeight: string; + className?: string; + Tag?: TextTag; + minHeight?: string; + center?: boolean; + fontWeight?: number | string; + textDecorationLine?: string; + onClick?: (event: React.MouseEvent) => void; + hoverColor?: string; + noWrap?: boolean; + display?: string; +} + +const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( + + {children} + +); + +const darkenOnHoverAmount = 0.3; +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.theme[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(darkenOnHoverAmount, props.fontColor)}` : '')}; + } +`; + +Text.defaultProps = { + fontFamily: 'Inter UI', + fontStyle: 'normal', + fontWeight: 400, + fontColor: ColorOption.black, + fontSize: '15px', + lineHeight: '1.5em', + textDecorationLine: 'none', + Tag: 'div', + noWrap: false, +}; + +Text.displayName = 'Text'; + +export const Title: React.StatelessComponent = props => ; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: ColorOption.primaryColor, +}; + +Title.displayName = 'Title'; -- cgit From a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 4 Oct 2018 14:59:07 -0700 Subject: Improve utilities and try to use them in simple form component --- packages/instant/src/components/ui/text.tsx | 35 ++++++++++++++++------------- 1 file changed, 20 insertions(+), 15 deletions(-) (limited to 'packages/instant/src/components/ui/text.tsx') diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index a4b9d60d7..0bc387644 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -3,16 +3,16 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; - export interface TextProps { - fontColor: ColorOption; - fontFamily: string; - fontStyle: string; - fontSize: string; - lineHeight: string; + fontColor?: ColorOption; + fontFamily?: string; + fontStyle?: string; + fontSize?: string; + opacity?: number; + letterSpacing?: string; + textTransform?: string; + lineHeight?: string; className?: string; - Tag?: TextTag; minHeight?: string; center?: boolean; fontWeight?: number | string; @@ -23,10 +23,10 @@ export interface TextProps { display?: string; } -const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( - +const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( +

{children} - +

); const darkenOnHoverAmount = 0.3; @@ -35,17 +35,23 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + opacity: ${props => props.opacity}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.theme[props.fontColor]}; + color: ${props => props.fontColor && props.theme[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}` : '')}; + ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; + ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; &:hover { - ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')}; + ${props => + props.onClick + ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` + : ''}; } `; @@ -57,7 +63,6 @@ Text.defaultProps = { fontSize: '15px', lineHeight: '1.5em', textDecorationLine: 'none', - Tag: 'div', noWrap: false, }; @@ -66,9 +71,9 @@ Text.displayName = 'Text'; export const Title: React.StatelessComponent = props => ; Title.defaultProps = { - Tag: 'h2', fontSize: '20px', fontWeight: 600, + opacity: 1, fontColor: ColorOption.primaryColor, }; -- cgit From 0cfe5637c048091c9502d49c8526e17cefb1a525 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 4 Oct 2018 16:27:04 -0700 Subject: Create zrx instant container heading --- packages/instant/src/components/ui/text.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/components/ui/text.tsx') diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 0bc387644..9fb8ea26f 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -24,9 +24,9 @@ export interface TextProps { } const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( -

+

{children} -

+
); const darkenOnHoverAmount = 0.3; @@ -61,9 +61,9 @@ Text.defaultProps = { fontWeight: 400, fontColor: ColorOption.black, fontSize: '15px', - lineHeight: '1.5em', textDecorationLine: 'none', noWrap: false, + display: 'inline-block', }; Text.displayName = 'Text'; -- cgit