diff --git a/docs/components/Navigation/Shared.js b/docs/components/Navigation/Shared.js
index 3735ba0..2aa9db0 100644
--- a/docs/components/Navigation/Shared.js
+++ b/docs/components/Navigation/Shared.js
@@ -53,6 +53,10 @@ const items = [
label: 'Switch',
url: makeURL('/Switch')
},
+ {
+ label: 'Table',
+ url: makeURL('/Table')
+ },
{
label: 'Tabs',
url: makeURL('/Tabs')
diff --git a/docs/components/PageWrapper/index.js b/docs/components/PageWrapper/index.js
index 229ff03..f8232e6 100644
--- a/docs/components/PageWrapper/index.js
+++ b/docs/components/PageWrapper/index.js
@@ -14,18 +14,17 @@ import {makeURL} from '../../utils/globals';
import Paper from '../../pages/Paper';
import React from 'react';
import {Route} from 'react-router-dom';
-import Scrollable from '../../../src/Scrollable';
import SelectField from '../../pages/SelectField';
import SnackBar from '../../pages/SnackBar';
import Styles from './PageWrapper.css';
import Switch from '../../pages/Switch';
import SvgIcon from '../../../src/SvgIcon';
+import Table from '../../pages/Table';
import Tabs from '../../pages/Tabs';
import TextField from '../../pages/TextField';
import TypographyDocs from '../../pages/Typography';
class PageWrapper extends React.Component {
-
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
@@ -87,6 +86,7 @@ class PageWrapper extends React.Component {
+
diff --git a/docs/pages/Table/index.js b/docs/pages/Table/index.js
new file mode 100644
index 0000000..b61ab4c
--- /dev/null
+++ b/docs/pages/Table/index.js
@@ -0,0 +1,56 @@
+import Grid, {GridItem} from '../../../src/Grid';
+import Page from '../Page';
+import Paper from '../../../src/Paper';
+import React from 'react';
+import Table, {TableBody, TableCell, TableHead, TableRow} from '../../../src/Table';
+import Typography from '../../../src/Typography';
+
+class TabsDocs extends React.Component {
+ render() {
+ return (
+
+
+
+ Simple table.
+
+
+
+
+
+ Name
+ Age
+ Street Address
+ ZIP Code
+ State
+
+
+
+
+ Johnathan Doe
+ 25
+ 700 1st Ave
+ 90210
+ CA
+
+
+ Jane Doe
+ 23
+ 15 Spruce St
+ 92101
+ CA
+
+
+
+
+
+
+ }
+ />
+ );
+ }
+}
+
+export default TabsDocs;
diff --git a/package.json b/package.json
index c912d6f..c841e76 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
},
"dependencies": {
"babel-cli": "6.26.0",
- "babel-eslint": "8.0.1",
+ "babel-eslint": "8.2.1",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
@@ -50,29 +50,29 @@
"uuid": "3.1.0"
},
"devDependencies": {
- "autoprefixer": "7.1.5",
+ "autoprefixer": "7.2.4",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-empower-assert": "1.3.0",
"babel-plugin-espower": "2.3.2",
"babel-plugin-istanbul": "4.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
- "babel-plugin-transform-react-remove-prop-types": "0.4.10",
+ "babel-plugin-transform-react-remove-prop-types": "0.4.12",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
- "core-js": "2.5.1",
- "css-loader": "0.28.7",
- "enzyme": "3.1.0",
- "enzyme-adapter-react-16": "1.0.2",
- "eslint": "4.9.0",
+ "core-js": "2.5.3",
+ "css-loader": "0.28.8",
+ "enzyme": "3.3.0",
+ "enzyme-adapter-react-16": "1.1.1",
+ "eslint": "4.15.0",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.8.0",
- "eslint-plugin-jsx-a11y": "6.0.2",
- "eslint-plugin-react": "7.4.0",
+ "eslint-plugin-jsx-a11y": "6.0.3",
+ "eslint-plugin-react": "7.5.1",
"html-webpack-plugin": "2.30.1",
- "isomorphic-style-loader": "3.0.0",
- "karma": "1.7.1",
+ "isomorphic-style-loader": "4.0.0",
+ "karma": "2.0.0",
"karma-browserstack-launcher": "1.3.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
@@ -81,31 +81,31 @@
"karma-mocha-reporter": "2.2.5",
"karma-safari-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
- "karma-webpack": "2.0.5",
+ "karma-webpack": "2.0.9",
"lodash": "4.17.4",
- "mocha": "3.4.2",
- "npm-run-all": "4.1.1",
+ "mocha": "4.1.0",
+ "npm-run-all": "4.1.2",
"phantomjs-polyfill-object-assign": "0.0.2",
"postcss-cli": "4.1.1",
- "postcss-loader": "2.0.8",
+ "postcss-loader": "2.0.10",
"postcss-simple-vars": "4.1.0",
"power-assert": "1.4.4",
- "prismjs": "1.8.3",
+ "prismjs": "1.9.0",
"prop-types": "15.6.0",
"raw-loader": "0.5.1",
- "react": "16.0.0",
- "react-dom": "16.0.0",
- "react-hot-loader": "3.1.1",
+ "react": "16.2.0",
+ "react-dom": "16.2.0",
+ "react-hot-loader": "3.1.3",
"react-router-dom": "4.2.2",
"react-svg-loader": "2.1.0",
"react-tap-event-plugin": "3.0.2",
- "react-test-renderer": "16.0.0",
- "sinon": "2.3.8",
- "style-loader": "0.19.0",
- "stylelint": "8.2.0",
- "stylelint-config-standard": "17.0.0",
- "webpack": "3.8.1",
- "webpack-dev-server": "2.9.3",
+ "react-test-renderer": "16.2.0",
+ "sinon": "4.1.4",
+ "style-loader": "0.19.1",
+ "stylelint": "8.4.0",
+ "stylelint-config-standard": "18.0.0",
+ "webpack": "3.10.0",
+ "webpack-dev-server": "2.10.1",
"webpack-node-externals": "1.6.0"
}
}
diff --git a/src/Table/Table.css b/src/Table/Table.css
new file mode 100644
index 0000000..4323742
--- /dev/null
+++ b/src/Table/Table.css
@@ -0,0 +1,10 @@
+.container {
+ overflow-x: auto;
+}
+
+.table {
+ border-spacing: 0;
+ border-collapse: collapse;
+ overflow: hidden;
+ width: 100%;
+}
diff --git a/src/Table/Table.js b/src/Table/Table.js
new file mode 100644
index 0000000..99bc81f
--- /dev/null
+++ b/src/Table/Table.js
@@ -0,0 +1,29 @@
+import makeClass from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Styles from './Table.css';
+
+class Table extends React.Component {
+ render() {
+ const {children, className, ...other} = this.props;
+ return (
+
+ );
+ }
+}
+
+Table.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string
+};
+
+Table.defaultProps = {
+ children: null,
+ className: ''
+};
+
+export default Table;
diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.js
new file mode 100644
index 0000000..1552f0f
--- /dev/null
+++ b/src/Table/Table.spec.js
@@ -0,0 +1,52 @@
+/* eslint-env mocha */
+
+import assert from 'assert';
+import {createMount} from '../../test/utils';
+import React from 'react';
+import Table, {TableBody, TableCell, TableHead, TableRow} from './index';
+
+describe('Tabs', () => {
+ let mount;
+
+ beforeEach(() => {
+ mount = createMount();
+ });
+
+ afterEach(() => {
+ mount.cleanUp();
+ });
+
+ it('should deep render', () => {
+ const component = (
+
+
+
+ Name
+ Age
+ Street Address
+ ZIP Code
+ State
+
+
+
+
+ Johnathan Doe
+ 25
+ 700 1st Ave
+ 90210
+ CA
+
+
+ Jane Doe
+ 23
+ 15 Spruce St
+ 92101
+ CA
+
+
+
+ );
+ const wrapper = mount(component);
+ assert(wrapper);
+ });
+});
diff --git a/src/Table/TableBody.js b/src/Table/TableBody.js
new file mode 100644
index 0000000..6a1f285
--- /dev/null
+++ b/src/Table/TableBody.js
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class TableBody extends React.Component {
+ render() {
+ const {children, ...other} = this.props;
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+TableBody.propTypes = {
+ children: PropTypes.node
+};
+
+TableBody.defaultProps = {
+ children: null
+};
+
+export default TableBody;
diff --git a/src/Table/TableCell.css b/src/Table/TableCell.css
new file mode 100644
index 0000000..5cdf1bd
--- /dev/null
+++ b/src/Table/TableCell.css
@@ -0,0 +1,24 @@
+.cell {
+ border-bottom: 1px solid rgb(235, 235, 235);
+ color: $black87;
+ font-size: 13px;
+ height: 48px;
+ padding-left: 24px;
+ padding-right: 56px;
+ white-space: nowrap;
+}
+
+.cell:first-child {
+ text-align: left;
+}
+
+.cell:not(:first-child) {
+ text-align: right;
+}
+
+.head {
+ color: $black54;
+ font-size: 12px;
+ font-weight: 500;
+ height: 56px;
+}
diff --git a/src/Table/TableCell.js b/src/Table/TableCell.js
new file mode 100644
index 0000000..cb1222b
--- /dev/null
+++ b/src/Table/TableCell.js
@@ -0,0 +1,39 @@
+import makeClass from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Styles from './TableCell.css';
+
+class TableCell extends React.Component {
+ render() {
+ const {
+ children,
+ className,
+ head,
+ ...other
+ } = this.props;
+ const Component = head ? 'th' : 'td';
+ const classnames = makeClass(Styles.cell, {
+ [Styles.head]: head
+ }, className);
+
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+TableCell.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ head: PropTypes.bool
+};
+
+TableCell.defaultProps = {
+ children: null,
+ className: '',
+ head: false
+};
+
+export default TableCell;
diff --git a/src/Table/TableHead.js b/src/Table/TableHead.js
new file mode 100644
index 0000000..7acdcbe
--- /dev/null
+++ b/src/Table/TableHead.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class TableHead extends React.Component {
+ renderChildren() {
+ const {children} = this.props;
+ return React.Children.map(children, child => (
+ React.cloneElement(child, {head: true})
+ ));
+ }
+
+ render() {
+ const {children, ...other} = this.props;
+ return (
+
+ {this.renderChildren()}
+
+ );
+ }
+}
+
+TableHead.propTypes = {
+ children: PropTypes.node
+};
+
+TableHead.defaultProps = {
+ children: null
+};
+
+export default TableHead;
diff --git a/src/Table/TableRow.js b/src/Table/TableRow.js
new file mode 100644
index 0000000..ffc0874
--- /dev/null
+++ b/src/Table/TableRow.js
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class TableRow extends React.Component {
+ renderChildren() {
+ const {children, head} = this.props;
+ return React.Children.map(children, child => (
+ React.cloneElement(child, {head})
+ ));
+ }
+
+ render() {
+ const {children, head, ...other} = this.props;
+ return (
+
+ {this.renderChildren()}
+
+ );
+ }
+}
+
+TableRow.propTypes = {
+ children: PropTypes.node,
+ head: PropTypes.bool
+};
+
+TableRow.defaultProps = {
+ children: null,
+ head: false
+};
+
+export default TableRow;
diff --git a/src/Table/index.js b/src/Table/index.js
new file mode 100644
index 0000000..47aedbf
--- /dev/null
+++ b/src/Table/index.js
@@ -0,0 +1,5 @@
+export { default } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHead } from './TableHead';
+export { default as TableRow } from './TableRow';
diff --git a/src/TextField/TextField.css b/src/TextField/TextField.css
index 2da941e..ea9c788 100644
--- a/src/TextField/TextField.css
+++ b/src/TextField/TextField.css
@@ -40,17 +40,17 @@
border-bottom-style: dashed;
}
-.input:focus ~ .inkbar,
-.input:hover:not(:disabled) ~ .inkbar {
- border-bottom-width: 2px;
-}
-
.input:focus ~ .inkbar {
animation-name: stretch;
border-bottom-color: $primary;
max-width: 70%;
}
+.input:focus ~ .inkbar,
+.input:hover:not(:disabled) ~ .inkbar {
+ border-bottom-width: 2px;
+}
+
@keyframes stretch {
0% {
margin-left: 15%;