diff --git a/components/avatarcheckbox/AvatarCheckbox.js b/components/avatarcheckbox/AvatarCheckbox.js
new file mode 100644
index 0000000..f2e3576
--- /dev/null
+++ b/components/avatarcheckbox/AvatarCheckbox.js
@@ -0,0 +1,69 @@
+import React, {PropTypes} from 'react';
+import {Button} from 'react-toolbox/lib/button';
+import Checkbox from 'react-toolbox/lib/checkbox';
+import {themr} from 'react-css-themr';
+import {AVATARCHECKBOX} from '../identifiers';
+
+const factory = (props) => {
+ class AvatarCheckbox extends Checkbox {
+ state = {checked: false};
+
+ static propTypes = {
+ avatar: PropTypes.string,
+ checked: PropTypes.bool,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ label: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node
+ ]),
+ name: PropTypes.string,
+ onChange: PropTypes.func,
+ theme: PropTypes.shape({
+ disabled: PropTypes.string,
+ field: PropTypes.string,
+ input: PropTypes.string,
+ ripple: PropTypes.string
+ })
+ };
+
+ onButtonClick = function () {
+ this.state.checked = !this.state.checked;
+ this.setState(this.state);
+ if (this.props.onChange) {
+ this.props.onChange(this.state.checked);
+ }
+ };
+
+ render () {
+ if (this.state.checked) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ }
+ }
+ return AvatarCheckbox;
+};
+
+const Avatarcheckbox = factory();
+export default themr(AVATARCHECKBOX)(Avatarcheckbox);
+export {factory as avatarcheckboxFactory};
+export {Avatarcheckbox};
diff --git a/components/avatarcheckbox/index.js b/components/avatarcheckbox/index.js
new file mode 100644
index 0000000..a11cd4b
--- /dev/null
+++ b/components/avatarcheckbox/index.js
@@ -0,0 +1,10 @@
+import { themr } from 'react-css-themr';
+import { AVATARCHECKBOX } from '../identifiers.js';
+import { avatarcheckboxFactory } from './AvatarCheckbox.js';
+import theme from './theme.scss';
+
+const Avatarbutton = avatarcheckboxFactory();
+const ThemedAvatarbutton = themr(AVATARCHECKBOX, theme)(Avatarbutton);
+
+export default ThemedAvatarbutton;
+export { ThemedAvatarbutton as Avatarbutton };
diff --git a/components/avatarcheckbox/theme.scss b/components/avatarcheckbox/theme.scss
new file mode 100644
index 0000000..e69de29
diff --git a/components/cardexpandable/CardExpandable.js b/components/cardexpandable/CardExpandable.js
index c270151..e45df89 100644
--- a/components/cardexpandable/CardExpandable.js
+++ b/components/cardexpandable/CardExpandable.js
@@ -9,9 +9,24 @@ import {CARD_EXPANDABLE} from '../identifiers';
const factory = () => {
class CardExpandable extends Component {
static propTypes = {
+ /**
+ * Children to pass through the component.
+ */
children: PropTypes.any,
+
+ /**
+ * Additional styling.
+ */
primary: PropTypes.bool,
+
+ /**
+ * Sets card title.
+ */
title: PropTypes.string,
+
+ /**
+ * Sets card buttons title.
+ */
titleButtons: PropTypes.arrayOf(ButtonProps)
};
diff --git a/components/identifiers.js b/components/identifiers.js
index bb25383..a65e476 100644
--- a/components/identifiers.js
+++ b/components/identifiers.js
@@ -1,4 +1,5 @@
export const AVATAR_OVERLAY = 'AvatarOverlay';
+export const AVATARCHECKBOX = 'AvatarCheckbox';
export const BANNER = 'Banner';
export const BOTTOMSHEET = 'BottomSheet';
export const BOTTOMSHEET_PLUS = 'BottomSheetPlus';
diff --git a/package.json b/package.json
index db38291..9922e8b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"dependencies": {
"classnames": "^2.2.5",
"core-js": "^2.4.0",
+ "immutability-helper": "^2.0.0",
"normalize.css": "^4.2.0",
"react": "^15.3.0",
"react-addons-css-transition-group": "^15.3.0",
diff --git a/spec/root.js b/spec/root.js
index 024f5c5..04cd6a2 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -1,12 +1,14 @@
/* global VERSION */
import 'react-toolbox/lib/commons.scss';
import Avatar from 'react-toolbox/lib/avatar';
+import AvatarCheckbox from '../components/avatarcheckbox';
import ButtonGroup from '../components/buttongroup';
import CardActionsRight from '../components/cardactionsright/index';
import CardActionsSpaced from '../components/cardactionsspaced/index';
import CardExpandable from './components/cardexpandable';
import CardMediaPlusTest from './components/cardMediaTest';
import CardTitleButtonsTest from './components/cardTitleButtonsTest';
+import Checkbox from 'react-toolbox/lib/checkbox';
import Checkmark from '../components/checkmark/Checkmark';
import ChipTransparent from '../components/chips';
import DialogLayout from './components/DialogLayoutTest';
@@ -34,10 +36,7 @@ import {StatusComponent} from '../components/status-component';
import {StyledInput} from '../components/input-addons';
import {TestStream} from './components/TestStream';
-const actions = [
- {label: 'Cancel'},
- {label: 'Save'}
-];
+
const Root = () => (
@@ -124,6 +123,10 @@ const Root = () => (
+
+ Avatar checked/uncheked
+
+