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

fix: upgrade to material 0.36.0

package.json

@@ -28,29 +28,29 @@
   },
   "homepage": "https://github.com/materialr/toolbar#readme",
   "dependencies": {
-    "@material/toolbar": "^0.35.0",
+    "@material/toolbar": "^0.36.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.1",
+    "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/icon.jsx

@@ -9,8 +9,13 @@ const getClassName = (className, menuIcon) => classnames({
   [className]: !!className,
 });
 
-const ToolbarIcon = ({ className, icon, menuIcon, onClick, title }) => (
-  <button aria-label={title} className={getClassName(className, menuIcon)} onClick={onClick}>
+const ToolbarIcon = ({ className, icon, menuIcon, onClick, title, ...props }) => (
+  <button
+    aria-label={title}
+    className={getClassName(className, menuIcon)}
+    onClick={onClick}
+    {...props}
+  >
     {icon}
   </button>
 );

src/icon.test.jsx

@@ -70,3 +70,16 @@ test('Icon > Loads the title as an aria-label', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Icon > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Icon data-qa={DATA_QA} icon={ICON} title={TITLE} />,
+    { 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 ToolbarRow = ({ children, className }) =>
-  <div className={getClassName(className)}>{children}</div>;
+const ToolbarRow = ({ children, className, ...props }) =>
+  <div className={getClassName(className)} {...props}>{children}</div>;
 
 ToolbarRow.propTypes = {
   children: PropTypes.node.isRequired,

src/row.test.jsx

@@ -21,3 +21,13 @@ test('Row > Loads 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}>Row</Row>, { disableLifecycleMethods: true });
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/section.jsx

@@ -10,8 +10,8 @@ const getClassName = (alignEnd, alignStart, className, shrinkToFit) => classname
   [className]: !!className,
 });
 
-const ToolbarSection = ({ alignEnd, alignStart, children, className, shrinkToFit }) => (
-  <section className={getClassName(alignEnd, alignStart, className, shrinkToFit)}>
+const ToolbarSection = ({ alignEnd, alignStart, children, className, shrinkToFit, ...props }) => (
+  <section className={getClassName(alignEnd, alignStart, className, shrinkToFit)} {...props}>
     {children}
   </section>
 );

src/section.test.jsx

@@ -36,3 +36,16 @@ test('Section > Adds children inside the element', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Section > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Section data-qa={DATA_QA}>{CHILDREN}</Section>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/title.jsx

@@ -7,8 +7,8 @@ const getClassName = className => classnames({
   [className]: !!className,
 });
 
-const ToolbarTitle = ({ children, className }) =>
-  <span className={getClassName(className)}>{children}</span>;
+const ToolbarTitle = ({ children, className, ...props }) =>
+  <span className={getClassName(className)} {...props}>{children}</span>;
 
 ToolbarTitle.propTypes = {
   children: PropTypes.node.isRequired,

src/title.test.jsx

@@ -35,3 +35,16 @@ test('Title > Adds children inside the element', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Title > Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Title data-qa={DATA_QA}>{CHILDREN}</Title>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});

src/toolbar.jsx

@@ -32,11 +32,23 @@ class Toolbar extends React.Component {
     });
   }
   render() {
-    const { getClassNames, props: { children } } = this;
+    const {
+      getClassNames,
+      props: {
+        children,
+        className,
+        fixed,
+        fixedLastRowOnly,
+        flexible,
+        waterfall,
+        ...props
+      },
+    } = this;
     return (
       <header
         className={getClassNames()}
         ref={(elementRoot) => { this.elementRoot = elementRoot; }}
+        {...props}
       >
         {children}
       </header>

src/toolbar.test.jsx

@@ -106,3 +106,16 @@ test('Destroys the MDCToolbar component on unmount', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('Passes through additional props', () => {
+  const DATA_QA = 'DATA_QA';
+  const wrapper = shallow(
+    <Toolbar data-qa={DATA_QA}>{CHILDREN}</Toolbar>,
+    { disableLifecycleMethods: true },
+  );
+  const expected = DATA_QA;
+
+  const actual = wrapper.props()['data-qa'];
+
+  expect(actual).toBe(expected);
+});