Adds padding prop to text elements

3 files changed, 16 insertions, 27 deletions

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<ButtonInterface>`
     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 | number>): 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<SectionProps>`
 
 const WrapBase = styled.div<WrapProps>`
     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<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;
 `;