Merge pull request #11 from materialr/feature/material-036

fix: upgrade to material 0.36.0

package.json

@@ -32,26 +32,26 @@
     "@material/layout-grid": "^0.34.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.3.2"
+    "react": "^16.4.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-jest": "^22.4.3",
-    "babel-preset-env": "^1.6.0",
+    "babel-jest": "^23.0.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "coveralls": "^3.0.0",
+    "coveralls": "^3.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.4.3",
+    "eslint-plugin-react": "^7.9.1",
+    "jest": "^23.1.0",
     "nsp": "^3.2.1",
-    "react-dom": "^16.3.2",
-    "semantic-release": "^15.1.7"
+    "react-dom": "^16.4.0",
+    "semantic-release": "^15.5.1"
   }
 }

src/cell.jsx

@@ -12,8 +12,8 @@ const getClassName = (align, className, columns, desktop, phone, tablet) => clas
   [`mdc-layout-grid__cell--span-${tablet}-tablet`]: !!tablet,
 });
 
-const Cell = ({ align, children, className, columns, desktop, phone, tablet }) => (
-  <div className={getClassName(align, className, columns, desktop, phone, tablet)}>
+const Cell = ({ align, children, className, columns, desktop, phone, tablet, ...props }) => (
+  <div className={getClassName(align, className, columns, desktop, phone, tablet)} {...props}>
     {children}
   </div>
 );

src/cell.test.jsx

@@ -38,3 +38,13 @@ test('Cell > Adds all classNames based on props', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Cell > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(<Cell data-qa={DATA_QA} />, { disableLifecycleMethods: true });
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/grid.jsx

@@ -10,8 +10,8 @@ const getClassName = (align, className) => classnames({
   [className]: !!className,
 });
 
-const Grid = ({ align, children, className }) => (
-  <div className={getClassName(align, className)}>{children}</div>
+const Grid = ({ align, children, className, ...props }) => (
+  <div className={getClassName(align, className)} {...props}>{children}</div>
 );
 
 Grid.propTypes = {

src/grid.test.jsx

@@ -27,3 +27,16 @@ test('Grid > Adds all classNames based on props', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Grid > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Grid data-qa={DATA_QA}>{CHILDREN}</Grid>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/row.jsx

@@ -7,8 +7,8 @@ const getClassName = className => classnames({
   [className]: !!className,
 });
 
-const Row = ({ children, className }) => (
-  <div className={getClassName(className)}>{children}</div>
+const Row = ({ children, className, ...props }) => (
+  <div className={getClassName(className)} {...props}>{children}</div>
 );
 
 Row.propTypes = {

src/row.test.jsx

@@ -26,3 +26,16 @@ test('Row > Adds all classNames based on props', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Row > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Row data-qa={DATA_QA}>{CHILDREN}</Row>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});