component.js

// @flow

import React, { PureComponent } from 'react'
import cmz from 'cmz'
import elem from '../utils/elem'

import type { Element } from 'react'

type Props = {
  title?: string,
  isTwoColumns?: boolean,
  children?: Element<*>|string,
}

const Section = elem.section(cmz(`
  --contentBorder: 1px solid red

  margin: 0
  padding: 1rem

  display: var(--display)
`))

const Header = elem.h1(cmz(`
  margin: 0
  padding: 0.5rem

  border: var(--headerBorder)
`))

const Content = elem.div(cmz(`
  border: var(--contentBorder)
`))

const twoColStyles = {
  '--display': 'flex',
  '--headerBorder': '1px solid blue',
  '--contentBorder': '1px solid orange'
}

export default class CollapsibleSection extends PureComponent<Props> {
  static defaultProps = {
    title: '',
    isTwoColumns: false,
    children: null,
  }

  render () {
    const {
      title,
      isTwoColumns,
      children,
    } = this.props

    return Section({ style: isTwoColumns ? twoColStyles : {} },
      Header(title),
      Content(children)
    )
  }
}