@bigfishtv/cockpit/src/components/SectionTray.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import { titleCase } from '../utils/stringUtils'

import Icon from './Icon'
import Button from './button/Button'

export default class SectionTray extends Component {
	static propTypes = {
		subject: PropTypes.string,
		SectionTypes: PropTypes.array,
		addSection: PropTypes.func,
	}

	static defaultProps = {
		subject: 'page',
		SectionTypes: [],
		addSection: () => console.warn('[SectionTray] no addSection prop'),
	}

	render() {
		const { subject, SectionTypes, addSection } = this.props
		return (
			<div className="sections">
				<h2 className="sections-title">Add {titleCase(subject)} Section</h2>
				<p>Select one of the {subject} sections below</p>
				<div className="row">
					{SectionTypes.map((sectionType, i) => (
						<div
							key={i}
							className="column-1-2 column-xlarge-1-4 column-large-1-3 column-xsmall-1-2 margin-bottom-small">
							<Button
								style="block button-icon-left"
								onClick={() => addSection(sectionType)}
								disabled={sectionType.disabled}>
								<Icon name={sectionType.icon} />
								{sectionType.title}
							</Button>
						</div>
					))}
				</div>
			</div>
		)
	}
}