module.exports = {
  title: '`glamorousComponentFactory`',
  subtitle: '',
  description: ``.replace(/~/g, '`'),
  filename: __filename,
}

module.exports = {
  title: '`glamorousComponentFactory`',
  subtitle: '',
  description: `
    Whether you create one yourself or use one of the built-in ones mentioned above, each ~glamorousComponentFactory~ allows you to invoke it with styles and it returns you a new component which will have those styles applied when it's rendered. This is accomplished by generating a ~className~ for the styles you give and forwarding that ~className~ onto the rendered element. So if you're wrapping a component you intend to style, you'll need to make sure you accept the ~className~ as a prop and apply it to where you want the styles applied in your custom component (normally the root element).

    ~~~js
    const UnstyledComp = ({ className, children }) => <div className={~\${className} other-class~}>{children}</div>
    const MyStyledComp = glamorous(UnstyledComp)({ margin: 1 })

    <MyStyledComp>content</MyStyledComp>
    // rendered output: <div class="<glamor-generated-class> other-class">content</div>
    // styles applied: {margin: 1}
    ~~~
    ##### ...styles

    The ~glamorousComponentFactory~ accepts any number of style object arguments. These can be style objects or functions which are invoked with ~props~ on every render and return style objects. To learn more about what these style objects can look like, please take a look at the [~glamor~](https://github.com/threepointone/glamor) documentation.

    ~~~js
    const MyStyledDiv = glamorous.div(
      {
        margin: 1,
      },
      (props) => ({
        padding: props.noPadding ? 0 : 4,
      })
    )

    <MyStyledDiv /> // styles applied: {margin: 1, padding: 4}
    <MyStyledDiv noPadding /> // styles applied: {margin: 1, padding: 0}
    ~~~

    ~~~callout {title: 'Tip', type: 'info'}
    Tip: glamorous simply takes these style objects and forwards them to ~glamor~.
    ~glamor~ will then merge those together in a way you would expect. One neat
    thing you can do is specify an array of style objects and ~glamor~ will treat
    that exactly the same. It's really expressive! See the [examples][/examples/]
    for an example of how this works.
    ~~~

    You can also specify other classes you'd like applied to the component as well. If these classes are generated by glamor, then their styles will be merged with the glamor style's, otherwise the class name will simply be forwarded. For example:

    ~~~javascript
    const className1 = glamor.css({paddingTop: 1, paddingRight: 1}).toString()
    const styles2 = {paddingRight: 2, paddingBottom: 2}
    const className3 = glamor.css({paddingBottom: 3, paddingLeft: 3}).toString()
    const styles4 = {paddingLeft: 4}
    const styles5 = props => (props.active ? 'active' : 'not-active')
    const MyStyledDiv = glamorous.div(
      className1,
      styles2,
      className3,
      styles4,
      styles5,
      'extra-thing',
    )
    <MyStyledDiv /> // styles applied: {padding-top: 1, padding-right: 2, padding-bottom: 3, padding-left: 4}, 'not-active' and anything coming from ~extra-thing~.
  ~~~
  `.replace(/~/g, '`'),
  filename: __filename,
}

add glamorous component factory info to docs (#90)