From 14c3ac27c24141dd19774332fa08daf52ea0699f Mon Sep 17 00:00:00 2001 From: Christine Panus Date: Sat, 23 Mar 2019 23:46:59 -0500 Subject: [PATCH 1/6] Use `content_for` to allow wrappers in demo Added the ability to have a partial in the meta. If partial exists, the component will be added to content_for with a name mv_#{component_name}_#{index} The partial will use mv_content_for_name to retrieve that specific content_for value and display it within the wrapper. --- app/views/mountain_view/styleguide/show.html.erb | 10 +++++++++- lib/mountain_view/stub.rb | 4 ++++ .../dummy/app/components/header/_test_partial.html.erb | 3 +++ test/dummy/app/components/header/header.yml | 1 + test/mountain_view/stub_test.rb | 9 +++++++++ test/test_helper.rb | 3 ++- 6 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 test/dummy/app/components/header/_test_partial.html.erb diff --git a/app/views/mountain_view/styleguide/show.html.erb b/app/views/mountain_view/styleguide/show.html.erb index 6563e7f..b9b16d7 100644 --- a/app/views/mountain_view/styleguide/show.html.erb +++ b/app/views/mountain_view/styleguide/show.html.erb @@ -14,7 +14,15 @@

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

- <%= render_component @component.name, component_stub.properties.clone %> + <% if component_stub.meta_partial.blank? %> + <%= render_component @component.name, component_stub.properties.clone %> + <% else %> + <% content_for_name = "mv_#{@component.name}_#{index}" %> + <% content_for :"#{content_for_name}" do %> + <%= render_component @component.name, component_stub.properties.clone %> + <% end %> + <% render component_stub.meta_partial, mv_content_for_name: content_for_name %> + <% end %>

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

diff --git a/lib/mountain_view/stub.rb b/lib/mountain_view/stub.rb index 2367456..f3b00d8 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_partial + @meta[:partial] + end end end diff --git a/test/dummy/app/components/header/_test_partial.html.erb b/test/dummy/app/components/header/_test_partial.html.erb new file mode 100644 index 0000000..30ce9b8 --- /dev/null +++ b/test/dummy/app/components/header/_test_partial.html.erb @@ -0,0 +1,3 @@ +
+ <%= content_for :"#{mv_content_for_name}" %> +
diff --git a/test/dummy/app/components/header/header.yml b/test/dummy/app/components/header/header.yml index 83d5f38..bfb1d23 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" + :partial: "header/test_partial.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..0b9da83 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_partial + test_object = stub_to_test + assert_equal header_stub_meta[:stubs][0][:mv_stub_meta][:partial], + test_object[0].meta_partial, + 'Stub Partial not found' + assert_nil test_object[1].meta_partial, + '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..1cba302 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", + partial: "header/test_partial.html.erb" }, id: 1, title: "20 Mountains you didn't know they even existed", From 15dbc51d92d6ee8136acb43fff40a36560d3a875 Mon Sep 17 00:00:00 2001 From: Christine Panus Date: Sun, 24 Mar 2019 16:17:27 -0500 Subject: [PATCH 2/6] Remove content_for block format The content_for block format (as well as trying partial layout: component_stub.meta_partial to use a block format with :yield) resulted in the rails server exiting with an error code. Removing the block seems to have solved the issue. --- app/views/mountain_view/styleguide/show.html.erb | 7 +++---- test/dummy/app/components/header/_test_partial.html.erb | 3 ++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/views/mountain_view/styleguide/show.html.erb b/app/views/mountain_view/styleguide/show.html.erb index b9b16d7..2b8d11a 100644 --- a/app/views/mountain_view/styleguide/show.html.erb +++ b/app/views/mountain_view/styleguide/show.html.erb @@ -18,10 +18,9 @@ <%= render_component @component.name, component_stub.properties.clone %> <% else %> <% content_for_name = "mv_#{@component.name}_#{index}" %> - <% content_for :"#{content_for_name}" do %> - <%= render_component @component.name, component_stub.properties.clone %> - <% end %> - <% render component_stub.meta_partial, mv_content_for_name: content_for_name %> + <% content_for :"#{content_for_name}", + render_component(@component.name, component_stub.properties.clone) %> + <%= render component_stub.meta_partial, mv_content_for_name: content_for_name %> <% end %>
diff --git a/test/dummy/app/components/header/_test_partial.html.erb b/test/dummy/app/components/header/_test_partial.html.erb index 30ce9b8..4ba3a37 100644 --- a/test/dummy/app/components/header/_test_partial.html.erb +++ b/test/dummy/app/components/header/_test_partial.html.erb @@ -1,3 +1,4 @@ -
+
+ Custom Partial around style use <%= content_for :"#{mv_content_for_name}" %>
From aa09f5a904059ea3be24bb41bcef7c2f02cfc5ad Mon Sep 17 00:00:00 2001 From: Christine Panus Date: Sun, 24 Mar 2019 16:45:49 -0500 Subject: [PATCH 3/6] Update to Readme Added a bit of info about the partials to the readme --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f464e55..7bd2a3b 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 ou 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" + :partial: "card/card_styleguide_partial.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. From c545a5ce9ba11c5b8e0573f02e9d00207b6d1470 Mon Sep 17 00:00:00 2001 From: ChristineP2 Date: Fri, 10 May 2019 12:37:54 -0500 Subject: [PATCH 4/6] Use Block - Test for Windows This worked on the mac, now retesting in windows. --- app/views/mountain_view/styleguide/show.html.erb | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/views/mountain_view/styleguide/show.html.erb b/app/views/mountain_view/styleguide/show.html.erb index 2b8d11a..4993ade 100644 --- a/app/views/mountain_view/styleguide/show.html.erb +++ b/app/views/mountain_view/styleguide/show.html.erb @@ -18,8 +18,9 @@ <%= render_component @component.name, component_stub.properties.clone %> <% else %> <% content_for_name = "mv_#{@component.name}_#{index}" %> - <% content_for :"#{content_for_name}", - render_component(@component.name, component_stub.properties.clone) %> + <% content_for content_for_name.to_sym do %> + <% render_component(@component.name, component_stub.properties.clone) %> + <% end %> <%= render component_stub.meta_partial, mv_content_for_name: content_for_name %> <% end %>
From 619f13234e8ae8b654ce15c21c73e5ceeb902346 Mon Sep 17 00:00:00 2001 From: ChristineP2 Date: Fri, 10 May 2019 17:10:43 -0500 Subject: [PATCH 5/6] Renaming Partial Trying rename partial as layout and changing to the example provided in the PR comments, in the hopes it will solve the server crash thing. (also got rid of the pink and added a bit of padding lol) --- README.md | 2 +- app/views/mountain_view/styleguide/show.html.erb | 8 +++----- lib/mountain_view/stub.rb | 4 ++-- test/dummy/app/components/header/_test_layout.html.erb | 5 +++++ .../dummy/app/components/header/_test_partial.html.erb | 4 ---- test/dummy/app/components/header/header.css | 2 +- test/dummy/app/components/header/header.yml | 2 +- test/mountain_view/stub_test.rb | 10 +++++----- test/test_helper.rb | 2 +- 9 files changed, 19 insertions(+), 20 deletions(-) create mode 100644 test/dummy/app/components/header/_test_layout.html.erb delete mode 100644 test/dummy/app/components/header/_test_partial.html.erb diff --git a/README.md b/README.md index 7bd2a3b..c280adb 100644 --- a/README.md +++ b/README.md @@ -256,7 +256,7 @@ E.g: `app/components/card/card.yml` :title: "Specific Example" :description: "Instructions for use case or other UX considerations" :classes: "black-background" - :partial: "card/card_styleguide_partial.html.erb" + :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" diff --git a/app/views/mountain_view/styleguide/show.html.erb b/app/views/mountain_view/styleguide/show.html.erb index 4993ade..41a0e86 100644 --- a/app/views/mountain_view/styleguide/show.html.erb +++ b/app/views/mountain_view/styleguide/show.html.erb @@ -14,14 +14,12 @@

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

- <% if component_stub.meta_partial.blank? %> + <% if component_stub.meta_layout.blank? %> <%= render_component @component.name, component_stub.properties.clone %> <% else %> - <% content_for_name = "mv_#{@component.name}_#{index}" %> - <% content_for content_for_name.to_sym do %> - <% render_component(@component.name, component_stub.properties.clone) %> + <%= render component_stub.meta_layout do %> + <%= render_component @component.name, component_stub.properties.clone %> <% end %> - <%= render component_stub.meta_partial, mv_content_for_name: content_for_name %> <% end %>
diff --git a/lib/mountain_view/stub.rb b/lib/mountain_view/stub.rb index f3b00d8..2bda6cd 100644 --- a/lib/mountain_view/stub.rb +++ b/lib/mountain_view/stub.rb @@ -26,8 +26,8 @@ def meta_classes @meta[:classes] end - def meta_partial - @meta[:partial] + 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/_test_partial.html.erb b/test/dummy/app/components/header/_test_partial.html.erb deleted file mode 100644 index 4ba3a37..0000000 --- a/test/dummy/app/components/header/_test_partial.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -
- Custom Partial around style use - <%= content_for :"#{mv_content_for_name}" %> -
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 bfb1d23..e76edcc 100644 --- a/test/dummy/app/components/header/header.yml +++ b/test/dummy/app/components/header/header.yml @@ -5,7 +5,7 @@ :title: "Specific Example" :description: "Instructions for use case and UX considerations" :classes: "black-background" - :partial: "header/test_partial.html.erb" + :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 0b9da83..4e28859 100644 --- a/test/mountain_view/stub_test.rb +++ b/test/mountain_view/stub_test.rb @@ -31,12 +31,12 @@ def test_meta_classes 'nil not set for stub meta without classes' end - def test_meta_partial + def test_meta_layout test_object = stub_to_test - assert_equal header_stub_meta[:stubs][0][:mv_stub_meta][:partial], - test_object[0].meta_partial, - 'Stub Partial not found' - assert_nil test_object[1].meta_partial, + 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 diff --git a/test/test_helper.rb b/test/test_helper.rb index 1cba302..9d8aabc 100644 --- a/test/test_helper.rb +++ b/test/test_helper.rb @@ -26,7 +26,7 @@ def header_stub_meta title: "Specific Example", description: "Instructions for use case and UX considerations", classes: "black-background", - partial: "header/test_partial.html.erb" + layout: "header/test_layout.html.erb" }, id: 1, title: "20 Mountains you didn't know they even existed", From 5ab322d781f910cd93c420760073f5b5d56876ff Mon Sep 17 00:00:00 2001 From: Christine Panus Date: Fri, 10 May 2019 17:20:34 -0500 Subject: [PATCH 6/6] Update README.md Co-Authored-By: Esteban Pastorino --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c280adb..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, `classes` which will add classes for a specific example, and `partial` which will allow ou to embed the component in a partial (see below for details). +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