Refactor ComponentsPage to use the new CollapsibleNav

Author: AlexKVal

docs/examples/.eslintrc

@@ -13,7 +13,7 @@
     "Button",
     "ButtonGroup",
     "ButtonToolbar",
-    "CollapsableNav",
+    "CollapsibleNav",
     "CollapsibleMixin",
     "Carousel",
     "CarouselItem",

docs/examples/CollapsableNav.js renamed to docs/examples/CollapsibleNav.js

@@ -1,6 +1,6 @@
 const navbarInstance = (
   <Navbar brand='React-Bootstrap' toggleNavKey={0}>
-    <CollapsableNav eventKey={0}> {/* This is the eventKey referenced */}
+    <CollapsibleNav eventKey={0}> {/* This is the eventKey referenced */}
       <Nav navbar>
         <NavItem eventKey={1} href='#'>Link</NavItem>
         <NavItem eventKey={2} href='#'>Link</NavItem>
@@ -16,7 +16,7 @@ const navbarInstance = (
         <NavItem eventKey={1} href='#'>Link Right</NavItem>
         <NavItem eventKey={2} href='#'>Link Right</NavItem>
       </Nav>
-    </CollapsableNav>
+    </CollapsibleNav>
   </Navbar>
 );
 

docs/examples/NavbarCollapsable.js renamed to docs/examples/NavbarCollapsible.js

@@ -351,7 +351,7 @@ const ComponentsPage = React.createClass({
                   <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded={true}')} the Navbar will start expanded by default.</p>
                   <div className='bs-callout bs-callout-info'>
                     <h4>Scrollbar overflow</h4>
-                    <p>The height of the collapsable is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
+                    <p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
                     <pre>
                       {React.DOM.code(null,
                         '.navbar-collapse {\n' +
@@ -360,17 +360,17 @@ const ComponentsPage = React.createClass({
                       )}
                     </pre>
                   </div>
-                  <ReactPlayground codeText={Samples.NavbarCollapsable} />
+                  <ReactPlayground codeText={Samples.NavbarCollapsible} />
 
                   <h3>Mobile Friendly (Multiple Nav Components)</h3>
-                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsableNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsableNav</code> component.</p>
+                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsibleNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsibleNav</code> component.</p>
                   <div className="bs-callout bs-callout-info">
                     <h4>Div collapse</h4>
-                    <p>The <code>navbar-collapse</code> div gets created as the collapsable element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsable navbar documentation.</p>
+                    <p>The <code>navbar-collapse</code> div gets created as the collapsible element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsible navbar documentation.</p>
                     <pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
                   </div>
 
-                  <ReactPlayground codeText={Samples.CollapsableNav} />
+                  <ReactPlayground codeText={Samples.CollapsibleNav} />
                 </div>
 
                 {/* Tabbed Areas */}

docs/src/ComponentsPage.js

@@ -6,7 +6,7 @@ import * as modBadge from '../../src/Badge';
 import * as modmodButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
 import * as modmodButtonToolbar from '../../src/ButtonToolbar';
-import * as modCollapsableNav from '../../src/CollapsableNav';
+import * as modCollapsibleNav from '../../src/CollapsibleNav';
 import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
 import * as modCarousel from '../../src/Carousel';
 import * as modCarouselItem from '../../src/CarouselItem';
@@ -53,7 +53,7 @@ const Badge = modBadge.default;
 const Button = modmodButton.default;
 const ButtonGroup = modButtonGroup.default;
 const ButtonToolbar = modmodButtonToolbar.default;
-const CollapsableNav = modCollapsableNav.default;
+const CollapsibleNav = modCollapsibleNav.default;
 const CollapsibleMixin = modCollapsibleMixin.default;
 const Carousel = modCarousel.default;
 const CarouselItem = modCarouselItem.default;

docs/src/ReactPlayground.js

@@ -52,8 +52,8 @@ export default {
   NavJustified:                  require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
   NavbarBasic:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
   NavbarBrand:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBrand.js', 'utf8'),
-  NavbarCollapsable:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsable.js', 'utf8'),
-  CollapsableNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsableNav.js', 'utf8'),
+  NavbarCollapsible:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
+  CollapsibleNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
   TabbedAreaUncontrolled:        require('fs').readFileSync(__dirname + '/../examples/TabbedAreaUncontrolled.js', 'utf8'),
   TabbedAreaControlled:          require('fs').readFileSync(__dirname + '/../examples/TabbedAreaControlled.js', 'utf8'),
   TabbedAreaNoAnimation:         require('fs').readFileSync(__dirname + '/../examples/TabbedAreaNoAnimation.js', 'utf8'),

docs/src/Samples.js

@@ -8,6 +8,7 @@ import Button from './Button';
 import ButtonGroup from './ButtonGroup';
 import ButtonToolbar from './ButtonToolbar';
 import CollapsableNav from './CollapsableNav';
+import CollapsibleNav from './CollapsibleNav';
 import Carousel from './Carousel';
 import CarouselItem from './CarouselItem';
 import Col from './Col';
@@ -60,6 +61,7 @@ export default {
   ButtonGroup,
   ButtonToolbar,
   CollapsableNav,
+  CollapsibleNav,
   Carousel,
   CarouselItem,
   Col,