Skip to content

Commit 20f9c03

Browse files
binoy14eddywashere
binoy14
authored and
eddywashere
committed
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
1 parent 17cea25 commit 20f9c03

11 files changed

Lines changed: 179 additions & 9 deletions

File tree

‎docs/lib/Components/JumbotronPage.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { PrismCode } from 'react-prism';
3+
import Helmet from 'react-helmet';
4+
5+
import JumbotronExample from '../examples/Jumbotron';
6+
import JumbotronFluidExample from "../examples/JumbotronFluid";
7+
8+
const JumbotronExampleSource = require('!!raw!../examples/Jumbotron');
9+
const JumbotronFluidExampleSource = require('!!raw!../examples/JumbotronFluid');
10+
11+
export default class JumbotronPage extends React.Component {
12+
render() {
13+
return (
14+
<div>
15+
<Helmet title="Jumbotron" />
16+
<h3>Jumbotron</h3>
17+
<hr />
18+
<div className="docs-example">
19+
<JumbotronExample />
20+
</div>
21+
<pre>
22+
<PrismCode className="language-jsx">
23+
{JumbotronExampleSource}
24+
</PrismCode>
25+
</pre>
26+
<h4>Properties</h4>
27+
<pre>
28+
<PrismCode className="language-jsx">
29+
{`Jumbotron.propTypes = {
30+
// Pass in a Component to override default element
31+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
32+
fluid: PropTypes.bool,
33+
className: PropTypes.any
34+
};`}
35+
</PrismCode>
36+
</pre>
37+
38+
<h3>Fluid Jumbotron</h3>
39+
<hr />
40+
<div className="docs-example">
41+
<JumbotronFluidExample />
42+
</div>
43+
<pre>
44+
<PrismCode className="language-jsx">
45+
{JumbotronFluidExampleSource}
46+
</PrismCode>
47+
</pre>
48+
</div>
49+
);
50+
}
51+
}

‎docs/lib/Components/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ class Components extends React.Component {
101101
name: 'Tabs',
102102
to: '/components/tabs/'
103103
},
104+
{
105+
name: 'Jumbotron',
106+
to: '/components/jumbotron/'
107+
}
104108
]
105109
};
106110
}

‎docs/lib/Home/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { PrismCode } from 'react-prism';
3-
import { Button, Container, Row, Col } from 'reactstrap';
3+
import { Button, Container, Row, Col, Jumbotron } from 'reactstrap';
44
import { Link } from 'react-router';
55
import Example from '../examples/import-basic';
66

@@ -9,7 +9,7 @@ const importBasic = require('!!raw!../examples/import-basic');
99
export default () => {
1010
return (
1111
<div>
12-
<section className="jumbotron text-xs-center m-b-3">
12+
<Jumbotron tag="section" className="jumbotron-header text-xs-center m-b-3">
1313
<Container fluid>
1414
<Row>
1515
<Col>
@@ -27,7 +27,7 @@ export default () => {
2727
</Col>
2828
</Row>
2929
</Container>
30-
</section>
30+
</Jumbotron>
3131
<Container fluid>
3232
<Row>
3333
<Col sm={{ size: 8, offset: 2 }}>

‎docs/lib/examples/Jumbotron.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Jumbotron, Button } from 'reactstrap';
3+
4+
const Example = (props) => {
5+
return (
6+
<div>
7+
<Jumbotron>
8+
<h1 className="display-3">Hello, world!</h1>
9+
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
10+
<hr className="m-y-2" />
11+
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
12+
<p className="lead">
13+
<Button color="primary">Learn More</Button>
14+
</p>
15+
</Jumbotron>
16+
</div>
17+
);
18+
};
19+
20+
export default Example;

‎docs/lib/examples/JumbotronFluid.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Jumbotron, Container } from 'reactstrap';
3+
4+
const Example = (props) => {
5+
return (
6+
<div>
7+
<Jumbotron fluid>
8+
<Container fluid>
9+
<h1 className="display-3">Fluid jumbotron</h1>
10+
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
11+
</Container>
12+
</Jumbotron>
13+
</div>
14+
);
15+
};
16+
17+
export default Example;

‎docs/lib/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import CardPage from './Components/CardPage';
2121
import TablesPage from './Components/TablesPage';
2222
import PaginationPage from './Components/PaginationPage';
2323
import TabsPage from './Components/TabsPage';
24+
import JumbotronPage from './Components/JumbotronPage';
2425
import NotFound from './NotFound';
2526
import Components from './Components';
2627
import UI from './UI';
@@ -50,6 +51,7 @@ const routes = (
5051
<Route path="media/" component={MediaPage} />
5152
<Route path="pagination/" component={PaginationPage} />
5253
<Route path="tabs/" component={TabsPage} />
54+
<Route path="jumbotron/" component={JumbotronPage} />
5355
</Route>
5456
<Route path="*" component={NotFound} />
5557
</Route>

‎docs/static/docs.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
max-width: 1200px;
33
}
44

5-
.jumbotron, .jumbotron p:last-child, .navbar {
5+
.jumbotron-header, .jumbotron-header p:last-child, .navbar {
66
margin-bottom: 0
77
}
88

9-
.jumbotron .btn {
9+
.jumbotron-header .btn {
1010
margin-right: 1rem;
1111
}
1212

13-
.jumbotron .btn + .btn {
13+
.jumbotron-header .btn + .btn {
1414
margin-right: 0;
1515
}
1616

1717
@media (max-width: 543px) {
18-
.jumbotron .btn {
18+
.jumbotron-header .btn {
1919
display: block;
2020
margin: 0 0 1rem 0;
2121
}
@@ -71,7 +71,7 @@
7171
.social a:hover {
7272
color: #fff
7373
}
74-
.jumbotron {
74+
.jumbotron-header {
7575
padding-top: 2rem;
7676
padding-bottom: 2rem;
7777
background-color: #fff

‎src/Jumbotron.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
4+
const propTypes = {
5+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
6+
fluid: PropTypes.bool,
7+
className: PropTypes.any
8+
};
9+
10+
const defaultProps = {
11+
tag: 'div'
12+
};
13+
14+
const Jumbotron = (props) => {
15+
const {
16+
className,
17+
tag: Tag,
18+
fluid,
19+
...attributes
20+
} = props;
21+
22+
const classes = classNames(
23+
className,
24+
'jumbotron',
25+
fluid ? 'jumbotron-fluid' : false
26+
);
27+
28+
return (
29+
<Tag {...attributes} className={classes} />
30+
);
31+
};
32+
33+
Jumbotron.propTypes = propTypes;
34+
Jumbotron.defaultProps = defaultProps;
35+
36+
export default Jumbotron;

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ import PaginationItem from './PaginationItem';
6060
import PaginationLink from './PaginationLink';
6161
import TabContent from './TabContent';
6262
import TabPane from './TabPane';
63+
import Jumbotron from './Jumbotron';
6364

6465
export {
6566
Container,
@@ -123,5 +124,6 @@ export {
123124
PaginationItem,
124125
PaginationLink,
125126
TabContent,
126-
TabPane
127+
TabPane,
128+
Jumbotron
127129
};

‎test/Jumbotron.spec.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { shallow, mount } from 'enzyme';
3+
import { Jumbotron } from 'reactstrap';
4+
5+
describe('Jumbotron', () => {
6+
it('should render children', () => {
7+
const wrapper = shallow(<Jumbotron>Hello World</Jumbotron>);
8+
9+
expect(wrapper.text()).toBe('Hello World');
10+
});
11+
12+
it('should render elements as children', () => {
13+
const wrapper = mount(<Jumbotron><h1>Hello from h1</h1></Jumbotron>);
14+
15+
expect(wrapper.find('h1').length).toBe(1);
16+
expect(wrapper.find('h1').text()).toBe('Hello from h1');
17+
});
18+
19+
it('should have class jumbotron', () => {
20+
const wrapper = shallow(<Jumbotron>Hello</Jumbotron>);
21+
22+
expect(wrapper.hasClass('jumbotron')).toBe(true);
23+
});
24+
25+
it('should render fluid jumbotron', () => {
26+
const wrapper = shallow(<Jumbotron fluid>Hello</Jumbotron>);
27+
28+
expect(wrapper.hasClass('jumbotron')).toBe(true);
29+
expect(wrapper.hasClass('jumbotron-fluid')).toBe(true);
30+
});
31+
32+
it('should render custom class', () => {
33+
const wrapper = shallow(<Jumbotron className="custom-class">Hello</Jumbotron>);
34+
35+
expect(wrapper.hasClass('custom-class')).toBe(true);
36+
});
37+
});

0 commit comments

Comments
 (0)