documentation of rails helper components

_style.html.erb

<div id="cg-<%= name.parameterize %>">
  <h1 class="uk-article-title"><%= name.humanize %></h1>

  <p class="uk-article-lead"><%= description %></p>

  <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

  <h3 class="tm-article-subtitle">Example</h3>

  <div class="uk-border uk-padding uk-grid">
    <div class="uk-width-1-1">
      <%= example %>
    </div>
  </div>

  <div class="markup uk-margin-top">
    <h3 class="tm-article-subtitle">Markup</h3>

    <ul class="uk-tab" data-uk-tab="{connect:'#<%=name.parameterize%>-markup'}">
      <li><a href="">erb</a></li>
      <li><a href="">html</a></li>
    </ul>

    <ul id="<%=name.parameterize%>-markup" class="uk-switcher uk-margin">
      <li><%= raw CodeRay.scan(markup.strip_heredoc, :erb).html(wrap: :div, style: :class) %></li>
      <li><%= raw CodeRay.scan(HtmlBeautifier.beautify(example), :html).html(wrap: :div, style: :class) %></li>
    </ul>
  </div>

  <hr class="uk-article-divider">
</div>

style_guide_helper.rb

module StyleGuideHelper
  def style_link(name)
    link_to name, "#cg-#{name.parameterize}"
  end

  def render_style(name, description = nil, &block)
    StyleRenderer.new(self, name, description, block)
  end

  class StyleRenderer
    def initialize(view_context, name, description = nil, block)
      @view_context = view_context
      @name = name
      @description = description
      @block = block
    end

    def finish(end_line)
      @view_context.render "style",
        name: @name,
        description: @description,
        example: @view_context.capture(&@block),
        markup: source(end_line)
    end

    private

    def source(end_line)
      file, start_line = *@block.source_location

      lines = File.readlines(file)

      relevant_lines = lines[start_line..(end_line - 2)]
      relevant_lines.join
    end
  end
end

teaching.html.erb

<div class="uk-grid" data-uk-grid-margin>
  <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">
    <ul class="tm-nav uk-nav" data-uk-nav>
      <li class="uk-nav-header">Defaults</li>
      <li><%= style_link("article") %></li>
      <li><%= style_link("build tabs") %></li>
      <li><%= style_link("modal") %></li>
    </ul>
  </div>
  <div class="tm-main uk-width-medium-3-4">
    <article class="uk-article">
      <%= render_style "article" do %>
        <%= simple_form_for :model do |f| %>
          <% article title: "Settings", text: "description of settings" do %>
            <%= f.input :name %>
          <%- end %>
        <%- end %>
      <% end.finish(__LINE__) %>

      <%= render_style "build_tabs" do %>
        <%= build_tabs(
          translation_scope: "style_guides.teaching.example_tabs",
          links: { teaching: style_guides_path(:teaching), another_style: style_guides_path(:teaching) }
        ) %>
      <% end.finish(__LINE__) %>

      <%= render_style "modal" do %>
        <button class="uk-button uk-button-primary" data-behavior="modal" data-modalname="example">
          <span class="uk-icon-trash"></span>
          <span>Example Modal</span>
        </button>

        <% modal id: "example-modal" do %>
          <div class="uk-modal-header">
            <h3 class="uk-margin-small-bottom">Title</h3>
            <p>Modal text</p>
          </div>
          <%= simple_form_for :test do |f| %>
            <div class="uk-text-right">
              <button class="uk-modal-close uk-button uk-button-link">Cancel</button>
              <%= f.submit "Confirm", class: "uk-button" %>
            </div>
          <% end %>
        <% end %>
      <% end.finish(__LINE__) %>
    </article>
  </div>
</div>