Reworking Message component

* Supporting URLs for icon
* Moving styles into top-level stylesheet for use in the template

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;

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(

src/components/Message/index.js

@@ -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;

src/components/Message/style.css

@@ -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;
-}

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

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;
+}