diff --git a/packages/control-input/CHANGELOG.md b/packages/control-input/CHANGELOG.md
index a23b79137..e35042fea 100644
--- a/packages/control-input/CHANGELOG.md
+++ b/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
diff --git a/packages/control-input/README.md b/packages/control-input/README.md
index 2cbfac142..132fb2e2b 100644
--- a/packages/control-input/README.md
+++ b/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
diff --git a/packages/control-input/package.json b/packages/control-input/package.json
index 181b5cd03..3e8cdcf3d 100644
--- a/packages/control-input/package.json
+++ b/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",
diff --git a/packages/control-input/src/js/react.js b/packages/control-input/src/js/react.js
index c824062b7..7482504ee 100644
--- a/packages/control-input/src/js/react.js
+++ b/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 (
+
+ { this.props.items.map( ( item, i ) =>
+
{
+ this.toggleRadioBox( item );
+ } }
+ className={ item.className }
+ />
+ ) }
+
+ { this.props.items.map( ( item, i ) =>
+
{
+ this.toggleCheckBox(item);
+ } }
+ className={ item.className }
+ />
+ ) }
+
- { this.props.items.map( ( item, i ) =>
-
{
- this.setState({ radio: item.value });
-
- if( typeof item.onChange === 'function' ) {
- item.onChange();
- }
- } }
- className={ item.className }
- />
- ) }
-
- { this.props.items.map( ( item, i ) =>
-
{
- this.setState({ [item.value]: !this.state[ item.value ] });
-
- if( typeof item.onChange === 'function' ) {
- item.onChange();
- }
- } }
- className={ item.className }
- />
- ) }
+
+
+
checkboxes
+
+
+
+
+
radio buttons
+
+
+
+
+
control-inputs --dark --block
+
+
+
+
+
+
control-inputs --small
+
+
+
+
+
+
invalid checkboxes with and without classes
+
+
+
+
+
+
invalid radio buttons with and without classes
+
+
+
+
+
+
control-inputs with onChange
+
+
{ console.log('This function will run when the first checkbox is changed') },
+ },
+ {
+ label: 'Tablet',
+ value: 'tablet',
+ checked: true,
+ onChange: () => { console.log('This function will run when the second checkbox is changed') },
+ },
+ ]} />
+
+
+
+ { console.log('This function will run when the first radio button is changed') },
+ },
+ {
+ label: 'Maybe',
+ value: 'maybe',
+ onChange: () => { console.log('This function will run when the second radio button is changed') },
+ },
+ ]} />
+
+
+ control-inputs with callback for any toggle
+
+
+
+
+
+
checkboxes --dark
+
+
+
+
+
radio buttons --dark
+
+
+
+
+
control-inputs --dark --block
+
+
+
+
+
+
control-inputs --dark --small
+
+
+
+
+
+
invalid checkboxes with and without classes --dark
+
+
+
+
+
+
invalid radio buttons with and without classes --dark
+
+
+
+
+
+
checkboxes --alt
+
+
+
+
+
radio buttons --alt
+
+
+
+
+
control-inputs --alt --block
+
+
+
+
+
+
control-inputs --alt --small
+
+
+
+
+
+
invalid checkboxes with and without classes --alt
+
+
+
+
+
+
invalid radio buttons with and without classes --alt
+
+
+
+
+
checkboxes --alt --dark
+
+
+
+
+
radio buttons --alt --dark
+
+
+
+
+
control-inputs --alt --dark --block
+
+
+
+
+
+
control-inputs --alt --dark --small
+
+
+
+
+
+
invalid checkboxes with and without classes --alt --dark
+
+
+
+
+
+
invalid radio buttons with and without classes --alt --dark
+
+
+
+
-
-
-
checkboxes
-
-
-
-
-
radio buttons
-
-
-
-
-
control-inputs --dark --block
-
-
-
-
-
-
control-inputs --small
-
-
-
-
-
-
invalid checkboxes with and without classes
-
-
-
-
-
-
invalid radio buttons with and without classes
-
-
-
-
-
-
control-inputs with onChange
-
-
{ console.log('This function will run when the first checkbox is changed') },
- },
- {
- label: 'Tablet',
- value: 'tablet',
- checked: true,
- onChange: () => { console.log('This function will run when the second checkbox is changed') },
- },
- ]} />
-
-
-
- { console.log('This function will run when the first radio button is changed') },
- },
- {
- label: 'Maybe',
- value: 'maybe',
- onChange: () => { console.log('This function will run when the second radio button is changed') },
- },
- ]} />
-
-
-
checkboxes --dark
-
-
-
-
-
radio buttons --dark
-
-
-
-
-
control-inputs --dark --block
-
-
-
-
-
-
control-inputs --dark --small
-
-
-
-
-
-
invalid checkboxes with and without classes --dark
-
-
-
-
-
-
invalid radio buttons with and without classes --dark
-
-
-
-
-
-
-
checkboxes --alt
-
-
-
-
-
radio buttons --alt
-
-
-
-
-
control-inputs --alt --block
-
-
-
-
-
-
control-inputs --alt --small
-
-
-
-
-
-
invalid checkboxes with and without classes --alt
-
-
-
-
-
-
invalid radio buttons with and without classes --alt
-
-
-
-
-
checkboxes --alt --dark
-
-
-
-
-
radio buttons --alt --dark
-
-
-
-
-
control-inputs --alt --dark --block
-
-
-
-
-
-
control-inputs --alt --dark --small
-
-
-
-
-
-
invalid checkboxes with and without classes --alt --dark
-
-
-
-
-
-
invalid radio buttons with and without classes --alt --dark
-
-
-
-
-