<commit_before>/* eslint no-alert: 0 */

const React = require('react');

const {
	Button,
	Checkbox,
	Container,
	EmailInputGroup,
	FileDragAndDrop,
	FileUpload,
	Form,
	FormField,
	FormIconField,
	FormInput,
	FormNote,
	FormRow,
	FormSelect,
	InputGroup,
	PasswordInputGroup,
	Radio,
	RadioGroup,
	Table
} = require('elemental');

const ExampleSource = require('../components/ExampleSource');


const controlOptions = [
	{ label: 'Caramel',    value: 'caramel' },
	{ label: 'Chocolate',  value: 'chocolate' },
	{ label: 'Strawberry', value: 'strawberry' },
	{ label: 'Vanilla',    value: 'vanilla', disabled: true }
];
const COUNTRIES = require('../data/countries');
const COLOR_VARIANTS = [
	{ label: 'Default', icon: 'star', value: 'default' },
	{ label: 'Primary', icon: 'info', value: 'primary' },
	{ label: 'Success', icon: 'check', value: 'success' },
	{ label: 'Warning', icon: 'alert', value: 'warning' },
	{ label: 'Danger',  icon: 'stop', value: 'danger' }
];

var Forms = React.createClass({
	displayName: 'VIEW_Forms',

	getInitialState () {
		return {
			'inputEmail': '',
			'inputPassword': '',
			'inputConfirm': ''
		};
	},

	onDrop (files) {
		var outputFileInfo = files.map(function(file) {
			return '"' + file.name + '" (' + Math.round(file.size / 1024) + 'Kb)';
		});
		alert('Received files: \n' + outputFileInfo.join('\n'));
		this.setState({
			files: files
		});
	},

	handleSearch () {
		var self = this;
		self.setState({ searching: true });

		setTimeout(function() {
			self.setState({ searching: false });
		}, 1000);
	},

	render () {
		var self = this;

		// handle form input and validation
		function updateSelect(option) {
			self.setState({ inputSelect: option });
		}
		function updateInlineRadios(option) {
			self.setState({ inlineRadioGroup: option });
		}
		function updateEmail(e) {
			self.setState({ inputEmail: e.target.value });
		}
		function updatePassword(e) {
			self.setState({ inputPassword: e.target.value });
		}
		function updateConfirm(e) {
			self.setState({ inputConfirm: e.target.value });
		}
		function validateConfirm(value) {
			return value === self.state.inputPassword;
		}

		// elements
		var countryOptions = COUNTRIES.map(function(country) {
			return { label: country.name, value: country.code };
		});

		// Icon Loops

		var iconContextVariantsColor = COLOR_VARIANTS.map(function(color) {
			return (
				<FormIconField key={color.value} width="one-fifth" iconPosition="left" iconKey={color.icon} iconColor={color.value}>
					<FormInput placeholder={color.label} name={'icon-form-context-variants-color' + color.value} />
				</FormIconField>
			);
		});

		var iconContextVariantsFill = COLOR_VARIANTS.map(function(color) {
			return (
				<FormIconField key={color.value} width="one-fifth" iconPosition="left" iconKey={color.icon} iconFill={color.value}>
					<FormInput placeholder={color.label} name={'icon-form-context-variants-color' + color.value} />
				</FormIconField>
			);
		});

		return (
			<Container maxWidth={800} className="demo-container">
				<h1>Forms</h1>


				<h2>Basic Example</h2>
				<p>Individual form controls automatically receive some global styling. All textual <code className="inline-code">{`<FormInput>`}</code>, and <code className="inline-code">{`<FormSelect>`}</code> elements with are set to <code className="inline-code">width: 100%;</code> by default. Wrap controls in <code className="inline-code">{`<FormField>`}</code> for optimum spacing.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form action="javascript:;">
							<FormField label="Email address" htmlFor="basic-form-input-email">
								<FormInput autoFocus type="email" placeholder="Enter email" name="basic-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="basic-form-input-password">
								<FormInput type="password" placeholder="Password" name="basic-form-input-password" />
							</FormField>
							<FormField>
								<Checkbox label="Check it" />
							</FormField>
							<Button submit>Submit</Button>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form>
								<FormField label="Email address" htmlFor="basic-form-input-email">
									<FormInput autoFocus type="email" placeholder="Enter email" name="basic-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="basic-form-input-password">
									<FormInput type="password" placeholder="Password" name="basic-form-input-password" />
								</FormField>
								<FormField>
									<Checkbox label="Check it" />
								</FormField>
								<Button submit>Submit</Button>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Horizontal Form</h2>
				<p>Adding the type <code className="inline-code">horizontal</code> to your <code className="inline-code">{`<Form />`}</code> changes the <code className="inline-code">FormField</code> component to behave like a row. The label width can be updated from inside the LESS variables file where it's defined as <code className="inline-code">@form-label-width</code>. This only applies to forms within viewports that are at least 768px wide.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form type="horizontal" action="javascript:;">
							<FormField label="Email address" htmlFor="horizontal-form-input-email">
								<FormInput type="email" placeholder="Enter email" name="horizontal-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="horizontal-form-input-password">
								<FormInput type="password" placeholder="Password" name="horizontal-form-input-password" />
							</FormField>
							<FormField offsetAbsentLabel>
								<Checkbox label="Check it" />
							</FormField>
							<FormField offsetAbsentLabel>
								<Button submit>Submit</Button>
							</FormField>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form type="horizontal">
								<FormField label="Email address" htmlFor="horizontal-form-input-email">
									<FormInput type="email" placeholder="Enter email" name="horizontal-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="horizontal-form-input-password">
									<FormInput type="password" placeholder="Password" name="horizontal-form-input-password" />
								</FormField>
								<FormField offsetAbsentLabel>
									<Checkbox label="Check it" />
								</FormField>
								<FormField offsetAbsentLabel>
									<Button submit>Submit</Button>
								</FormField>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Inline Form</h2>
				<p>Add the type <code className="inline-code">inline</code> to your <code className="inline-code">{`<Form />`}</code> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.</p>
				<p>Note: you should always use labels to improve accessibility - they are only visible to screen readers. Form labels within viewports that are below 768px wide will be rendered regularly to improve usability.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form type="inline" action="javascript:;">
							<FormField label="Email address" htmlFor="inline-form-input-email">
								<FormInput type="email" placeholder="Enter email" name="inline-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="inline-form-input-password">
								<FormInput type="password" placeholder="Password" name="inline-form-input-password" />
							</FormField>
							<FormField>
								<Checkbox label="Check it" />
							</FormField>
							<FormField>
								<Button submit>Submit</Button>
							</FormField>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form type="inline">
								<FormField label="Email address" htmlFor="inline-form-input-email">
									<FormInput type="email" placeholder="Enter email" name="inline-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="inline-form-input-password">
									<FormInput type="password" placeholder="Password" name="<PASSWORD>-form-input-password" />
								</FormField>
								<FormField>
									<Checkbox label="Check it" />
								</FormField>
								<FormField>
									<Button submit>Submit</Button>
								</FormField>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Input Groups</h2>
				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">Contiguous form elements</div>
						<InputGroup contiguous>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
							<InputGroup.Section>
								<Button>Button</Button>
							</InputGroup.Section>
						</InputGroup>
						<InputGroup contiguous>
							<InputGroup.Section type="primary">
								<Button><span className="octicon octicon-pencil" /></Button>
							</InputGroup.Section>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
						</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Button</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section type="primary">
									<Button><span className="octicon octicon-pencil" /></Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>

				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">Separate when required</div>
						<InputGroup>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
							<InputGroup.Section>
								<Button type="primary">Button</Button>
							</InputGroup.Section>
						</InputGroup>
						<InputGroup>
							<InputGroup.Section>
								<Button type="primary">
									<span className="octicon octicon-pencil" />
								</Button>
							</InputGroup.Section>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
						</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Button</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section>
									<Button type="primary">
										<span className="octicon octicon-pencil" />
									</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>

				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">More sophisticated formations</div>
							<InputGroup contiguous>
								<InputGroup.Section>
									<Button>Alpha</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Omega</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field 1" />
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field 2" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Primary</Button>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Default</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormIconField width="one-half" iconPosition="left" iconColor="default" iconKey="mail">
										<FormInput placeholder="Email address" name="icon-alignment-left" />
									</FormIconField>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Send</Button>
								</InputGroup.Section>
							</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup contiguous>
								<InputGroup.Section>
									<Button>Alpha</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Omega</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Primary</Button>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Default</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormIconField width="one-half" iconPosition="left" iconColor="default" iconKey="mail">
										<FormInput placeholder="Email address" name="icon-alignment-left" />
									</FormIconField>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Send</Button>
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>



				<h2>Sizes</h2>
				<div className="code-example">
					<div className="code-example__example">
						<FormField label="Input" htmlFor="supported-controls-input">
							<FormInput placeholder="Input" name="supported-controls-input" />
						</FormField>
						<FormField label="Large Input" htmlFor="supported-controls-input-lg">
							<FormInput placeholder="Large" name="supported-controls-input-lg" size="lg" />
						</FormField>
						<FormField label="Small Input" htmlFor="supported-controls-input-sm">
							<FormInput placeholder="Small" name="supported-controls-input-sm" size="sm" />
						</FormField>
					</div>
					<ExampleSource>
						{`
							<FormField label="Input" htmlFor="supported-controls-input">
								<FormInput placeholder="Input" name="supported-controls-input" />
							</FormField>
							<FormField label="Large Input" htmlFor="supported-controls-input-lg">
								<FormInput placeholder="Large" name="supported-controls-input-lg" size="lg" />
							</FormField>
							<FormField label="Small Input" htmlFor="supported-controls-input-sm">
								<FormInput placeholder="Small" name="supported-controls-input-sm" size="sm" />
							</FormField>
						`}
					</ExampleSource>
				</div>



				<h2>Supported Controls</h2>
				<div className="code-example">
					<div className="code-example__example">
						<FormInput placeholder="Input" />
					</div>
					<ExampleSource>
						{`<FormInput placeholder="Input" />`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormInput placeholder="Textarea" multiline />
					</div>
					<ExampleSource>
						{`<FormInput placeholder="Textarea" multiline />`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormSelect options={controlOptions} firstOption="Select" onChange={updateSelect} />
					</div>
					<ExampleSource>
						{`<FormSelect options={[...]} firstOption="Select" onChange={this.handleSelect} />`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormField label="Checkboxes">
							<Checkbox label="Check me out" />
							<Checkbox label="Check me out" />
						</FormField>
						<FormField label="Radios">
							<Radio name="default_radios" label="Pick me" />
							<Radio name="default_radios" label="Pick me" />
						</FormField>
						<FormField label="Inline Checkboxes">
							<div className="inline-controls">
								<Checkbox label="Check me out" /><commit_msg>Add example code of 'options' to FormSelect<commit_after>/* eslint no-alert: 0 */

const React = require('react');

const {
	Button,
	Checkbox,
	Container,
	EmailInputGroup,
	FileDragAndDrop,
	FileUpload,
	Form,
	FormField,
	FormIconField,
	FormInput,
	FormNote,
	FormRow,
	FormSelect,
	InputGroup,
	PasswordInputGroup,
	Radio,
	RadioGroup,
	Table
} = require('elemental');

const ExampleSource = require('../components/ExampleSource');


const controlOptions = [
	{ label: 'Caramel',    value: 'caramel' },
	{ label: 'Chocolate',  value: 'chocolate' },
	{ label: 'Strawberry', value: 'strawberry' },
	{ label: 'Vanilla',    value: 'vanilla', disabled: true }
];
const COUNTRIES = require('../data/countries');
const COLOR_VARIANTS = [
	{ label: 'Default', icon: 'star', value: 'default' },
	{ label: 'Primary', icon: 'info', value: 'primary' },
	{ label: 'Success', icon: 'check', value: 'success' },
	{ label: 'Warning', icon: 'alert', value: 'warning' },
	{ label: 'Danger',  icon: 'stop', value: 'danger' }
];

var Forms = React.createClass({
	displayName: 'VIEW_Forms',

	getInitialState () {
		return {
			'inputEmail': '',
			'inputPassword': '',
			'inputConfirm': ''
		};
	},

	onDrop (files) {
		var outputFileInfo = files.map(function(file) {
			return '"' + file.name + '" (' + Math.round(file.size / 1024) + 'Kb)';
		});
		alert('Received files: \n' + outputFileInfo.join('\n'));
		this.setState({
			files: files
		});
	},

	handleSearch () {
		var self = this;
		self.setState({ searching: true });

		setTimeout(function() {
			self.setState({ searching: false });
		}, 1000);
	},

	render () {
		var self = this;

		// handle form input and validation
		function updateSelect(option) {
			self.setState({ inputSelect: option });
		}
		function updateInlineRadios(option) {
			self.setState({ inlineRadioGroup: option });
		}
		function updateEmail(e) {
			self.setState({ inputEmail: e.target.value });
		}
		function updatePassword(e) {
			self.setState({ inputPassword: e.target.value });
		}
		function updateConfirm(e) {
			self.setState({ inputConfirm: e.target.value });
		}
		function validateConfirm(value) {
			return value === self.state.inputPassword;
		}

		// elements
		var countryOptions = COUNTRIES.map(function(country) {
			return { label: country.name, value: country.code };
		});

		// Icon Loops

		var iconContextVariantsColor = COLOR_VARIANTS.map(function(color) {
			return (
				<FormIconField key={color.value} width="one-fifth" iconPosition="left" iconKey={color.icon} iconColor={color.value}>
					<FormInput placeholder={color.label} name={'icon-form-context-variants-color' + color.value} />
				</FormIconField>
			);
		});

		var iconContextVariantsFill = COLOR_VARIANTS.map(function(color) {
			return (
				<FormIconField key={color.value} width="one-fifth" iconPosition="left" iconKey={color.icon} iconFill={color.value}>
					<FormInput placeholder={color.label} name={'icon-form-context-variants-color' + color.value} />
				</FormIconField>
			);
		});

		return (
			<Container maxWidth={800} className="demo-container">
				<h1>Forms</h1>


				<h2>Basic Example</h2>
				<p>Individual form controls automatically receive some global styling. All textual <code className="inline-code">{`<FormInput>`}</code>, and <code className="inline-code">{`<FormSelect>`}</code> elements with are set to <code className="inline-code">width: 100%;</code> by default. Wrap controls in <code className="inline-code">{`<FormField>`}</code> for optimum spacing.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form action="javascript:;">
							<FormField label="Email address" htmlFor="basic-form-input-email">
								<FormInput autoFocus type="email" placeholder="Enter email" name="basic-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="basic-form-input-password">
								<FormInput type="password" placeholder="Password" name="basic-form-input-password" />
							</FormField>
							<FormField>
								<Checkbox label="Check it" />
							</FormField>
							<Button submit>Submit</Button>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form>
								<FormField label="Email address" htmlFor="basic-form-input-email">
									<FormInput autoFocus type="email" placeholder="Enter email" name="basic-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="basic-form-input-password">
									<FormInput type="password" placeholder="Password" name="<PASSWORD>" />
								</FormField>
								<FormField>
									<Checkbox label="Check it" />
								</FormField>
								<Button submit>Submit</Button>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Horizontal Form</h2>
				<p>Adding the type <code className="inline-code">horizontal</code> to your <code className="inline-code">{`<Form />`}</code> changes the <code className="inline-code">FormField</code> component to behave like a row. The label width can be updated from inside the LESS variables file where it's defined as <code className="inline-code">@form-label-width</code>. This only applies to forms within viewports that are at least 768px wide.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form type="horizontal" action="javascript:;">
							<FormField label="Email address" htmlFor="horizontal-form-input-email">
								<FormInput type="email" placeholder="Enter email" name="horizontal-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="horizontal-form-input-password">
								<FormInput type="password" placeholder="Password" name="horizontal-form-input-password" />
							</FormField>
							<FormField offsetAbsentLabel>
								<Checkbox label="Check it" />
							</FormField>
							<FormField offsetAbsentLabel>
								<Button submit>Submit</Button>
							</FormField>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form type="horizontal">
								<FormField label="Email address" htmlFor="horizontal-form-input-email">
									<FormInput type="email" placeholder="Enter email" name="horizontal-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="horizontal-form-input-password">
									<FormInput type="password" placeholder="Password" name="horizontal-form-input-password" />
								</FormField>
								<FormField offsetAbsentLabel>
									<Checkbox label="Check it" />
								</FormField>
								<FormField offsetAbsentLabel>
									<Button submit>Submit</Button>
								</FormField>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Inline Form</h2>
				<p>Add the type <code className="inline-code">inline</code> to your <code className="inline-code">{`<Form />`}</code> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.</p>
				<p>Note: you should always use labels to improve accessibility - they are only visible to screen readers. Form labels within viewports that are below 768px wide will be rendered regularly to improve usability.</p>
				<div className="code-example">
					<div className="code-example__example">
						<Form type="inline" action="javascript:;">
							<FormField label="Email address" htmlFor="inline-form-input-email">
								<FormInput type="email" placeholder="Enter email" name="inline-form-input-email" />
							</FormField>
							<FormField label="Password" htmlFor="inline-form-input-password">
								<FormInput type="password" placeholder="Password" name="inline-form-input-password" />
							</FormField>
							<FormField>
								<Checkbox label="Check it" />
							</FormField>
							<FormField>
								<Button submit>Submit</Button>
							</FormField>
						</Form>
					</div>
					<ExampleSource>
						{`
							<Form type="inline">
								<FormField label="Email address" htmlFor="inline-form-input-email">
									<FormInput type="email" placeholder="Enter email" name="inline-form-input-email" />
								</FormField>
								<FormField label="Password" htmlFor="inline-form-input-password">
									<FormInput type="password" placeholder="Password" name="inline-form-input-password" />
								</FormField>
								<FormField>
									<Checkbox label="Check it" />
								</FormField>
								<FormField>
									<Button submit>Submit</Button>
								</FormField>
							</Form>
						`}
					</ExampleSource>
				</div>



				<h2>Input Groups</h2>
				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">Contiguous form elements</div>
						<InputGroup contiguous>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
							<InputGroup.Section>
								<Button>Button</Button>
							</InputGroup.Section>
						</InputGroup>
						<InputGroup contiguous>
							<InputGroup.Section type="primary">
								<Button><span className="octicon octicon-pencil" /></Button>
							</InputGroup.Section>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
						</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Button</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section type="primary">
									<Button><span className="octicon octicon-pencil" /></Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>

				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">Separate when required</div>
						<InputGroup>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
							<InputGroup.Section>
								<Button type="primary">Button</Button>
							</InputGroup.Section>
						</InputGroup>
						<InputGroup>
							<InputGroup.Section>
								<Button type="primary">
									<span className="octicon octicon-pencil" />
								</Button>
							</InputGroup.Section>
							<InputGroup.Section grow>
								<FormInput type="text" placeholder="Input group field" />
							</InputGroup.Section>
						</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Button</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section>
									<Button type="primary">
										<span className="octicon octicon-pencil" />
									</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>

				<div className="code-example">
					<div className="code-example__example">
						<div className="code-example__example__heading">More sophisticated formations</div>
							<InputGroup contiguous>
								<InputGroup.Section>
									<Button>Alpha</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Omega</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field 1" />
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field 2" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Primary</Button>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Default</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormIconField width="one-half" iconPosition="left" iconColor="default" iconKey="mail">
										<FormInput placeholder="Email address" name="icon-alignment-left" />
									</FormIconField>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Send</Button>
								</InputGroup.Section>
							</InputGroup>
					</div>
					<ExampleSource>
						{`
							<InputGroup contiguous>
								<InputGroup.Section>
									<Button>Alpha</Button>
								</InputGroup.Section>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Omega</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup>
								<InputGroup.Section grow>
									<FormInput type="text" placeholder="Input group field" />
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Primary</Button>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button>Default</Button>
								</InputGroup.Section>
							</InputGroup>
							<InputGroup contiguous>
								<InputGroup.Section grow>
									<FormIconField width="one-half" iconPosition="left" iconColor="default" iconKey="mail">
										<FormInput placeholder="Email address" name="icon-alignment-left" />
									</FormIconField>
								</InputGroup.Section>
								<InputGroup.Section>
									<Button type="primary">Send</Button>
								</InputGroup.Section>
							</InputGroup>
						`}
					</ExampleSource>
				</div>



				<h2>Sizes</h2>
				<div className="code-example">
					<div className="code-example__example">
						<FormField label="Input" htmlFor="supported-controls-input">
							<FormInput placeholder="Input" name="supported-controls-input" />
						</FormField>
						<FormField label="Large Input" htmlFor="supported-controls-input-lg">
							<FormInput placeholder="Large" name="supported-controls-input-lg" size="lg" />
						</FormField>
						<FormField label="Small Input" htmlFor="supported-controls-input-sm">
							<FormInput placeholder="Small" name="supported-controls-input-sm" size="sm" />
						</FormField>
					</div>
					<ExampleSource>
						{`
							<FormField label="Input" htmlFor="supported-controls-input">
								<FormInput placeholder="Input" name="supported-controls-input" />
							</FormField>
							<FormField label="Large Input" htmlFor="supported-controls-input-lg">
								<FormInput placeholder="Large" name="supported-controls-input-lg" size="lg" />
							</FormField>
							<FormField label="Small Input" htmlFor="supported-controls-input-sm">
								<FormInput placeholder="Small" name="supported-controls-input-sm" size="sm" />
							</FormField>
						`}
					</ExampleSource>
				</div>



				<h2>Supported Controls</h2>
				<div className="code-example">
					<div className="code-example__example">
						<FormInput placeholder="Input" />
					</div>
					<ExampleSource>
						{`<FormInput placeholder="Input" />`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormInput placeholder="Textarea" multiline />
					</div>
					<ExampleSource>
						{`<FormInput placeholder="Textarea" multiline />`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormSelect options={controlOptions} firstOption="Select" onChange={updateSelect} />
					</div>
					<ExampleSource>
						{`
							<FormSelect options={[
								{ label: 'Caramel',    value: 'caramel' },
								{ label: 'Chocolate',  value: 'chocolate' },
								{ label: 'Strawberry', value: 'strawberry' },
								{ label: 'Vanilla',    value: 'vanilla', disabled: true }
							]} firstOption="Select" onChange={this.handleSelect} />
						`}
					</ExampleSource>
				</div>
				<div className="code-example">
					<div className="code-example__example">
						<FormField label="Checkboxes">
							<Checkbox label="Check me out" />
							<Checkbox label="Check me out" />
						</FormField>
						<FormField label="Radios">
							<Radio name="default_radios" label="Pick me" />
							<Radio name="default_radios" label="Pick me" />
						</FormField>
						<FormField label="Inline Checkboxes">
							<div className="inline-controls">
								<Checkbox label="Check me out" />
{'fraction_non_alphanumeric': 0.1465734348611893, 'fraction_numerical': 0.002370300139255133, 'mean_word_length': 2.9241948610626673, 'pattern_counts': {'":': 0, '<': 797, '<?xml version=': 0, '>': 797, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7451711', 'n_tokens_mistral': 14036, 'n_tokens_neox': 9637, 'n_words': 2004}