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

import React, { Component } from 'react'
import { titleCase } from '../utils/stringUtils'

export default class StopShouting extends Component {
	static defaultProps = {
		value: '',
		onChange: () => console.warn('No onChange prop provided for TitleCaseHelper'),
	}

	render() {
		const { value, onChange } = this.props
		const uppercase =
			typeof value == 'string' &&
			value.match(/[A-Z]/) &&
			value.indexOf(' ') >= 0 &&
			value.toUpperCase() == value &&
			titleCase(value) != value

		if (!uppercase) return null

		return (
			<div className="alert warning" style={{ height: 35, marginBottom: 15 }}>
				<div className="alert-content">
					<div className="alert-message gutter-left">
						Please don't shout at me{' '}
						<button className="button button-small" type="button" onClick={e => onChange(titleCase(value))}>
							OK, I'm sorry
						</button>
					</div>
				</div>
			</div>
		)
	}
}