From c5d9f44de299e54e7cd4f71b02dd63d6a5edb423 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Mon, 17 Apr 2017 17:29:39 -0400
Subject: [PATCH] split out ToolbarButton component

---
 .../MarkdownControlElements/Toolbar.js        | 28 ++++++-------------
 .../MarkdownControlElements/ToolbarButton.js  | 21 ++++++++++++++
 2 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Widgets/MarkdownControlElements/ToolbarButton.js

diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar.js
index 6f34274f..9f23069c 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar.js
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar.js
@@ -1,31 +1,21 @@
 import React, { PropTypes } from 'react';
 import { List } from 'immutable';
+import ToolbarButton from './ToolbarButton';
 import { Icon } from '../../UI';
 import styles from './Toolbar.css';
 
-function button(label, icon, action, active) {
-  const classNames = List([styles.Button]);
-  return (<li className={(active ? classNames.push(styles.ButtonActive) : classNames).join(' ')}>
-    <button className={styles[label]} onClick={action} title={label}>
-      { icon ? <Icon type={icon} /> : 'Toggle Markdown' }
-    </button>
-  </li>);
-}
-
-function toggle(...args) {
-  return <div className={styles.Toggle}>{button(...args)}</div>;
-}
-
 function Toolbar(props) {
   const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
   return (
     <ul className={styles.Toolbar}>
-      {button('Header 1', 'h1', onH1)}
-      {button('Header 2', 'h2', onH2)}
-      {button('Bold', 'bold', onBold)}
-      {button('Italic', 'italic', onItalic)}
-      {button('Link', 'link', onLink)}
-      {toggle('View Code', null, onToggleMode, rawMode)}
+      <ToolbarButton label="Header 1" icon="h1" action={onH1}/>
+      <ToolbarButton label="Header 2" icon="h2" action={onH2}/>
+      <ToolbarButton label="Bold" icon="bold" action={onBold}/>
+      <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
+      <ToolbarButton label="Link" icon="link" action={onLink}/>
+      <div className={styles.Toggle}>
+        <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
+      </div>
     </ul>
   );
 }
diff --git a/src/components/Widgets/MarkdownControlElements/ToolbarButton.js b/src/components/Widgets/MarkdownControlElements/ToolbarButton.js
new file mode 100644
index 00000000..77035cf2
--- /dev/null
+++ b/src/components/Widgets/MarkdownControlElements/ToolbarButton.js
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { Icon } from '../../UI';
+import styles from './Toolbar.css';
+
+const ToolbarButton = ({ label, icon, action, active }) => (
+  <li className={classnames(styles.Button, { [styles.ButtonActive]: active })}>
+    <button className={styles[label]} onClick={action} title={label}>
+      { icon ? <Icon type={icon} /> : label }
+    </button>
+  </li>
+);
+
+ToolbarButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  action: PropTypes.func.isRequired,
+  active: PropTypes.bool,
+};
+
+export default ToolbarButton;