Support "component" prop for grid areas

[kettanaito]

What

Need to add the support for component prop to grid area components.

Why

At the moment all grid areas will render <div> elements. That may not be the desired layout in some cases. For example, sometimes passing a presentational component as the component prop may simplify the layout declaration:

import React from 'react'
import ArticleHeader from './ArticleHeader'

const template = `
  'header'
`

const Article = () => (
<Layout template={template}>
  {({ Header }) => (
    <React.Fragment>
      <Header component={ArticleHeader} />
    </React.Fragment>
  )}
</Layout>
)

export default Article

[kettanaito]

On the other hand, this may encourage the usage of presentational component instead of grid areas. That is not intended and goes against the atomic layout principles (it's similar as mixing Bootstrap grid classes with your own classes, which is a bad idea).

[kettanaito]

There is not going to be a support for this feature, at least for now. The reasoning is written in the previous comment (that is to discourage a tight coupling between grid area and a presentational component inside it). Closing.