Add tabs to code examples for different languages (html, erb)

- remove code that attaches button to display html code example - don't show the erb tab if rendering the example with ERB produces the same output - HTML and ERB examples both have white backgrounds Co-authored-by: Travis Grathwell <[email protected]> Co-authored-by: Laura Kogler <[email protected]>
codeforamerica · Dec 14, 2019 · c28980c · c28980c
1 parent 2aa7c23
commit c28980c
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 55 deletions.
diff --git a/app/assets/stylesheets/templates/_styleguide.scss b/app/assets/stylesheets/templates/_styleguide.scss
@@ -60,43 +60,60 @@
     }
   }
 
-  .pattern__html {
+  .code-example--html, .code-example--erb {
     @include clearfix();
-
-    &.is-open {
-      .pattern__button:before {
-        content: 'Hide HTML code';
-      }
-
       pre {
         display: block;
         font-size: $font-size-15;
         border: 1px solid $color-grey-light;
         background: #fff;
+        overflow-y: hidden;
+        code {
+          background-color: transparent;
+        }
       }
-    }
+  }
 
-    pre {
-      display: none;
-      background-color: transparent;
-      overflow-y: hidden;
+  .language-markup {
+    margin-top: 0;
+  }
 
-      code {
-        background-color: transparent;
-      }
-    }
+  .pattern__code-example > .tab-bar {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  .pattern__preview + .pattern__html {
+  .pattern__preview + .code-example--html {
     margin-top: -2em;
     border-top: 0px;
   }
 
-  .pattern__code {
-    margin-top: 1em;
+  .code-example--erb {
     font-size: $font-size-15;
   }
 
+  .tab-bar__tab:focus {
+    box-shadow: none;
+  }
+
+  .tab-bar__tab.is-selected {
+    background-color: $color-background;
+    color: $color-grey-darkest;
+    font-weight: 600;
+    z-index: 2;
+
+    &:before {
+      background-color: $color-background;
+      content: '';
+      position: absolute;
+      display: block;
+      left: 0;
+      right: 0;
+      bottom: -2px;
+      height: 2px;
+    }
+  }
+
   .pattern__explanation {
     font-size: $font-size-25;
     margin-top: 2em;

diff --git a/app/helpers/cfa/styleguide/pages_helper.rb b/app/helpers/cfa/styleguide/pages_helper.rb
@@ -1,27 +1,27 @@
 module Cfa
   module Styleguide
     module PagesHelper
-      def styleguide_example_render(partial_path)
+      def render_example(partial_path)
         partial = lookup_context.find_template(partial_path, [], true)
 
         content_tag :div, class: "pattern__example" do
           partial.render(self, {})
         end
       end
 
-      def styleguide_example_code(partial_path)
+      def code_example_html(partial_path)
+        partial = lookup_context.find_template(partial_path, [], true)
+
+        partial.render(self, {})
+      end
+
+      def code_example_erb(partial_path)
         partial = lookup_context.find_template(partial_path, [], true)
 
         filepath = partial.inspect
         partial_contents = File.open(filepath, "r", &:read)
 
-        content_tag(:div, class: "pattern__code") do
-          content_tag(:pre) do
-            content_tag(:code, class: "language-erb") do
-              partial_contents
-            end
-          end
-        end
+        partial_contents
       end
 
       def status_icon(icon, successful: false, failure: false, not_applicable: false)

diff --git a/app/views/cfa/styleguide/pages/_section.html.erb b/app/views/cfa/styleguide/pages/_section.html.erb
@@ -11,15 +11,35 @@
         <a href="<%= styleguide_example_path(example) %>" style="text-decoration: none;" aria-label="Isolated example link">◉</a>
       </h3>
     </div>
+
     <div class="grid__item width-three-fourths">
       <div class="pattern">
-        <%= styleguide_example_render("examples/#{example}") %>
+        <% html_example = code_example_html("examples/#{example}").to_str.strip %>
+        <% erb_example = code_example_erb("examples/#{example}").strip %>
+
+        <%= render_example("examples/#{example}") %>
 
         <% if explanation.present? %>
           <p class="pattern__explanation"><%= explanation.html_safe %></p>
         <% end %>
 
-        <%= styleguide_example_code("examples/#{example}") %>
+        <div class="pattern__code-example">
+          <div class="tab-bar">
+            <a href="#" class="tab-bar__tab" id="html">HTML</a>
+            <% if erb_example != html_example %>
+              <a href="#" class="tab-bar__tab" id="erb">ERB</a>
+            <% end %>
+          </div>
+
+          <div class="code-example code-example--html">
+            <pre><code class="language-markup"><%= html_example %></code></pre>
+          </div>
+          <% if erb_example != html_example %>
+            <div class="code-example code-example--erb">
+              <pre class="language-ruby language-markup"><code class="language-erb"><%= erb_example %></code></pre>
+            </div>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>

diff --git a/app/views/cfa/styleguide/pages/emojis.html.erb b/app/views/cfa/styleguide/pages/emojis.html.erb
@@ -18,9 +18,9 @@
     </div>
     <div class="grid__item width-three-fourths">
       <div class="pattern">
-        <%= styleguide_example_render 'examples/atoms/emojis' %>
+        <%= render_example 'examples/atoms/emojis' %>
 
-        <div class="pattern__code" />
+        <div class="code-example--erb" />
       </div>
     </div>
   </div>

diff --git a/app/views/layouts/main.html.erb b/app/views/layouts/main.html.erb
@@ -47,33 +47,32 @@
 
   <script>
       var pattern = (function() {
-
-          /**
-           <div class="pattern__example"></div>
-           <div class="pattern">
-             <div class="pattern__html"></div> CODE BELOW ATTACHES THIS
-             <div class="pattern__code"></div>
-           </div>
-           **/
-
           var p = {
-              render: function(exampleRubyCode, exampleHtml) {
-                  var sampleCodeBox = $('<div class="pattern__html"><a href="#" class="pattern__button"><i class="icon-arrow_drop_down"></i></a><pre><code class="language-markup"></code></pre></div>');
-                  $(sampleCodeBox).find('code').text($(exampleHtml).html());
-                  $(exampleRubyCode).before(sampleCodeBox);
-              },
-
               init: function() {
-                  $('.pattern').each(function(index, pattern) {
-                      var exampleRubyCode = $(this).find('.pattern__code');
-                      var exampleHtml = $(this).find('.pattern__example');
-                      p.render(exampleRubyCode, exampleHtml);
+                  $('.pattern__code-example').each(function() {
+                      const htmlTab = $(this).find('#html');
+                      const erbTab = $(this).find('#erb');
+                      const allTabs = [htmlTab, erbTab];
+
+                      // select html tab and display html code example by default
+                      htmlTab.toggleClass('is-selected');
+                      $(this).find('.code-example--erb').hide();
+
+                      // attach click handler on tabs
+                      allTabs.forEach(function(elem) {
+                          elem.click(function(e) {
+                              e.preventDefault();
+                              const patternCodeExample = $(this).parents('.pattern__code-example');
 
-                      $(this).find('.pattern__button').click(function(e) {
-                          e.preventDefault();
-                          $(this).parent().toggleClass('is-open');
-                      })
+                              // deselect all tabs, select clicked tab
+                              allTabs.forEach(function(tab) { tab.removeClass('is-selected') });
+                              $(this).toggleClass('is-selected');
 
+                              // hide all code, show selected tab's code
+                              patternCodeExample.find('.code-example').hide();
+                              patternCodeExample.find(`.code-example--${elem.attr('id')}`).show();
+                          });
+                      });
                   });
               }
           };