✨ Support full "Holy Grail Layout" in Layout component

Author: exah

package.json

@@ -105,7 +105,6 @@
   "dependencies": {
     "emotion": "^9.2.6",
     "emotion-theming": "^9.2.6",
-    "macro-components": "^2.0.0",
     "pss": "^2.0.0",
     "react-emotion": "^9.2.6"
   }

src/layout/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import Macro from 'macro-components'
 import styled from 'react-emotion'
 import { flexItemPropStyles } from 'pss'
 
@@ -11,26 +10,26 @@ const LayoutContent = styled(Box)(
   flexItemPropStyles
 )
 
-const createLayout = Macro({
+const LayoutBody = styled(FlexBox)(
+  { display: 'flex', flexGrow: 1, flexShrink: 0, flexBasis: 'auto' },
+  flexItemPropStyles
+)
+
+const Layout = (props) => (
+  <FlexBox column minHt {...props} />
+)
+
+Object.assign(Layout, {
   Header: FlexBoxItem.withComponent('header'),
   Content: LayoutContent.withComponent('main'),
-  Footer: FlexBoxItem.withComponent('footer')
+  Footer: FlexBoxItem.withComponent('footer'),
+  Item: FlexBoxItem,
+  Body: LayoutBody
 })
 
-const Layout = createLayout(({
-  Header,
-  Content,
-  Footer
-}, { children, ...rest }) => (
-  <FlexBox column minHt {...rest}>
-    {Header}
-    {Content}
-    {Footer}
-  </FlexBox>
-))
-
 export {
   Layout,
   FlexBoxItem as LayoutItem,
-  LayoutContent
+  LayoutContent,
+  LayoutBody
 }

yarn.lock

@@ -6523,10 +6523,6 @@ lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-macro-components@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/macro-components/-/macro-components-2.0.0.tgz#08b6a14a372d79d2a2b04a72ba00baf1088bb08a"
-
 make-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.0.0.tgz#97a011751e91dd87cfadef58832ebb04936de978"