jgnatch/mountain_view

<div class="mv-main__header">
  <h1><%= @component.title %></h1>
</div>

<% if @component.stubs? %>
  <% if @component.stubs_correct_format? %>
    <% if @component.stubs_extra_info? %>
      <div class="mv-component__meta">
        <p><%= @component.stubs_extra_info %></p>
      </div>
    <% end %>
    <% if @component.component_stubs? %>
      <% @component.component_stubs.each_with_index do |component_stub, index| %>
        <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 %>
          </div>
          <div class="mv-component__description">
            <h3><%= t('mountain_view.show.instruction_heading') %></h3>
            <% unless component_stub.meta_description.blank? %>
              <p><%= component_stub.meta_description %></p>
              <br />
            <% end %>
            <div class="mv-component__description__definition">
              <code class="language-ruby">&lt;%= render_component("<%= @component.name %>", {properties as below}) %&gt;</code>
            </div>
            <%- formatted = JSON.pretty_generate component_stub.properties %>
            <div class="mv-component__description__properties">
              <code class="language-ruby"><%= formatted.gsub(/\"(\S+)?\":/, '\1:') %></code>
            </div>
          </div>
        </div>
      <% end %>
    <% end %>
  <% else %>
    <div class="mv-hint">
      <h2><%= t('mountain_view.show.hint_stub_format_html') %></h2>
      <ul>
        <li>
          <%= t('mountain_view.show.tip_stub_format_html') %>
          <br>
          <div class="mv-component__description__properties">
            <code class="language-yaml"><%= render 'example', component_name: @component.name %></code>
          </div>
        </li>
      </ul>
    </div>
  <% end %>
<% else %>
  <div class="mv-hint">
    <h2><%= t('mountain_view.show.hint_stub_creation_html') %></h2>
    <ul>
      <li>
        <%= t('mountain_view.show.tip_stub_creation_html') %>
        <br>
        <strong><%= @component.stubs_file %></strong>
        <div class="mv-component__description__properties">
          <code class="language-yaml"><%= render 'example', component_name: @component.name %></code>
        </div>
      </li>
    </ul>
  </div>
<% end %>