feat(Toolbar): create new component

src/Layout/Content.js

@@ -15,7 +15,7 @@ const Content = ({
   fixedToolbar,
   ...otherProps
 }) => {
-  const classes = classnames({ 'mdc-toolbar-fixed-adjust': fixedToolbar }, className);
+  const classes = classnames({ 'mdc-toolbar__fixed-adjust': fixedToolbar }, className);
   return React.createElement(component || 'main', {
     className: classes,
     ...otherProps,

src/Layout/index.js

@@ -1,4 +1,5 @@
 import '@material/layout-grid/dist/mdc.layout-grid.min.css';
+import '@material/toolbar/dist/mdc.toolbar.css';
 
 export { default as Grid } from './Grid';
 export { default as Cell } from './Cell';

src/Toolbar/Toolbar.js

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const ROOT = 'mdc-toolbar';
+const FIXED = `${ROOT}--fixed`;
+
+const propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  fixedToolbar: PropTypes.bool,
+};
+
+const Toolbar = ({
+  className,
+  fixedToolbar,
+  children,
+  ...otherProps
+}) => (
+  <header
+    className={classnames(ROOT, {
+      [FIXED]: fixedToolbar,
+    }, className)}
+    {...otherProps}
+  >
+    {children}
+  </header>
+);
+Toolbar.propTypes = propTypes;
+export default Toolbar;
+

src/Toolbar/ToolbarSection.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import isDefined from '../utils/isDefined';
+
+const propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  align: PropTypes.oneOf(['start', 'end']),
+};
+
+const ROOT = 'mdc-toolbar__section';
+
+const ToolbarSection = ({ className, align, children, ...otherProps }) => (
+  <section
+    className={classnames(ROOT, {
+      [`${ROOT}--align-${align}`]: isDefined(align),
+    }, className)} {...otherProps}
+  >
+    {children}
+  </section>
+);
+ToolbarSection.propTypes = propTypes;
+export default ToolbarSection;
+

src/Toolbar/ToolbarTitle.js

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const ROOT = 'mdc-toolbar__title';
+
+const propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+const ToolbarTitle = ({
+  className,
+  children,
+  ...otherProps
+}) => (
+  <span
+    className={classnames(ROOT, className)}
+    {...otherProps}
+  >
+    {children}
+  </span>
+);
+ToolbarTitle.propTypes = propTypes;
+export default ToolbarTitle;
+

src/Toolbar/index.js

@@ -0,0 +1,5 @@
+import '@material/toolbar/dist/mdc.toolbar.css';
+
+export { default as Toolbar } from './Toolbar';
+export { default as ToolbarSection } from './ToolbarSection';
+export { default as ToolbarTitle } from './ToolbarTitle';

src/index.js

@@ -13,3 +13,4 @@ export { default as Icon } from './Icon';
 export { Drawer, DrawerSpacer, Navigation, DrawerHeader, DrawerHeaderContent, DrawerContent } from './Drawer';
 export { Grid, Cell, Layout, Content } from './Layout';
 export { default as Snackbar } from './Snackbar';
+export { Toolbar, ToolbarSection, ToolbarTitle } from './Toolbar';