Components

Components

How the heck are we going to break down these components? What defines a component? What is component? What component? What?

Jons mega example

I think I like this approach, my only worry is the ginormous amount of simple stateless components we'll be building/storing. Will our components folder have 80 simple components? This approach is super Rebass which I think is cool, I think. I'm not sure. I guess deferring all the layout/markup woes to a simple encapsulated component is 👌 , will this provide the level of flexibility in the design/layout that we might need?

<Wrapper>
  <HorizontalChildren> // 'but only on desktop'
    <RedText>
      {props.children}
    </RedText>
   </HorizontalChildren>
</Wrapper>

In this case, the wrapper component could look something like this:

import React, { PropTypes } from 'react'

const widths = {
  narrow: '600px',
  medium: '900px',
  wide: '1200px'
}

const style = (props) => css({
  marginLeft: 'auto',
  marginRight: 'auto',
  maxWidth: widths[props.width]
})

const Wrapper = (props) =>
  <div className={style(props)}>
    {props.children}
  </div>

Wrapper.propTypes = {
  width: PropTypes.string
}
Wrapper.defaultProps = {
  width: 'medium'
}

export default Wrapper

And called like this:

<Wrapper width="large">
  Lots of text and components
</Wrapper>

How do we handle responsive layout changes? <Wrapper /> is great and all, but what if we want all its properties apart from padding at the tablet breakpoint?