style-guide 0.1.0 → 0.2.0

data/app/views/style_guide/partials/_button_disabled_state.erb

@@ -0,0 +1,2 @@
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>

data/app/views/style_guide/partials/_button_element.erb

@@ -0,0 +1,2 @@
+<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-large" disabled>Button</button>

data/app/views/style_guide/partials/_button_sizes.erb

@@ -0,0 +1,16 @@
+<p>
+  <button type="button" class="btn btn-large btn-primary">Large button</button>
+  <button type="button" class="btn btn-large">Large button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-primary">Default button</button>
+  <button type="button" class="btn">Default button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-small btn-primary">Small button</button>
+  <button type="button" class="btn btn-small">Small button</button>
+</p>
+<p>
+  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+  <button type="button" class="btn btn-mini">Mini button</button>
+</p>

data/app/views/style_guide/partials/_buttons.erb

@@ -1,167 +1,51 @@
-
-
-
-        <!-- Buttons
-        ================================================== -->
-        <section id="buttons">
-          <div class="page-header">
-            <h1>Buttons</h1>
-          </div>
-
-          <h2>Default buttons</h2>
-          <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Button</th>
-                <th>class=""</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><button type="button" class="btn">Default</button></td>
-                <td><code>btn</code></td>
-                <td>Standard gray button with gradient</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-primary">Primary</button></td>
-                <td><code>btn btn-primary</code></td>
-                <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-info">Info</button></td>
-                <td><code>btn btn-info</code></td>
-                <td>Used as an alternative to the default styles</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-success">Success</button></td>
-                <td><code>btn btn-success</code></td>
-                <td>Indicates a successful or positive action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-warning">Warning</button></td>
-                <td><code>btn btn-warning</code></td>
-                <td>Indicates caution should be taken with this action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-danger">Danger</button></td>
-                <td><code>btn btn-danger</code></td>
-                <td>Indicates a dangerous or potentially negative action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-inverse">Inverse</button></td>
-                <td><code>btn btn-inverse</code></td>
-                <td>Alternate dark gray button, not tied to a semantic action or use</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-link">Link</button></td>
-                <td><code>btn btn-link</code></td>
-                <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h4>Cross browser compatibility</h4>
-          <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
-
-
-          <h2>Button sizes</h2>
-          <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
-          <div class="bs-docs-example">
-            <p>
-              <button type="button" class="btn btn-large btn-primary">Large button</button>
-              <button type="button" class="btn btn-large">Large button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-primary">Default button</button>
-              <button type="button" class="btn">Default button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-small btn-primary">Small button</button>
-              <button type="button" class="btn btn-small">Small button</button>
-            </p>
-            <p>
-              <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-              <button type="button" class="btn btn-mini">Mini button</button>
-            </p>
-          </div>
-<pre class="prettyprint linenums">
-&lt;p&gt;
-  &lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt;
-  &lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt;
-  &lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt;
-  &lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt;
-  &lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
-&lt;/p&gt;
-</pre>
-          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
-          <div class="bs-docs-example">
-            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
-              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-              <button type="button" class="btn btn-large btn-block">Block level button</button>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;/button&gt;
-&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;
-</pre>
-
-
-          <h2>Disabled state</h2>
-          <p>Make buttons look unclickable by fading them back 50%.</p>
-
-          <h3>Anchor element</h3>
-          <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-            <a href="#" class="btn btn-large disabled">Link</a>
-          </p>
-<pre class="prettyprint linenums">
-&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;Primary link&lt;/a&gt;
-&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
-</pre>
-          <p>
-            <span class="label label-info">Heads up!</span>
-            We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
-          </p>
-
-          <h3>Button element</h3>
-          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
-          <p class="bs-docs-example">
-            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-            <button type="button" class="btn btn-large" disabled>Button</button>
-          </p>
-<pre class="prettyprint linenums">
-&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;Primary button&lt;/button&gt;
-&lt;button type="button" class="btn btn-large" disabled&gt;Button&lt;/button&gt;
-</pre>
-
-
-          <h2>One class, multiple tags</h2>
-          <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-          <form class="bs-docs-example">
-            <a class="btn" href="">Link</a>
-            <button class="btn" type="submit">Button</button>
-            <input class="btn" type="button" value="Input">
-            <input class="btn" type="submit" value="Submit">
-          </form>
-<pre class="prettyprint linenums">
-&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
-&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;
-&lt;input class="btn" type="button" value="Input"&gt;
-&lt;input class="btn" type="submit" value="Submit"&gt;
-</pre>
-          <p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
-
-        </section>
-
+<table class="table table-bordered table-striped">
+  <thead>
+    <tr>
+      <th>Button</th>
+      <th>class=""</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><button type="button" class="btn">Default</button></td>
+      <td><code>btn</code></td>
+      <td>Standard gray button with gradient</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-primary">Primary</button></td>
+      <td><code>btn btn-primary</code></td>
+      <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-info">Info</button></td>
+      <td><code>btn btn-info</code></td>
+      <td>Used as an alternative to the default styles</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-success">Success</button></td>
+      <td><code>btn btn-success</code></td>
+      <td>Indicates a successful or positive action</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-warning">Warning</button></td>
+      <td><code>btn btn-warning</code></td>
+      <td>Indicates caution should be taken with this action</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-danger">Danger</button></td>
+      <td><code>btn btn-danger</code></td>
+      <td>Indicates a dangerous or potentially negative action</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-inverse">Inverse</button></td>
+      <td><code>btn btn-inverse</code></td>
+      <td>Alternate dark gray button, not tied to a semantic action or use</td>
+    </tr>
+    <tr>
+      <td><button type="button" class="btn btn-link">Link</button></td>
+      <td><code>btn btn-link</code></td>
+      <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/partials/_code_blocks.erb

@@ -0,0 +1,12 @@
+<p>
+  Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
+</p>
+
+<pre>
+  def find(*file_names)
+    pathname.ascend do |path|
+      file_name = file_names.detect { |fn| path.join(fn).file? }
+      break path.join(file_name) if file_name
+    end
+  end
+</pre>

data/app/views/style_guide/partials/_code_inline.erb

@@ -0,0 +1 @@
+Wrap inline snippets of code with <code>&lt;code&gt;</code>.

data/app/views/style_guide/style/_header.erb

@@ -0,0 +1,3 @@
+<div class="style-guide-header">
+  <h1><%= @active.title %></h1>
+</div>

data/app/views/style_guide/style/_sidebar.erb

@@ -1,5 +1,5 @@
-<ul class="nav nav-list bs-docs-sidenav">
+<ul>
 <% @active.partials.each do |partial| %>
-  <li><a href="#<%= partial.id %>"><i class="icon-chevron-right"></i> <%= partial.title %></a></li>
+  <li><a href="#<%= partial.id %>"><i>&rsaquo;</i> <%= partial.title %></a></li>
 <% end %>
 </ul>

data/app/views/style_guide/style/show.html.erb

@@ -0,0 +1,18 @@
+<%= render :partial => "header" %>
+
+<div class="style-guide-content">
+  <div class="style-guide-sidebar">
+    <%= render :partial => "sidebar" %>
+  </div>
+
+  <div class="style-guide-sections">
+    <% @active.partials.each do |partial| %>
+      <section id="<%= partial.id %>">
+        <h1><%= partial.title %></h1>
+        <div class="style-guide-partial">
+          <%= render :file => partial.path %>
+        </div>
+      </section>
+    <% end %>
+  </div>
+</div>

data/config/routes.rb

@@ -1,4 +1,4 @@
 StyleGuide::Engine.routes.draw do
   root :to => "style#index"
-  resource :style, :path => '', :only => [:index]
+  match "/style/:id" => "style#show", :as => :style
 end

data/lib/style_guide/section.rb

@@ -9,7 +9,7 @@ module StyleGuide
     end
 
     def id
-      @id ||= path.gsub(/[^a-zA-Z0-9]/, " ").strip.gsub(/\s+/, "_")
+      @id ||= path.to_s.downcase.gsub(/[^a-zA-Z0-9]/, " ").strip.gsub(/\s+/, "_")
     end
 
     def title
@@ -17,7 +17,7 @@ module StyleGuide
     end
 
     def partials
-      partial_paths.map { |path| StyleGuide::Partial.new(path) }
+      partial_paths.map { |path| StyleGuide::Partial.new(path) }.sort_by { |p| p.title }
     end
 
     private

data/lib/style_guide/version.rb

@@ -1,3 +1,3 @@
 module StyleGuide
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/spec/controllers/style_guide/style_controller_spec.rb

@@ -1,16 +1,43 @@
 require "spec_helper"
 
 describe StyleGuide::StyleController do
+  let(:temp_path) { Dir.mktmpdir }
+  let(:partial_path) { File.join(temp_path, "monkey_hammer") }
+
+  before do
+    FileUtils.mkdir_p(partial_path)
+    StyleGuide::Engine.config.style_guide.stub(:partial_paths => [partial_path])
+  end
+
   describe "#index" do
     it "assigns sections" do
       get :index, use_route: :styles
       assigns(:sections).should be
+      assigns(:sections).should have(1).section
       assigns(:sections).first.should be_a StyleGuide::Section
     end
 
     it "sets the active section to the first one" do
       get :index, use_route: :styles
       assigns(:active).should == assigns(:sections).first
+      assigns(:active).title.should == "Monkey Hammer"
+    end
+  end
+
+  describe "#show" do
+    let(:fake_section) { StyleGuide::Section.new(partial_path) }
+
+    it "assigns sections" do
+      get :show, id: fake_section.id, use_route: :styles
+      assigns(:sections).should be
+      assigns(:sections).should have(1).section
+      assigns(:sections).first.should be_a StyleGuide::Section
+    end
+
+    it "assigns the section" do
+      get :show, id: fake_section.id, use_route: :styles
+      assigns(:active).should be_a StyleGuide::Section
+      assigns(:active).title.should == "Monkey Hammer"
     end
   end
 end

data/spec/dummy/app/assets/stylesheets/application.css

@@ -9,6 +9,42 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require bootstrap
- *= require bootstrap-responsive
+ *= require_tree .
  */
+
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+

data/spec/dummy/app/assets/stylesheets/swatches.css

@@ -0,0 +1,16 @@
+.swatch {
+	display: inline-block;
+	height: 50px;
+	width: 50px;
+	margin:10px;
+}
+
+.freshBlue        { background-color: #6D99D3; }
+.freshRed         { background-color: #B90020; }
+.freshGold        { background-color: #C59E16; }
+.freshBlack       { background-color: #5D5C5C; }
+.freshDarkGray    { background-color: #5D5C5C; }
+.freshGray        { background-color: #888; }
+.freshLightGray   { background-color: #ddd; }
+.freshLighterGray { background-color: #f5f5f5; }
+

data/spec/dummy/app/views/styles/_00swatches.erb

@@ -0,0 +1,8 @@
+<div class="swatch freshBlue 		"></div>
+<div class="swatch freshRed 		"></div>
+<div class="swatch freshGold 		"></div>
+<div class="swatch freshBlack 	    "></div>
+<div class="swatch freshDarkGray	"></div>
+<div class="swatch freshGray 		"></div>
+<div class="swatch freshLightGray   "></div>
+<div class="swatch freshLighterGray "></div>