Fleshing out messaging

src/components/App/__snapshots__/test.js.snap

@@ -29,10 +29,19 @@ exports[`Message rendering 1`] = `
     }
   />
   <Message
-    heading="React App"
+    heading="Sample Error"
+    type="error"
   >
     <p>
-      Placeholder app content
+      Sample error message
+    </p>
+  </Message>
+  <Message
+    heading="Sample Warning"
+    type="warning"
+  >
+    <p>
+      Sample warning message
     </p>
   </Message>
 </React.Fragment>

src/components/App/index.js

@@ -21,8 +21,11 @@ const App = () => <React.Fragment>
     downloadUrls={ downloadUrls }
     permalinkUrl="#permalink"
     onSubmit={ handleSubmit }/>
-  <Message heading="React App">
-    <p>Placeholder app content</p>
+  <Message type="error" heading="Sample Error">
+    <p>Sample error message</p>
+  </Message>
+  <Message type="warning" heading="Sample Warning">
+    <p>Sample warning message</p>
   </Message>
 </React.Fragment>;
 

src/components/Message/__snapshots__/test.js.snap

@@ -41,3 +41,25 @@ exports[`Message rendering with icon 1`] = `
   </div>
 </div>
 `;
+
+exports[`Message rendering with type 1`] = `
+<div
+  class="message error"
+>
+  <div
+    class="header"
+  >
+    <h2>
+      <svg />
+      Testing
+    </h2>
+  </div>
+  <div
+    class="content"
+  >
+    <p>
+      Message content
+    </p>
+  </div>
+</div>
+`;

src/components/Message/index.js

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 import style from './style.css';
 
-import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import WarningIcon from 'feather-icons/dist/icons/alert-triangle.svg';
 
 const iconTypes = {
-  error: AlertIcon
+  error: ErrorIcon,
+  warning: WarningIcon
 };
 
 const renderIcon = (type, icon) => {
@@ -33,7 +35,8 @@ const Message = ({ type, icon, heading, children }) => (
 
 Message.propTypes = {
   type: PropTypes.oneOf([
-    'error'
+    'error',
+    'warning'
   ]),
   icon: PropTypes.oneOfType([
     PropTypes.element,

src/components/Message/style.css

@@ -38,4 +38,10 @@
       color: var(--color-white);
     }
   }
+
+  &.warning {
+    & .header {
+      background: var(--color-orange);
+    }
+  }
 }

src/components/Message/test.js

@@ -21,3 +21,12 @@ test('Message rendering with icon', () => {
   );
   expect(component).toMatchSnapshot();
 });
+
+test('Message rendering with type', () => {
+  const component = render(
+    <Message heading="Testing" type="error">
+      <p>Message content</p>
+    </Message>
+  );
+  expect(component).toMatchSnapshot();
+});

src/globals.css

@@ -5,6 +5,7 @@
   --color-black: #000;
   --color-white: #fff;
   --color-red: #b3151a;
+  --color-orange: #fa0;
 
   --gradient-green: linear-gradient(to bottom,
     var(--color-green) 0%,