Warn about future changes to onChange callback [WIP]

components/app-launcher/__docs__/storybook-stories.jsx

@@ -10,7 +10,7 @@ import AppLauncherTile from '../../app-launcher/tile';
 import AppLauncherSection from '../../app-launcher/section';
 import Icon from '../../icon';
 import Button from '../../button';
-import Search from '../../forms/input/search';
+import Search from '../../input/search';
 
 import GlobalNavigationBar from '../../global-navigation-bar';
 import GlobalNavigationBarRegion from '../../global-navigation-bar/region';

components/app-launcher/__examples__/default.jsx

@@ -9,7 +9,7 @@ import GlobalNavigationBarRegion from '~/components/global-navigation-bar/region
 
 import Icon from '~/components/icon';
 import Button from '~/components/button';
-import Search from '~/components/forms/input/search';
+import Search from '~/components/input/search';
 import IconSettings from '~/components/icon-settings';
 
 const Example = createReactClass({

components/app-launcher/__tests__/app-launcher.browser-test.jsx

@@ -10,7 +10,7 @@ import IconSettings from '../../icon-settings';
 import AppLauncher from '../../app-launcher';
 import AppLauncherTile from '../../app-launcher/tile';
 import AppLauncherSection from '../../app-launcher/section';
-import Search from '../../forms/input/search';
+import Search from '../../input/search';
 import Button from '../../button';
 
 /* eslint-disable react/no-find-dom-node */

components/app-launcher/index.jsx

@@ -111,7 +111,7 @@ const AppLauncher = createReactClass({
 		 */
 		onClose: PropTypes.func,
 		/**
-		 * Search bar for the Modal's header. Will typically be an instance of `design-system-react/forms/input/search`
+		 * Search bar for the Modal's header. Will typically be an instance of `design-system-react/input/search`
 		 */
 		search: PropTypes.node,
 		/**
@@ -147,15 +147,15 @@ const AppLauncher = createReactClass({
 		this.setState({ isOpen: true });
 
 		if (isFunction(this.props.triggerOnClick)) {
-			this.props.triggerOnClick(event);
+			this.props.triggerOnClick(event, {});
 		}
 	},
 
 	closeAppLauncher (event) {
 		this.setState({ isOpen: false });
 
 		if (isFunction(this.props.onClose)) {
-			this.props.onClose(event);
+			this.props.onClose(event, {});
 		}
 	},
 

components/app-launcher/section.jsx

@@ -77,7 +77,7 @@ const AppLauncherSection = createReactClass({
 		this.setState({ isOpen: !this.state.isOpen });
 
 		if (isFunction(this.props.onToggleClick)) {
-			this.props.onToggleClick(event);
+			this.props.onToggleClick(event, {});
 		}
 	},
 

components/button-group/__examples__/checkbox-error.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import ButtonGroup from '~/components/button-group';
-import Checkbox from '~/components/forms/checkbox';
+import Checkbox from '~/components/checkbox';
 
 const Example = createReactClass({
 	displayName: 'ButtonGroupExample',

components/button-group/__examples__/checkbox.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import ButtonGroup from '~/components/button-group';
-import Checkbox from '~/components/forms/checkbox';
+import Checkbox from '~/components/checkbox';
 
 const Example = createReactClass({
 	displayName: 'ButtonGroupExample',

components/button/index.jsx

@@ -251,7 +251,7 @@ const Button = createReactClass({
 
 	handleClick (event) {
 		if (this.props.onClick) {
-			this.props.onClick(event);
+			this.props.onClick(event, {});
 		}
 	},
 

components/card/filter.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Input from '../forms/input';
+import Input from '../input';
 import InputIcon from '../icon/input-icon';
 
 import { CARD_FILTER } from '../../utilities/constants';

components/forms/checkbox/__docs__/storybook-stories.jsx → components/checkbox/__docs__/storybook-stories.jsx

@@ -1,24 +1,24 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
-import { storiesOf, action } from '@storybook/react';
-import IconSettings from '../../../icon-settings';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import IconSettings from '../../icon-settings';
 
-import { FORMS_CHECKBOX } from '../../../../utilities/constants';
+import { FORMS_CHECKBOX } from '../../../utilities/constants';
 import Checkbox from '../';
-import Button from '../../../button';
+import Button from '../../button';
 
-const CheckboxIndeterminate = createReactClass({
-	displayName: `${FORMS_CHECKBOX}_INDETERMINATE`,
+import DefaultCheckbox from '../__examples__/default';
 
-	getInitialState () {
-		return {
-			indeterminate: true,
-			checked: true,
-			currentStateHelper: 'Indeterminate',
-		};
-	},
+class CheckboxIndeterminate extends React.Component {
+	static displayName = `${FORMS_CHECKBOX}_INDETERMINATE`;
+
+	state = {
+		indeterminate: true,
+		checked: true,
+		currentStateHelper: 'Indeterminate',
+	};
 
-	handleChange (checked, event, data) {
+	handleChange = (checked, event, data) => {
 		const checkedLabel = data.checked ? 'Checked' : 'Unchecked';
 		this.setState({
 			checked: data.checked,
@@ -32,9 +32,9 @@ const CheckboxIndeterminate = createReactClass({
 			`checked: ${data.checked},
 			indeterminate: ${data.indeterminate}`
 		);
-	},
+	};
 
-	changeToIndeterminate (event) {
+	changeToIndeterminate = (event) => {
 		this.setState({
 			currentStateHelper: 'Indeterminate',
 			checked: true,
@@ -44,25 +44,25 @@ const CheckboxIndeterminate = createReactClass({
 			event,
 			'checked: true, indeterminate: true'
 		);
-	},
+	};
 
-	changeToCheck (event) {
+	changeToCheck = (event) => {
 		this.setState({
 			currentStateHelper: 'Checked',
 			checked: true,
 			indeterminate: false,
 		});
 		action('changeToCheck')(event, 'checked: true, indeterminate: false');
-	},
+	};
 
-	changeToUnChecked (event) {
+	changeToUnChecked = (event) => {
 		this.setState({
 			currentStateHelper: 'Unchecked',
 			checked: false,
 			indeterminate: false,
 		});
 		action('changeToUnChecked')(event, 'checked: false, indeterminate: false');
-	},
+	};
 
 	render () {
 		return (
@@ -74,7 +74,9 @@ const CheckboxIndeterminate = createReactClass({
 					<strong>Current State:</strong> {this.state.currentStateHelper}
 				</p>
 				<Checkbox
-					assistiveText="Checkbox (indeterminate)"
+					assistiveText={{
+						label: 'Checkbox (indeterminate)',
+					}}
 					label="Checkbox Label"
 					name="checkbox-example-standard-indeterminate"
 					checked={this.state.checked}
@@ -101,63 +103,31 @@ const CheckboxIndeterminate = createReactClass({
 				</div>
 			</div>
 		);
-	},
-});
+	}
+}
 
 storiesOf(FORMS_CHECKBOX, module)
 	.addDecorator((getStory) => (
 		<div className="slds-p-around--medium">
 			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
 		</div>
 	))
-	.add('Checkbox', () => (
-		<Checkbox
-			label="Checkbox Label"
-			name="checkbox-example-base"
-			onChange={action('change')}
-			onBlur={(e) => {
-				console.log('bluring ', e.target);
-			}}
-		/>
-	))
-	.add('Checkbox (with error)', () => (
-		<Checkbox
-			label="Checkbox Label"
-			name="checkbox-example-base-error"
-			errorText="This field has an error."
-			onChange={action('change')}
-			onBlur={(e) => {
-				console.log('bluring ', e.target);
-			}}
-		/>
-	))
-	.add('Checkbox (required)', () => (
-		<Checkbox
-			label="Checkbox Label"
-			name="checkbox-example-base-required"
-			onChange={action('change')}
-			required
-		/>
-	))
-	.add('Checkbox (disabled)', () => (
-		<Checkbox
-			label="Checkbox Label"
-			name="checkbox-example-base-disabled"
-			onChange={action('change')}
-			disabled
-		/>
+	.add('Checkbox (default, indeterminate, required, disabled', () => (
+		<DefaultCheckbox />
 	))
 	.add('Checkbox (assistive text)', () => (
 		<div>
 			<Checkbox
-				assistiveText="This is my checkbox.
+				assistiveText={{
+					label: `This is my checkbox.
 							There are many like it, but this one is mine.
 							My checkbox is my best friend.
 							It is my life.
 							I must master it as I must master my life.
 							Without me, my checkbox is useless. Without my checkbox, I am useless.
 							I must make my checkbox true.
-							I must make it truer than my radio button who is trying to... "
+							I must make it truer than my radio button who is trying to... `,
+				}}
 				label="Checkbox Label"
 				name="checkbox-example-base-assistiveText"
 				onChange={action('change')}
@@ -236,14 +206,16 @@ storiesOf(FORMS_CHECKBOX, module)
 	.add('Checkbox Toggle (assistive text)', () => (
 		<div>
 			<Checkbox
-				assistiveText="This is my checkbox.
+				assistiveText={{
+					label: `This is my checkbox.
 							There are many like it, but this one is mine.
 							My checkbox is my best friend.
 							It is my life.
 							I must master it as I must master my life.
 							Without me, my checkbox is useless. Without my checkbox, I am useless.
 							I must make my checkbox true.
-							I must make it truer than my radio button who is trying to... "
+							I must make it truer than my radio button who is trying to... `,
+				}}
 				label="Checkbox Label"
 				name="checkbox-example-base-assistiveText"
 				onChange={action('change')}

components/checkbox/__examples__/default.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+// `~` is replaced with design-system-react at runtime
+import IconSettings from '~/components/icon-settings';
+import Checkbox from '~/components/checkbox';
+
+class Example extends React.Component {
+	static displayName = 'CheckboxExample';
+
+	render () {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="slds-grid slds-grid--pull-padded slds-grid--vertical-align-center">
+					<div className="slds-col--padded">
+						<Checkbox
+							assistiveText={{
+								label: 'Default',
+							}}
+							labels={{
+								label: 'Default',
+							}}
+							onChange={(e) => {
+								console.log('onChange ', e.target);
+							}}
+						/>
+					</div>
+					<div className="slds-col--padded">
+						<Checkbox
+							assistiveText={{
+								label: 'Indeterminate',
+							}}
+							indeterminate
+							labels={{
+								label: 'Indeterminate',
+							}}
+							onChange={(e) => {
+								console.log('onChange ', e.target);
+							}}
+						/>
+					</div>
+					<div className="slds-col--padded">
+						<Checkbox
+							assistiveText={{
+								label: 'Indeterminate',
+							}}
+							labels={{
+								label: 'Required',
+							}}
+							required
+							onChange={(e) => {
+								console.log('onChange ', e.target);
+							}}
+						/>
+					</div>
+					<div className="slds-col--padded">
+						<Checkbox
+							assistiveText={{
+								label: 'Disabled',
+							}}
+							labels={{
+								label: 'Disabled',
+							}}
+							disabled
+							onChange={(e) => {
+								console.log('onChange ', e.target);
+							}}
+						/>
+					</div>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/forms/checkbox/__examples__/error.jsx → components/checkbox/__examples__/error.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
+// `~` is replaced with design-system-react at runtime
 import IconSettings from '~/components/icon-settings';
-import Checkbox from '~/components/forms/checkbox'; // `~` is replaced with design-system-react at runtime
-
-const Example = createReactClass({
-	displayName: 'CheckboxExample',
+import Checkbox from '~/components/checkbox';
 
+class Example extends React.Component {
 	render () {
 		return (
 			<IconSettings iconPath="/assets/icons">
@@ -19,7 +17,9 @@ const Example = createReactClass({
 					</div>
 					<div className="slds-col--padded">
 						<Checkbox
-							assistiveText="Indeterminate"
+							assistiveText={{
+								label: 'Indeterminate',
+							}}
 							indeterminate
 							label="Indeterminate"
 						/>
@@ -33,7 +33,9 @@ const Example = createReactClass({
 				</div>
 			</IconSettings>
 		);
-	},
-});
+	}
+}
+
+Example.displayName = 'CheckboxExample';
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime