jz/gt - add feature banner to react-gears

src/components/FeatureBanner.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Alert } from '../';
+import styles from './FeatureBanner.scss';
+
+export default class FeatureBanner extends React.Component {
+  static propTypes = {
+    alertText: React.PropTypes.string,
+    className: React.PropTypes.string,
+    children: React.PropTypes.object,
+    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 (
+      <div>
+        <Alert color="info" className="align-items-center d-flex flex-wrap">
+          <div className={`${alertStyle} pr-3 hidden-sm-down`}>
+            {alertText}
+          </div>
+          <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>
+                {title}
+              </p>
+              <p className="m-0">{subtitle}</p>
+            </div>
+          </div>
+          <div className="d-flex">
+            {children}
+          </div>
+        </Alert>
+      </div>
+    )
+  }
+}

src/components/FeatureBanner.scss

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

src/index.js

@@ -72,6 +72,7 @@ import CurrencyInput from './components/CurrencyInput.js';
 import Datapair from './components/Datapair.js';
 import DateMonth from './components/datemonth/DateMonth.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';
@@ -167,6 +168,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

@@ -26,6 +26,7 @@ import './Select';
 import './BlockPanel';
 import './Datapair';
 import './ExpandableSection';
+import './FeatureBanner';
 import './FilterList';
 import './Paginator';
 import './Steps';