From b68f3eb7720f1ab106d9903b0eef6c27f5149734 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 7 Dec 2018 13:48:10 +0100
Subject: Break heading on why properly

---
 packages/website/ts/@next/components/text.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/text.tsx')

diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 8584a093c..de31679b2 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -27,9 +27,13 @@ const StyledHeading = styled.h1<HeadingProps>`
     margin-bottom: ${props => !props.isNoMargin && '30px'};
     text-align: ${props => props.isCentered && 'center'};
     font-weight: 300;
+    max-width: var(--desktopMaxWidth, none);
+    margin-left: ${props => props.isCentered && 'auto'};
+    margin-right: ${props => props.isCentered && 'auto'};
 
     @media (max-width: 768px) {
         text-align: center;
+        max-width: var(--mobileMaxWidth, none);
     }
 `;
 
@@ -37,9 +41,10 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
     const {
         asElement = 'h1',
         children,
+        ...style
     } = props;
     const Component = StyledHeading.withComponent(asElement);
-    return <Component {...props}>{children}</Component>;
+    return <Component style={{...style}} {...props}>{children}</Component>;
 };
 
 // No need to declare it twice as Styled then rewrap as a stateless comp
-- 
cgit v1.2.3