Add suggested script imports

app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -10,6 +10,7 @@ def index
       @components_in_use_docs = components_in_use_docs.used_in_this_app
       @components_in_use_sass = components_in_use_sass(false)
       @components_in_use_print_sass = components_in_use_sass(true)
+      @components_in_use_js = components_in_use_js
     end
 
     def show
@@ -62,6 +63,25 @@ def components_in_use_sass(print_styles)
       }.compact.uniq.sort.join("\n").squeeze("\n").prepend(additional_files)
     end
 
+    def components_in_use_js
+      additional_files = "//= require govuk_publishing_components/lib\n"
+
+      components = components_in_use
+      extra_components = []
+
+      components.each do |component|
+        components_in_component = components_within_component(component)
+        extra_components << components_in_component
+      end
+
+      components << extra_components.compact
+      components = components.flatten.uniq.sort
+
+      components.map { |component|
+        "//= require govuk_publishing_components/components/#{component.gsub('_', '-')}" if component_has_js_file(component.gsub("_", "-"))
+      }.compact.uniq.sort.join("\n").squeeze("\n").prepend(additional_files)
+    end
+
   private
 
     def component_docs
@@ -95,6 +115,10 @@ def component_has_sass_file(component, print_styles)
       Pathname.new(@component_gem_path + "/app/assets/stylesheets/govuk_publishing_components/components/#{print_path}_#{component}.scss").exist?
     end
 
+    def component_has_js_file(component)
+      Pathname.new(@component_gem_path + "/app/assets/javascripts/govuk_publishing_components/components/#{component}.js").exist?
+    end
+
     def components_within_component(component)
       data = File.read(@component_gem_path + "/app/views/govuk_publishing_components/components/_#{component}.html.erb")
       match = data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)

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

@@ -20,7 +20,7 @@
   <h2 class="component-doc-h2">Gem components used by this app (<%= @components_in_use_docs.length %>)</h2>
 
   <%= render "govuk_publishing_components/components/details", {
-    title: "Suggested Sass for this application"
+    title: "Suggested imports for this application"
   } do %>
     <%= render "govuk_publishing_components/components/textarea", {
       label: {
@@ -36,6 +36,13 @@
       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."
+      },
+      name: "main-js",
+      value: @components_in_use_js
+    } %>
   <% end %>
 <pre>
 

spec/component_guide/component_index_spec.rb

@@ -67,7 +67,7 @@
 @import 'govuk_publishing_components/components/title';"
 
     expect(page).to have_selector(".component-doc-h2", text: "Gem components used by this app (12)")
-    expect(page).to have_selector(".govuk-details__summary-text", text: "Suggested Sass for this application")
+    expect(page).to have_selector(".govuk-details__summary-text", text: "Suggested imports for this application")
 
     expect(page.find(:css, 'textarea[name="main-sass"]', visible: false).value).to eq(expected_main_sass)
   end
@@ -86,6 +86,17 @@
     expect(page.find(:css, 'textarea[name="print-sass"]', visible: false).value).to eq(expected_print_sass)
   end
 
+  it "includes suggested js for the application" do
+    visit "/component-guide"
+    expected_main_sass = "//= require govuk_publishing_components/lib
+//= require govuk_publishing_components/components/error-summary
+//= require govuk_publishing_components/components/govspeak
+//= require govuk_publishing_components/components/step-by-step-nav
+//= require govuk_publishing_components/components/tabs"
+
+    expect(page.find(:css, 'textarea[name="main-js"]', visible: false).value).to eq(expected_main_sass)
+  end
+
   it "creates a page for the component" do
     visit "/component-guide/test-component"
     expect(body).to include("A test component for the dummy app")