Merge pull request react-bootstrap#1505 from taion/docs-tweak

Improve organization of components page

docs/examples/PagerDefault.js

@@ -1,6 +1,7 @@
 const pagerInstance = (
   <Pager>
     <PageItem href="#">Previous</PageItem>
+    {' '}
     <PageItem href="#">Next</PageItem>
   </Pager>
 );

docs/src/sections/AlertsSection.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function AlertsSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="alerts">Alert messages</Anchor> <small>Alert</small>
+      </h2>
+
+      <p>Basic alert styles.</p>
+      <ReactPlayground codeText={Samples.AlertBasic} />
+
+      <h3><Anchor id="alerts-closeable">Closeable alerts</Anchor></h3>
+      <p>just pass in a <code>onDismiss</code> function.</p>
+      <ReactPlayground codeText={Samples.AlertDismissable} />
+
+      <div className="bs-callout bs-callout-info">
+        <h4>Screen Reader Accessibility</h4>
+      <p>Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.</p>
+      </div>
+
+      <h3><Anchor id="alerts-auto-closeable">Auto closeable</Anchor></h3>
+      <p>Auto close after a set time with <code>dismissAfter</code> prop.</p>
+      <ReactPlayground codeText={Samples.AlertAutoDismissable} />
+
+      <h3><Anchor id="alert-props">Props</Anchor></h3>
+      <PropTable component="Alert"/>
+    </div>
+  );
+}

docs/src/sections/BadgeSection.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function BadgeSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="badges">Badges</Anchor> <small>Badge</small>
+      </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} />
+      <div className="bs-callout bs-callout-info">
+        <h4>Cross-browser compatibility</h4>
+        <p>Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.</p>
+      </div>
+
+      <h3><Anchor id="badges-props">Props</Anchor></h3>
+      <PropTable component="Badge"/>
+    </div>
+  );
+}

docs/src/sections/BreadcrumbSection.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function BreadcrumbSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItem</small>
+      </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>
+
+      <h3><Anchor id="breadcrumbs-example">Breadcrumbs Example</Anchor></h3>
+      <ReactPlayground codeText={Samples.Breadcrumb} />
+
+      <h3><Anchor id="breadcrumbs-props">Props</Anchor></h3>
+      <p><code>Breadcrumb</code> component itself doesn't have any specific public properties</p>
+
+      <h4><Anchor id="breadcrumbs-props-breadcrumbItem">BreadcrumbItem</Anchor></h4>
+      <PropTable component="BreadcrumbItem"/>
+    </div>
+  );
+}

docs/src/sections/ButtonGroupSection.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function ButtonGroupSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="btn-groups">Button groups</Anchor> <small>ButtonGroup, ButtonToolbar</small>
+      </h2>
+
+      <p className="lead">Group a series of buttons together on a single line with the button group.</p>
+
+      <h3><Anchor id="btn-groups-single">Basic example</Anchor></h3>
+      <p>Wrap a series of <code>{"<Button />"}</code>s in a <code>{"<ButtonGroup />"}</code>.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupBasic} />
+
+      <h3><Anchor id="btn-groups-toolbar">Button toolbar</Anchor></h3>
+      <p>Combine sets of <code>{"<ButtonGroup />"}</code>s into a <code>{"<ButtonToolbar />"}</code> for more complex components.</p>
+      <ReactPlayground codeText={Samples.ButtonToolbarBasic} />
+
+      <h3><Anchor id="btn-groups-sizing">Sizing</Anchor></h3>
+      <p>Instead of applying button sizing props to every button in a group, just add <code>bsSize</code> prop to the <code>{"<ButtonGroup />"}</code>.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupSizes} />
+
+      <h3><Anchor id="btn-groups-nested">Nesting</Anchor></h3>
+      <p>You can place other button types within the <code>{"<ButtonGroup />"}</code> like <code>{"<DropdownButton />"}</code>s.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupNested} />
+
+      <h3><Anchor id="btn-groups-vertical">Vertical variation</Anchor></h3>
+      <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong
+        className="text-danger">Split button dropdowns are not supported here.</strong></p>
+      <p>Just add <code>vertical</code> to the <code>{"<ButtonGroup />"}</code>.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupVertical} />
+      <br />
+      <p>Moreover, you can have buttons be block level elements so they take the full width of their container, just add <code>block</code> to the <code>{"<ButtonGroup />"}</code>, in addition to the <code>vertical</code> you just added.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupBlock} />
+
+      <h3><Anchor id="btn-groups-justified">Justified button groups</Anchor></h3>
+      <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
+      <div className="bs-callout bs-callout-warning">
+        <h4>Style issues</h4>
+        <p>There are some issues and workarounds required when using this property, please see <a href="http://getbootstrap.com/components/#btn-groups-justified">bootstrap&#8217;s button group docs</a> for more specifics.</p>
+      </div>
+      <p>Just add <code>justified</code> to the <code>{"<ButtonGroup />"}</code>.</p>
+      <ReactPlayground codeText={Samples.ButtonGroupJustified} />
+
+      <h3><Anchor id="btn-groups-props">Props</Anchor></h3>
+      <PropTable component="ButtonGroup"/>
+    </div>
+  );
+}

docs/src/sections/ButtonSection.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function ButtonSection() {
+  return (
+    <div className="bs-docs-section">
+      <h1 className="page-header">
+        <Anchor id="buttons">Buttons</Anchor> <small>Button</small>
+      </h1>
+
+      <h3><Anchor id="buttons-options">Options</Anchor></h3>
+      <p>Use any of the available button style types to quickly create a styled button. Just modify the <code>bsStyle</code> prop.</p>
+      <ReactPlayground codeText={Samples.ButtonTypes} />
+      <div className="bs-callout bs-callout-warning">
+        <h4>Button spacing</h4>
+        <p>Because React doesn't output newlines between elements, buttons on the same line are displayed
+        flush against each other. To preserve the spacing between multiple inline buttons, wrap your
+        button group in <code>{"<ButtonToolbar />"}</code>.</p>
+      </div>
+
+      <h3><Anchor id="buttons-sizes">Sizes</Anchor></h3>
+      <p>Fancy larger or smaller buttons? Add <code>bsSize="large"</code>, <code>bsSize="small"</code>, or <code>bsSize="xsmall"</code> for additional sizes.</p>
+      <ReactPlayground codeText={Samples.ButtonSizes} />
+
+      <p>Create block level buttons—those that span the full width of a parent— by adding the <code>block</code> prop.</p>
+      <ReactPlayground codeText={Samples.ButtonBlock} />
+
+      <h3><Anchor id="buttons-active">Active state</Anchor></h3>
+      <p>To set a buttons active state simply set the components <code>active</code> prop.</p>
+      <ReactPlayground codeText={Samples.ButtonActive} />
+
+      <h3><Anchor id="buttons-disabled">Disabled state</Anchor></h3>
+      <p>Make buttons look unclickable by fading them back 50%. To do this add the <code>disabled</code> attribute to buttons.</p>
+      <ReactPlayground codeText={Samples.ButtonDisabled} />
+
+      <div className="bs-callout bs-callout-warning">
+        <h4>Event handler functionality not impacted</h4>
+        <p>This prop will only change the <code>{"<Button />"}</code>&#8217;s appearance, not its
+          functionality. Use custom logic to disable the effect of the <code>onClick</code> handlers.</p>
+      </div>
+
+      <h3><Anchor id="buttons-tags">Button tags</Anchor></h3>
+      <p>The DOM element tag is choosen automatically for you based on the props you supply. Passing
+        a <code>href</code> will result in the button using a <code>{"<a />"}</code> element otherwise
+        a <code>{"<button />"}</code> element will be used.</p>
+      <ReactPlayground codeText={Samples.ButtonTagTypes} />
+
+      <h3><Anchor id="buttons-loading">Button loading state</Anchor></h3>
+      <p>When activating an asynchronous action from a button it is a good UX pattern to give the user
+        feedback as to the loading state, this can easily be done by updating
+        your <code>{"<Button />"}</code>&#8217;s props from a state change like below.</p>
+      <ReactPlayground codeText={Samples.ButtonLoading} />
+
+      <h3><Anchor id="buttons-props">Props</Anchor></h3>
+      <PropTable component="Button"/>
+    </div>
+  );
+}

docs/src/sections/CarouselSection.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function CarouselSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="carousels">Carousels</Anchor> <small>Carousel, CarouselItem</small>
+      </h2>
+
+      <h3><Anchor id="carousels-uncontrolled">Uncontrolled</Anchor></h3>
+      <p>Allow the component to control its own state.</p>
+      <ReactPlayground codeText={Samples.CarouselUncontrolled} exampleClassName="bs-example-tabs" />
+
+      <h3><Anchor id="carousels-controlled">Controlled</Anchor></h3>
+      <p>Pass down the active state on render via props.</p>
+      <ReactPlayground codeText={Samples.CarouselControlled} exampleClassName="bs-example-tabs" />
+
+      <h3><Anchor id="carousels-props">Props</Anchor></h3>
+
+      <h4><Anchor id="carousels-props-carousel">Carousel</Anchor></h4>
+      <PropTable component="Carousel"/>
+
+      <h4><Anchor id="carousels-props-item">CarouselItem</Anchor></h4>
+      <PropTable component="CarouselItem"/>
+    </div>
+  );
+}

docs/src/sections/DropdownSection.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function DropdownSection() {
+  return (
+    <div className="bs-docs-section">
+      <h2 className="page-header">
+        <Anchor id="btn-dropdowns">Dropdowns</Anchor> <small>DropdownButton, SplitButton, Dropdown</small>
+      </h2>
+
+      <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} />
+
+      <h3><Anchor id="btn-dropdowns-split">Split button dropdowns</Anchor></h3>
+      <p>Similarly, create split button dropdowns with the <code>{"<SplitButton />"}</code> component.</p>
+      <ReactPlayground codeText={Samples.SplitButtonBasic} />
+
+      <h3><Anchor id="btn-dropdowns-sizing">Sizing</Anchor></h3>
+      <p>Dropdowns work with buttons of all sizes.</p>
+      <ReactPlayground codeText={Samples.DropdownButtonSizes} />
+
+      <h3><Anchor id="btn-dropdowns-nocaret">No caret variation</Anchor></h3>
+      <p>Remove the caret using the <code>noCaret</code> prop.</p>
+      <ReactPlayground codeText={Samples.DropdownButtonNoCaret} />
+
+      <h3><Anchor id="btn-dropdowns-dropup">Dropup variation</Anchor></h3>
+      <p>Trigger dropdown menus that site above the button by adding the <code>dropup</code> prop.</p>
+      <ReactPlayground codeText={Samples.SplitButtonDropup} />
+
+      <h3><Anchor id="btn-dropdowns-right">Dropdown right variation</Anchor></h3>
+      <p>Trigger dropdown menus that align to the right of the button using the <code>pullRight</code> prop.</p>
+      <ReactPlayground codeText={Samples.SplitButtonRight} />
+
+      <h3><Anchor id="btn-dropdowns-custom">Dropdown Customization</Anchor></h3>
+      <p>
+        If the default handling of the dropdown menu and toggle components aren't to your liking, you can
+        customize them, by using the more basic <code>Dropdown</code> Component to explicitly specify
+        the Toggle and Menu components
+      </p>
+      <div className="bs-callout bs-callout-info">
+        <h4>Additional Import Options</h4>
+        <p>
+          As a convenience Toggle and Menu components available as static properties
+          on the Dropdown component. However, you can also import them directly, from
+          the <code>/lib</code> directory like: <code>{'require("react-bootstrap/lib/DropdownToggle")'}</code>.
+        </p>
+      </div>
+      <ReactPlayground codeText={Samples.DropdownButtonCustom} />
+
+      <h4>Custom Dropdown Components</h4>
+
+      <p>
+        For those that want to customize everything, you can forgo the included Toggle and Menu components,
+        and create your own. In order to tell the Dropdown component what role your custom components play
+        add a special prop <code>bsRole</code> to your menu or toggle components. The Dropdown expects
+        at least one component with <code>bsRole="toggle"</code> and exactly one with <code>bsRole="menu"</code>.
+      </p>
+      <ReactPlayground codeText={Samples.DropdownButtonCustomMenu} />
+
+      <h3><Anchor id="btn-dropdowns-props">Props</Anchor></h3>
+
+      <h4><Anchor id="btn-dropdowns-props-dropdown-button">DropdownButton</Anchor></h4>
+      <PropTable component="DropdownButton"/>
+
+      <h4><Anchor id="btn-dropdowns-props-split">SplitButton</Anchor></h4>
+      <PropTable component="SplitButton"/>
+
+      <h4><Anchor id="btn-dropdowns-props-dropdown">Dropdown</Anchor></h4>
+      <PropTable component="Dropdown"/>
+    </div>
+  );
+}

docs/src/sections/FormSection.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import Anchor from '../Anchor';
+import PropTable from '../PropTable';
+import ReactPlayground from '../ReactPlayground';
+import Samples from '../Samples';
+
+export default function FormSection() {
+  return (
+    <div className="bs-docs-section">
+      <h1 className="page-header">
+        <Anchor id="forms">Forms</Anchor> <small>Input, ButtonInput, FormControls</small>
+      </h1>
+
+      <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} />
+
+      <h3><Anchor id="input-types">Types</Anchor></h3>
+      <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="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} />
+
+      <h3><Anchor id="button-input-types">Button Input Types</Anchor></h3>
+      <p>Form buttons are encapsulated by <code>ButtonInput</code>. Pass in <code>type="reset"</code> or <code>type="submit"</code> to suit your needs. Styling is the same as <code>Button</code>.</p>
+      <ReactPlayground codeText={Samples.ButtonInput} />
+
+      <h3><Anchor id="input-addons">Add-ons</Anchor></h3>
+      <p>Use <code>addonBefore</code> and <code>addonAfter</code> for normal addons, <code>buttonBefore</code> and <code>buttonAfter</code> for button addons.
+      Exotic configurations may require some css on your side.</p>
+      <ReactPlayground codeText={Samples.InputAddons} />
+
+      <h3><Anchor id="input-sizes">Sizes</Anchor></h3>
+      <p>Use <code>bsSize</code> to change the size of inputs. It also works with addons and most other options.</p>
+      <ReactPlayground codeText={Samples.InputSizes} />
+
+      <h3><Anchor id="input-validation">Validation</Anchor></h3>
+      <p>Set <code>bsStyle</code> to one of <code>success</code>, <code>warning</code> or <code>error</code>.
+      Add <code>hasFeedback</code> to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.</p>
+      <ReactPlayground codeText={Samples.InputValidation} />
+
+      <h3><Anchor id="input-horizontal">Horizontal forms</Anchor></h3>
+      <p>Use <code>labelClassName</code> and <code>wrapperClassName</code> properties to add col classes manually.
+      <code>checkbox</code> and <code>radio</code> types need special treatment because label wraps input.</p>
+      <ReactPlayground codeText={Samples.InputHorizontal} />
+
+      <h3><Anchor id="input-wrapper">Use as a wrapper</Anchor></h3>
+      <p>If <code>type</code> is not set, child element(s) will be rendered instead of an input element.
+      <code>getValue()</code> will not work when used this way.</p>
+      <ReactPlayground codeText={Samples.InputWrapper} />
+
+      <h3><Anchor id="input-props">Props</Anchor></h3>
+      <PropTable component="InputBase"/>
+    </div>
+  );
+}