Use partial and content_for to wrap components in style guide

README.md

@@ -247,7 +247,7 @@ To customize the styleguide, override the style guide layout by adding `mountain
 
 ### Custom meta data for stub examples
 
-You can customize the title, description for each example in the stub, as well as the classes that surround the stub example.  In order to override the default title, add a `title` key to the `mv_stub_meta` hash.  Additional special keys include `description` which will add a description under the title for a given example and `classes` which will add classes for a specific example. 
+You can customize the title, description for each example in the stub, as well as the classes that surround the stub example.  In order to override the default title, add a `title` key to the `mv_stub_meta` hash.  Additional special keys include `description` which will add a description under the title for a given example, `classes` which will add classes for a specific example, and `partial` which will allow you to embed the component in a partial (see below for details). 
 
 E.g: `app/components/card/card.yml`
 ```yml
@@ -256,6 +256,7 @@ E.g: `app/components/card/card.yml`
         :title: "Specific Example"
         :description: "Instructions for use case or other UX considerations"
         :classes: "black-background"
+        :layout: "card/card_styleguide_layout.html.erb"
       :title: "Aspen Snowmass"
       :description: "Aspen Snowmass is a winter resort complex located in Pitkin County in western Colorado in the United States. Owned and operated by the Aspen Skiing Company it comprises four skiing/snowboarding areas on four adjacent mountains in the vicinity of the towns of Aspen and Snowmass Village."
       :link: "http://google.com"
@@ -268,7 +269,11 @@ E.g: `app/components/card/card.yml`
         :title: "Depth"
         :number: '71"'
 ```
+### Wrapping Components in the Style Guide
 
+Sometimes you may want to wrap extra content around the component in the style guide.  For example, you may want to include a form tag around a custom form component without including the form tag in the component itself. You can do this by adding the key `partial` in the `mv_stub_meta`.
+
+To include the component in the partial, you reference `<%= content_for :"#{mv_content_for_name}" %>`
 
 ## Improving performance
 Rendering a large amount of partials in a request can lead to a performance bottleneck, usually this is caused by the parsing and rendering of template code such as ERB or HAML.

app/views/mountain_view/styleguide/show.html.erb

@@ -14,7 +14,13 @@
         <h2><%= component_stub.meta_title(@component.title, index) %></h2>
         <div class="mv-component">
           <div class="mv-component__item <%= component_stub.meta_classes %>">
-            <%= render_component @component.name, component_stub.properties.clone %>
+            <% if component_stub.meta_layout.blank? %>
+              <%= render_component @component.name, component_stub.properties.clone %>
+            <% else %>
+              <%= render component_stub.meta_layout do %>
+                <%=  render_component @component.name, component_stub.properties.clone %>
+              <% end %>
+            <% end %>
           </div>
           <div class="mv-component__description">
             <h3><%= t('mountain_view.show.instruction_heading') %></h3>

lib/mountain_view/stub.rb

@@ -25,5 +25,9 @@ def meta_description
     def meta_classes
       @meta[:classes]
     end
+
+    def meta_layout
+      @meta[:layout]
+    end
   end
 end

test/dummy/app/components/header/_test_layout.html.erb

@@ -0,0 +1,5 @@
+<div class="test_partial" style="background-color: silver;padding:10px;">
+  Custom Layout wrapping around example of a component.
+  <%= yield %>
+  Allowing for more realistic examples
+</div>

test/dummy/app/components/header/header.css

@@ -29,4 +29,4 @@
   bottom: -17px;
   left: 0;
   border-bottom: 5px solid #2C9140;
-}
+}

test/dummy/app/components/header/header.yml

@@ -5,6 +5,7 @@
       :title: "Specific Example"
       :description: "Instructions for use case and UX considerations"
       :classes: "black-background"
+      :layout: "header/test_layout.html.erb"
     :id: 1
     :title: "20 Mountains you didn't know they even existed"
     :subtitle: "Buzzfeed title"

test/mountain_view/stub_test.rb

@@ -31,6 +31,15 @@ def test_meta_classes
                'nil not set for stub meta without classes'
   end
 
+  def test_meta_layout
+    test_object = stub_to_test
+    assert_equal header_stub_meta[:stubs][0][:mv_stub_meta][:layout],
+                 test_object[0].meta_layout,
+                 'Stub Layout not found'
+    assert_nil test_object[1].meta_layout,
+               'nil not set for stub meta without partial'
+  end
+
   def test_properties
     test_object = stub_to_test
     assert_equal header_stub_meta[:stubs][0].except(:mv_stub_meta),

test/test_helper.rb

@@ -25,7 +25,8 @@ def header_stub_meta
         mv_stub_meta: {
           title: "Specific Example",
           description: "Instructions for use case and UX considerations",
-          classes: "black-background"
+          classes: "black-background",
+          layout: "header/test_layout.html.erb"
         },
         id: 1,
         title: "20 Mountains you didn't know they even existed",