From 96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 29 Nov 2018 14:51:41 +0100
Subject: Adds fullWidth prop to sections

---
 packages/website/ts/@next/components/button.tsx |  2 ++
 packages/website/ts/@next/components/layout.tsx | 13 +++++++++----
 packages/website/ts/@next/pages/landing.tsx     |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 9cadc4fd5..067576d3c 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -8,6 +8,8 @@ interface ButtonInterface {
     text: string;
     transparent?: boolean;
     inline?: boolean;
+    href?: string,
+    onClick?: Function,
 }
 
 const StyledButton = styled.button<ButtonInterface>`
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 81ae43db7..6f6e6cd6b 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -17,6 +17,7 @@ interface SectionProps {
   noPadding?: any;
   noMargin?: any;
   bgColor?: string;
+  fullWidth?: any;
 }
 
 interface WrapProps {
@@ -44,6 +45,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
 
 const GUTTER = 30 as number;
 const MAX_WIDTH = 1500;
+const BREAKPOINTS = {
+  mobile: '768px',
+};
 const WRAPPER_WIDTHS: WrapWidths = {
   default: `${MAX_WIDTH}px`, // tbd
   full: '100%',
@@ -66,9 +70,10 @@ export const Main = styled.main`
 `;
 
 export const Section = styled.section<SectionProps>`
-  width: 100%;
+  width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
   padding: ${props => !props.noPadding && '30px'};
-  margin-bottom: ${props => !props.noMargin && '30px'};
+  margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
+  margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
   background-color: ${props => props.bgColor};
   border: 1px dotted rgba(0, 255, 0, 0.3);
 `;
@@ -78,7 +83,7 @@ export const Wrap = styled.div<WrapProps>`
   background-color: ${props => props.bgColor};
   margin: 0 auto;
 
-  @media (min-width: 768px) {
+  @media (min-width: ${BREAKPOINTS.mobile}) {
     display: flex;
     justify-content: space-between;
   }
@@ -88,7 +93,7 @@ export const Column = styled.div<ColumnProps>`
   padding: ${props => !props.noPadding && '30px'};
   border: 1px dotted rgba(255, 0, 0, 0.3);
 
-  @media (min-width: 768px) {
+  @media (min-width: ${BREAKPOINTS.mobile}) {
     width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
   }
 `;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 603a26ba3..fa2bf45a1 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -52,7 +52,7 @@ export const NextLanding = () => (
       </Wrap>
     </Section>
 
-    <Section noPadding>
+    <Section fullWidth noPadding>
       <Wrap width="full">
         <Column colWidth="2/3">
           SAMPLE FLUSHED width
-- 
cgit v1.2.3