hologram 1.2.0 → 1.3.0

data/spec/fixtures/source/components/button/buttons.css

@@ -24,13 +24,15 @@ There is also an additional modifier that will make the button take the
 full width of the container. It may be used with the any of the button
 size and style modifiers.
 
-Button                                                            | Modifier Class
------------------------------------------------------------------ | -----------------
-<button class="btn btnDefault btnLrg">Large</button>              | `btn btnDefault btnLrg`
-<button class="btn btnDefault">Default</button>                   | `btn btnDefault`
-<button class="btn btnDefault btnSml">Small</button>              | `btn btnDefault btnSml`
-<button class="btn btnDefault btnFullWidth">Full width</button>   | `btn btnDefault btnFullWidth`
+```slim_example_table
+button.btn.btnDefault.btnLrg Large
 
+button.btn.btnDefault Default
+
+button.btn.btnDefault.btnSml Small
+
+button.btn.btnDefault.btnFullWidth Full width
+```
 */
 
 button {

data/spec/fixtures/source/components/button/skin/buttonSkins.css

@@ -5,6 +5,8 @@ name: buttonSkins
 title: Button Styles
 ---
 
+For buttons, see [the buttons docs][button].
+
 Button                                            | Class             | Description
 ------------------------------------------------- | ----------------- | -----------
 <button class="btn btnDefault">Default</button>   | `btn btnDefault`  | This is what buttons look like, this is the go to button style.
@@ -12,6 +14,21 @@ Button                                            | Class             | Descript
 <button class="btn btnDanger">Delete</button>     | `btn btnDanger`   | This button is for delete actions, these actions should also have a confirmation dialog
 <button class="btn btnDisabled">Disabled</button> | `btn btnDisabled` | I'm afraid I can't let you do that, yet.
 
+```haml_example_table
+%button.btn.btnDefault Hi
+
+%button.btn.btnPrimary Hi
+
+%button.btn.btnDanger Hi
+
+%button.btn.btnDisabled Hi
+```
+
+Here's an example combining a style with a size
+
+```haml_example
+%button.btn.btnPrimary.btnFullWidth Hi
+```
 */
 
 .btnDefault,

data/spec/fixtures/styleguide/base_css.html

@@ -59,12 +59,10 @@
 
 
 
-<h1 id="background">Background Colors</h1>
-
-<p>We have a few background colors that can be used in various contexts.
+<h1 id="background" class="styleguide">Background Colors</h1>
+<p class="styleguide">We have a few background colors that can be used in various contexts.
 These are not for use as the entire page background but instead for
 specific components and modules on the page.</p>
-
 <div class="line txtC">
     <div class="col cols6 ">
       <div class="docSwatch backgroundLowlight"></div>
@@ -84,81 +82,207 @@ specific components and modules on the page.</p>
     </div>
 </div>
 
-<h1 id="button">Buttons</h1>
-
-<p>Button styles can be applied to any element. Typically you&#39;ll want to
-use either a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> element:</p>
-<div class="codeExample"><div class="exampleOutput"><button class="btn btnDefault">Click</button>
+<h1 id="button" class="styleguide">Buttons</h1>
+<p class="styleguide">Button styles can be applied to any element. Typically you&#39;ll want to
+use either a <code class="styleguide">&lt;button&gt;</code> or an <code class="styleguide">&lt;a&gt;</code> element:</p><div class="codeExample">
+  <div class="exampleOutput">
+    <button class="btn btnDefault">Click</button>
 <a class="btn btnDefault" href="http://trulia.com">Don't click</a>
-</div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span><span class="nt">&gt;</span>Click<span class="nt">&lt;/button&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span> <span class="na">href=</span><span class="s">"http://trulia.com"</span><span class="nt">&gt;</span>Don't click<span class="nt">&lt;/a&gt;</span>
-</pre></div></div></div>
-<p>If your button is actually a link to another page, please use the
-<code>&lt;a&gt;</code> element, while if your button performs an action, such as submitting
-a form or triggering some javascript event, then use a <code>&lt;button&gt;</code> element.</p>
 
+  </div>
+  <div class="codeBlock">
+    <div class="highlight">
+      <pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span><span class="nt">&gt;</span>Click<span class="nt">&lt;/button&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btnDefault"</span> <span class="na">href=</span><span class="s">"http://trulia.com"</span><span class="nt">&gt;</span>Don't click<span class="nt">&lt;/a&gt;</span></pre>
+    </div>
+  </div>
+</div>
+<p class="styleguide">If your button is actually a link to another page, please use the
+<code class="styleguide">&lt;a&gt;</code> element, while if your button performs an action, such as submitting
+a form or triggering some javascript event, then use a <code class="styleguide">&lt;button&gt;</code> element.</p>
 <h2>Button Sizes</h2>
-
-<p>There are three 3 sizes for buttons: Large, medium (default)
+<p class="styleguide">There are three 3 sizes for buttons: Large, medium (default)
 and small. Simply apply the size modifier class for the desired size.
 There is also an additional modifier that will make the button take the
 full width of the container. It may be used with the any of the button
-size and style modifiers.</p>
-
-<table><thead>
-<tr>
-<th>Button</th>
-<th>Modifier Class</th>
-</tr>
-</thead><tbody>
-<tr>
-<td><button class="btn btnDefault btnLrg">Large</button></td>
-<td><code>btn btnDefault btnLrg</code></td>
-</tr>
-<tr>
-<td><button class="btn btnDefault">Default</button></td>
-<td><code>btn btnDefault</code></td>
-</tr>
-<tr>
-<td><button class="btn btnDefault btnSml">Small</button></td>
-<td><code>btn btnDefault btnSml</code></td>
-</tr>
-<tr>
-<td><button class="btn btnDefault btnFullWidth">Full width</button></td>
-<td><code>btn btnDefault btnFullWidth</code></td>
-</tr>
-</tbody></table>
+size and style modifiers.</p><div class="codeTable">
+  <table>
+    <tbody>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class="btn btnDefault btnLrg">Large</button>
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">button</span><span class="nc">.btn.btnDefault.btnLrg</span><span class="w"> </span>Large</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class="btn btnDefault">Default</button>
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">button</span><span class="nc">.btn.btnDefault</span><span class="w"> </span>Default</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class="btn btnDefault btnSml">Small</button>
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">button</span><span class="nc">.btn.btnDefault.btnSml</span><span class="w"> </span>Small</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class="btn btnDefault btnFullWidth">Full width</button>
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">button</span><span class="nc">.btn.btnDefault.btnFullWidth</span><span class="w"> </span>Full<span class="w"> </span>width</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+    </tbody>
+  </table>
+</div>
 
-<h2 id="buttonSkins">Button Styles</h2>
 
-<table><thead>
-<tr>
+<h2 id="buttonSkins" class="styleguide">Button Styles</h2>
+<p class="styleguide">For buttons, see <a class="styleguide" href="base_css.html#button" title="base_css.html#button">the buttons docs</a>.</p><table class="styleguide"> <tr>
 <th>Button</th>
 <th>Class</th>
 <th>Description</th>
 </tr>
-</thead><tbody>
-<tr>
+ <tr>
 <td><button class="btn btnDefault">Default</button></td>
-<td><code>btn btnDefault</code></td>
+<td><code class="styleguide">btn btnDefault</code></td>
 <td>This is what buttons look like, this is the go to button style.</td>
 </tr>
 <tr>
 <td><button class="btn btnPrimary">Primary</button></td>
-<td><code>btn btnPrimary</code></td>
+<td><code class="styleguide">btn btnPrimary</code></td>
 <td>Use this button as the primary call to action</td>
 </tr>
 <tr>
 <td><button class="btn btnDanger">Delete</button></td>
-<td><code>btn btnDanger</code></td>
+<td><code class="styleguide">btn btnDanger</code></td>
 <td>This button is for delete actions, these actions should also have a confirmation dialog</td>
 </tr>
 <tr>
 <td><button class="btn btnDisabled">Disabled</button></td>
-<td><code>btn btnDisabled</code></td>
+<td><code class="styleguide">btn btnDisabled</code></td>
 <td>I&#39;m afraid I can&#39;t let you do that, yet.</td>
 </tr>
-</tbody></table>
+ </table><div class="codeTable">
+  <table>
+    <tbody>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class='btn btnDefault'>Hi</button>
+
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">%button</span><span class="nc">.btn.btnDefault</span> Hi</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class='btn btnPrimary'>Hi</button>
+
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">%button</span><span class="nc">.btn.btnPrimary</span> Hi</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class='btn btnDanger'>Hi</button>
+
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">%button</span><span class="nc">.btn.btnDanger</span> Hi</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <button class='btn btnDisabled'>Hi</button>
+
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><span class="nt">%button</span><span class="nc">.btn.btnDisabled</span> Hi</pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      
+    </tbody>
+  </table>
+</div>
+
+<p class="styleguide">Here&#39;s an example combining a style with a size</p><div class="codeExample">
+  <div class="exampleOutput">
+    <button class='btn btnPrimary btnFullWidth'>Hi</button>
+
+  </div>
+  <div class="codeBlock">
+    <div class="highlight">
+      <pre><span class="nt">%button</span><span class="nc">.btn.btnPrimary.btnFullWidth</span> Hi</pre>
+    </div>
+  </div>
+</div>
       </div>
     </div>
   </section>

data/spec/fixtures/styleguide/index.html

@@ -54,26 +54,18 @@
 
 
 <h1>Welcome</h1>
-
-<p>This style guide is an example of what
-<a href="http://trulia.github.io/hologram">hologram</a>  can help you build and
-maintain.</p>
-
-<p>The goal of hologram is to make it easy to document your CSS and to
+<p class="styleguide">This style guide is an example of what
+<a class="styleguide" href="http://trulia.github.io/hologram" title="http://trulia.github.io/hologram">hologram</a>  can help you build and
+maintain.</p><p class="styleguide">The goal of hologram is to make it easy to document your CSS and to
 display the code examples to use that CSS. Hologram has no
 opinions about how you should actually organize/style your style guide.
 You could do everything as a single file with no header/footer and it
 would work just fine. Or, you could break it up into an individual file
 for each component. Top navigation, left navigation, no
-navigation....that&#39;s up to you. Build it however you&#39;d like.  </p>
-
-<p>We&#39;ve borrowed some of <a href="http://trulia.com">Trulia</a>&#39;s own CSS library to
+navigation....that&#39;s up to you. Build it however you&#39;d like.  </p><p class="styleguide">We&#39;ve borrowed some of <a class="styleguide" href="http://trulia.com" title="http://trulia.com">Trulia</a>&#39;s own CSS library to
 demonstrate how hologram can be used. If you want more details about
-hologram see the <a href="http://github.com/trulia/hologram">git repository</a>.  </p>
-
-<p>This is a work in progress, please consider contributing to
-<a href="http://github.com/trulia/hologram">hologram</a>.</p>
-      </div>
+hologram see the <a class="styleguide" href="http://github.com/trulia/hologram" title="http://github.com/trulia/hologram">git repository</a>.  </p><p class="styleguide">This is a work in progress, please consider contributing to
+<a class="styleguide" href="http://github.com/trulia/hologram" title="http://github.com/trulia/hologram">hologram</a>.</p>      </div>
     </div>
   </section>
   <footer>

data/spec/link_helper_spec.rb

@@ -0,0 +1,57 @@
+require 'spec_helper'
+require 'hologram/link_helper'
+
+describe Hologram::LinkHelper do
+  let(:pages) do
+    [
+      {
+        name: 'elements.html',
+        component_names: [
+          'images',
+          'buttons',
+          'typography',
+        ]
+      }, {
+        name: 'utilities.html',
+        component_names: [
+          'whitespace',
+          'typography'
+        ]
+      }
+    ]
+  end
+
+  let(:link_helper) { described_class.new(pages) }
+
+  describe '#link_for' do
+    subject { link_helper.link_for(component_name) }
+
+    context 'when the link doesnt belong to any page' do
+      let(:component_name) { 'hamburger' }
+      it { should be_nil }
+    end
+
+    context 'when the link belongs to only one page' do
+      let(:component_name) { 'whitespace' }
+      it { should == 'utilities.html#whitespace' }
+    end
+
+    context 'when the link belongs to more than one page' do
+      let(:component_name) { 'typography' }
+      it 'creates a link to the first page the component appears on' do
+        expect(subject).to eq 'elements.html#typography'
+      end
+    end
+  end
+
+  describe '#all_links' do
+    it 'returns a hash from component name to link' do
+      expect(link_helper.all_links).to eq ({
+        'images' => 'elements.html#images',
+        'buttons' => 'elements.html#buttons',
+        'typography' => 'elements.html#typography',
+        'whitespace' => 'utilities.html#whitespace',
+      })
+    end
+  end
+end

data/spec/markdown_renderer_spec.rb

@@ -0,0 +1,82 @@
+require 'spec_helper'
+require 'hologram/link_helper'
+
+describe Hologram::MarkdownRenderer do
+  let(:renderer) { described_class.new }
+
+  describe '#preprocess' do
+    subject { renderer.preprocess(document) }
+
+    let(:document) do
+      [
+        "<p>i'm a <a href='#'>proper reference link</a></p>",
+        "<p>i'm similar to an [invalid reference link] [but not quite]</p>",
+      ].join("\n")
+    end
+
+    context 'when the renderer has a link helper' do
+      let(:renderer) { described_class.new(link_helper: Hologram::LinkHelper.new([
+        {
+          name: 'elements.html',
+          component_names: ['link', 'typography']
+        },
+        {
+          name: 'objects.html',
+          component_names: ['alert']
+        }
+      ])) }
+
+      it 'prepends a list of component names and links to the document' do
+        expect(subject).to eq [
+          "[link]: elements.html#link",
+          "[typography]: elements.html#typography",
+          "[alert]: objects.html#alert",
+          "<p>i'm a <a href='#'>proper reference link</a></p>",
+          "<p>i'm similar to an [invalid reference link] [but not quite]</p>",
+        ].join("\n")
+      end
+    end
+
+    context 'when the renderer has no link helper' do
+      it 'does not modify the document' do
+        expect(subject).to eq document
+      end
+    end
+  end
+
+  describe '#postprocess' do
+    subject { renderer.postprocess(document) }
+
+    context 'when the document is free of invalid reference links' do
+      let(:document) do
+        [
+          "<p>i'm a <a href='#'>proper reference link</a></p>",
+          "<p>i'm similar to an [invalid reference link] [but not quite]</p>",
+        ].join("\n")
+      end
+
+      it 'does not print a warning' do
+        expect(Hologram::DisplayMessage).not_to receive(:warning)
+        subject
+      end
+    end
+
+    context 'when the document contains invalid reference links' do
+      let(:document) do
+        [
+          "<p>hey look at me i'm an [invalid reference link][invalid1]</p>",
+          "<p>hey look at me i'm [one as well][invalid2]</p>",
+          "<p>why aren't you two <a href='#'>proper reference links?</a></p>",
+          "<p>i'm similar to an [invalid reference link] [but not quite]</p>",
+        ].join("\n")
+      end
+
+      it 'prints a warning for each invalid reference link' do
+        expect(Hologram::DisplayMessage).to receive(:warning).twice
+        subject
+      end
+    end
+  end
+end
+
+