Adds proposal for padding prop on Wrappers

2 files changed, 26 insertions, 5 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index ce5d6d578..e66dac8a9 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -12,6 +12,10 @@ interface ColumnWidths {
     [key: string]: string;
 }
 
+interface PaddingSizes {
+    [key: string]: string;
+}
+
 interface SectionProps {
     noPadding?: any;
     padLarge?: any;
@@ -23,6 +27,7 @@ interface SectionProps {
 interface WrapProps {
     width?: 'default' | 'full' | 'medium' | 'narrow';
     bgColor?: string;
+    margin?: number | (string | number)[];
 }
 
 interface ColumnProps {
@@ -37,7 +42,6 @@ interface GetColWidthArgs {
     columns: number;
 }
 
-
 const _getColumnWidth = (args: GetColWidthArgs) => {
     const { span = 1, columns } = args;
     const percentWidth = (span / columns) * 100;
@@ -45,6 +49,18 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
     return `calc(${percentWidth}% - ${gutterDiff}px)`;
 };
 
+const _getPadding = (value: number | (string | number)[]) => {
+    let padding = '';
+
+    if (Array.isArray(value)) {
+        padding = value.map(val => PADDING_SIZES[val] || '0px').join(' ');
+    } else {
+        padding = `${value}px`;
+    }
+
+    return padding;
+}
+
 const GUTTER = 30 as number;
 const MAX_WIDTH = 1500;
 const BREAKPOINTS = {
@@ -62,6 +78,10 @@ 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`
@@ -87,6 +107,7 @@ export const Section = styled.section<SectionProps>`
 
 const WrapBase = styled.div<WrapProps>`
     max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+    padding: ${props => _getPadding(props.margin)};
     background-color: ${props => props.bgColor};
     margin: 0 auto;
 `;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 61d07641b..2793993f9 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -69,9 +69,9 @@ export const NextLanding = () => (
                 </Button>
             </WrapCentered>
 
-            <Wrap>
+            <Wrap margin={['large', 0, 0, 0]}>
                 {/* NOTE: this probably should be withComponent as part of a <dl> */}
-                <Column colWidth="1/3">
+                <Column colWidth="1/3" noPadding>
                     <Heading size="medium" center>
                         873,435
                     </Heading>
@@ -81,7 +81,7 @@ export const NextLanding = () => (
                     </Paragraph>
                 </Column>
 
-                <Column colWidth="1/3">
+                <Column colWidth="1/3" noPadding>
                     <Heading size="medium" center>
                         $203M
                     </Heading>
@@ -91,7 +91,7 @@ export const NextLanding = () => (
                     </Paragraph>
                 </Column>
 
-                <Column colWidth="1/3">
+                <Column colWidth="1/3" noPadding>
                     <Heading size="medium" center>
                         227,372
                     </Heading>