done

Author: frankhock

src/Toast/Toast.jsx

@@ -5,9 +5,21 @@ import classNames from 'classnames';
 
 import { Alert } from 'src/Alert';
 import FadeTransition from 'src/FadeTransition';
+import { isObject } from '../utils';
 
 import './Toast.scss';
 
+function buildAlertMessageProps(message) {
+  if (isObject(message) && !React.isValidElement(message)) {
+    return {
+      title: message.title,
+      message: message.body,
+    };
+  }
+
+  return { message };
+}
+
 export default function Toast(props) {
   const groupClassNames = classNames(
     'Toast',
@@ -23,9 +35,9 @@ export default function Toast(props) {
               action={message.action}
               autoDismiss={props.autoDismiss}
               id={message.id}
-              message={message.message}
               type={message.type}
               onDismiss={props.onToastClosed}
+              {...buildAlertMessageProps(message.message)}
             />
           </FadeTransition>
         ))
@@ -40,7 +52,14 @@ Toast.propTypes = {
   messages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
-      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      message: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node,
+        PropTypes.shape({
+          body: PropTypes.string,
+          title: PropTypes.string,
+        }),
+      ]),
       type: PropTypes.string,
     }),
   ).isRequired,

src/Toast/Toast.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { create } from 'react-test-renderer';
 
 import { Toast } from 'src/Toast';
+import { Alert } from 'src/Alert';
 
 describe('Toast', () => {
   test('no header classes', () => {
@@ -17,4 +18,33 @@ describe('Toast', () => {
     expect(props.className).toContain('Toast');
     expect(props.className).toContain('Toast--no-header');
   });
+
+  describe('when building alert message props', () => {
+    const setup = (message) => create(
+      <Toast
+        messages={[
+          { id: '1', type: 'success', message },
+        ]}
+      />,
+    );
+
+    test('builds props from string message', () => {
+      const { root } = setup('hello');
+
+      expect(root.findByType(Alert).props.message).toBe('hello');
+    });
+
+    test('builds props from node message', () => {
+      const { root } = setup(<div>hello</div>);
+
+      expect(root.findByType(Alert).props.message).toEqual(<div>hello</div>);
+    });
+
+    test('builds props from object message', () => {
+      const { root } = setup({ title: 'woohoo', body: 'you did it!' });
+
+      expect(root.findByType(Alert).props.message).toBe('you did it!');
+      expect(root.findByType(Alert).props.title).toBe('woohoo');
+    });
+  });
 });

src/utils.js

@@ -0,0 +1,8 @@
+export function isObject(value) {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    value !== undefined &&
+    value.constructor.name === 'Object'
+  );
+}

src/utils.test.js

@@ -0,0 +1,27 @@
+import { isObject } from './utils';
+
+describe('isObject', () => {
+  describe('when value is an object', () => {
+    test('returns true', () => {
+      expect(isObject({})).toBe(true);
+    });
+  });
+
+  describe('when value is undefined', () => {
+    test('returns false', () => {
+      expect(isObject()).toBe(false);
+    });
+  });
+
+  describe('when value is null', () => {
+    test('returns false', () => {
+      expect(isObject(null)).toBe(false);
+    });
+  });
+
+  describe('when value is an array', () => {
+    test('returns false', () => {
+      expect(isObject([])).toBe(false);
+    });
+  });
+});