Alert Component

src/Alert/index.js

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect} from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = (props) => {
+    const hxRef = useRef(null);
+
+    useEffect(() => {
+        hxRef.current.addEventListener('open', props.onOpen);
+        hxRef.current.addEventListener('close', props.onClose);
+        return () => {
+            hxRef.current.removeEventListener('open', props.onOpen);
+            hxRef.current.removeEventListener('close', props.onClose);
+        };
+    }, []);
+
+    return (
+        <>
+            {/*
+                 Wrappping element needed: Otherwise when alert removes itself from DOM on close it confusing React
+                 about where highest level parent element went, and will throw an error.
+             */}
+            <hx-alert
+                type={props.type}
+                status={props.status}
+                persist={props.persist}
+                cta={props.cta}
+                className={props.className}
+                id={props.id}
+                ref={hxRef}
+            >
+                {props.children}
+            </hx-alert>
+        </>
+    );
+};
+
+Alert.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    type: PropTypes.string,
+    status: PropTypes.string,
+    cta: PropTypes.string,
+    persist: PropTypes.bool,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func
+};
+
+export default Alert;

src/Alert/stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
+import Alert from './index';
+
+const TYPES = {
+    'info': 'info',
+    'error': 'error',
+    'success': 'success',
+    'warning': 'warning'
+};
+
+storiesOf('Alert', module)
+    .add('All Knobs', () => {
+        let content = text('content', 'Nope! Nope! Nope! Nope! Nope!');
+        let cta = text('cta', 'burn it');
+        let status = text('status', 'spider');
+        let persist = boolean('persist', false);
+        let type = select('type', TYPES, '');
+
+        return (
+            <Alert
+                { ...( cta && { cta }) }
+                { ...( status && { status }) }
+                { ...( persist && { persist }) }
+                { ...( type && { type }) }
+            >{content}</Alert>
+        );
+    });

src/index.mjs

@@ -1,8 +1,10 @@
 /* Export helix-react definition */
 import Button from './Button';
+import Alert from './Alert';
 import Icon from './Icon';
 
 export default {
     Button,
     Icon,
+    Alert
 };