bootstrap-for-ember-rails 0.0.2

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/badge.md

@@ -0,0 +1,80 @@
+# Badge
+
+<div class="bs-example">
+    <a href="#"> Inbox {{bs-badge content="42"}} </a>
+</div>
+
+``` html
+<a href="#"> Inbox\{\{bs-badge content="42"\}\} </a>
+```
+
+## Built-in styles
+
+Works well with built-in styles that are included for placing badges in active states in pill and list navigations.
+
+<div class="bs-example">
+    <ul class="nav nav-pills">
+        <li class="active"><a href="#">Home {{bs-badge content=42}}</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages {{bs-badge content=3}}</a></li>
+    </ul>
+    <br>
+    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+        <li class="active">
+            <a href="#">
+                {{bs-badge class="pull-right"content=42}}
+                Home
+            </a>
+        </li>
+        <li><a href="#">Profile</a></li>
+        <li>
+            <a href="#">
+                {{bs-badge class="pull-right"content=3}}
+                Messages
+            </a>
+        </li>
+    </ul>
+</div>
+
+``` html
+<ul class="nav nav-pills">
+    <li class="active"><a href="#">Home \{\{bs-badge content=42\}\}</a></li>
+    <li><a href="#">Profile</a></li>
+    <li><a href="#">Messages \{\{bs-badge content=3\}\}</a></li>
+</ul>
+<br>
+<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+    <li class="active">
+        <a href="#">
+            \{\{bs-badge class="pull-right"content=42\}\}
+            Home
+        </a>
+    </li>
+    <li><a href="#">Profile</a></li>
+    <li>
+        <a href="#">
+            \{\{bs-badge class="pull-right"content=3\}\}
+            Messages
+        </a>
+    </li>
+</ul>
+```
+
+## Component Properties
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>content</td>
+                <td>string: The content of the badge.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/breadcrumbs.md

@@ -0,0 +1,28 @@
+#Breadcrumbs
+
+Indicate the current page's location within a navigational hierarchy.
+
+The breadcrumbs is magically constructed by interpreting the current router location,
+
+_Move between components and look at the showcase's breadcrumbs on the top of the screen _
+
+
+The only thing needed to setup breadcrumbs is add to one of your top templates (such _application_ template):
+
+```html
+\{\{bs-breadcrumbs\}\}
+```
+
+#Breadcrumbs Names
+
+By default the name of the breadcrumbs is set to the route name,
+you can change this behavior by specifying some meta info on the route:
+
+
+```javascript
+SomeRoute = Ember.Route.extend({
+    breadcrumbs: {name: 'Primary'}
+
+    ...
+})
+```

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/button.md

@@ -0,0 +1,247 @@
+# Button
+
+
+## Types
+
+<div class="bs-example">
+    {{#bs-button}}Content{{/bs-button}}
+    {{bs-button title="Inline Text"}}
+    {{#bs-button type="primary"}}Primary{{/bs-button}}
+    {{#bs-button type="link"}}Link{{/bs-button}}
+
+    <p>All other types such as **info**, **warning**, **danger** are supported.</p>
+</div>
+
+
+``` html
+<!-- Standard gray default button with gradient -->
+\{\{#bs-button\}\}Content\{\{/bs-button\}\}
+
+<!--Inline text as button content-->
+\{\{bs-button title="Inline Text"\}\}
+
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+\{\{#bs-button type="primary"\}\}Primary\{\{/bs-button\}\}
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+\{\{#bs-button type="link"\}\}Link\{\{/bs-button\}\}
+```
+
+
+## Sizes
+
+In correspondence with bootstrap css class button sizes `.btn-lg`, `.btn-sm`, or `.btn-xs`, size can simply defined by the _size_ property or use one of the size properties: `small=true`, `large=true`, `xs=true`
+
+<div class="bs-example">
+    <p>
+        {{bs-button type="primary" size="xs" title="Primary Extra Small Button"}}
+        {{bs-button type="info" small=true title="Info Small Button"}}
+        {{bs-button type="danger" title="Danger Default size button"}}
+        {{#bs-button size="lg"}}Default Large button{{/bs-button}}
+    </p>
+</div>
+
+``` html
+\{\{bs-button type="primary" size="xs" title="Primary Extra Small Button"\}\}
+\{\{bs-button type="info" small=true title="Info Small Button"\}\}
+\{\{bs-button type="danger" title="Danger Default size button"\}\}
+\{\{#bs-button size="lg"\}\}Default Large button\{\{/bs-button\}\}
+```
+
+## Icon
+
+<div class="bs-example">
+    <p>
+        {{bs-button icon="fa fa-check" title="Button with Icon"}}
+    <p>
+</div>
+
+Simply add an `icon` property to the button meta data, such:
+
+``` html
+\{\{bs-button icon="fa fa-check" title="Danger Default size button"\}\}
+```
+
+Will render an `<i class="fa fa-check"></i>` tag within the button tag.
+
+## Block Level
+
+block level buttons—those that span the full width of a parent— by adding `block=true`
+
+<div class="bs-example">
+    {{#bs-button type="primary" xs=true block=true}}Block Button{{/bs-button}}
+</div>
+
+``` html
+\{\{#bs-button type="primary" xs=true block=true}}Block Button\{\{/bs-button\}\}
+```
+
+## Disbled state
+
+As in Bootstrap, set `disabled="disabled"`/`disabled=true` to make the button unclickable.
+
+<div class="bs-example">
+    {{#bs-button type="primary" disabled=true}}Disabled Button{{/bs-button}}
+</div>
+
+``` html
+\{\{#bs-button type="primary" disabled=true\}\}Disabled Button\{\{/bs-button\}\}
+```
+
+Disabled state can also be hooked to a controller property
+
+<div class="bs-example">
+    {{bs-button type="primary" title="Click to disable" disabled=isButtonDisabled clicked="disableButton"}}
+</div>
+
+``` html
+\{\{bs-button type="primary" title="Click to disable" disabled=isButtonDisabled clicked="disableButton"\}\}
+```
+
+* `isButtonDisabled` is a boolean property on the controller
+* `disableButton` is a function on the controller that sets `isButtonDisabled` to _false_
+
+## Param
+
+It is possible to pass a parameter to the action in the controller that is bound to the click event by using the `clickedParam` property.
+
+<div class="bs-example">
+    {{#bs-button type="primary" clicked="buttonWithParam" clickedParamBinding="controller"}}Button with Param{{/bs-button}}
+</div>
+
+
+``` html
+\{\{#bs-button type="primary" clicked="buttonWithParam" clickedParamBinding="controller"\}\}Button with Param\{\{/bs-button\}\}
+```
+
+Action in controller:
+
+``` javascript
+MyController = Ember.Controller.extend({
+    actions: {
+        buttonWithParam: function(expectedMyself) {
+            alert("Passed controller as a param: " + expectedMyself);
+        }
+    }
+)}
+```
+
+## State
+
+By Bootstrap:
+> Add `data-loading-text="Loading..."` to use a loading state on a button.
+
+Then extra `loading=loadingState` is needed where *loadingState* is a property in the *controller* that returns a string which
+defines the current state of the button:
+
+* If `loadingState` property equals `loading` then the button will be disabled and its text will change to the value of the `data-loading-text` button property.
+* If its value is `null` then the button will be re-enabled and its text will be modified to the original value defined in the `title` button property.
+
+<div class="bs-example">
+    {{bs-button type="primary" data-loading-text="Loading..." loading=loadingState clicked="disableButton" title="Submit" clicked="startLoading"}}
+</div>
+
+
+``` html
+\{\{bs-button type="primary" data-loading-text="Loading..." loading=loadingState title="Submit" clicked="startLoading"\}\}
+```
+
+<p>In controller:</p>
+
+``` javascript
+startLoading: function() {
+    var _this = this;
+    this.set('loadingState', 'loading');
+    return Ember.run.later(function() {
+      return _this.set('loadingState', null);
+    }, 2000);
+}
+```
+
+The `loading` property may also return any string that matches one of the `data-foo-text` button property to render other text
+but the original text of the button when the loading state completes.
+
+<div class="bs-example">
+    {{bs-button type="primary" data-loading-text="Loading..." data-completed-text="Completed!" loading=loadingState1 title="Submit!" clicked="startLoading1"}}
+</div>
+
+``` javascript
+startLoading1: function() {
+    var _this = this;
+    this.set('loadingState', 'loading');
+    return Ember.run.later(function() {
+      return _this.set('loadingState', 'completed');
+    }, 2000);
+}
+```
+
+Pay attention that this time the `loadingState` is set to `completed` and not `null`.
+
+
+
+## Component Properties
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>type</td>
+                <td>Alert types: _success_ | _info_ | _warning_ | _danger_</td>
+            </tr>
+            <tr>
+                <td>title</td>
+                <td>A string representing the text of the button (_not required if component is used as a block component_)</td>
+            </tr>
+            <tr>
+                <td>clicked</td>
+                <td>Triggers the specified function name on the <strong>controller</strong> immediately when the button is clicked.</td>
+            </tr>
+            <tr>
+                <td>clickedParam</td>
+                <td>A parameter to pass the action to be invoked immediately when the button is clicked</td>
+            </tr>
+            <tr>
+                <td>size</td>
+                <td>Can be: _xs_ | _sm_ | _lg_</td>
+            </tr>
+            <tr>
+                <td>xs</td>
+                <td>If set to _true_ it is equivalent to `size=xs`</td>
+            </tr>
+            <tr>
+                <td>small</td>
+                <td>If set to _true_ it is equivalent to `size=small`</td>
+            </tr>
+            <tr>
+                <td>large</td>
+                <td>If set to _true_ it is equivalent to `size=large`</td>
+            </tr>
+            <tr>
+                <td>block</td>
+                <td>If _true_ the button is a block level and will span the full width of its parent</td>
+            </tr>
+            <tr>
+                <td>disabled</td>
+                <td>If _true_ the button will be disabled, can also be bound to a _controller_ property</td>
+            </tr>
+            <tr>
+                <td>loading</td>
+                <td>Bound to a controller property that defines the state of the button.</td>
+            </tr>
+            <tr>
+                <td>data-loading-text</td>
+                <td>If `loading=foo` and `foo` is a property in the _controller_ and `foo` property returns `loading`, then the text of the button will be changed to the value of _this_ property.</td>
+            </tr>
+            <tr>
+                <td>data-xxx-text</td>
+                <td>If `loading=foo` and `foo` is a property in the _controller_ and `foo` property returns `xxx`, then the text of the button will be changed to the value of _this_ property.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/buttonGroup.md

@@ -0,0 +1,99 @@
+# Button Group
+
+To wrap a series of buttons, use the _bs-btn-group_ component.
+
+## Standard
+
+<div class="bs-example">
+    {{bs-btn-group contentBinding="options" selectedBinding="selected"}}
+    <br/>
+    Controller say selected item is: {{selected}}
+</div>
+
+_content_ is an array of options, each option is rendered as a _button_ tag.
+
+**TODO: SHOW CODE**
+
+## Icons
+
+It is possible to set an icon for the selected button in a group or/and an icon for the in-active buttons by
+setting the `icon_active` and/or `icon_inactive` properties to the icon class name.
+
+<div class="bs-example">
+    {{bs-btn-group icon_inactive="fa fa-square-o" icon_active="fa fa-check-square-o" contentBinding="options" selectedBinding="selected"}}
+    <br/>
+    Controller say selected item is: {{selected}}
+</div>
+
+```html
+<div class="bs-example">
+    \{\{bs-btn-group icon_inactive="fa fa-square-o" icon_active="fa fa-check-square-o" contentBinding="options" selectedBinding="selected"\}\}
+    <br/>
+    Controller say selected item is: \{\{selected\}\}
+</div>
+```
+
+## Button Toolbar
+
+Combine sets of bs-btn-groups into a bs-btn-toolbar for more complex components.
+
+<div class="bs-example">
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group contentBinding="options" selectedBinding="selected"}}
+        {{bs-btn-group contentBinding="options2" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+</div>
+
+## Sizing
+
+You can set size in the group level instead of setting size per button.
+
+<div class="bs-example">
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group size="lg" contentBinding="options" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group contentBinding="options" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group small=true contentBinding="options" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group size="xs" contentBinding="options" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+</div>
+
+
+## Vertical variation
+
+Make a set of buttons appear vertically stacked rather than horizontally by adding `vertical=true`.
+
+<div class="bs-example">
+    {{bs-btn-group contentBinding="options" selectedBinding="selected" vertical=true}}
+</div>
+
+## Buttons with Metadata
+
+It is possible to provide extra metadata per button in the group.
+
+<div class="bs-example">
+    {{#bs-btn-toolbar}}
+        {{bs-btn-group size="lg" contentBinding="optionsWithMeta" selectedBinding="selected"}}
+    {{/bs-btn-toolbar}}
+</div>
+
+``` html
+\{\{bs-btn-group size="lg" contentBinding="optionsWithMeta" selectedBinding="selected"\}\}
+```
+
+_Controller's code_:
+
+``` javascript
+
+Showcase.ShowComponentsButtonGroupController = Ember.Controller.extend({
+  optionsWithMeta: [
+    Ember.Object.create({title: 'Create', type: 'primary'}),
+    Ember.Object.create(({title: 'Destroy', type: 'danger'})
+  ]
+});
+```