Add themr to AppBar

Author: javivelasco

.babelrc

@@ -16,4 +16,4 @@
       ]
     }
   }
-}
+}

components/app_bar/AppBar.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
 
-const AppBar = (props) => {
-  const className = ClassNames(style.root, {
-    [style.fixed]: props.fixed,
-    [style.flat]: props.flat
+const AppBar = ({ theme, ...props }) => {
+  const className = classnames(theme.appBar, {
+    [theme.fixed]: props.fixed,
+    [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,21 +4,29 @@ 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|
 |:-----|:-----|:-----|:-----|
 | `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/style.scss 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,47 +30,45 @@ import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
 import style from './style';
 
-const _hrefProject = () => {
-  window.href = 'http://react-toolbox';
-};
-
 const Root = () => (
-  <div className={style.app}>
-    <AppBarToolbox fixed flat className={style.appbar}>
-      <h1>React Toolbox <small>Spec {VERSION}</small></h1>
-      <ButtonToolbox
-        accent
-        className={style.github}
-        icon='web'
-        floating
-        onClick={_hrefProject}
-      />
-    </AppBarToolbox>
+  <ThemeProvider theme={theme}>
+    <div className={style.app}>
+      <AppBarToolbox className={style.appbar} fixed flat>
+        <h1>React Toolbox <small>Spec {VERSION}</small></h1>
+        <ButtonToolbox
+          accent
+          className={style.github}
+          icon='web'
+          floating
+          onClick={() => {window.href = 'http://react-toolbox';}}
+        />
+      </AppBarToolbox>
 
-    <Autocomplete />
-    <Avatar />
-    <Button />
-    <Card />
-    <Checkbox />
-    <Chip />
-    <Dialog />
-    <Drawer />
-    <Dropdown />
-    <IconMenu />
-    <Input />
-    <Layout />
-    <List />
-    <Menu />
-    <Pickers />
-    <Progress />
-    <Radio />
-    <Slider />
-    <Snackbar />
-    <Switch />
-    <Table />
-    <Tabs />
-    <Tooltip />
-  </div>
+      <Autocomplete />
+      <Avatar />
+      <Button />
+      <Card />
+      <Checkbox />
+      <Chip />
+      <Dialog />
+      <Drawer />
+      <Dropdown />
+      <IconMenu />
+      <Input />
+      <Layout />
+      <List />
+      <Menu />
+      <Pickers />
+      <Progress />
+      <Radio />
+      <Slider />
+      <Snackbar />
+      <Switch />
+      <Table />
+      <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

@@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   context: __dirname,
-	devtool: 'inline-source-map',
+  devtool: 'inline-source-map',
   entry: [
     'webpack-hot-middleware/client',
     './spec/index.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')