feat(Tabs): create new component (#20)

src/Tabs/Tab.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+  component: PropTypes.string,
+};
+
+const defaultProps = {
+  component: 'a',
+};
+
+const ROOT = 'mdc-tab';
+const ACTIVE = `${ROOT}--active`;
+
+const Tab = ({ 
+  active,
+  className, 
+  component,
+  ...otherProps 
+}) => {
+  const classes = classnames(ROOT, {[ACTIVE]: active}, className);
+  return React.createElement(component, {
+    className: classes,
+    ...otherProps,
+  });
+};
+Tab.propTypes = propTypes;
+Tab.defaultProps = defaultProps;
+export default Tab;

src/Tabs/Tabbar.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+const propTypes = {
+  className: PropTypes.string,
+};
+
+const ROOT = 'mdc-tab-bar';
+
+const Tabbar = ({ className, ...otherProps }) => { 
+  return (
+    <nav
+      className = {classnames(ROOT, className)}
+      {...otherProps}
+    />
+  ) };
+
+Tabbar.propTypes = propTypes;
+export default Tabbar;

src/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as Tabbar } from './Tabbar';
+export { default as Tab } from './Tab';

src/index.js

@@ -32,3 +32,4 @@ export {
 } from './Typography';
 export { GridList, Tile, TilePrimary, TileSecondary, TileContent, TileTitle, TileSupportText } from './GridList';
 export { default as Switch } from './Switch';
+export { Tab, Tabbar} from './Tabs';