@bigfishtv/cockpit/src/components/modal/Modal.js

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

import ModalToolbar from '../modal/ModalToolbar'
import ModalActions from '../modal/ModalActions'
import Panel from '../container/panel/Panel'

// we define this because react-docgen fails when defaultProp directly references an imported component
const DefaultModalToolbar = props => <ModalToolbar {...props} />
const DefaultModalActions = props => <ModalActions {...props} />

export default class Modal extends Component {
	static propTypes = {
		/** Modal toolbar component to use, default is ModalToolbar */
		ModalToolbar: PropTypes.func,
		/** Modal actions component to use, default is ModalActions */
		ModalActions: PropTypes.func,
		/** Title string or react node */
		title: PropTypes.node,
		/** Size string e.g. xsmall, small, medium etc. omitting will default to fullscreen */
		size: PropTypes.string,
	}

	static defaultProps = {
		ModalToolbar: DefaultModalToolbar,
		ModalActions: DefaultModalActions,
		title: 'Modal Title',
		size: 'default',
	}

	render() {
		const { ModalToolbar, ModalActions, children, size, ...props } = this.props
		return (
			<div className={'modal-inner modal-' + size}>
				<Panel {...props} title={this.props.title} PanelToolbar={ModalToolbar} PanelActions={ModalActions}>
					{children}
				</Panel>
			</div>
		)
	}
}