Updating docs with new Static component

mattermost · May 26, 2015 · 93c95b6 · 93c95b6
1 parent 0c61f46
commit 93c95b6
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 2 deletions.
diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -20,6 +20,7 @@
     "CarouselItem",
     "Col",
     "DropdownButton",
+    "FormControls",
     "Glyphicon",
     "Grid",
     "Input",

diff --git a/docs/examples/InputTypes.js b/docs/examples/InputTypes.js
@@ -15,7 +15,6 @@ const inputTypeInstance = (
       <option value='other'>...</option>
     </Input>
     <Input type='textarea' label='Text Area' placeholder='textarea' />
-    <Input type='static' value='Static Text' />
     <ButtonInput value='Button Input' />
     <ButtonInput type='reset' value='Reset Button' />
     <ButtonInput type='submit' value='Submit Button' />

diff --git a/docs/examples/StaticText.js b/docs/examples/StaticText.js
@@ -0,0 +1,9 @@
+const staticTextExample = (
+  <form className="form-horizontal">
+    <FormControls.Static className="col-xs-10 col-xs-offset-2" value="I'm in a form" />
+    <FormControls.Static label="First Name" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value="Billy" />
+    <FormControls.Static label="Last Name" labelClassName="col-xs-2" wrapperClassName="col-xs-10">Bob</FormControls.Static>
+  </form>
+);
+
+React.render(staticTextExample, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -577,8 +577,10 @@ const ComponentsPage = React.createClass({
                   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} />
                   <h2 id='input-types'>Types</h2>
-                  <p>Supports <code>select</code>, <code>textarea</code>, <code>static</code> as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
+                  <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} />
+                  <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} />
                   <h2 id='button-input-types'>Button Input Types</h2>
                   <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} />

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
@@ -13,6 +13,7 @@ import * as modCarousel from '../../src/Carousel';
 import * as modCarouselItem from '../../src/CarouselItem';
 import * as modCol from '../../src/Col';
 import * as modDropdownButton from '../../src/DropdownButton';
+import * as modFormControls from '../../src/FormControls';
 import * as modGlyphicon from '../../src/Glyphicon';
 import * as modGrid from '../../src/Grid';
 import * as modInput from '../../src/Input';
@@ -64,6 +65,7 @@ const Carousel = modCarousel.default;
 const CarouselItem = modCarouselItem.default;
 const Col = modCol.default;
 const DropdownButton = modDropdownButton.default;
+const FormControls = modFormControls.default;
 const Glyphicon = modGlyphicon.default;
 const Grid = modGrid.default;
 const Input = modInput.default;

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -89,6 +89,7 @@ export default {
   TableResponsive:               require('fs').readFileSync(__dirname + '/../examples/TableResponsive.js', 'utf8'),
   Input:                         require('fs').readFileSync(__dirname + '/../examples/Input.js', 'utf8'),
   InputTypes:                    require('fs').readFileSync(__dirname + '/../examples/InputTypes.js', 'utf8'),
+  StaticText:                    require('fs').readFileSync(__dirname + '/../examples/StaticText.js', 'utf8'),
   ButtonInput:                   require('fs').readFileSync(__dirname + '/../examples/ButtonInput.js', 'utf8'),
   InputAddons:                   require('fs').readFileSync(__dirname + '/../examples/InputAddons.js', 'utf8'),
   InputSizes:                    require('fs').readFileSync(__dirname + '/../examples/InputSizes.js', 'utf8'),