Reduce some duplication by introducing Button component

Author: jakezatecky

src/js/Button.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class Button extends React.PureComponent {
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+        title: PropTypes.string.isRequired,
+    };
+
+    render() {
+        const { children, title, ...props } = this.props;
+
+        return (
+            <button
+                aria-label={title}
+                title={title}
+                type="button"
+                {...props}
+            >
+                {children}
+            </button>
+        );
+    }
+}
+
+export default Button;

src/js/CheckboxTree.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import nanoid from 'nanoid';
 
+import Button from './Button';
 import TreeNode from './TreeNode';
 import iconsShape from './iconsShape';
 import listShape from './listShape';
@@ -332,24 +333,20 @@ class CheckboxTree extends React.Component {
 
         return (
             <div className="rct-options">
-                <button
-                    aria-label="Expand all"
+                <Button
                     className="rct-option rct-option-expand-all"
                     title="Expand all"
-                    type="button"
                     onClick={this.onExpandAll}
                 >
                     {expandAll}
-                </button>
-                <button
-                    aria-label="Expand all"
+                </Button>
+                <Button
                     className="rct-option rct-option-collapse-all"
                     title="Collapse all"
-                    type="button"
                     onClick={this.onCollapseAll}
                 >
                     {collapseAll}
-                </button>
+                </Button>
             </div>
         );
     }

src/js/TreeNode.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Button from './Button';
 import NativeCheckbox from './NativeCheckbox';
 import iconsShape from './iconsShape';
 import nodeShape from './nodeShape';
@@ -120,16 +121,14 @@ class TreeNode extends React.Component {
         }
 
         return (
-            <button
-                aria-label="Toggle"
+            <Button
                 className="rct-collapse rct-collapse-btn"
                 disabled={expandDisabled}
                 title="Toggle"
-                type="button"
                 onClick={this.onExpand}
             >
                 {this.renderCollapseIcon()}
-            </button>
+            </Button>
         );
     }