From 2c912abfb6027890d54ac091e18d515152cc395f Mon Sep 17 00:00:00 2001
From: Phoebe Gao <phoebe.gao@appfolio.com>
Date: Fri, 19 Feb 2021 09:27:58 -0800
Subject: [PATCH] feat!: remove Jumbotron component (#2118)

---
 docs/lib/Components/JumbotronPage.js | 51 ----------------------------
 docs/lib/Components/index.js         |  4 ---
 docs/lib/Home/index.js               |  6 ++--
 docs/lib/NotFound/index.js           |  2 +-
 docs/lib/PremiumThemes/index.js      |  5 ++-
 docs/lib/examples/Jumbotron.js       | 20 -----------
 docs/lib/examples/JumbotronFluid.js  | 17 ----------
 docs/lib/routes.js                   |  2 --
 src/Jumbotron.js                     | 40 ----------------------
 src/__tests__/Jumbotron.spec.js      | 37 --------------------
 src/index.js                         |  1 -
 types/index.d.ts                     |  2 --
 types/lib/Jumbotron.d.ts             | 12 -------
 types/lib/index.d.ts                 |  2 --
 types/reactstrap-tests.tsx           | 42 -----------------------
 15 files changed, 6 insertions(+), 237 deletions(-)
 delete mode 100644 docs/lib/Components/JumbotronPage.js
 delete mode 100644 docs/lib/examples/Jumbotron.js
 delete mode 100644 docs/lib/examples/JumbotronFluid.js
 delete mode 100644 src/Jumbotron.js
 delete mode 100644 src/__tests__/Jumbotron.spec.js
 delete mode 100644 types/lib/Jumbotron.d.ts

diff --git a/docs/lib/Components/JumbotronPage.js b/docs/lib/Components/JumbotronPage.js
deleted file mode 100644
index 662d179a0..000000000
--- a/docs/lib/Components/JumbotronPage.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { PrismCode } from 'react-prism';
-import PageTitle from '../UI/PageTitle';
-import SectionTitle from '../UI/SectionTitle';
-
-import JumbotronExample from '../examples/Jumbotron';
-import JumbotronFluidExample from "../examples/JumbotronFluid";
-
-const JumbotronExampleSource = require('!!raw-loader!../examples/Jumbotron');
-const JumbotronFluidExampleSource = require('!!raw-loader!../examples/JumbotronFluid');
-
-export default class JumbotronPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <PageTitle title="Jumbotron" />
-        <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.string
-};`}
-          </PrismCode>
-        </pre>
-
-        <SectionTitle>Fluid Jumbotron</SectionTitle>
-        <hr />
-        <div className="docs-example">
-          <JumbotronFluidExample />
-        </div>
-        <pre>
-          <PrismCode className="language-jsx">
-            {JumbotronFluidExampleSource}
-          </PrismCode>
-        </pre>
-      </div>
-    );
-  }
-}
diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js
index a974dbd0b..687790723 100644
--- a/docs/lib/Components/index.js
+++ b/docs/lib/Components/index.js
@@ -54,10 +54,6 @@ const items = [
     name: 'Input Group',
     to: '/components/input-group/'
   },
-  {
-    name: 'Jumbotron',
-    to: '/components/jumbotron/'
-  },
   {
     name: 'Layout',
     to: '/components/layout/'
diff --git a/docs/lib/Home/index.js b/docs/lib/Home/index.js
index f222d1e8c..21eb6740d 100644
--- a/docs/lib/Home/index.js
+++ b/docs/lib/Home/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PrismCode } from 'react-prism';
-import { Button, Container, Row, Col, Jumbotron } from 'reactstrap';
+import { Button, Container, Row, Col } from 'reactstrap';
 import { Link } from 'react-router';
 import Example from '../examples/import-basic';
 
@@ -9,7 +9,7 @@ const importBasic = require('!!raw-loader!../examples/import-basic');
 export default () => {
   return (
     <div>
-      <Jumbotron tag="section" className="jumbotron-header text-center mb-3">
+      <section className="jumbotron-header rounded px-3 px-sm-4 py-3 py-sm-5 text-center mb-3">
         <Container>
           <Row>
             <Col>
@@ -40,7 +40,7 @@ export default () => {
             </Col>
           </Row>
         </Container>
-      </Jumbotron>
+      </section>
       <Container>
         <Row className="justify-content-sm-center">
           <Col sm={8} className="docSearch-content">
diff --git a/docs/lib/NotFound/index.js b/docs/lib/NotFound/index.js
index 4399b3fa5..27989a949 100644
--- a/docs/lib/NotFound/index.js
+++ b/docs/lib/NotFound/index.js
@@ -7,7 +7,7 @@ export default () => {
   return (
     <div>
       <Helmet title="404 Page Not Found" />
-      <section className="jumbotron text-center mb-3">
+      <section className="rounded px-3 px-sm-4 py-3 py-sm-5 text-center mb-3">
         <Container>
           <Row>
             <Col>
diff --git a/docs/lib/PremiumThemes/index.js b/docs/lib/PremiumThemes/index.js
index 6ca194a86..c3b2822e3 100644
--- a/docs/lib/PremiumThemes/index.js
+++ b/docs/lib/PremiumThemes/index.js
@@ -7,14 +7,13 @@ import {
   Container,
   Row,
   Col,
-  Jumbotron,
 } from 'reactstrap';
 import premiumThemes from './premium';
 
 export default () => {
   return (
     <div>
-      <Jumbotron tag="section" className="jumbotron-header text-center mb-3">
+      <section className="jumbotron-header rounded px-3 px-sm-4 py-3 py-sm-5 text-center mb-3">
         <p className="lead">
           <img src="/assets/logo.png" alt="" width="110px" />
         </p>
@@ -23,7 +22,7 @@ export default () => {
           A collection of free and premium React templates and themes powered by
           Reactstrap
         </h4>
-      </Jumbotron>
+      </section>
       {premiumThemes.map(company => (
         <Container key={company.creator.name} className="premium-section">
           <h2 className="font-weight-bold">{company.creator.name}</h2>
diff --git a/docs/lib/examples/Jumbotron.js b/docs/lib/examples/Jumbotron.js
deleted file mode 100644
index ad6e8750e..000000000
--- a/docs/lib/examples/Jumbotron.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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="my-2" />
-        <p>It uses utility classes for typography 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;
diff --git a/docs/lib/examples/JumbotronFluid.js b/docs/lib/examples/JumbotronFluid.js
deleted file mode 100644
index d5c8ed25c..000000000
--- a/docs/lib/examples/JumbotronFluid.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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;
diff --git a/docs/lib/routes.js b/docs/lib/routes.js
index ee195bc0e..1b0419b4d 100644
--- a/docs/lib/routes.js
+++ b/docs/lib/routes.js
@@ -23,7 +23,6 @@ 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 AlertsPage from './Components/AlertsPage';
 import ToastsPage from './Components/ToastsPage';
 import CollapsePage from './Components/CollapsePage';
@@ -66,7 +65,6 @@ const routes = (
         <Route path="tabs/" component={TabsPage} />
         <Route path="alerts/" component={AlertsPage} />
         <Route path="toasts/" component={ToastsPage} />
-        <Route path="jumbotron/" component={JumbotronPage} />
         <Route path="collapse/" component={CollapsePage} />
         <Route path="carousel/" component={CarouselPage} />
         <Route path="list/" component={ListPage} />
diff --git a/src/Jumbotron.js b/src/Jumbotron.js
deleted file mode 100644
index 69ee2f8de..000000000
--- a/src/Jumbotron.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { mapToCssModules, tagPropType } from './utils';
-
-const propTypes = {
-  tag: tagPropType,
-  fluid: PropTypes.bool,
-  className: PropTypes.string,
-  cssModule: PropTypes.object,
-};
-
-const defaultProps = {
-  tag: 'div'
-};
-
-const Jumbotron = (props) => {
-  const {
-    className,
-    cssModule,
-    tag: Tag,
-    fluid,
-    ...attributes
-  } = props;
-
-  const classes = mapToCssModules(classNames(
-    className,
-    'jumbotron',
-    fluid ? 'jumbotron-fluid' : false
-  ), cssModule);
-
-  return (
-    <Tag {...attributes} className={classes} />
-  );
-};
-
-Jumbotron.propTypes = propTypes;
-Jumbotron.defaultProps = defaultProps;
-
-export default Jumbotron;
diff --git a/src/__tests__/Jumbotron.spec.js b/src/__tests__/Jumbotron.spec.js
deleted file mode 100644
index d8c537446..000000000
--- a/src/__tests__/Jumbotron.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Jumbotron } from '../';
-
-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').hostNodes().length).toBe(1);
-    expect(wrapper.find('h1').hostNodes().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);
-  });
-});
diff --git a/src/index.js b/src/index.js
index 07ec94bb5..b1b9db4b9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -73,7 +73,6 @@ export PaginationItem from './PaginationItem';
 export PaginationLink from './PaginationLink';
 export TabContent from './TabContent';
 export TabPane from './TabPane';
-export Jumbotron from './Jumbotron';
 export Alert from './Alert';
 export Toast from './Toast';
 export ToastBody from './ToastBody';
diff --git a/types/index.d.ts b/types/index.d.ts
index fdcbf57e0..5c5c680dd 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -88,8 +88,6 @@ export { default as InputGroupButtonDropdown } from './lib/InputGroupButtonDropd
 export { InputGroupButtonDropdownProps } from './lib/InputGroupButtonDropdown';
 export { default as InputGroupText } from './lib/InputGroupText';
 export { InputGroupTextProps } from './lib/InputGroupText';
-export { default as Jumbotron } from './lib/Jumbotron';
-export { JumbotronProps } from './lib/Jumbotron';
 export { default as Label } from './lib/Label';
 export { LabelProps } from './lib/Label';
 export { default as ListGroup } from './lib/ListGroup';
diff --git a/types/lib/Jumbotron.d.ts b/types/lib/Jumbotron.d.ts
deleted file mode 100644
index 63ee82916..000000000
--- a/types/lib/Jumbotron.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { CSSModule } from './index';
-
-export interface JumbotronProps extends React.HTMLAttributes<HTMLElement> {
-  [key: string]: any;
-  tag?: React.ElementType;
-  fluid?: boolean;
-  cssModule?: CSSModule;
-}
-
-declare class Jumbotron extends React.Component<JumbotronProps> {}
-export default Jumbotron;
diff --git a/types/lib/index.d.ts b/types/lib/index.d.ts
index f66cd80f4..c795adbaa 100644
--- a/types/lib/index.d.ts
+++ b/types/lib/index.d.ts
@@ -92,8 +92,6 @@ export { default as InputGroupButtonDropdown } from './InputGroupButtonDropdown'
 export { InputGroupButtonDropdownProps } from './InputGroupButtonDropdown';
 export { default as InputGroupText } from './InputGroupText';
 export { InputGroupTextProps } from './InputGroupText';
-export { default as Jumbotron } from './Jumbotron';
-export { JumbotronProps } from './Jumbotron';
 export { default as Label } from './Label';
 export { LabelProps } from './Label';
 export { default as ListGroup } from './ListGroup';
diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx
index 036975237..04b071568 100644
--- a/types/reactstrap-tests.tsx
+++ b/types/reactstrap-tests.tsx
@@ -59,7 +59,6 @@ import {
   Modal,
   ModalBody,
   ModalHeader,
-  Jumbotron,
   Media,
   Nav,
   Navbar,
@@ -2083,44 +2082,6 @@ const Example58 = (props: any) => {
   );
 };
 
-const Example59 = (props: any) => {
-  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="my-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>
-  );
-};
-
-const Example60 = (props: any) => {
-  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>
-  );
-};
-
 class Example61 extends React.Component {
   render() {
     return (
@@ -4888,7 +4849,6 @@ import { default as InputGroup_ } from './lib/InputGroup'; /* tslint:disable-lin
 import { default as InputGroupAddon_ } from './lib/InputGroupAddon'; /* tslint:disable-line: no-relative-import-in-test */
 import { default as InputGroupButtonDropdown_ } from './lib/InputGroupButtonDropdown'; /* tslint:disable-line: no-relative-import-in-test */
 import { default as InputGroupText_ } from './lib/InputGroupText'; /* tslint:disable-line: no-relative-import-in-test */
-import { default as Jumbotron_ } from './lib/Jumbotron'; /* tslint:disable-line: no-relative-import-in-test */
 import { default as Label_ } from './lib/Label'; /* tslint:disable-line: no-relative-import-in-test */
 import { default as ListGroup_ } from './lib/ListGroup'; /* tslint:disable-line: no-relative-import-in-test */
 import { default as ListGroupItem_ } from './lib/ListGroupItem'; /* tslint:disable-line: no-relative-import-in-test */
@@ -5001,7 +4961,6 @@ function AnyPropExample() {
         addonType="prepend"
       />
       <InputGroupText_ foo={1} bar={false} foobar="example" />
-      <Jumbotron_ foo={1} bar={false} foobar="example" />
       <Label_ foo={1} bar={false} foobar="example" />
       <ListGroup_ foo={1} bar={false} foobar="example" />
       <ListGroupItem_ foo={1} bar={false} foobar="example" />
@@ -5755,7 +5714,6 @@ const MegaTest = () => {
         addonType="append"
       />
       <InputGroupText ref={React.createRef<InputGroupText>()} {...htmlProps} />
-      <Jumbotron ref={React.createRef<Jumbotron>()} {...htmlProps} />
       <Label ref={React.createRef<Label>()} {...htmlProps} />
       <ListGroup ref={React.createRef<ListGroup>()} {...htmlProps} />
       <ListGroupItem ref={React.createRef<ListGroupItem>()} {...htmlProps} />