govuk_publishing_components 32.1.0 → 35.0.0

data/app/models/govuk_publishing_components/audit_components.rb

@@ -2,65 +2,132 @@ module GovukPublishingComponents
   class AuditComponents
     attr_reader :data
 
-    def initialize(path, simple)
-      @data = {
-        gem_found: false,
-      }
-      @data = compile_data(path, simple) if Dir.exist?(path)
-    end
-
-  private
-
-    def compile_data(path, simple)
-      # simple is used to reduce effort (and therefore page load time) required
-      # when loading auditing summary on the main component guide page
-      @simple = simple
-
+    def initialize(path)
       # paths to key file locations
       @templates_path = "app/views/govuk_publishing_components/components"
       @stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components"
       @print_stylesheets_path = "app/assets/stylesheets/govuk_publishing_components/components/print"
       @javascripts_path = "app/assets/javascripts/govuk_publishing_components/components"
       @tests_path = "spec/components"
-      @js_tests_path = "spec/javascripts/components"
+      @javascript_tests_path = "spec/javascripts/components"
       @helpers_path = "lib/govuk_publishing_components/presenters"
 
-      # get all files in key file locations
-      templates = Dir["#{path}/#{@templates_path}/*.erb"]
-      stylesheets = Dir["#{path}/#{@stylesheets_path}/*.scss"]
-      print_stylesheets = Dir["#{path}/#{@print_stylesheets_path}/*.scss"]
-      javascripts = Dir["#{path}/#{@javascripts_path}/*.js"]
-      tests = Dir["#{path}/#{@tests_path}/*.rb"]
-      js_tests = Dir["#{path}/#{@js_tests_path}/*.js"]
-      helpers = Dir["#{path}/#{@helpers_path}/*_helper.rb"]
-
+      @all_templates = Dir["#{path}/#{@templates_path}/*.erb"].sort
       @templates_full_path = "#{path}/#{@templates_path}/"
 
-      # find the cleaned names of components in key file locations
-      # i.e. will show that 'component name' has a stylesheet
-      # standardised like this to be used later for easier comparison
-      @components = clean_files(templates, [path, @templates_path].join("/"))
-      @component_stylesheets = clean_files(stylesheets, [path, @stylesheets_path].join("/"))
-      @component_print_stylesheets = clean_files(print_stylesheets, [path, @print_stylesheets_path].join("/"))
-      @component_javascripts = clean_files(javascripts, [path, @javascripts_path].join("/"))
-      @component_tests = clean_files(tests, [path, @tests_path].join("/"))
-      @component_js_tests = clean_files(js_tests, [path, @js_tests_path].join("/"))
-      @component_helpers = clean_files(helpers, [path, @helpers_path].join("/"))
+      @component_numbers = {
+        template: 0,
+        stylesheet: 0,
+        print_stylesheet: 0,
+        javascript: 0,
+        test: 0,
+        javascript_test: 0,
+        helper: 0,
+      }
+
+      @data = {
+        gem_found: false,
+      }
+      @data = compile_data(path) if Dir.exist?(path)
+    end
+
+  private
+
+    def compile_data(path)
+      component_file_details = get_component_file_details(path)
+      helper_usage = get_helper_usage(component_file_details)
+
+      # remove the template file reference as not needed
+      component_file_details.map { |detail| detail.delete(:template_file) }
 
       {
         gem_found: true,
-        component_code: @components,
-        component_stylesheets: @component_stylesheets,
-        component_print_stylesheets: @component_print_stylesheets,
-        component_javascripts: @component_javascripts,
-        component_tests: @component_tests,
-        component_js_tests: @component_js_tests,
-        component_helpers: @component_helpers,
-        components_containing_components: find_all_partials_in(templates),
-        component_listing: list_all_component_details,
+        component_code: clean_files(@all_templates, @templates_full_path).sort,
+        components_containing_components: find_all_partials_in(@all_templates),
+        component_file_details: component_file_details,
+        component_numbers: @component_numbers,
+        helper_usage: helper_usage,
       }
     end
 
+    def get_component_file_details(path)
+      component_templates = clean_files(@all_templates, @templates_full_path).sort
+      details = []
+      component_templates.each do |component|
+        component_detail = {
+          name: component,
+          link: get_component_link(component),
+        }
+        file_details = [
+          {
+            type: "template",
+            file: "#{[path, @templates_path].join('/')}/_#{component.gsub(' ', '_')}.html.erb",
+          },
+          {
+            type: "stylesheet",
+            file: "#{[path, @stylesheets_path].join('/')}/_#{component.gsub(' ', '-')}.scss",
+          },
+          {
+            type: "print_stylesheet",
+            file: "#{[path, @stylesheets_path].join('/')}/_#{component.gsub(' ', '-')}.scss",
+          },
+          {
+            type: "javascript",
+            file: "#{[path, @javascripts_path].join('/')}/#{component.gsub(' ', '-')}.js",
+          },
+          {
+            type: "test",
+            file: "#{[path, @tests_path].join('/')}/#{component.gsub(' ', '_')}_spec.rb",
+          },
+          {
+            type: "javascript_test",
+            file: "#{[path, @javascript_tests_path].join('/')}/#{component.gsub(' ', '-')}-spec.js",
+          },
+          {
+            type: "helper",
+            file: "#{[path, @helpers_path].join('/')}/#{component.gsub(' ', '_')}_helper.rb",
+          },
+        ]
+        file_details.each do |detail|
+          component_detail = component_detail.merge(get_component_asset_detail(detail, component))
+        end
+
+        details << component_detail
+      end
+
+      details
+    end
+
+    def get_component_asset_detail(detail, component)
+      details = {}
+      type = detail[:type]
+      file = detail[:file]
+      details["#{type}_exists".to_sym] = false
+      # save the location of the template to later grep for helper use
+      details["#{type}_file".to_sym] = file if type == "template"
+      if File.file?(file)
+        # we don't have separate print stylesheets anymore
+        # so check the main stylesheet for print styles
+        if type == "print_stylesheet"
+          unless File.foreach(file).grep(/(media-type: print)/).empty?
+            details["#{type}_exists".to_sym] = true
+            @component_numbers[type.to_sym] += 1
+          end
+        else
+          @component_numbers[type.to_sym] += 1
+          details["#{type}_exists".to_sym] = true
+          details["#{type}_lines".to_sym] = count_lines_in(file)
+          details["#{type}_link".to_sym] = get_asset_link(type, component)
+        end
+      end
+
+      details
+    end
+
+    def count_lines_in(file)
+      File.read(file).each_line.count
+    end
+
     def clean_files(files, replace)
       files.map { |file| clean_file_name(file.gsub(replace, "")) }.sort
     end
@@ -91,8 +158,6 @@ module GovukPublishingComponents
     end
 
     def find_all_partials_in(templates)
-      return [] if @simple
-
       components = []
 
       templates.each do |template|
@@ -144,55 +209,65 @@ module GovukPublishingComponents
       end
     end
 
-    def list_all_component_details
-      return [] if @simple
-
-      all_component_information = []
-
-      @components.each do |component|
-        all_component_information << {
-          name: component,
-          link: get_component_link(component),
-          stylesheet: check_component_has("stylesheet", component),
-          print_stylesheet: check_component_has("print_stylesheet", component),
-          javascript: check_component_has("javascript", component),
-          tests: check_component_has("test", component),
-          js_tests: check_component_has("js_test", component),
-          helper: check_component_has("helper", component),
-        }
-      end
-
-      all_component_information
-    end
-
-    def check_component_has(a_thing, component)
-      look_in = @component_stylesheets if a_thing == "stylesheet"
-      look_in = @component_print_stylesheets if a_thing == "print_stylesheet"
-      look_in = @component_javascripts if a_thing == "javascript"
-      look_in = @component_tests if a_thing == "test"
-      look_in = @component_js_tests if a_thing == "js_test"
-      look_in = @component_helpers if a_thing == "helper"
-
-      if look_in.include?(component)
-        return get_asset_link(a_thing, component)
-      end
-
-      false
-    end
-
     def get_asset_link(a_thing, component)
       url = "https://github.com/alphagov"
       repo = "govuk_publishing_components"
       blob = "blob/main"
       link = nil
+      link = "#{url}/#{repo}/#{blob}/#{@templates_path}/_#{component.gsub(' ', '_')}.html.erb" if a_thing == "template"
       link = "#{url}/#{repo}/#{blob}/#{@stylesheets_path}/_#{component.gsub(' ', '-')}.scss" if a_thing == "stylesheet"
       link = "#{url}/#{repo}/#{blob}/#{@print_stylesheets_path}/_#{component.gsub(' ', '-')}.scss" if a_thing == "print_stylesheet"
       link = "#{url}/#{repo}/#{blob}/#{@javascripts_path}/#{component.gsub(' ', '-')}.js" if a_thing == "javascript"
       link = "#{url}/#{repo}/#{blob}/#{@tests_path}/#{component.gsub(' ', '_')}_spec.rb" if a_thing == "test"
-      link = "#{url}/#{repo}/#{blob}/#{@js_tests_path}/#{component.gsub(' ', '-')}-spec.js" if a_thing == "js_test"
+      link = "#{url}/#{repo}/#{blob}/#{@javascript_tests_path}/#{component.gsub(' ', '-')}-spec.js" if a_thing == "javascript_test"
       link = "#{url}/#{repo}/#{blob}/#{@helpers_path}/#{component.gsub(' ', '_')}_helper.rb" if a_thing == "helper"
 
       link
     end
+
+    def get_helper_usage(components)
+      helpers = [
+        {
+          name: "Brand helper",
+          link: "lib/govuk_publishing_components/app_helpers/brand_helper.rb",
+          match: /(GovukPublishingComponents::AppHelpers::BrandHelper.new)/,
+          used_by: [],
+        },
+        {
+          name: "Component wrapper helper",
+          link: "lib/govuk_publishing_components/presenters/component_wrapper_helper.rb",
+          match: /(GovukPublishingComponents::Presenters::ComponentWrapperHelper.new)/,
+          used_by: [],
+        },
+        {
+          name: "Heading helper",
+          link: "lib/govuk_publishing_components/presenters/heading_helper.rb",
+          match: /(GovukPublishingComponents::Presenters::HeadingHelper.new)/,
+          used_by: [],
+        },
+        {
+          name: "Shared helper",
+          link: "lib/govuk_publishing_components/presenters/shared_helper.rb",
+          match: /(GovukPublishingComponents::Presenters::SharedHelper.new)/,
+          used_by: [],
+        },
+      ]
+
+      components.each do |component|
+        file = component[:template_file]
+        next unless File.file?(file)
+
+        helpers.each do |helper|
+          next unless File.foreach(file).grep(helper[:match]).present?
+
+          helper[:used_by] << {
+            name: component[:name],
+            link: component[:template_file].split("/components/")[1],
+          }
+        end
+      end
+
+      helpers
+    end
   end
 end

data/app/models/govuk_publishing_components/component_doc.rb

@@ -32,6 +32,12 @@ module GovukPublishingComponents
       "#{component[:accessibility_criteria]}\n#{shared_accessibility_criteria.join("\n")}"
     end
 
+    def component_wrapper_options
+      if uses_component_wrapper_helper?
+        ComponentWrapperHelperOptions.description
+      end
+    end
+
     def example
       examples.first
     end
@@ -48,6 +54,10 @@ module GovukPublishingComponents
       component[:display_preview].nil? ? true : component[:display_preview]
     end
 
+    def uses_component_wrapper_helper?
+      component[:uses_component_wrapper_helper]
+    end
+
     def html_body
       markdown_to_html(body) if body.present?
     end
@@ -56,6 +66,10 @@ module GovukPublishingComponents
       markdown_to_html(accessibility_criteria) if accessibility_criteria.present?
     end
 
+    def html_component_wrapper_options
+      markdown_to_html(component_wrapper_options) if component_wrapper_options.present?
+    end
+
     def partial_path
       if source == "gem"
         "govuk_publishing_components/components/#{id}"

data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb

@@ -0,0 +1,15 @@
+module GovukPublishingComponents
+  module ComponentWrapperHelperOptions
+    def self.description
+      "
+This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the [component wrapper helper documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component-wrapper-helper.md) for more detail.
+
+- `id` - accepts a string for the element ID attribute
+- `data_attributes` - accepts a hash of data attributes
+- `aria` - accepts a hash of aria attributes
+- `classes` - accepts a space separated string of classes, these should not be used for styling and must be prefixed with `js-`
+- `role` - accepts a space separated string of roles
+      "
+    end
+  end
+end

data/app/views/govuk_publishing_components/audit/_applications.html.erb

@@ -12,7 +12,7 @@
   <%= render "govuk_publishing_components/components/details", {
     title: "How to use this information"
   } do %>
-    <p class="govuk-body">This page shows information about component use on GOV.UK. This information has been cross referenced with the components in the gem to produce warnings where e.g. a print stylesheet for a component exists but has not been included in an application.</p>
+    <p class="govuk-body">This page shows information about component use on GOV.UK. This information has been cross referenced with the components in the gem to produce warnings where e.g. JavaScript for a component exists but has not been included in an application.</p>
     <p class="govuk-body">Warnings should be investigated, although there may be a reason why the application has been configured as it is. Note that 'code' can refer to templates or ruby code.</p>
   <% end %>
 
@@ -62,11 +62,11 @@
           <% application[:summary].each do |item| %>
             <div class="govuk-summary-list__row">
               <dt class="govuk-summary-list__key">
-                <%= item[:name] %>
+                <%= item[:name] %> (<%= item[:value].length %>)
               </dt>
               <dd class="govuk-summary-list__value">
                 <% if item[:value].length > 0 %>
-                  <%= item[:value] %>
+                  <%= item[:value].join(", ") %>
                 <% else %>
                   None
                 <% end %>

data/app/views/govuk_publishing_components/audit/_component_contents.html.erb

@@ -1,78 +1,86 @@
-<%
-  total_components = components.length
-  components_with_stylesheet = 0
-  components_with_print_stylesheet = 0
-  components_with_javascript = 0
-  components_with_test = 0
-  components_with_javascript_test = 0
-  components_with_helper = 0
-
-  components.each do |component|
-    components_with_stylesheet += 1 if component[:stylesheet]
-    components_with_print_stylesheet += 1 if component[:print_stylesheet]
-    components_with_javascript += 1 if component[:javascript]
-    components_with_test += 1 if component[:tests]
-    components_with_javascript_test += 1 if component[:js_tests]
-    components_with_helper += 1 if component[:helper]
-  end
-%>
 <table class="govuk-table">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
-      <th scope="col" class="govuk-table__header sticky-table-header">Component (<%= total_components %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">CSS (<%= components_with_stylesheet %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Print CSS (<%= components_with_print_stylesheet %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">JS (<%= components_with_javascript %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Test (<%= components_with_test %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">JS test (<%= components_with_javascript_test %>)</th>
-      <th scope="col" class="govuk-table__header sticky-table-header">Helper (<%= components_with_helper %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">Template (<%= @components[:component_numbers][:template] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">CSS (<%= @components[:component_numbers][:stylesheet] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">Print styles (<%= @components[:component_numbers][:print_stylesheet] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">JS (<%= @components[:component_numbers][:javascript] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">Test (<%= @components[:component_numbers][:test] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">JS test (<%= @components[:component_numbers][:javascript_test] %>)</th>
+      <th scope="col" class="govuk-table__header sticky-table-header">Helper (<%= @components[:component_numbers][:helper] %>)</th>
     </tr>
   </thead>
   <tbody class="govuk-table__body">
-    <% components.each do |component| %>
+    <% @components[:component_file_details].each do |component| %>
       <tr class="govuk-table__row">
         <th scope="row" class="govuk-table__header">
-          <a href="<%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
+          <a href="<%= component[:link] %>" class="govuk-link">
+            <%= component[:name] %>
+          </a>
         </th>
         <td class="govuk-table__cell">
-          <% if component[:stylesheet] %>
+          <% if component[:template_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:stylesheet] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:template_link] %>" class="govuk-link">
+                <%= component[:template_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
+              </a>
             </strong>
           <% end %>
         </td>
         <td class="govuk-table__cell">
-          <% if component[:print_stylesheet] %>
+          <% if component[:stylesheet_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:print_stylesheet] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
+                <%= component[:stylesheet_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
+              </a>
             </strong>
           <% end %>
         </td>
         <td class="govuk-table__cell">
-          <% if component[:javascript] %>
+          <% if component[:print_stylesheet_exists] %>
+            <strong class="govuk-tag govuk-tag--green">Yes</strong>
+          <% end %>
+        </td>
+        <td class="govuk-table__cell">
+          <% if component[:javascript_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:javascript] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:javascript_link] %>" class="govuk-link">
+                <%= component[:javascript_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
+              </a>
             </strong>
           <% end %>
         </td>
         <td class="govuk-table__cell">
-          <% if component[:tests] %>
+          <% if component[:test_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:tests] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:test_link] %>" class="govuk-link">
+                <%= component[:test_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
+              </a>
             </strong>
           <% end %>
         </td>
         <td class="govuk-table__cell">
-          <% if component[:js_tests] %>
+          <% if component[:javascript_test_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:js_tests] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
+                <%= component[:javascript_test_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
+              </a>
             </strong>
           <% end %>
         </td>
         <td class="govuk-table__cell">
-          <% if component[:helper] %>
+          <% if component[:helper_exists] %>
             <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:helper] %>" class="govuk-link">Yes</a>
+              <a href="<%= component[:helper_link] %>" class="govuk-link">
+                <%= component[:helper_lines] %>
+                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
+              </a>
             </strong>
           <% end %>
         </td>

data/app/views/govuk_publishing_components/audit/_components.html.erb

@@ -10,7 +10,7 @@
   <% component_items = [] %>
 
   <% component_files = capture do %>
-    <%= render partial: "component_contents", locals: { components: @components[:component_listing] } %>
+    <%= render partial: "component_contents" %>
   <% end %>
 
   <%
@@ -63,9 +63,54 @@
     items: component_items
   %>
 
+  <% helpers_by_component = capture do %>
+    <dl class="govuk-summary-list">
+      <% @components[:helper_usage].each do |helper| %>
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
+            <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/<%= helper[:link] %>" class="govuk-link"><%= helper[:name] %></a> 
+          </dt>
+          <dd class="govuk-summary-list__value">
+            <details class="govuk-details" data-module="govuk-details">
+              <summary class="govuk-details__summary">
+                <span class="govuk-details__summary-text">
+                  Used by <%= helper[:used_by].length %> components
+                </span>
+              </summary>
+              <div class="govuk-details__text">
+                <ul class="govuk-list govuk-list--bullet">
+                  <% helper[:used_by].each do |component| %>
+                    <% github_link = 'https://github.com/alphagov/govuk_publishing_components/tree/main/app/views/govuk_publishing_components/components/' %>                    
+                    <li>
+                      <a href="<%= github_link %><%= component[:link] %>" class="govuk-link"><%= component[:name] %></a>
+                    </li>
+                  <% end %>            
+                </ul>
+              </div>
+            </details>            
+          </dd>
+        </div>
+      <% end %>
+    </dl>
+  <% end %>
+
+  <%
+    component_items << {
+      heading: {
+        text: "Helpers by component",
+      },
+      summary: {
+        text: "Shows which components use common helpers",
+      },
+      content: {
+        html: helpers_by_component
+      },
+    }
+  %>
+
   <%= render 'items_in_applications',
     heading: 'Helpers by application',
-    summary: 'Shows any applications that use helper classes from the components gem',
+    summary: 'Shows any applications that use helpers from the components gem',
     content: @components[:helpers_used_by_applications],
     items: component_items
   %>

data/app/views/govuk_publishing_components/component_guide/_application_stylesheet.html.erb

@@ -1,4 +1 @@
 <%= stylesheet_link_tag "#{GovukPublishingComponents::Config.application_stylesheet}" %>
-<% if GovukPublishingComponents::Config.application_print_stylesheet %>
-  <%= stylesheet_link_tag "#{GovukPublishingComponents::Config.application_print_stylesheet}", media: "print" %>
-<% end %>

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -28,13 +28,6 @@
       name: "main-sass",
       value: @components_in_use_sass
     } %>
-    <%= render "govuk_publishing_components/components/textarea", {
-      label: {
-        text: "Add this to your application's print scss file, before your other local imports."
-      },
-      name: "print-sass",
-      value: @components_in_use_print_sass
-    } %>
     <%= render "govuk_publishing_components/components/textarea", {
       label: {
         text: "Add this to your application's main js file, before your other local imports."

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -30,6 +30,17 @@
 
   <div class="component-doc__content-list">
     <%
+      other_examples_links = []
+      other_examples_links << {
+        href: "#standard-options",
+        text: "Standard options"
+      } if @component_doc.uses_component_wrapper_helper?
+      other_examples_links.concat(@component_doc.other_examples.map do | example |
+        {
+          href: "##{example.id}",
+          text: example.name
+        }
+      end)
       content_items = [
         { href: "#how-it-looks", text: "How it looks" },
         { href: "#how-to-call-this-component", text: "How to call this component" },
@@ -38,12 +49,7 @@
         ({
           href: "#other-examples",
           text: "Other examples",
-          items: @component_doc.other_examples.map do | example |
-            {
-              href: "##{example.id}",
-              text: example.name
-            }
-          end
+          items: other_examples_links
         } if @component_doc.other_examples.any?),
       ].compact
     %>
@@ -90,6 +96,15 @@
     <div class="examples">
       <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
 
+      <% if @component_doc.uses_component_wrapper_helper? %>
+        <div class="component-example" id="standard-options">
+          <h3 class="example-title">Standard options</h3>
+          <div class="component-markdown">
+            <%= raw(@component_doc.html_component_wrapper_options) %>
+          </div>
+        </div>
+      <% end %>
+
       <% @component_doc.other_examples.each do |example| %>
         <div class="component-example" id="<%= example.id %>">
           <h3 class="example-title">