feat(Container): Added responsive container support (reactstrap#1724)

Resolves reactstrap#1721

Author: kyletsang

docs/lib/Components/LayoutPage.js

@@ -5,9 +5,11 @@ import PageTitle from '../UI/PageTitle';
 import SectionTitle from '../UI/SectionTitle';
 import LayoutExample from '../examples/Layout';
 import LayoutRowColsExample from '../examples/LayoutRowCols';
+import ContainerResponsiveExample from '../examples/ContainerResponsive';
 
 const LayoutExampleSource = require('!!raw-loader!../examples/Layout');
 const LayoutRowColsExampleSource = require('!!raw-loader!../examples/LayoutRowCols');
+const ContainerResponsiveExampleSource = require('!!raw-loader!../examples/ContainerResponsive');
 
 export default class LayoutsPage extends React.Component {
   render() {
@@ -26,8 +28,8 @@ export default class LayoutsPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`Container.propTypes = {
-  fluid:  PropTypes.bool
-  // applies .container-fluid class
+  fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  // applies .container-fluid class if bool or .container-{breakpoint} if string
 }`}
           </PrismCode>
         </pre>
@@ -77,6 +79,15 @@ Col.propTypes = {
 }`}
           </PrismCode>
         </pre>
+        <h4>Container</h4>
+        <div className="docs-example">
+          <ContainerResponsiveExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ContainerResponsiveExampleSource}
+          </PrismCode>
+        </pre>
         <h4>Row Columns</h4>
         <div className="docs-example">
           <LayoutRowColsExample />

docs/lib/examples/ContainerResponsive.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Container } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Container className="themed-container">.container</Container>
+      <Container className="themed-container" fluid="sm">.container-sm</Container>
+      <Container className="themed-container" fluid="md">.container-md</Container>
+      <Container className="themed-container" fluid="lg">.container-lg</Container>
+      <Container className="themed-container" fluid="xl">.container-xl</Container>
+      <Container className="themed-container" fluid={true}>.container-fluid</Container>
+    </>
+  );
+}
+
+export default Example;

docs/static/docs.css

@@ -205,6 +205,47 @@ pre, code {
   margin-bottom: 1rem;
 }
 
+.docs-example .themed-container {
+  padding: 15px;
+  margin-bottom: 30px;
+  background-color: rgba(0, 123, 255, .15);
+  border: 1px solid rgba(0, 123, 255, .2);
+}
+
+/* Use fixed widths to illustrate responsive container behavior in the narrow content area */
+@media (min-width: 576px) {
+  .themed-container.container,
+  .themed-container.container-sm {
+    max-width: 400px;
+  }
+}
+
+@media (min-width: 768px) {
+  .themed-container.container,
+  .themed-container.container-sm,
+  .themed-container.container-md {
+    max-width: 440px;
+  }
+}
+
+@media (min-width: 992px) {
+  .themed-container.container,
+  .themed-container.container-sm,
+  .themed-container.container-md,
+  .themed-container.container-lg {
+    max-width: 580px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .themed-container.container,
+  .themed-container.container-sm,
+  .themed-container.container-md,
+  .themed-container.container-lg,
+  .themed-container.container-xl {
+    max-width: 620px;
+  }
+}
 
 /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx&plugins=autolinker */
 /**

src/Container.js

@@ -5,7 +5,7 @@ import { mapToCssModules, tagPropType } from './utils';
 
 const propTypes = {
   tag: tagPropType,
-  fluid: PropTypes.bool,
+  fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
@@ -23,9 +23,17 @@ const Container = (props) => {
     ...attributes
   } = props;
 
+  let containerClass = 'container';
+  if (fluid === true) {
+    containerClass = 'container-fluid';
+  }
+  else if (fluid) {
+    containerClass = `container-${fluid}`;
+  }
+
   const classes = mapToCssModules(classNames(
     className,
-    fluid ? 'container-fluid' : 'container'
+    containerClass
   ), cssModule);
 
   return (

src/__tests__/Container.spec.js

@@ -35,4 +35,11 @@ describe('Container', () => {
     expect(wrapper.hasClass('container')).toBe(true);
     expect(wrapper.type()).toBe('main');
   });
+
+  it('should render responsive breakpoints with string fluid props', () => {
+    const wrapper = shallow(<Container fluid="md" />);
+
+    expect(wrapper.hasClass('container')).toBe(false);
+    expect(wrapper.hasClass('container-md')).toBe(true);
+  });
 });