Add Bootstrap Alert Component

src/components/Alert.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Icon from 'react-fontawesome';
+
+const iconMap = {
+  warning: 'bullhorn',
+  success: 'check',
+  info: 'info-circle',
+  danger: 'ban'
+};
+
+const Alert = (props) => (
+  <div className={['alert', `alert-${props.color}`].join(' ')} role="alert">
+    {props.icon ? <Icon name={iconMap[props.color]} className="pull-xs-left m-r-1" style={{ lineHeight: 'inherit' }}/> : null}
+    {props.icon ? <div style={{ overflow: 'hidden' }}>{props.children}</div> : props.children}
+  </div>
+);
+
+Alert.propTypes = {
+  color: React.PropTypes.string
+};
+
+Alert.defaultProps = {
+  color: 'warning'
+};
+
+export default Alert;

stories/Alerts.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Container } from 'reactstrap';
+import { storiesOf } from '@kadira/storybook';
+
+import Alert from '../src/components/Alert';
+
+storiesOf('Alerts', module)
+  .add('Colors', () => (
+    <Container className="m-t-1">
+      <Alert>
+        <p>The default alert is a "warning". It supports any sort of custom markup.</p>
+        <p className="m-b-0"><Button>Like This!</Button></p>
+      </Alert>
+      <Alert color="success">You can specify an alert color. This one has <code>color="success"</code></Alert>
+      <Alert color="danger">This one looks dangerous!</Alert>
+      <Alert color="info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</Alert>
+    </Container>
+  ))
+  .add('Icons', () => (
+    <Container className="m-t-1">
+      <Alert icon>You can also add an icon!</Alert>
+      <Alert icon color="success">You can specify an alert color. This one has <code>color="success"</code></Alert>
+      <Alert icon color="danger"><p className="m-b-0">Humblebrag prism twee, gochujang seitan whatever asymmetrical ramps enamel pin austin salvia swag helvetica. Chartreuse food truck tofu raclette, 3 wolf moon poke chia paleo skateboard. Pickled tote bag echo park raclette. Irony fashion axe sartorial, cornhole jean shorts vaporware flannel salvia glossier beard 3 wolf moon. Literally semiotics hammock irony cred, bicycle rights lomo selvage tousled vegan 8-bit. Four loko cardigan live-edge truffaut pour-over, helvetica chia brooklyn swag pug scenester kogi pitchfork leggings yuccie. Ethical put a bird on it portland vape YOLO.</p></Alert>
+      <Alert icon color="info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</Alert>
+    </Container>
+  ))
+  .add('Bootstrap Extras', () => (
+    <Container className="m-t-1">
+      <Alert icon color="info">
+        <h4 className="alert-heading">Well done!</h4>
+        <p>You can use the <code>alert-heading</code> class on a heading to make it stand out!</p>
+        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+        <p className="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+      </Alert>
+    </Container>
+  ));

stories/index.js

@@ -1,4 +1,5 @@
 import './Welcome';
+import './Alerts';
 import './Buttons';
 import './Datapair';
 import './DateMonth';

test/components/Alert.spec.js

@@ -0,0 +1,44 @@
+/* eslint-env mocha */
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+import Icon from 'react-fontawesome';
+
+import Alert from '../../src/components/Alert';
+
+describe('<Alert />', () => {
+  it('should have a default color of "warning"', () => {
+    const component = shallow(<Alert/>);
+    assert.equal(component.prop('className'), 'alert alert-warning');
+  });
+
+  describe('with icon', () => {
+    it('should show bullhorn for warning', () => {
+      const icon = shallow(<Alert icon color="warning" />).find(Icon);
+      assert.equal(icon.prop('name'), 'bullhorn');
+    });
+
+    it('should show ban for danger', () => {
+      const icon = shallow(<Alert icon color="danger" />).find(Icon);
+      assert.equal(icon.prop('name'), 'ban');
+    });
+
+    it('should show info for info', () => {
+      const icon = shallow(<Alert icon color="info" />).find(Icon);
+      assert.equal(icon.prop('name'), 'info-circle');
+    });
+
+    it('should show check for success', () => {
+      const icon = shallow(<Alert icon color="success" />).find(Icon);
+      assert.equal(icon.prop('name'), 'check');
+    });
+
+    it('should wrap children with block (for alignment)', () => {
+      const component = shallow(<Alert icon>Stuff Here</Alert>)
+          , wrapper = component.children().find('div');
+      assert.equal(wrapper.length, 1);
+      assert.deepEqual(wrapper.prop('style'), { overflow: 'hidden' });
+      assert.equal(wrapper.text(), 'Stuff Here');
+    });
+  });
+});