feat(Jumbotron): add Jumbotron Component (#151)

* feat(Jumbotron): add Jumbotron component

* test(Jumbotron) add Jumbotron tests

* docs(Jumbotron) add docs for Jumbotron

* docs(Jumbotron): update docs based on feedback

Update to home page to use Jumbotron and remove extra helmet

Closes #73

docs/lib/Components/JumbotronPage.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import Helmet from 'react-helmet';
+
+import JumbotronExample from '../examples/Jumbotron';
+import JumbotronFluidExample from "../examples/JumbotronFluid";
+
+const JumbotronExampleSource = require('!!raw!../examples/Jumbotron');
+const JumbotronFluidExampleSource = require('!!raw!../examples/JumbotronFluid');
+
+export default class JumbotronPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <Helmet title="Jumbotron" />
+        <h3>Jumbotron</h3>
+        <hr />
+        <div className="docs-example">
+          <JumbotronExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {JumbotronExampleSource}
+          </PrismCode>
+        </pre>
+        <h4>Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+{`Jumbotron.propTypes = {
+  // Pass in a Component to override default element
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  fluid: PropTypes.bool,
+  className: PropTypes.any
+};`}
+          </PrismCode>
+        </pre>
+
+        <h3>Fluid Jumbotron</h3>
+        <hr />
+        <div className="docs-example">
+          <JumbotronFluidExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {JumbotronFluidExampleSource}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}

docs/lib/Components/index.js

@@ -101,6 +101,10 @@ class Components extends React.Component {
           name: 'Tabs',
           to: '/components/tabs/'
         },
+        {
+          name: 'Jumbotron',
+          to: '/components/jumbotron/'
+        }
       ]
     };
   }

docs/lib/Home/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrismCode } from 'react-prism';
-import { Button, Container, Row, Col } from 'reactstrap';
+import { Button, Container, Row, Col, Jumbotron } from 'reactstrap';
 import { Link } from 'react-router';
 import Example from '../examples/import-basic';
 
@@ -9,7 +9,7 @@ const importBasic = require('!!raw!../examples/import-basic');
 export default () => {
   return (
     <div>
-      <section className="jumbotron text-xs-center m-b-3">
+      <Jumbotron tag="section" className="jumbotron-header text-xs-center m-b-3">
         <Container fluid>
           <Row>
             <Col>
@@ -27,7 +27,7 @@ export default () => {
             </Col>
           </Row>
         </Container>
-      </section>
+      </Jumbotron>
       <Container fluid>
         <Row>
           <Col sm={{ size: 8, offset: 2 }}>

docs/lib/examples/Jumbotron.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Jumbotron, Button } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Jumbotron>
+        <h1 className="display-3">Hello, world!</h1>
+        <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
+        <hr className="m-y-2" />
+        <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
+        <p className="lead">
+          <Button color="primary">Learn More</Button>
+        </p>
+      </Jumbotron>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/JumbotronFluid.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Jumbotron, Container } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Jumbotron fluid>
+        <Container fluid>
+          <h1 className="display-3">Fluid jumbotron</h1>
+          <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
+        </Container>
+      </Jumbotron>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/routes.js

@@ -21,6 +21,7 @@ import CardPage from './Components/CardPage';
 import TablesPage from './Components/TablesPage';
 import PaginationPage from './Components/PaginationPage';
 import TabsPage from './Components/TabsPage';
+import JumbotronPage from './Components/JumbotronPage';
 import NotFound from './NotFound';
 import Components from './Components';
 import UI from './UI';
@@ -50,6 +51,7 @@ const routes = (
       <Route path="media/" component={MediaPage} />
       <Route path="pagination/" component={PaginationPage} />
       <Route path="tabs/" component={TabsPage} />
+      <Route path="jumbotron/" component={JumbotronPage} />
     </Route>
     <Route path="*" component={NotFound} />
   </Route>

docs/static/docs.css

@@ -2,20 +2,20 @@
   max-width: 1200px;
 }
 
-.jumbotron, .jumbotron p:last-child, .navbar {
+.jumbotron-header, .jumbotron-header p:last-child, .navbar {
   margin-bottom: 0
 }
 
-.jumbotron .btn {
+.jumbotron-header .btn {
   margin-right: 1rem;
 }
 
-.jumbotron .btn + .btn {
+.jumbotron-header .btn + .btn {
   margin-right: 0;
 }
 
 @media (max-width: 543px) {
-  .jumbotron .btn {
+  .jumbotron-header .btn {
     display: block;
     margin: 0 0 1rem 0;
   }
@@ -71,7 +71,7 @@
 .social a:hover {
   color: #fff
 }
-.jumbotron {
+.jumbotron-header {
   padding-top: 2rem;
   padding-bottom: 2rem;
   background-color: #fff

src/Jumbotron.js

@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  fluid: PropTypes.bool,
+  className: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'div'
+};
+
+const Jumbotron = (props) => {
+  const {
+    className,
+    tag: Tag,
+    fluid,
+    ...attributes
+  } = props;
+
+  const classes = classNames(
+    className,
+    'jumbotron',
+    fluid ? 'jumbotron-fluid' : false
+  );
+
+  return (
+    <Tag {...attributes} className={classes} />
+  );
+};
+
+Jumbotron.propTypes = propTypes;
+Jumbotron.defaultProps = defaultProps;
+
+export default Jumbotron;

src/index.js

@@ -60,6 +60,7 @@ import PaginationItem from './PaginationItem';
 import PaginationLink from './PaginationLink';
 import TabContent from './TabContent';
 import TabPane from './TabPane';
+import Jumbotron from './Jumbotron';
 
 export {
   Container,
@@ -123,5 +124,6 @@ export {
   PaginationItem,
   PaginationLink,
   TabContent,
-  TabPane
+  TabPane,
+  Jumbotron
 };

test/Jumbotron.spec.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Jumbotron } from 'reactstrap';
+
+describe('Jumbotron', () => {
+  it('should render children', () => {
+    const wrapper = shallow(<Jumbotron>Hello World</Jumbotron>);
+
+    expect(wrapper.text()).toBe('Hello World');
+  });
+
+  it('should render elements as children', () => {
+    const wrapper = mount(<Jumbotron><h1>Hello from h1</h1></Jumbotron>);
+
+    expect(wrapper.find('h1').length).toBe(1);
+    expect(wrapper.find('h1').text()).toBe('Hello from h1');
+  });
+
+  it('should have class jumbotron', () => {
+    const wrapper = shallow(<Jumbotron>Hello</Jumbotron>);
+
+    expect(wrapper.hasClass('jumbotron')).toBe(true);
+  });
+
+  it('should render fluid jumbotron', () => {
+    const wrapper = shallow(<Jumbotron fluid>Hello</Jumbotron>);
+
+    expect(wrapper.hasClass('jumbotron')).toBe(true);
+    expect(wrapper.hasClass('jumbotron-fluid')).toBe(true);
+  });
+
+  it('should render custom class', () => {
+    const wrapper = shallow(<Jumbotron className="custom-class">Hello</Jumbotron>);
+
+    expect(wrapper.hasClass('custom-class')).toBe(true);
+  });
+});

webpack.dev.config.js

@@ -33,6 +33,7 @@ var paths = [
   '/components/media/',
   '/components/pagination/',
   '/components/tabs/',
+  '/components/jumbotron/',
   '/404.html'
 ];