Organize components page into sections

divyansh21jain · Nov 16, 2015 · 0aeaf27 · 0aeaf27
1 parent 234db05
commit 0aeaf27
Show file tree

Hide file tree

Showing 30 changed files with 162 additions and 114 deletions.
diff --git a/docs/examples/PagerDefault.js b/docs/examples/PagerDefault.js
@@ -1,6 +1,7 @@
 const pagerInstance = (
   <Pager>
     <PageItem href="#">Previous</PageItem>
+    {' '}
     <PageItem href="#">Next</PageItem>
   </Pager>
 );

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -16,10 +16,10 @@ import ButtonGroupSection from './sections/ButtonGroupSection';
 import ButtonSection from './sections/ButtonSection';
 import CarouselSection from './sections/CarouselSection';
 import DropdownSection from './sections/DropdownSection';
+import FormSection from './sections/FormSection';
 import GlyphiconSection from './sections/GlyphiconSection';
 import GridSection from './sections/GridSection';
 import ImageSection from './sections/ImageSection';
-import InputSection from './sections/InputSection';
 import JumbotronSection from './sections/JumbotronSection';
 import LabelSection from './sections/LabelSection';
 import ListGroupSection from './sections/ListGroupSection';
@@ -85,48 +85,78 @@ const ComponentsPage = React.createClass({
                 <DropdownSection />
                 <MenuItemSection />
 
-                <PanelSection />
+                <div className="bs-docs-section">
+                  <h1 className="page-header">
+                    <Anchor id="overlays">Overlays</Anchor>
+                  </h1>
+
+                  <p className="lead">React-Bootstrap offers a number of accessible overlay components built using <a href="http://react-bootstrap.github.io/react-overlays/examples/">react-overlays</a>.</p>
+                </div>
 
                 <ModalSection />
                 <TooltipSection />
                 <PopoverSection />
                 <OverlaySection />
 
-                <ProgressBarSection />
+                <div className="bs-docs-section">
+                  <h1 className="page-header">
+                    <Anchor id="navigation">Navigation</Anchor>
+                  </h1>
+
+                  <p className="lead">React-Bootstrap offers a variety of responsive, accessible components for setting up navigation both across your website and within your pages.</p>
+                </div>
 
                 <NavSection />
                 <NavbarSection />
                 <BreadcrumbSection />
                 <TabsSection />
-                <PagerSection />
                 <PaginationSection />
+                <PagerSection />
 
-                <AlertsSection />
+                <div className="bs-docs-section">
+                  <h1 className="page-header">
+                    <Anchor id="page-layout">Page layout</Anchor>
+                  </h1>
 
-                <CarouselSection />
+                  <p className="lead">The components in this section offer different ways to structure and present data on your page.</p>
+                </div>
 
                 <GridSection />
-
-                <ImageSection />
-                <ThumbnailSection />
-
+                <JumbotronSection />
+                <PageHeaderSection />
                 <ListGroupSection />
+                <TableSection />
+                <PanelSection />
+                <WellSection />
 
-                <LabelSection />
-                <BadgeSection />
+                <FormSection />
 
-                <JumbotronSection />
-                <PageHeaderSection />
+                <div className="bs-docs-section">
+                  <h1 className="page-header">
+                    <Anchor id="media-content">Media content</Anchor>
+                  </h1>
 
-                <ResponsiveEmbedSection />
+                  <p className="lead">The React-Bootstrap media content components offer ways to present images and other media to your users in a responsive way, along with support for styling those components.</p>
+                </div>
 
-                <WellSection />
+                <ImageSection />
+                <ThumbnailSection />
+                <ResponsiveEmbedSection />
+                <CarouselSection />
 
-                <GlyphiconSection />
+                <div className="bs-docs-section">
+                  <h1 className="page-header">
+                    <Anchor id="misc">Miscellaneous components</Anchor>
+                  </h1>
 
-                <TableSection />
+                  <p className="lead">React-Bootstrap also offers various standalone components that can be used to present specific, relevant kinds of information across your pages.</p>
+                </div>
 
-                <InputSection />
+                <GlyphiconSection />
+                <LabelSection />
+                <BadgeSection />
+                <AlertsSection />
+                <ProgressBarSection />
 
                 <div className="bs-docs-section">
                   <h1 className="page-header">
@@ -185,43 +215,62 @@ const ComponentsPage = React.createClass({
                         <NavItem href="#btn-dropdowns">Dropdowns</NavItem>
                         <NavItem href="#menu-items">Menu items</NavItem>
                       </SubNav>
-                      <NavItem href="#panels">Panels</NavItem>
-                      <NavItem href="#modals">Modals</NavItem>
-                      <NavItem href="#tooltips">Tooltips</NavItem>
-                      <NavItem href="#popovers">Popovers</NavItem>
-                      <NavItem href="#overlays">Overlays</NavItem>
-                      <NavItem href="#progress">Progress bars</NavItem>
-                      <NavItem href="#navs">Navs</NavItem>
-                      <NavItem href="#navbars">Navbars</NavItem>
-                      <NavItem href="#breadcrumbs">Breadcrumbs</NavItem>
-                      <NavItem href="#tabs">Tabs</NavItem>
-                      <NavItem href="#pager">Pager</NavItem>
-                      <NavItem href="#pagination">Pagination</NavItem>
-                      <NavItem href="#alerts">Alerts</NavItem>
-                      <NavItem href="#carousels">Carousels</NavItem>
-                      <NavItem href="#grids">Grids</NavItem>
-                      <NavItem href="#images">Images</NavItem>
-                      <NavItem href="#thumbnail">Thumbnails</NavItem>
-                      <NavItem href="#listgroup">List group</NavItem>
-                      <NavItem href="#labels">Labels</NavItem>
-                      <NavItem href="#badges">Badges</NavItem>
-                      <NavItem href="#jumbotron">Jumbotron</NavItem>
-                      <NavItem href="#page-header">Page header</NavItem>
-                      <NavItem href="#responsive-embed">Responsive embed</NavItem>
-                      <NavItem href="#wells">Wells</NavItem>
-                      <NavItem href="#glyphicons">Glyphicons</NavItem>
-                      <NavItem href="#tables">Tables</NavItem>
-                      <NavItem href="#input">Input</NavItem>
+
+                      <SubNav href="#overlays" text="Overlays">
+                        <NavItem href="#modals">Modals</NavItem>
+                        <NavItem href="#tooltips">Tooltips</NavItem>
+                        <NavItem href="#popovers">Popovers</NavItem>
+                        <NavItem href="#custom-overlays">Custom overlays</NavItem>
+                      </SubNav>
+
+                      <SubNav href="#navigation" text="Navigation">
+                        <NavItem href="#navs">Navs</NavItem>
+                        <NavItem href="#navbars">Navbars</NavItem>
+                        <NavItem href="#breadcrumbs">Breadcrumbs</NavItem>
+                        <NavItem href="#tabs">Tabs</NavItem>
+                        <NavItem href="#pagination">Pagination</NavItem>
+                        <NavItem href="#pager">Pager</NavItem>
+                      </SubNav>
+
+                      <SubNav href="#page-layout" text="Page layout">
+                        <NavItem href="#grid">Grid system</NavItem>
+                        <NavItem href="#jumbotron">Jumbotron</NavItem>
+                        <NavItem href="#page-header">Page header</NavItem>
+                        <NavItem href="#listgroup">List group</NavItem>
+                        <NavItem href="#tables">Tables</NavItem>
+                        <NavItem href="#panels">Panels</NavItem>
+                        <NavItem href="#wells">Wells</NavItem>
+                      </SubNav>
+
+                      <NavItem href="#forms">Forms</NavItem>
+
+                      <SubNav href="#media-content" text="Media content">
+                        <NavItem href="#images">Images</NavItem>
+                        <NavItem href="#thumbnail">Thumbnails</NavItem>
+                        <NavItem href="#responsive-embed">Responsive embed</NavItem>
+                        <NavItem href="#carousels">Carousels</NavItem>
+                      </SubNav>
+
+                      <SubNav href="#misc" text="Miscellaneous">
+                        <NavItem href="#glyphicons">Glyphicons</NavItem>
+                        <NavItem href="#labels">Labels</NavItem>
+                        <NavItem href="#badges">Badges</NavItem>
+                        <NavItem href="#alerts">Alerts</NavItem>
+                        <NavItem href="#progress">Progress bars</NavItem>
+                      </SubNav>
+
                       <SubNav href="#utilities" text="Utilities">
                         <NavItem href="#transitions">Transitions</NavItem>
                       </SubNav>
+
                       <SubNav href="#missing" text="Missing components">
                         <NavItem href="#affix">Affix</NavItem>
                         <NavItem href="#scrollspy">Scrollspy</NavItem>
                       </SubNav>
                     </Nav>
+
                     <a className="back-to-top" href="#top">
-                    Back to top
+                      Back to top
                     </a>
                   </div>
                 </AutoAffix>

diff --git a/docs/src/sections/AlertsSection.js b/docs/src/sections/AlertsSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function AlertsSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="alerts">Alert messages</Anchor> <small>Alert</small>
-      </h1>
+      </h2>
 
       <p>Basic alert styles.</p>
       <ReactPlayground codeText={Samples.AlertBasic} />

diff --git a/docs/src/sections/BadgeSection.js b/docs/src/sections/BadgeSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function BadgeSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="badges">Badges</Anchor> <small>Badge</small>
-      </h1>
+      </h2>
 
       <p>Easily highlight new or unread items by adding a <code>{"<Badge>"}</code> to links, Bootstrap navs, and more.</p>
       <ReactPlayground codeText={Samples.Badge} />

diff --git a/docs/src/sections/BreadcrumbSection.js b/docs/src/sections/BreadcrumbSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function BreadcrumbSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItem</small>
-      </h1>
+      </h2>
 
       <p>Breadcrumbs are used to indicate the current page's location. Add <code>active</code> attribute to active <code>BreadcrumbItem</code>.</p>
       <p>Do not set both <code>active</code> and <code>href</code> attributes. <code>active</code> overrides <code>href</code> and <code>span</code> element is rendered instead of <code>a</code>.</p>

diff --git a/docs/src/sections/CarouselSection.js b/docs/src/sections/CarouselSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function CarouselSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="carousels">Carousels</Anchor> <small>Carousel, CarouselItem</small>
-      </h1>
+      </h2>
 
       <h3><Anchor id="carousels-uncontrolled">Uncontrolled</Anchor></h3>
       <p>Allow the component to control its own state.</p>

diff --git a/docs/src/sections/DropdownSection.js b/docs/src/sections/DropdownSection.js
@@ -12,8 +12,6 @@ export default function DropdownSection() {
         <Anchor id="btn-dropdowns">Dropdowns</Anchor> <small>DropdownButton, SplitButton, Dropdown</small>
       </h2>
 
-      <p className="lead">Use <code>{"<DropdownButton />"}</code> or <code>{"<SplitButton />"}</code> components to display a button with a dropdown menu.</p>
-
       <h3><Anchor id="btn-dropdowns-single">Single button dropdowns</Anchor></h3>
       <p>Create a dropdown button with the <code>{"<DropdownButton />"}</code> component.</p>
       <ReactPlayground codeText={Samples.DropdownButtonBasic} />

diff --git a/docs/src/sections/InputSection.js → docs/src/sections/FormSection.js b/docs/src/sections/InputSection.js → docs/src/sections/FormSection.js
@@ -5,14 +5,14 @@ import PropTable from '../PropTable';
 import ReactPlayground from '../ReactPlayground';
 import Samples from '../Samples';
 
-export default function InputSection() {
+export default function FormSection() {
   return (
     <div className="bs-docs-section">
       <h1 className="page-header">
-        <Anchor id="input">Input</Anchor> <small>Input, ButtonInput, FormControls</small>
+        <Anchor id="forms">Forms</Anchor> <small>Input, ButtonInput, FormControls</small>
       </h1>
 
-      <p>Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
+      <p>The <code>{'<Input>'}</code> component renders an input in Bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
       Use <code>getValue()</code> or <code>getChecked()</code> to get the current state.
       The helper method <code>getInputDOMNode()</code> returns the internal input element. If you don't want the <code>form-group</code> class applied apply the prop named <code>standalone</code>.</p>
       <ReactPlayground codeText={Samples.Input} />
@@ -21,7 +21,7 @@ export default function InputSection() {
       <p>Supports <code>select</code>, <code>textarea</code>, as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
       <ReactPlayground codeText={Samples.InputTypes} />
 
-      <h3><Anchor id="input-static">FormControls.Static</Anchor></h3>
+      <h3><Anchor id="forms-controls-static">FormControls.Static</Anchor></h3>
       <p>Static text can be added to your form controls through the use of the <code>FormControls.Static</code> component.</p>
       <ReactPlayground codeText={Samples.StaticText} />
 

diff --git a/docs/src/sections/GlyphiconSection.js b/docs/src/sections/GlyphiconSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function GlyphiconSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="glyphicons">Glyphicons</Anchor> <small>Glyphicon</small>
-      </h1>
+      </h2>
 
       <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
       <ReactPlayground codeText={Samples.Glyphicon} />

diff --git a/docs/src/sections/GridSection.js b/docs/src/sections/GridSection.js
@@ -8,21 +8,21 @@ import Samples from '../Samples';
 export default function GridSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
-        <Anchor id="grids">Grids</Anchor> <small>Grid, Row, Col</small>
-      </h1>
+      <h2 className="page-header">
+        <Anchor id="grid">Grid system</Anchor> <small>Grid, Row, Col</small>
+      </h2>
 
-      <ReactPlayground codeText={Samples.GridBasic} exampleClassName="bs-example-tabs" />
+      <ReactPlayground codeText={Samples.GridBasic} />
 
-      <h3><Anchor id="grids-props">Props</Anchor></h3>
+      <h3><Anchor id="grid-props">Props</Anchor></h3>
 
-      <h4><Anchor id="grids-props-grid">Grid</Anchor></h4>
+      <h4><Anchor id="grid-props-grid">Grid</Anchor></h4>
       <PropTable component="Grid"/>
 
-      <h4><Anchor id="grids-props-row">Row</Anchor></h4>
+      <h4><Anchor id="grid-props-row">Row</Anchor></h4>
       <PropTable component="Row"/>
 
-      <h4><Anchor id="grids-props-col">Col</Anchor></h4>
+      <h4><Anchor id="grid-props-col">Col</Anchor></h4>
       <PropTable component="Col"/>
     </div>
   );

diff --git a/docs/src/sections/ImageSection.js b/docs/src/sections/ImageSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function ImageSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="images">Images</Anchor> <small>Image</small>
-      </h1>
+      </h2>
 
       <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>

diff --git a/docs/src/sections/JumbotronSection.js b/docs/src/sections/JumbotronSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function JumbotronSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="jumbotron">Jumbotron</Anchor> <small>Jumbotron</small>
-      </h1>
+      </h2>
 
       <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
       <ReactPlayground codeText={Samples.Jumbotron} />

diff --git a/docs/src/sections/LabelSection.js b/docs/src/sections/LabelSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function LabelSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="labels">Labels</Anchor> <small>Label</small>
-      </h1>
+      </h2>
 
       <p>Create a <code>{"<Label>label</Label>"}</code> to highlight information</p>
       <ReactPlayground codeText={Samples.Label} />

diff --git a/docs/src/sections/ListGroupSection.js b/docs/src/sections/ListGroupSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function ListGroupSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="listgroup">List group</Anchor> <small>ListGroup, ListGroupItem</small>
-      </h1>
+      </h2>
 
       <p>List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
 

diff --git a/docs/src/sections/ModalSection.js b/docs/src/sections/ModalSection.js
@@ -8,9 +8,9 @@ import Samples from '../Samples';
 export default function ModalSection() {
   return (
     <div className="bs-docs-section">
-      <h1 className="page-header">
+      <h2 className="page-header">
         <Anchor id="modals">Modals</Anchor> <small>Modal</small>
-      </h1>
+      </h2>
 
       <h3><Anchor id="modals-static">Static Markup</Anchor></h3>
       <p>A modal dialog component</p>