From 5ed034e9781dd69924737ed2c97cdf5ce2d04679 Mon Sep 17 00:00:00 2001 From: sukhrajghuman Date: Thu, 8 Nov 2018 12:46:59 +1100 Subject: [PATCH 1/5] First commit --- packages/control-input/src/js/react.js | 97 +++++ packages/control-input/tests/react/index.js | 424 +------------------- 2 files changed, 101 insertions(+), 420 deletions(-) diff --git a/packages/control-input/src/js/react.js b/packages/control-input/src/js/react.js index c824062b7..8056c6192 100644 --- a/packages/control-input/src/js/react.js +++ b/packages/control-input/src/js/react.js @@ -97,3 +97,100 @@ AUradio.propTypes = { status: PropTypes.oneOf([ 'valid', 'invalid' ]), className: PropTypes.string, }; + + +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 ); + + // set the default select state + let radioState = ''; + this.props.items.map( item => item.checked ? radioState = item.value : '' ); + this.state = { + radio: radioState, + }; + } + + toggleRadioBox(radio) { + // this.props.toggleRadioBox(radio); + console.log(radio); + } + + render() { + return ( +
+ { this.props.items.map( ( item, i ) => + { + this.toggleRadioBox(item.value); + } } + className={ item.className } + /> + ) } +
+ ); + }; +} + +AURadioList.propTypes = { + +} + + + +// to test a nice list of checkboxs +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 = (checkboxValue) => { + // this.props.updateCheckbox(checkboxValue); + // } + + render() { + return ( +
+ { this.props.items.map( ( item, i ) => + { + // this.toggleCheckBox(item.value); + // } } + className={ item.className } + /> + ) } +
+ ); + }; +} diff --git a/packages/control-input/tests/react/index.js b/packages/control-input/tests/react/index.js index d3b0c73e0..f930ab65f 100644 --- a/packages/control-input/tests/react/index.js +++ b/packages/control-input/tests/react/index.js @@ -1,138 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { AUcheckbox, AUradio } from './control-input.js'; +import { AUcheckbox, AUradio, AURadioList, AUcheckboxList } from './control-input.js'; -// to test a nice list of radio buttons -class RadioList 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 radioState = ''; - this.props.items.map( item => item.checked ? radioState = item.value : '' ); - - this.state = { - radio: radioState, - }; - } - - render() { - return ( -
- { this.props.items.map( ( item, i ) => - { - this.setState({ radio: item.value }); - - if( typeof item.onChange === 'function' ) { - item.onChange(); - } - } } - className={ item.className } - /> - ) } -
- ); - }; -} - - -// to test a nice list of checkboxs -class CheckboxList 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; - } - - render() { - return ( -
- { this.props.items.map( ( item, i ) => - { - this.setState({ [item.value]: !this.state[ item.value ] }); - - if( typeof item.onChange === 'function' ) { - item.onChange(); - } - } } - className={ item.className } - /> - ) } -
- ); - }; -} +// to test a nice list of radio button ReactDOM.render(
-

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

- - -
+
, From 4b6f0c0daa678b1fab83361e4d39ad4b0bcc7dc5 Mon Sep 17 00:00:00 2001 From: sukhrajghuman Date: Thu, 8 Nov 2018 14:45:07 +1100 Subject: [PATCH 2/5] Add proptypes, update checkbox list --- packages/control-input/src/js/react.js | 69 +++++++++++++++++---- packages/control-input/tests/react/index.js | 20 ++++-- 2 files changed, 72 insertions(+), 17 deletions(-) diff --git a/packages/control-input/src/js/react.js b/packages/control-input/src/js/react.js index 8056c6192..05da934c1 100644 --- a/packages/control-input/src/js/react.js +++ b/packages/control-input/src/js/react.js @@ -104,17 +104,24 @@ export class AURadioList extends React.Component { constructor( props ) { super( props ); - // set the default select state let radioState = ''; this.props.items.map( item => item.checked ? radioState = item.value : '' ); + this.state = { radio: radioState, }; } - toggleRadioBox(radio) { - // this.props.toggleRadioBox(radio); - console.log(radio); + toggleRadioBox( item ) { + this.setState({ radio: item.Value }); + if ( typeof this.props.toggleRadioBox === 'function' ) { + this.props.toggleRadioBox( item.value ); + } + + if ( typeof item.onChange === 'function' ) { + item.onChange(); + } + } render() { @@ -127,6 +134,7 @@ export class AURadioList extends React.Component { 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 } @@ -134,8 +142,9 @@ export class AURadioList extends React.Component { required={ this.required } disabled={ item.disabled } checked={ this.state.radio === item.value } + status = { item.status } onChange={ () => { - this.toggleRadioBox(item.value); + this.toggleRadioBox( item ); } } className={ item.className } /> @@ -146,7 +155,18 @@ export class AURadioList extends React.Component { } AURadioList.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), + dark: PropTypes.bool, + alt: PropTypes.bool, } @@ -164,9 +184,17 @@ export class AUcheckboxList extends React.Component { this.state = checkboxState; } - // toggleCheckBox = (checkboxValue) => { - // this.props.updateCheckbox(checkboxValue); - // } + toggleCheckBox( item ) { + this.setState({ [item.value]: !this.state[ item.value ] }); + if ( typeof this.props.toggleCheckBox === 'function' ) { + this.props.toggleCheckBox( item.value ); + } + + if ( typeof item.onChange === 'function' ) { + item.onChange(); + } + + } render() { return ( @@ -178,15 +206,18 @@ export class AUcheckboxList extends React.Component { 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 ] } - // onChange={ () => { - // this.toggleCheckBox(item.value); - // } } + status = { item.status } + onChange={ () => { + this.toggleCheckBox(item); + } } className={ item.className } /> ) } @@ -194,3 +225,17 @@ export class AUcheckboxList extends React.Component { ); }; } +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), + dark: PropTypes.bool, + alt: PropTypes.bool, +} diff --git a/packages/control-input/tests/react/index.js b/packages/control-input/tests/react/index.js index f930ab65f..33162aa2c 100644 --- a/packages/control-input/tests/react/index.js +++ b/packages/control-input/tests/react/index.js @@ -6,12 +6,17 @@ import { AUcheckbox, AUradio, AURadioList, AUcheckboxList } from './control-inpu // to test a nice list of radio button +class App extends React.Component { -ReactDOM.render( -
-
+ toggleCheckBox(a) { + console.log( a ); + } + + render() { + return ( +
-
-
, + ) + } +} + +ReactDOM.render( , document.getElementById('root'), ); From 656462abe7d3e31893db0a214372320e9874dc61 Mon Sep 17 00:00:00 2001 From: sukhrajghuman Date: Thu, 8 Nov 2018 16:01:14 +1100 Subject: [PATCH 3/5] add back examples --- packages/control-input/CHANGELOG.md | 6 + packages/control-input/README.md | 1 + packages/control-input/package.json | 2 +- packages/control-input/src/js/react.js | 15 +- packages/control-input/tests/react/index.js | 400 ++++++++++++++++++-- uikit.json | 2 +- 6 files changed, 388 insertions(+), 38 deletions(-) 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 05da934c1..61b26ff50 100644 --- a/packages/control-input/src/js/react.js +++ b/packages/control-input/src/js/react.js @@ -99,7 +99,7 @@ AUradio.propTypes = { }; -export class AURadioList extends React.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 ); @@ -113,7 +113,7 @@ export class AURadioList extends React.Component { } toggleRadioBox( item ) { - this.setState({ radio: item.Value }); + this.setState({ radio: item.value }); if ( typeof this.props.toggleRadioBox === 'function' ) { this.props.toggleRadioBox( item.value ); } @@ -154,17 +154,19 @@ export class AURadioList extends React.Component { }; } -AURadioList.propTypes = { +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.string, + status: PropTypes.oneOf([ 'valid', 'invalid' ]), onChange: PropTypes.func - }).isRequired), + })).isRequired, + name: PropTypes.string.isRequired, dark: PropTypes.bool, alt: PropTypes.bool, } @@ -235,7 +237,8 @@ AUcheckboxList.propTypes = { disabled: PropTypes.bool, status: PropTypes.string, onChange: PropTypes.func - }).isRequired), + })).isRequired, + name: PropTypes.string.isRequired, dark: PropTypes.bool, alt: PropTypes.bool, } diff --git a/packages/control-input/tests/react/index.js b/packages/control-input/tests/react/index.js index 33162aa2c..a69be125b 100644 --- a/packages/control-input/tests/react/index.js +++ b/packages/control-input/tests/react/index.js @@ -1,46 +1,386 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { AUcheckbox, AUradio, AURadioList, AUcheckboxList } from './control-input.js'; +import { AUcheckbox, AUradio, AUradioList, AUcheckboxList } from './control-input.js'; -// to test a nice list of radio button + // class App extends React.Component { + constructor(props) { + super(props); + } + + toggleCheckBox( checkboxItem ) { + console.log( "This function gets ran everytime a checkbox in this list changes") + console.log( checkboxItem ); + } - toggleCheckBox(a) { - console.log( a ); + toggleRadioBox( radioItem ) { + console.log( "This function gets ran everytime a radio in this list changes") + console.log( radioItem ); } render() { return ( -
-
- +
+
+
+

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

+ + +
+
+

Checkbox - React State

+
-
+
) } } diff --git a/uikit.json b/uikit.json index 14d19ec1e..08ab155bc 100644 --- a/uikit.json +++ b/uikit.json @@ -1 +1 @@ -{"@gov.au/core":{"name":"@gov.au/core","version":"3.1.1","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"6.0.0","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.9","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.0.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"2.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"2.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^6.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"3.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.0.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file +{"@gov.au/core":{"name":"@gov.au/core","version":"3.1.1","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/accordion":{"name":"@gov.au/accordion","version":"6.0.0","peerDependencies":{"@gov.au/animate":"^1.0.0","@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/animate":{"name":"@gov.au/animate","version":"1.0.9","peerDependencies":{},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-js","@gov.au/pancake-json"],"js":{"path":"lib/js/module.js"},"sass":{"path":false,"sass-versioning":true}}},"@gov.au/body":{"name":"@gov.au/body","version":"2.0.12","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/breadcrumbs":{"name":"@gov.au/breadcrumbs","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/buttons":{"name":"@gov.au/buttons","version":"3.0.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/callout":{"name":"@gov.au/callout","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/control-input":{"name":"@gov.au/control-input","version":"2.2.0","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/cta-link":{"name":"@gov.au/cta-link","version":"2.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/direction-links":{"name":"@gov.au/direction-links","version":"2.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/footer":{"name":"@gov.au/footer","version":"3.0.1","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/grid-12":{"name":"@gov.au/grid-12","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/header":{"name":"@gov.au/header","version":"4.1.6","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/headings":{"name":"@gov.au/headings","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/inpage-nav":{"name":"@gov.au/inpage-nav","version":"3.0.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/keyword-list":{"name":"@gov.au/keyword-list","version":"3.0.2","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/link-list":{"name":"@gov.au/link-list","version":"3.0.3","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/main-nav":{"name":"@gov.au/main-nav","version":"0.2.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/page-alerts":{"name":"@gov.au/page-alerts","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/progress-indicator":{"name":"@gov.au/progress-indicator","version":"3.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/responsive-media":{"name":"@gov.au/responsive-media","version":"2.0.11","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true}}},"@gov.au/select":{"name":"@gov.au/select","version":"2.0.8","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/side-nav":{"name":"@gov.au/side-nav","version":"4.0.0","peerDependencies":{"@gov.au/core":"^3.0.0","@gov.au/animate":"^1.0.0","@gov.au/accordion":"^6.0.0","@gov.au/link-list":"^3.0.0","@gov.au/body":"^2.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-js","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"js":{"path":"lib/js/module.js"},"react":{"path":"lib/js/react.js"}}},"@gov.au/skip-link":{"name":"@gov.au/skip-link","version":"2.0.10","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/tags":{"name":"@gov.au/tags","version":"3.1.4","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}},"@gov.au/text-inputs":{"name":"@gov.au/text-inputs","version":"2.0.9","peerDependencies":{"@gov.au/core":"^3.0.0"},"pancake-module":{"version":"1.0.0","plugins":["@gov.au/pancake-sass","@gov.au/pancake-react","@gov.au/pancake-json"],"sass":{"path":"lib/sass/_module.scss","sass-versioning":true},"react":{"path":"lib/js/react.js"}}}} \ No newline at end of file From 4e3100d196d6356c9af56efa0cc8b493bf6f63a3 Mon Sep 17 00:00:00 2001 From: sukhrajghuman Date: Thu, 8 Nov 2018 16:31:15 +1100 Subject: [PATCH 4/5] Added example for react callback --- packages/control-input/tests/react/index.js | 63 +++++++++++++++++++-- 1 file changed, 59 insertions(+), 4 deletions(-) diff --git a/packages/control-input/tests/react/index.js b/packages/control-input/tests/react/index.js index a69be125b..e6564d538 100644 --- a/packages/control-input/tests/react/index.js +++ b/packages/control-input/tests/react/index.js @@ -137,10 +137,68 @@ class App extends React.Component { onChange: () => { console.log('This function will run when the second radio button is changed') }, }, ]} /> + +
+

control-inputs with callback for any toggle

+ +
+

checkboxes --dark

-
-
-

Checkbox - React State

-
) From 871baa5f102d4cbd0887bbdd6e11aa5d2fce98ad Mon Sep 17 00:00:00 2001 From: sukhrajghuman Date: Tue, 13 Nov 2018 16:12:17 +1100 Subject: [PATCH 5/5] formatting --- packages/control-input/src/js/react.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/control-input/src/js/react.js b/packages/control-input/src/js/react.js index 61b26ff50..7482504ee 100644 --- a/packages/control-input/src/js/react.js +++ b/packages/control-input/src/js/react.js @@ -99,6 +99,10 @@ AUradio.propTypes = { }; +/** + * 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 ) { @@ -114,10 +118,13 @@ export class AUradioList extends React.Component { 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(); } @@ -173,7 +180,10 @@ AUradioList.propTypes = { -// to test a nice list of checkboxs +/** + * 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 ) { @@ -188,10 +198,13 @@ export class AUcheckboxList extends React.Component { 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(); }