Merge pull request react-bootstrap#1349 from AlexKVal/liftup

v0.26-rc liftup

Author: AlexKVal

.eslintrc

@@ -16,13 +16,10 @@
     "constructor-super": 2,
     "comma-dangle": 0,
     "eqeqeq": [2, "allow-null"],
-    "func-names": 0,
-    "guard-for-in": 0,
     "one-var": [2, { "initialized": "never" }],
     "prefer-const": 0,
     "key-spacing": 0,
     "no-eq-null": 0,
-    "no-else-return": 0,
     "no-param-reassign": 0,
     "no-this-before-super": 2,
     "no-undef": 2,

docs/examples/ImageResponsive.js

@@ -0,0 +1,5 @@
+const imageResponsiveInstance = (
+  <Image src="/assets/thumbnail.png" responsive />
+);
+
+React.render(imageResponsiveInstance, mountNode);

docs/examples/ImageShape.js

@@ -0,0 +1,17 @@
+const imageShapeInstance = (
+  <Grid>
+    <Row>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" rounded />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" circle />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" thumbnail />
+      </Col>
+    </Row>
+  </Grid>
+);
+
+React.render(imageShapeInstance, mountNode);

docs/server.js

@@ -21,11 +21,11 @@ if (development) {
   let webpackPort = process.env.WEBPACK_DEV_PORT;
   let target = `http://${ip.address()}:${webpackPort}`;
 
-  app.get('/assets/*', function(req, res) {
+  app.get('/assets/*', (req, res) => {
     proxy.web(req, res, { target });
   });
 
-  proxy.on('error', function(e) {
+  proxy.on('error', e => {
     console.log('Could not connect to webpack proxy'.red);
     console.log(e.toString().red);
   });
@@ -49,7 +49,7 @@ if (development) {
   app.use(express.static(path.join(__dirname, '../docs-built')));
 }
 
-app.listen(port, function() {
+app.listen(port, () => {
   console.log(`Server started at:`);
   console.log(`- http://localhost:${port}`);
   console.log(`- http://${ip.address()}:${port}`);

docs/src/ComponentsPage.js

@@ -675,6 +675,22 @@ const ComponentsPage = React.createClass({
                   <PropTable component="Col"/>
                 </div>
 
+                {/* Images */}
+                <div className="bs-docs-section">
+                  <h1 className="page-header"><Anchor id="images">Images</Anchor></h1>
+
+                  <h3><Anchor id="image-shape">Shape</Anchor></h3>
+                  <p>Use the <code>rounded</code>, <code>circle</code> and <code>thumbnail</code> props to customise the image.</p>
+                  <ReactPlayground codeText={Samples.ImageShape} />
+
+                  <h3><Anchor id="image-responsive">Responsive</Anchor></h3>
+                  <p>Use the <code>responsive</code> to scale image nicely to the parent element.</p>
+                  <ReactPlayground codeText={Samples.ImageResponsive} />
+
+                  <h3><Anchor id="image-props">Props</Anchor></h3>
+                  <PropTable component="Image"/>
+                </div>
+
                 {/* Thumbnail */}
                 <div className="bs-docs-section">
                   <h1 className="page-header"><Anchor id="thumbnail">Thumbnail</Anchor></h1>
@@ -937,6 +953,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href="#alerts" key={14}>Alerts</NavItem>
                     <NavItem href="#carousels" key={15}>Carousels</NavItem>
                     <NavItem href="#grids" key={16}>Grids</NavItem>
+                    <NavItem href="#images" key={29}>Images</NavItem>
                     <NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
                     <NavItem href="#listgroup" key={18}>List group</NavItem>
                     <NavItem href="#labels" key={19}>Labels</NavItem>

docs/src/GettingStartedPage.js

@@ -104,11 +104,11 @@ $ bower install react-bootstrap`
                 <div className="bs-docs-section">
                   <h2 className="page-header"><Anchor id="browser-support">Browser support</Anchor></h2>
                   <p>We aim to support all browsers supported by both <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">React</a> and <a href="http://getbootstrap.com/getting-started/#support">Bootstrap</a>.</p>
+                  <p>Unfortunately, due to the lack of resources and the will of dedicating the efforts to modern browsers and getting closer to Bootstrap's features, we will not be testing <code>react-bootstrap</code> against IE8 anymore.
+                    <br/>We will however continue supporting IE8 as long as people submit PRs addressing compatibility issues with it.</p>
 
                   <p>React requires <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">polyfills for non-ES5 capable browsers.</a></p>
 
-                  <p><a href="http://jquery.com">jQuery</a> is currently required only for IE8 support for components which require reading element positions from the DOM: <code>Popover</code> and <code>Tooltip</code> when launched with <code>OverlayTrigger</code>. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:</p>
-
                   <div className="highlight">
                     <CodeExample
                       mode="htmlmixed"
@@ -123,7 +123,6 @@ $ bower install react-bootstrap`
   </script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
 <![endif]-->`

docs/src/PropTable.js

@@ -1,4 +1,4 @@
-import merge from 'lodash/object/merge';
+import merge from 'lodash-compat/object/merge';
 import React from 'react';
 import Glyphicon from '../../src/Glyphicon';
 import Label from '../../src/Label';
@@ -174,9 +174,9 @@ const PropTable = React.createClass({
       return 'function';
     } else if (typeName === 'bool') {
       return 'boolean';
-    } else {
-      return typeName;
     }
+
+    return typeName;
   },
 
   renderEnum(enumType) {

docs/src/ReactPlayground.js

@@ -17,14 +17,15 @@ const CarouselItem = require('../../src/CarouselItem');
 const Col = require('../../src/Col');
 const Collapse = require('../../src/Collapse');
 const CollapsibleNav = require('../../src/CollapsibleNav');
-const Dropdown = require('../../src/Dropdown').default;
+const Dropdown = require('../../src/Dropdown');
 const DropdownButton = require('../../src/DropdownButton');
 const DropdownMenu = require('../../src/DropdownMenu');
 const Fade = require('../../src/Fade');
 const FormControls = require('../../src/FormControls');
 const Glyphicon = require('../../src/Glyphicon');
 const Grid = require('../../src/Grid');
 const Input = require('../../src/Input');
+const Image = require('../../src/Image');
 const Jumbotron = require('../../src/Jumbotron');
 const Label = require('../../src/Label');
 const ListGroup = require('../../src/ListGroup');

docs/src/Samples.js

@@ -105,6 +105,8 @@ export default {
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
   MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'),
+  ImageResponsive:               require('fs').readFileSync(__dirname + '/../examples/ImageResponsive.js', 'utf8'),
+  ImageShape:                    require('fs').readFileSync(__dirname + '/../examples/ImageShape.js', 'utf8'),
 
   Overlay:                       require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'),
   OverlayCustom:                 require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8')

karma.conf.js

@@ -1,4 +1,4 @@
-/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0 */
+/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0, func-names: 0 */
 require('babel/register');
 
 var webpackConfig = require('./webpack/test.config.js');