diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 23:30:12 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-04 23:30:12 +0800 |
commit | 3c7dca37f5f596aa47978e3a706db7a181747d01 (patch) | |
tree | 9348f1af91f10a3905b03ed5d781cec88817e736 /packages/website/ts/@next/components/text.tsx | |
parent | 8acb25f577feaea910ef0c1121aaba2ea177e718 (diff) | |
download | dexon-0x-contracts-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.gz dexon-0x-contracts-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.zst dexon-0x-contracts-3c7dca37f5f596aa47978e3a706db7a181747d01.zip |
Adds padding prop to text elements
Diffstat (limited to 'packages/website/ts/@next/components/text.tsx')
-rw-r--r-- | packages/website/ts/@next/components/text.tsx | 19 |
1 files changed, 12 insertions, 7 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index a746cb3b9..0be24d233 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,19 +1,22 @@ import * as React from 'react'; import styled from 'styled-components'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; -interface HeadingProps { - asElement?: 'h1'| 'h2'| 'h3'| 'h4'; +interface BaseTextInterface extends PaddingInterface { size?: 'default' | 'medium' | 'large' | 'small'; isCentered?: boolean; +} + +interface HeadingProps extends BaseTextInterface { + asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + isCentered?: boolean; isNoMargin?: boolean; color?: string; } -interface ParagraphProps { +interface ParagraphProps extends BaseTextInterface { isNoMargin?: boolean; - size?: 'default' | 'small' | 'medium' | 'large'; isMuted?: boolean | number; - isCentered?: boolean; } interface HeadingSizes { @@ -55,10 +58,11 @@ const PARAGRAPH_SIZES: ParagraphSizes = { const StyledHeading = styled.h1<HeadingProps>` color: ${props => props.color || props.theme.textColor}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']}; - font-weight: 300; margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; + font-weight: 300; `; export const Heading: React.StatelessComponent<HeadingProps> = props => { @@ -77,8 +81,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; margin-bottom: ${props => !props.isNoMargin && '30px'}; - line-height: 1.4; + padding: ${props => props.padding && getCSSPadding(props.padding)}; color: ${props => props.color || props.theme.textColor}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; text-align: ${props => props.isCentered && 'center'}; + line-height: 1.4; `; |