Control and radio input groups

packages/control-input/CHANGELOG.md

@@ -15,6 +15,7 @@
 
 ## Versions
 
+* [v2.2.0 - Add checkbox list and radiobox list components](#v220)
 * [v2.1.6 - Update dependencies](#v216)
 * [v2.1.5 - Removing web pack dev server, updating dependencies](#v215)
 * [v2.1.4 - Fixed build scripts for Windows](#v214)
@@ -38,6 +39,11 @@
 
 ## Release History
 
+### v2.2.0
+
+- Add checkbox list and radiobox list components
+
+
 ### v2.1.6
 
 - Update dependencies

packages/control-input/README.md

@@ -116,6 +116,7 @@ The visual test: https://uikit.service.gov.au/packages/control-input/tests/site/
 
 ## Release History
 
+* v2.2.0 - Add checkbox list and radiobox list components
 * v2.1.6 - Update dependencies
 * v2.1.5 - Removing web pack dev server, updating dependencies
 * v2.1.4 - Fixed build scripts for Windows

packages/control-input/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gov.au/control-input",
-	"version": "2.1.6",
+	"version": "2.2.0",
 	"description": "Control inputs include radio buttons and checkboxes. They allow users to select one or more options.",
 	"keywords": [
 		"uikit",

packages/control-input/src/js/react.js

@@ -97,3 +97,161 @@ AUradio.propTypes = {
 	status: PropTypes.oneOf([ 'valid', 'invalid' ]),
 	className: PropTypes.string,
 };
+
+
+/**
+ * The radio component
+ *
+ */
+export class AUradioList extends React.Component {
+	// for an example on what a state change might look like we have to add a state
+	constructor( props ) {
+		super( props );
+
+		let radioState = '';
+		this.props.items.map( item => item.checked ? radioState = item.value : '' );
+
+		this.state = {
+			radio: radioState,
+		};
+	}
+
+	toggleRadioBox( item ) {
+		this.setState({ radio: item.value });
+
+		// called when any radio box in the group is changed
+		if ( typeof this.props.toggleRadioBox === 'function' ) {
+			this.props.toggleRadioBox( item.value );
+		}
+
+		// when an individual radio box has an on change function
+		if ( typeof item.onChange === 'function' ) {
+			item.onChange();
+		}
+
+	}
+
+	render() {
+		return (
+			<div>
+				{ this.props.items.map( ( item, i ) =>
+					<AUradio
+						key={ i }
+						dark={ this.props.dark }
+						alt={ this.props.alt }
+						label={ item.label }
+						name={ this.props.name }
+						className={ item.className }
+						id={ item.id }
+						block = { this.props.block }
+						full={ this.props.full }
+						value={ item.value }
+						required={ this.required }
+						disabled={ item.disabled }
+						checked={ this.state.radio === item.value }
+						status = { item.status }
+						onChange={ () => {
+							this.toggleRadioBox( item );
+						} }
+						className={ item.className }
+					/>
+				) }
+			</div>
+		);
+	};
+}
+
+AUradioList.propTypes = {
+	items: PropTypes.arrayOf(
+		PropTypes.shape({
+			label: PropTypes.string.isRequired,
+			value: PropTypes.string.isRequired,
+			id: PropTypes.string,
+			className: PropTypes.string,
+			checked: PropTypes.bool,
+			disabled: PropTypes.bool,
+			status: PropTypes.oneOf([ 'valid', 'invalid' ]),
+			onChange: PropTypes.func
+		})).isRequired,
+		name: PropTypes.string.isRequired,
+		dark: PropTypes.bool,
+		alt: PropTypes.bool,
+}
+
+
+
+/**
+ * The radio component
+ *
+ */
+export class AUcheckboxList extends React.Component {
+	// for an example on what a state change might look like we have to add a state
+	constructor( props ) {
+		super( props );
+
+		// set the default select state
+		let checkboxState = {};
+		this.props.items.map( item => checkboxState[ item.value ] = item.checked ? true : false );
+
+		this.state = checkboxState;
+	}
+
+	toggleCheckBox( item ) {
+		this.setState({ [item.value]: !this.state[ item.value ] });
+
+		// called when any checkbox in the group is changed
+		if ( typeof this.props.toggleCheckBox === 'function' ) {
+			this.props.toggleCheckBox( item.value );
+		}
+
+		// when an individual checkbox has an on change function
+		if ( typeof item.onChange === 'function' ) {
+			item.onChange();
+		}
+
+	}
+
+	render() {
+		return (
+			<div>
+				{ this.props.items.map( ( item, i ) =>
+					<AUcheckbox
+						key={ i }
+						dark={ this.props.dark }
+						alt={ this.props.alt }
+						label={ item.label }
+						name={ this.props.name }
+						className={ item.className }
+						id={ item.id }
+						block = { this.props.block }
+						full={ this.props.full }
+						value={ item.value }
+						required={ this.required }
+						disabled={ item.disabled }
+						checked={ this.state[ item.value ] }
+						status = { item.status }
+						onChange={ () => {
+							this.toggleCheckBox(item);
+						} }
+						className={ item.className }
+					/>
+				) }
+			</div>
+		);
+	};
+}
+AUcheckboxList.propTypes = {
+	items: PropTypes.arrayOf(
+		PropTypes.shape({
+			label: PropTypes.string.isRequired,
+			value: PropTypes.string.isRequired,
+			className: PropTypes.string,
+			checked: PropTypes.bool,
+			disabled: PropTypes.bool,
+			status: PropTypes.string,
+			onChange: PropTypes.func
+		})).isRequired,
+		name: PropTypes.string.isRequired,
+		dark: PropTypes.bool,
+		alt: PropTypes.bool,
+}