Style guiding example

_component.html.haml

%section.component{class: defined?(main_classes) && main_classes, id: defined?(id) && id}
  %h1.component-header{class: defined?(header_classes) && header_classes, id: defined?(header_id) && header_id}= header
  .component-content{class: defined?(content_classes) && content_classes, id: defined?(content_id) && content_id}
    =body

helper.rb

module StyleGuideHelper  
  # Only need this helper once, it will provide an interface to convert a block into a partial.
  # 1. Capture is a Rails helper which will 'capture' the output of a block into a variable
  # 2. Merge the 'body' variable into our options hash
  # 3. Render the partial with the given options hash. Just like calling the partial directly.
  def block_to_partial(partial_name, options = {}, &block)
	  options.merge!(:body => capture(&block))
	  render(:partial => partial_name, :locals => options)
	end

	def component(options = {}, &block)
		# Check the ids here somehow?
		options.merge!(:body => capture(&block))
		#render(:partial => 'style_guide/box2', :locals => options)
	  	block_to_partial('style_guide/component', options, &block)
	end

	def box2(options = {}, &block)
		options.merge!(:body => capture(&block))
		#render(:partial => 'style_guide/box2', :locals => options)
	  block_to_partial('style_guide/box2', options, &block)
	end

end

styles.html.haml

%h1 Style Guide

= component({header: 'hi', main_classes2: "one two", main_id: "iddd", header_class: "header-class", header_id: "head", content_id: "content-id", content_class: "classer"}) do
  %ul 
    %li one 
    %li two
  =image_tag  "logo-cerner.gif"

To make it easier on you (don't have to check defined? for everything), define a defaults hash and merge options on top of it:

locals = {
  main_classes: nil,
  id: nil,
  ...
}.merge(options)
block_to_partial('style_guide/component', options, &block)

Ahh yes, I thought about that. Was worried for some reason nil ID's would be an issue. That seems to work well.

I don't have any great ideas on how to make this more elegant :(

One (admittedly poor) idea to clean up the styles.html.haml is to pass in the name of a yml file like = component('iddd.yml') that contains the hash keys and values, and in the helper, it would look for that yml file at the location relative to the view. So if view is at /foo/bar/styles.html.haml. The yaml file would be at /foo/bar/styles/iddd.yml

Though this doesn't really solve the problem with the partial have all those if checks, and it does also remove the content from the view. So it's not really great.

nil won't get rendered?

I was worried that id="" would be added to the HTML. This is not the case though. HAML must be smart enough to ignore it. I checked the actually HTML via curl and the browser is not just removing it.

A comment from IRC:

if you want to clean it up you could separate the attributes by context - header: {id: 'blah', class: 'blah blah2'}, content: {id: …}