Rename LoadButton and add docs

src/components/menu-bar/menu-bar.jsx

@@ -8,7 +8,7 @@ import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import LanguageSelector from '../../containers/language-selector.jsx';
-import LoadButton from '../../containers/load-button.jsx';
+import ProjectLoader from '../../containers/project-loader.jsx';
 import Menu from '../../containers/menu.jsx';
 import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import ProjectSaver from '../../containers/project-saver.jsx';
@@ -138,7 +138,7 @@ const MenuBar = props => (
                             </MenuItemTooltip>
                         </MenuSection>
                         <MenuSection>
-                            <LoadButton>{(renderFileInput, loadProject, loadProps) => (
+                            <ProjectLoader>{(renderFileInput, loadProject, loadProps) => (
                                 <MenuItem
                                     onClick={loadProject}
                                     {...loadProps}
@@ -146,7 +146,7 @@ const MenuBar = props => (
                                     Upload from your computer
                                     {renderFileInput()}
                                 </MenuItem>
-                            )}</LoadButton>
+                            )}</ProjectLoader>
                             <ProjectSaver>{(saveProject, saveProps) => (
                                 <MenuItem
                                     onClick={saveProject}

src/containers/load-button.jsx → src/containers/project-loader.jsx

@@ -8,7 +8,23 @@ import {
     closeLoadingProject
 } from '../reducers/modals';
 
-class LoadButton extends React.Component {
+/**
+ * Project loader component passes a file input, load handler and props to its child.
+ * It expects this child to be a function with the signature
+ *     function (renderFileInput, loadProject, props) {}
+ * The component can then be used to attach project loading functionality
+ * to any other component:
+ *
+ * <ProjectLoader>{(renderFileInput, loadProject, props) => (
+ *     <MyCoolComponent
+ *         onClick={loadProject}
+ *         {...props}
+ *     >
+ *         {renderFileInput()}
+ *     </MyCoolComponent>
+ * )}</ProjectLoader>
+ */
+class ProjectLoader extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -74,7 +90,7 @@ class LoadButton extends React.Component {
     }
 }
 
-LoadButton.propTypes = {
+ProjectLoader.propTypes = {
     children: PropTypes.func,
     closeLoadingState: PropTypes.func,
     openLoadingState: PropTypes.func,
@@ -95,4 +111,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(LoadButton);
+)(ProjectLoader);