Merge pull request #192 from appfolio/cpFeatureBanner

Add feature banner to react-gears

src/components/FeatureBanner.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { Alert } from '../';
+import styles from './FeatureBanner.scss';
+
+export default class FeatureBanner extends Component {
+  static propTypes = {
+    alertText: React.PropTypes.string,
+    children: React.PropTypes.array,
+    subtitle: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    alertText: 'new',
+  };
+
+  render() {
+    const { alertText, title, subtitle, children } = this.props;
+    const alertStyle = `${styles.alert} font-weight-bold text-uppercase`;
+
+    return (
+      <Alert color="info" className="align-items-center d-flex flex-wrap">
+        <span className={`${alertStyle} pr-3 hidden-sm-down`}>
+          {alertText}
+        </span>
+        <div className={`${styles.body} d-flex align-items-around justify-content-start mr-auto`}>
+          <div className={styles.info}>
+            <p className="d-inline-block font-weight-bold m-0">
+              <span className={`${alertStyle} hidden-md-up mr-1`}>{alertText}</span>
+              <span className="js-title">{title}</span>
+            </p>
+            <p className="m-0 js-subtitle">{subtitle}</p>
+          </div>
+        </div>
+        <div className="d-flex js-children">
+          {children}
+        </div>
+      </Alert>
+    );
+  }
+}

src/components/FeatureBanner.scss

@@ -0,0 +1,15 @@
+.body {
+  @media (min-width: 768px) {
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    padding-left: 1em;
+  }
+  flex-direction: row;
+}
+
+.info {
+  flex: 1 1 auto;
+}
+
+.alert {
+  font-size: 18px;
+}

src/index.js

@@ -77,6 +77,7 @@ import DateMonth from './components/datemonth/DateMonth.js';
 import DeletedNote from './components/DeletedNote.js';
 import EditableNote from './components/EditableNote.js';
 import ExpandableSection from './components/ExpandableSection.js';
+import FeatureBanner from './components/FeatureBanner.js';
 import FilterList from './components/FilterList.js';
 import FormChoice from './components/FormChoice.js';
 import FormRow from './components/FormRow.js';
@@ -182,6 +183,7 @@ export {
   DateMonth,
   ExpandableSection,
   Badge as Flag,
+  FeatureBanner,
   FilterList,
   FormChoice,
   FormRow,

stories/FeatureBanner.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, FeatureBanner } from '../src';
+import { storiesOf } from '@kadira/storybook';
+import { text } from '@kadira/storybook-addon-knobs';
+
+storiesOf('FeatureBanner', module)
+  .addWithInfo('Live example', () => {
+    const button = (
+      <Button className="mr-1 mt-1" color="primary" outline disabled={false}>
+        Click Me
+      </Button>
+    );
+    const children = [button, button];
+    const subtitle = text('subtitle', 'View all text messages sent by your company from this page.');
+    return (
+      <FeatureBanner
+        title="Company-Wide View of Text Messages"
+        subtitle={subtitle}
+        children={children}
+      />
+    );
+  });

stories/index.js

@@ -27,6 +27,7 @@ import './Select';
 import './BlockPanel';
 import './Datapair';
 import './ExpandableSection';
+import './FeatureBanner';
 import './FilterList';
 import './Note';
 import './Notes';

test/components/FeatureBanner.spec.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+import { Alert, Button, FeatureBanner } from '../../src';
+
+describe('<FeatureBanner />', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<FeatureBanner title='test' subtitle='is fun'/>);
+  });
+
+  it('should have the correct props', () => {
+    assert.equal(wrapper.prop('title'), 'test');
+    assert.equal(wrapper.prop('subtitle'), 'is fun');
+  });
+
+  it('renders an Alert with color info', () => {
+    assert.equal(wrapper.find(Alert).length, 1);
+    assert.equal(wrapper.find(Alert).prop('color'), 'info');
+  });
+
+  it('renders default alertText', () => {
+    assert.equal(wrapper.find('span').first().text(), 'new');
+  });
+
+  it('renders passed in alertText', () => {
+    wrapper = mount(<FeatureBanner title='test' subtitle='is fun' alertText='whatever'/>);
+    assert.equal(wrapper.find('span').first().text(), 'whatever');
+  });
+
+  it('renders passed in title', () => {
+    assert.equal(wrapper.find('.js-title').text(), 'test');
+  });
+
+  it('renders passed in subtitle', () => {
+    assert.equal(wrapper.find('.js-subtitle').text(), 'is fun');
+  });
+});
+