Card expandable bridge

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

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

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

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';

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",

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"