From c368e9031f7990d75411716eca65d1001f28bf3a Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 11 Feb 2018 06:41:15 -0500
Subject: [PATCH] Reworking Message component

* Supporting URLs for icon
* Moving styles into top-level stylesheet for use in the template
---
 src/components/Message.js                     | 36 +++++++++++++++++++
 .../{Message/test.js => Message.test.js}      |  2 +-
 src/components/Message/index.js               | 23 ------------
 src/components/Message/style.css              | 20 -----------
 .../Message.test.js.snap}                     |  5 ++-
 src/style.css                                 | 22 ++++++++++++
 6 files changed, 61 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Message.js
 rename src/components/{Message/test.js => Message.test.js} (94%)
 delete mode 100644 src/components/Message/index.js
 delete mode 100644 src/components/Message/style.css
 rename src/components/{Message/__snapshots__/test.js.snap => __snapshots__/Message.test.js.snap} (84%)

diff --git a/src/components/Message.js b/src/components/Message.js
new file mode 100644
index 0000000..1c07576
--- /dev/null
+++ b/src/components/Message.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//import style from './style.css';
+
+const renderIcon = icon => {
+  if (!icon) {
+    return;
+  }
+
+  if (typeof icon === 'string') {
+    return <img src={ icon }/>;
+  } else {
+    const Icon = icon;
+    return <Icon/>;
+  }
+};
+
+const Message = ({ icon, heading, children }) => (
+  <div className="message">
+    <h2>{ renderIcon(icon) }{ heading }</h2>
+    { children }
+  </div>
+);
+
+Message.propTypes = {
+  icon: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  heading: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired
+};
+
+export default Message;
diff --git a/src/components/Message/test.js b/src/components/Message.test.js
similarity index 94%
rename from src/components/Message/test.js
rename to src/components/Message.test.js
index f8f3901..256399d 100644
--- a/src/components/Message/test.js
+++ b/src/components/Message.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import Message from './index';
+import Message from './Message';
 
 test('Message rendering', () => {
   const component = renderer.create(
diff --git a/src/components/Message/index.js b/src/components/Message/index.js
deleted file mode 100644
index 6663922..0000000
--- a/src/components/Message/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import style from './style.css';
-
-const Message = ({ icon, heading, children }) => {
-  const IconComponent = icon;
-  return <div className={ style.message }>
-    <h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
-    { children }
-  </div>;
-};
-
-Message.propTypes = {
-  icon: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.func
-  ]),
-  heading: PropTypes.string.isRequired,
-  children: PropTypes.element.isRequired
-};
-
-export default Message;
diff --git a/src/components/Message/style.css b/src/components/Message/style.css
deleted file mode 100644
index 00892b2..0000000
--- a/src/components/Message/style.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.message {
-  background: var(--color-tan);
-  padding: var(--spacing-margin);
-  margin: var(--spacing-margin) 0;
-}
-
-.message h2 {
-  margin: var(--spacing-margin) 0;
-}
-
-.message h2 svg {
-  margin-right: 0.5rem;
-  height: 3rem;
-  width: 3rem;
-  vertical-align: bottom;
-}
-
-.message p {
-  margin: var(--spacing-margin) 0;
-}
diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/__snapshots__/Message.test.js.snap
similarity index 84%
rename from src/components/Message/__snapshots__/test.js.snap
rename to src/components/__snapshots__/Message.test.js.snap
index 98ab61e..aeeb785 100644
--- a/src/components/Message/__snapshots__/test.js.snap
+++ b/src/components/__snapshots__/Message.test.js.snap
@@ -2,10 +2,9 @@
 
 exports[`Message rendering 1`] = `
 <div
-  className={undefined}
+  className="message"
 >
   <h2>
-    
     Testing
   </h2>
   <p>
@@ -16,7 +15,7 @@ exports[`Message rendering 1`] = `
 
 exports[`Message rendering with icon 1`] = `
 <div
-  className={undefined}
+  className="message"
 >
   <h2>
     Sample icon SVG
diff --git a/src/style.css b/src/style.css
index f9ee797..6b536f3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -109,3 +109,25 @@ li {
 [icon="github"] {
   background-image: url('~feather-icons/dist/icons/github.svg');
 }
+
+.message {
+  background: var(--color-tan);
+  padding: var(--spacing-margin);
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 {
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 svg,
+.message h2 img {
+  margin-right: 0.5rem;
+  height: 3rem;
+  width: 3rem;
+  vertical-align: bottom;
+}
+
+.message p {
+  margin: var(--spacing-margin) 0;
+}