From 3c7dca37f5f596aa47978e3a706db7a181747d01 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 4 Dec 2018 16:30:12 +0100 Subject: Adds padding prop to text elements --- packages/website/ts/@next/components/button.tsx | 2 +- packages/website/ts/@next/components/layout.tsx | 22 +++------------------- packages/website/ts/@next/components/text.tsx | 19 ++++++++++++------- packages/website/ts/@next/constants/utilities.tsx | 20 ++++++++++++++++++++ packages/website/ts/@next/pages/landing.tsx | 15 +++++++++++---- 5 files changed, 47 insertions(+), 31 deletions(-) create mode 100644 packages/website/ts/@next/constants/utilities.tsx diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 2c153788a..1e59ae9c2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -28,7 +28,7 @@ export const Button = styled.button` background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'}; color: ${props => props.color || props.theme.textColor}; - padding: ${props => !props.isNoPadding && '14px 22px'}; + padding: ${props => !props.isNoPadding && '18px 30px'}; text-align: center; font-size: 18px; text-decoration: none; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 5c5d1bbda..d30b7a9d1 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; interface WrapWidths { default: string; @@ -12,10 +13,6 @@ interface ColumnWidths { [key: string]: string; } -interface PaddingSizes { - [key: string]: string; -} - interface SectionProps { isNoPadding?: boolean; isPadLarge?: boolean; @@ -24,12 +21,11 @@ interface SectionProps { isFullWidth?: boolean; } -interface WrapProps { +interface WrapProps extends PaddingInterface { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; isWrapped?: boolean; isCentered?: boolean; - padding?: number | Array<'large' | 'default' | number>; } interface ColumnProps { @@ -52,14 +48,6 @@ const _getColumnWidth = (args: GetColWidthArgs): string => { return `calc(${percentWidth}% - ${gutterDiff}px)`; }; -const _getPadding = (value: number | Array): string => { - if (Array.isArray(value)) { - return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); - } else { - return `${value}px`; - } -}; - const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { @@ -77,10 +65,6 @@ const COLUMN_WIDTHS: ColumnWidths = { '1/2': _getColumnWidth({ columns: 2 }), '2/3': _getColumnWidth({ span: 2, columns: 3 }), }; -const PADDING_SIZES: PaddingSizes = { - 'default': '30px', - 'large': '60px', -}; export const Main = styled.main` border: 1px dotted rgba(0, 0, 255, 0.3); @@ -113,7 +97,7 @@ export const Section = styled.section` const WrapBase = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - padding: ${props => props.padding && _getPadding(props.padding)}; + padding: ${props => props.padding && getCSSPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; 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` 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 = props => { @@ -77,8 +81,9 @@ export const Heading: React.StatelessComponent = props => { export const Paragraph = styled.p` 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; `; diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx new file mode 100644 index 000000000..7d9313583 --- /dev/null +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -0,0 +1,20 @@ +export interface PaddingInterface { + padding?: number | Array<'large' | 'default' | number>; +} + +interface PaddingSizes { + [key: string]: string; +} + +const PADDING_SIZES: PaddingSizes = { + 'default': '30px', + 'large': '60px', +}; + +export const getCSSPadding = (value: number | Array): string => { + if (Array.isArray(value)) { + return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); + } else { + return `${value}px`; + } +}; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index b39ee409d..2feb4a302 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -67,8 +67,9 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( Powering Decentralized Exchange - - 0x is the best solution for adding exchange functionality to your business. + + 0x is the best solution for adding
+ exchange functionality to your business. @@ -83,7 +84,9 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( - + + + @@ -92,7 +95,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( - + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have -- cgit v1.2.3