From 36b554a6ead53ec9598710309a6cff8f3f6a4cd3 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 16 Oct 2020 16:49:21 -0400
Subject: [PATCH 1/3] Toast + fixes for Alert

---
 src/Alert/index.js   |  4 ++--
 src/Toast/index.js   | 25 +++++++++++++++++++++++++
 src/Toast/stories.js | 29 +++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/Toast/index.js
 create mode 100644 src/Toast/stories.js

diff --git a/src/Alert/index.js b/src/Alert/index.js
index 98c709d..cde272f 100644
--- a/src/Alert/index.js
+++ b/src/Alert/index.js
@@ -5,12 +5,12 @@ import useEventListener from '../hooks/useEventListener';
 const Alert = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
   const hxRef = useEventListener({ onDismiss, onSubmit });
   return (
-    <>
+    <div>
       {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
       <hx-alert class={className} ref={hxRef} {...rest}>
         {children}
       </hx-alert>
-    </>
+    </div>
   );
 };
 
diff --git a/src/Toast/index.js b/src/Toast/index.js
new file mode 100644
index 0000000..e6f90af
--- /dev/null
+++ b/src/Toast/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useEventListener from '../hooks/useEventListener';
+
+const Toast = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
+  const hxRef = useEventListener({ onDismiss, onSubmit });
+  return (
+    <div> {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+      <hx-toast class={className} ref={hxRef} {...rest}>
+        {children}
+      </hx-toast>
+    </div>
+  );
+};
+
+Toast.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  type: PropTypes.oneOf(['info','error','success']),
+  cta: PropTypes.string,
+  onDismiss: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+
+export default Toast;
diff --git a/src/Toast/stories.js b/src/Toast/stories.js
new file mode 100644
index 0000000..a1a22f7
--- /dev/null
+++ b/src/Toast/stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { select, text } from '@storybook/addon-knobs/react';
+import Toast from './index';
+import { action } from '@storybook/addon-actions';
+
+const TYPES = {
+  info: 'info',
+  error: 'error',
+  success: 'success',
+};
+
+storiesOf('Toast', module).add('All Knobs', () => {
+  let content = text('content', 'The password has been reset for foo@bar.com.');
+  let cta = text('cta', 'Try Again');
+  let type = select('type', TYPES, '');
+
+  return (
+    <Toast
+      {...(cta && { cta })}
+      {...(status && { status })}
+      {...(type && { type })}
+      onDismiss={action('onDismiss')}
+      onSubmit={action('onSubmit')}
+    >
+      {content}
+    </Toast>
+  );
+});

From 69e95ce039ac415c5d3a192f5f28b49231e726b0 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 16 Oct 2020 16:50:02 -0400
Subject: [PATCH 2/3] Make it pritty

---
 src/Toast/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Toast/index.js b/src/Toast/index.js
index e6f90af..f410c1b 100644
--- a/src/Toast/index.js
+++ b/src/Toast/index.js
@@ -5,7 +5,8 @@ import useEventListener from '../hooks/useEventListener';
 const Toast = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
   const hxRef = useEventListener({ onDismiss, onSubmit });
   return (
-    <div> {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+    <div>
+      {/* Wrapping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
       <hx-toast class={className} ref={hxRef} {...rest}>
         {children}
       </hx-toast>
@@ -16,7 +17,7 @@ const Toast = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...r
 Toast.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
-  type: PropTypes.oneOf(['info','error','success']),
+  type: PropTypes.oneOf(['info', 'error', 'success']),
   cta: PropTypes.string,
   onDismiss: PropTypes.func,
   onSubmit: PropTypes.func,

From de927b98d0d0545293b117d7d954b7236a116f33 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 16 Oct 2020 16:56:06 -0400
Subject: [PATCH 3/3] export toast

---
 src/index.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/index.mjs b/src/index.mjs
index 33e8fac..4d2e8f7 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -19,6 +19,7 @@ import Select from './Select';
 import Switch from './Switch';
 import Text from './Text';
 import TextArea from './TextArea';
+import Toast from './Toast';
 import Tooltip from './Tooltip';
 
 export {
@@ -42,5 +43,6 @@ export {
   Switch,
   Text,
   TextArea,
-  Tooltip
+  Toast,
+  Tooltip,
 };