style-guide 0.3.0 → 0.4.0

data/app/views/style_guide/tables/_default_style.erb

@@ -0,0 +1,24 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/tables/_hover.erb

@@ -0,0 +1,29 @@
+<table class="table table-hover">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/tables/_row_classes.erb

@@ -0,0 +1,36 @@
+<table class="table">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Product</th>
+      <th>Payment Taken</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="success">
+      <td>1</td>
+      <td>TB - Monthly</td>
+      <td>01/04/2012</td>
+      <td>Approved</td>
+    </tr>
+    <tr class="error">
+      <td>2</td>
+      <td>TB - Monthly</td>
+      <td>02/04/2012</td>
+      <td>Declined</td>
+    </tr>
+    <tr class="warning">
+      <td>3</td>
+      <td>TB - Monthly</td>
+      <td>03/04/2012</td>
+      <td>Pending</td>
+    </tr>
+    <tr class="info">
+      <td>4</td>
+      <td>TB - Monthly</td>
+      <td>04/04/2012</td>
+      <td>Call in to confirm</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/tables/_striped.erb

@@ -0,0 +1,30 @@
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/typography/_abbreviation.erb

@@ -0,0 +1,4 @@
+<p>An abbreviation of "attribute" is <abbr title="attribute">attr</abbr>.
+
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
+is the best thing since sliced bread.

data/app/views/style_guide/typography/_address.erb

@@ -0,0 +1,10 @@
+<address>
+  <strong>Twitter, Inc.</strong><br>
+  795 Folsom Ave, Suite 600<br>
+  San Francisco, CA 94107<br>
+  <abbr title="Phone">P:</abbr> (123) 456-7890
+</address>
+<address>
+  <strong>Full Name</strong><br>
+  <a href="mailto:#">first.last@gmail.com</a>
+</address>

data/app/views/style_guide/typography/_blockquote.erb

@@ -0,0 +1,14 @@
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <p>Integer posuere erat a ante.</p>
+</blockquote>
+
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <small>Someone in <cite title="Source Title">Title</cite></small>
+</blockquote>
+
+<blockquote class="pull-right">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <small>Someone in <cite title="Title">Title</cite></small>
+</blockquote>

data/app/views/style_guide/typography/_body_copy.erb

@@ -0,0 +1,12 @@
+<p class="lead">
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+</p>
+<p>
+  Maecenas sed diam eget risus varius blandit sit amet
+  non magna. Donec id elit non mi porta gravida at eget
+  metus.
+</p>
+<p>
+  Duis mollis, est non commodo luctus, nisi erat
+  porttitor ligula, eget lacinia odio sem nec elit.
+</p>

data/app/views/style_guide/{bootstrap_base/_code:_blocks.erb → typography/_code.erb}

@@ -1,4 +1,7 @@
+<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.
+
 <pre>
+  # Wrap larger blocks of code with pre
   def find(*files)
     pathname.ascend do |path|
       file_name = files.detect { |fn| path.join(fn).file? }

data/app/views/style_guide/typography/_description_list.erb

@@ -0,0 +1,17 @@
+<dl>
+  <dt>Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+  <dt>Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>
+
+<dl class="dl-horizontal">
+  <dt>Horizontal lists</dt>
+  <dd>They do such a great job at saving vertical space!</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+</dl>

data/app/views/style_guide/typography/_emphasis.erb

@@ -0,0 +1,5 @@
+<p>The following snippet of text is <em>italicized text</em>.
+
+<p>The following snippet of text is <strong>bold text</strong>.
+
+<p><small>This line of text is fine print.</small>

data/app/views/style_guide/typography/_emphasis_classes.erb

@@ -0,0 +1,5 @@
+<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
+<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

data/app/views/style_guide/typography/_headings.erb

@@ -0,0 +1,6 @@
+<h1>h1. Heading 1</h1>
+<h2>h2. Heading 2</h2>
+<h3>h3. Heading 3</h3>
+<h4>h4. Heading 4</h4>
+<h5>h5. Heading 5</h5>
+<h6>h6. Heading 6</h6>

data/app/views/style_guide/typography/_ordered_list.erb

@@ -0,0 +1,4 @@
+<ol>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>

data/app/views/style_guide/typography/_unordered_list.erb

@@ -0,0 +1,15 @@
+<ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Eget porttitor lorem</li>
+</ul>
+
+<ul class="unstyled">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Eget porttitor lorem</li>
+</ul>

data/config/locales/en.yml

@@ -1,34 +1,45 @@
 en:
   style_guide:
-    bootstrap_base:
-      button_disabled_anchor: >
+    buttons:
+      disabled_anchor: >
         Make <code>&lt;a&gt;</code> buttons look unclickable by adding
         the <code>.disabled</code> class
-      button_disabled_element: >
+      disabled_element: >
         Make <code>&lt;button&gt;</code> buttons look unclickable by adding
         the <code>.disabled</code> class
-      button_sizes: >
+      sizes: >
         Fancy larger or smaller buttons?
         Add <code>.btn-large</code>, <code>.btn-small</code>, or
         <code>.btn-mini</code> for additional sizes.
-      button_types: >
-        Need different buttons for different occasions?  Add a class!
-      code_inline: >
-        Use <code>&lt;code&gt;</code> for inline snippets of code.
-      code_blocks: >
-        Use <code>&lt;pre&gt;</code> for multiple lines of code.
-        Be sure to escape any angle brackets in the code for proper rendering.
-      forms_default_styles: >
+      types: >
+        Need different buttons for different occasions?  Add some class!
+
+    forms:
+      # controls
+      controls_checkbox_and_radio: >
+        Checkboxes are for selecting one or several options in a list while
+        radios are for selecting one option from many.
+        Add the <code>.inline</code> class to a series of checkboxes or radios
+        for controls to appear on the same line.
+      controls_input: >
+        Most common form control, text-based input fields.
+        Includes support for all HTML5 types:
+        text, password, datetime, datetime-local, date, month, time, week,
+        number, email, url, search, tel, and color.
+        Requires the use of a specified <code>type</code> at all times.
+      controls_select: >
+        Use the default option or specify a <code>multiple="multiple"</code>
+        to show multiple options at once.
+      controls_textarea: >
+        Form control which supports multiple lines of text.
+        Change <code>rows</code> attribute as necessary.
+
+      # layouts
+      default_styles: >
         Individual form controls receive styling, but without any required base
         class on the <code>&lt;form&gt;</code> or large changes in markup.
         Results in stacked, left-aligned labels on top of form controls.
-      forms_search: >
-        Add <code>.form-search</code> to the form and <code>.search-query</code>
-        to the <code>&lt;input&gt;</code> for an extra-rounded text input.
-      forms_inline: >
-        Add <code>.form-inline</code> for left-aligned labels and inline-block
-        controls for a compact layout.
-      forms_horizontal: >
+      horizontal: >
         Right align labels and float them to the left to make them appear on
         the same line as controls.
         Requires the most markup changes from a default form:
@@ -38,20 +49,61 @@ en:
           <li>Add <code>.control-label</code> to the label</li>
           <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
         </ul>
-      form_controls_input: >
-        Most common form control, text-based input fields.
-        Includes support for all HTML5 types:
-        text, password, datetime, datetime-local, date, month, time, week,
-        number, email, url, search, tel, and color.
-        Requires the use of a specified <code>type</code> at all times.
-      form_controls_textarea: >
-        Form control which supports multiple lines of text.
-        Change <code>rows</code> attribute as necessary.
-      form_controls_checkbox_and_radio: >
-        Checkboxes are for selecting one or several options in a list while
-        radios are for selecting one option from many.
-        Add the <code>.inline</code> class to a series of checkboxes or radios
-        for controls to appear on the same line.
-      form_controls_select: >
-        Use the default option or specify a <code>multiple="multiple"</code>
-        to show multiple options at once.
+      inline: >
+        Add <code>.form-inline</code> for left-aligned labels and inline-block
+        controls for a compact layout.
+      search: >
+        Add <code>.form-search</code> to the form and <code>.search-query</code>
+        to the <code>&lt;input&gt;</code> for an extra-rounded text input.
+
+    images:
+      dropdown_icons: Dropdown in a button group.
+      form_fields: Icons in a form field.
+      icon_buttons: Button group in a button toolbar.
+      small_button: Small button with an icon.
+      placeholders: Default shapes for placeholder images.
+      navigation: Icons inside of navigation lists.
+
+    tables:
+      default_style: >
+        For basic styling&mdash;light padding and only horizontal
+        dividers&mdash;add the base class <code>.table</code> to
+        any <code>&lt;table&gt;</code>.
+      striped: >
+        <code>.table-striped</code>
+        adds zebra-striping to any table row within the
+        <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector
+        (not available in IE7-IE8).
+      bordered: >
+        <code>.table-bordered</code>
+        adds borders and rounded corners to the table.
+      hover: >
+        <code>.table-hover</code>
+        enables a hover state on table rows within a <code>&lt;tbody&gt;</code>.
+      condensed: >
+        <code>.table-condensed</code>
+        makes tables more compact by cutting cell padding in half.
+      row_classes: >
+        Use contextual classes to color table rows.
+
+    typography:
+      body_copy: >
+        Bootstrap's global default <code>font-size</code> is
+        <strong>14px</strong>, with a <code>line-height</code> of
+        <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code>
+        and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs)
+        receive a bottom margin of half their line-height (10px by default).
+        Make a paragraph stand out by adding <code>.lead</code>.
+
+      headings: >
+        All HTML headings, <code>&lt;h1&gt;</code> through
+        <code>&lt;h6&gt;</code> are available.
+
+      code_inline: >
+        Use <code>&lt;code&gt;</code> for inline snippets of code.
+      code_blocks: >
+        Use <code>&lt;pre&gt;</code> for multiple lines of code.
+        Be sure to escape any angle brackets in the code for proper rendering.
+            images_placeholders: >
+        Add classes to an <code>&lt;img&gt;</code> element to easily
+        style images in any project.

data/lib/style_guide/config.rb

@@ -1,9 +1,25 @@
 module StyleGuide
   class Config
-    attr_accessor :partial_paths
+    attr_reader :partial_paths
+
+    def self.style_guide_views_path
+      StyleGuide::Engine.root.join("app", "views", "style_guide")
+    end
+
+    def self.style_guide_views_directories
+      style_guide_views_path.children.select(&:directory?).reject { |d| d.basename.to_s == "style" }
+    end
 
     def initialize(options = {})
-      @partial_paths = options[:partial_paths] || [StyleGuide::Engine.root.join("app/views/style_guide/bootstrap_base")]
+      @partial_paths = options[:partial_paths] || self.class.style_guide_views_directories
+    end
+
+    def partial_paths=(paths)
+      if paths.is_a?(Array)
+        @partial_paths = paths
+      else
+        @partial_paths = [paths]
+      end
     end
   end
 end

data/lib/style_guide/partial.rb

@@ -1,9 +1,12 @@
+require "nokogiri"
+
 module StyleGuide
   class Partial
-    attr_reader :path
+    attr_reader :path, :section
 
-    def initialize(path)
+    def initialize(path, section)
       @path = path
+      @section = section
     end
 
     def id
@@ -15,7 +18,41 @@ module StyleGuide
     end
 
     def content
-      @content || File.read(path)
+      @content ||= File.read(path)
+    end
+
+    def description
+      @description ||= begin
+        I18n.translate!(id, :scope => [:style_guide, section.id.to_sym])
+      rescue I18n::MissingTranslationData
+        nil
+      end
+    end
+
+    def classes
+      @classes ||= begin
+        parsed.css("[class]").reduce({}) do |output, tag|
+          output.tap do |tags|
+            tag["class"].split.each do |class_name|
+              tags[".#{class_name}"] = true
+            end
+          end
+        end.keys
+      end
+    end
+
+    def ids
+      @ids ||= parsed.css("[id]").map { |tag| %(##{tag["id"]}) }
+    end
+
+    def identifiers
+      ids + classes
+    end
+
+    private
+
+    def parsed
+      @parsed ||= Nokogiri::HTML.parse(content)
     end
   end
 end