Toast

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

src/Toast/index.js

@@ -0,0 +1,26 @@
+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>
+      {/* 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>
+    </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;

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

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