From 616003522e156c5c7ef51c6db12741b662501f38 Mon Sep 17 00:00:00 2001
From: Mitya Kononov <mytcat@gmail.com>
Date: Fri, 9 Sep 2016 21:50:27 +0300
Subject: [PATCH 1/2] AvatarCheckbox added

---
 components/avatarcheckbox/AvatarCheckbox.js | 69 +++++++++++++++++++++
 components/avatarcheckbox/index.js          | 10 +++
 components/avatarcheckbox/theme.scss        |  0
 components/identifiers.js                   |  1 +
 package.json                                |  1 +
 spec/root.js                                | 11 ++--
 6 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 components/avatarcheckbox/AvatarCheckbox.js
 create mode 100644 components/avatarcheckbox/index.js
 create mode 100644 components/avatarcheckbox/theme.scss

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 (
+                    <div style={{width: '56px', height: '56px'}}>
+                        <Button
+                            icon='check'
+                            floating
+                            accent
+                            onClick={this.onButtonClick.bind(this)}
+                        />
+                    </div>
+                );
+            }
+
+            return (
+                <div style={{width: '56px', height: '56px'}}>
+                    <Button
+                        style={{backgroundImage: 'url(' + this.props.avatar + ')', backgroundSize: 'cover'}}
+                        floating
+                        onClick={this.onButtonClick.bind(this)}
+                    />
+                </div>
+            );
+        }
+    }
+    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/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 = () => (
                 <Button label="Action 2"/>
             </CardActions>
         </section>
+        <section>
+            <h5>Avatar checked/uncheked</h5>
+            <AvatarCheckbox avatar="https://dl.dropboxusercontent.com/u/53778939/jack_sparrow.png" />
+        </section>
         <section>
             <h5>Dialog with image</h5>
             <DialogWithImage imageCapture="http://qa.live4.io/s/1751/live4/img/logo.svg"

From 3126ebe178a48624adabbbfc60d27843c16fd8ba Mon Sep 17 00:00:00 2001
From: Mitya Kononov <mytcat@gmail.com>
Date: Mon, 12 Sep 2016 17:38:15 +0300
Subject: [PATCH 2/2] Add comments

---
 components/cardexpandable/CardExpandable.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

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)
         };