Add themr to AppBar

components/app_bar/AppBar.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import { themr } from 'react-css-themr';
-import style from './style';
+import classnames from 'classnames';
 
-const AppBar = (props) => {
+const AppBar = ({ theme, ...props }) => {
-  const className = ClassNames(style.root, {
+  const className = classnames(theme.appBar, {
-    [style.fixed]: props.fixed,
+    [theme.fixed]: props.fixed,
-    [style.flat]: props.flat
+    [theme.flat]: props.flat
   }, props.className);
 
   return (
@@ -19,7 +19,12 @@ AppBar.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool
+  flat: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    appBar: React.PropTypes.string.isRequired,
+    fixed: React.PropTypes.string.isRequired,
+    flat: React.PropTypes.string.isRequired
+  })
 };
 
 AppBar.defaultProps = {
@@ -28,4 +33,4 @@ AppBar.defaultProps = {
   flat: false
 };
 
-export default AppBar;
+export default themr('ToolboxAppBar')(AppBar);

components/app_bar/readme.md

@@ -4,17 +4,16 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
+import theme from 'react-toolbox/lib/app_bar/style';
 
 const AppBarTest = () => (
-  <AppBar fixed flat>
+  <AppBar theme={theme} fixed flat>
     <a href="/home">React Toolbox Docs</a>
     <Navigation />
   </AppBar>
 );
 ```
 
-Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
-
 ## Properties
 
 | Name          | Type    | Default  | Description|
@@ -22,3 +21,12 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
 | `className` | `String`  | `''`     | Set a class for the root component.|
 | `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
+| `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theme interface
+
+| Name     | Description|
+|:---------|:-----------|
+| `appBar` | Root class.|
+| `fixed`  | Implemented when the app bar is fixed.|
+| `flat`   | Implemented when the app bar is flat.|

components/app_bar/theme.scss

@@ -1,7 +1,7 @@
 @import "../base";
 @import "./config";
 
-.root {
+.appBar {
   display: flex;
   height: $appbar-height;
   align-items: center;

package.json

@@ -36,7 +36,8 @@
     "toolkit"
   ],
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "react-css-themr": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",

spec/root.js

@@ -1,5 +1,8 @@
 /* global VERSION */
 import React from 'react';
+import { ThemeProvider } from 'react-css-themr';
+import theme from './theme';
+
 import AppBarToolbox from '../components/app_bar';
 import Avatar from './components/avatar';
 import ButtonToolbox from '../components/button';
@@ -27,20 +30,17 @@ import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
 import style from './style';
 
-const _hrefProject = () => {
-  window.href = 'http://react-toolbox';
-};
-
 const Root = () => (
+  <ThemeProvider theme={theme}>
     <div className={style.app}>
-    <AppBarToolbox fixed flat className={style.appbar}>
+      <AppBarToolbox className={style.appbar} fixed flat>
         <h1>React Toolbox <small>Spec {VERSION}</small></h1>
         <ButtonToolbox
           accent
           className={style.github}
           icon='web'
           floating
-        onClick={_hrefProject}
+          onClick={() => {window.href = 'http://react-toolbox';}}
         />
       </AppBarToolbox>
 
@@ -68,6 +68,7 @@ const Root = () => (
       <Tabs />
       <Tooltip />
     </div>
+  </ThemeProvider>
 );
 
 export default Root;

spec/theme.js

@@ -0,0 +1,3 @@
+import ToolboxAppBar from '../components/app_bar/theme.scss';
+
+export default { ToolboxAppBar };

webpack.config.development.js

@@ -25,7 +25,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        exclude: /(node_modules)/
+        exclude: [/(node_modules)/, /react-css-themr/]
       }, {
         test: /\.(scss|css)$/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')