diff --git a/README.md b/README.md index f464e55..cb8a172 100644 --- a/README.md +++ b/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. diff --git a/app/views/mountain_view/styleguide/show.html.erb b/app/views/mountain_view/styleguide/show.html.erb index 6563e7f..41a0e86 100644 --- a/app/views/mountain_view/styleguide/show.html.erb +++ b/app/views/mountain_view/styleguide/show.html.erb @@ -14,7 +14,13 @@

<%= component_stub.meta_title(@component.title, index) %>

- <%= 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 %>

<%= t('mountain_view.show.instruction_heading') %>

diff --git a/lib/mountain_view/stub.rb b/lib/mountain_view/stub.rb index 2367456..2bda6cd 100644 --- a/lib/mountain_view/stub.rb +++ b/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 diff --git a/test/dummy/app/components/header/_test_layout.html.erb b/test/dummy/app/components/header/_test_layout.html.erb new file mode 100644 index 0000000..1451ce6 --- /dev/null +++ b/test/dummy/app/components/header/_test_layout.html.erb @@ -0,0 +1,5 @@ +
+ Custom Layout wrapping around example of a component. + <%= yield %> + Allowing for more realistic examples +
diff --git a/test/dummy/app/components/header/header.css b/test/dummy/app/components/header/header.css index 81dc1a3..eaad0a1 100644 --- a/test/dummy/app/components/header/header.css +++ b/test/dummy/app/components/header/header.css @@ -29,4 +29,4 @@ bottom: -17px; left: 0; border-bottom: 5px solid #2C9140; -} \ No newline at end of file +} diff --git a/test/dummy/app/components/header/header.yml b/test/dummy/app/components/header/header.yml index 83d5f38..e76edcc 100644 --- a/test/dummy/app/components/header/header.yml +++ b/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" diff --git a/test/mountain_view/stub_test.rb b/test/mountain_view/stub_test.rb index 1d45199..4e28859 100644 --- a/test/mountain_view/stub_test.rb +++ b/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), diff --git a/test/test_helper.rb b/test/test_helper.rb index 96ba5b5..9d8aabc 100644 --- a/test/test_helper.rb +++ b/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",