<commit_before>import React, {Component} from 'react';
import autoBind from 'autobind-decorator';
import {Modal} from 'rea11y-modal';



/**
 *
 */
export default function ModalDemo() {
	return (
		<article className="pattern">
			<header>
				<h2 className="pattern-name">Modal</h2>
			</header>

			<p>
				When a modal is opened, focus is trapped inside it.
				On close, the focus is given back to the element
				that opened it.
			</p>

			<ul className="pattern-interactions">
				<li className="pattern-interaction">
					<span>Close</span>
					<span><kbd>Escape</kbd></span>
				</li>
			</ul>

			<div className="pattern-example">
				<StatefulModal />
			</div>
		</article>
	);
}

/**
 *
 */
class StatefulModal extends Component {

	constructor(props) {
		super(props);

		this.state = {
			opened: false
		};
	}

	@autoBind
	handleOpen() {
		this.setState({
			opened: true
		})
	}

	@autoBind
	handleClose() {
		this.setState({
			opened: false
		})
	}

	render() {
		return (
			<div>
				<button onClick={this.handleOpen}>
					Open
				</button>

				{this.renderModal()}
			</div>
		);
	}

	renderModal() {
		if (!this.state.opened) {
			return undefined;
		}

		return (
			<Modal labelId="modal-title">
				<div className="rea11y-modal-header">
					<h1 id="modal-title" className="rea11y-modal-title">
						This is a modal
					</h1>
				</div>

				<div className="rea11y-modal-body">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing
						elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua.
					</p>

					<p>
						Ut enim ad minim veniam, quis nostrud exercitation
						ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in
						voluptate velit esse cillum dolore eu fugiat nulla
						pariatur.
					</p>

					<p>
						Excepteur sint occaecat cupidatat non proident, sunt
						in culpa qui officia deserunt mollit anim id est
						laborum.
					</p>
				</div>

				<div className="rea11y-modal-footer">
					<button>Do nothing</button>
					<button onClick={this.handleClose}>
						Close
					</button>
				</div>
			</Modal>
		);
	}
}
<commit_msg>Vocabulary<commit_after>import React, {Component} from 'react';
import autoBind from 'autobind-decorator';
import {Modal} from 'rea11y-modal';



/**
 *
 */
export default function ModalDemo() {
	return (
		<article className="pattern">
			<header>
				<h2 className="pattern-name">Modal</h2>
			</header>

			<p>
				When a modal is open, focus is trapped inside it.
				On close, the focus is given back to the element
				that opened it.
			</p>

			<ul className="pattern-interactions">
				<li className="pattern-interaction">
					<span>Close</span>
					<span><kbd>Escape</kbd></span>
				</li>
			</ul>

			<div className="pattern-example">
				<StatefulModal />
			</div>
		</article>
	);
}

/**
 *
 */
class StatefulModal extends Component {

	constructor(props) {
		super(props);

		this.state = {
			open: false
		};
	}

	@autoBind
	handleOpen() {
		this.setState({
			open: true
		})
	}

	@autoBind
	handleClose() {
		this.setState({
			open: false
		})
	}

	render() {
		return (
			<div>
				<button onClick={this.handleOpen}>
					Open
				</button>

				{this.renderModal()}
			</div>
		);
	}

	renderModal() {
		if (!this.state.open) {
			return undefined;
		}

		return (
			<Modal labelId="modal-title">
				<div className="rea11y-modal-header">
					<h1 id="modal-title" className="rea11y-modal-title">
						This is a modal
					</h1>
				</div>

				<div className="rea11y-modal-body">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing
						elit, sed do eiusmod tempor incididunt ut labore et
						dolore magna aliqua.
					</p>

					<p>
						Ut enim ad minim veniam, quis nostrud exercitation
						ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in
						voluptate velit esse cillum dolore eu fugiat nulla
						pariatur.
					</p>

					<p>
						Excepteur sint occaecat cupidatat non proident, sunt
						in culpa qui officia deserunt mollit anim id est
						laborum.
					</p>
				</div>

				<div className="rea11y-modal-footer">
					<button>Do nothing</button>
					<button onClick={this.handleClose}>
						Close
					</button>
				</div>
			</Modal>
		);
	}
}

{'fraction_non_alphanumeric': 0.12968498505403542, 'fraction_numerical': 0.0064382616693492755, 'mean_word_length': 2.5337124289195776, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4418791', 'n_tokens_mistral': 2011, 'n_tokens_neox': 1514, 'n_words': 394}