From f664c26ab502e7b35a3883d8062e36a9a2c4e4ae Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Mon, 21 Oct 2024 17:00:18 +0100 Subject: [PATCH 1/3] "Components in this application (N)" moved to the top of the page in Component guides. This should make it easier to find out about application level components since they are always the fewest in number in each application and not easily visible past the long list of all available components. --- .../component_guide/index.html.erb | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/app/views/govuk_publishing_components/component_guide/index.html.erb b/app/views/govuk_publishing_components/component_guide/index.html.erb index ee119a13be..3ea34c2020 100644 --- a/app/views/govuk_publishing_components/component_guide/index.html.erb +++ b/app/views/govuk_publishing_components/component_guide/index.html.erb @@ -16,6 +16,18 @@ <% unless ENV["MAIN_COMPONENT_GUIDE"] %> +

Components in this application (<%= @component_docs.length %>)

+ +

Gem components used by this app (<%= @components_in_use_docs.length %>)

<%= render "govuk_publishing_components/components/details", { @@ -50,20 +62,6 @@ <% end %> -<% end %> - -<% unless ENV["MAIN_COMPONENT_GUIDE"] %> -

Components in this application (<%= @component_docs.length %>)

-

All gem components (<%= @gem_component_docs.length %>)

<% end %> From a4c1e2d246249dc7d4e659a9a58c3fdf4a85d13e Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Tue, 29 Oct 2024 12:11:53 +0000 Subject: [PATCH 2/3] Show components not used by app in comp guide, instead of all gem comps We now render a list of all gem components only in the gem component guide itself. In app component guides, we show "Gem components not used by this app" instead. The "All gem components' heading" can be removed as it was never used by the gem component guide. Change "unless" syntax to "if not" as we now have a an "else" condition. Co-authored-by: Rebecca Pearce <17481621+beccapearce@users.noreply.github.com> Co-authored-by: Hanna Laakso --- .../component_guide_controller.rb | 22 +++++++--- .../component_docs.rb | 12 +++--- .../component_guide/index.html.erb | 41 ++++++++++++------- 3 files changed, 48 insertions(+), 27 deletions(-) diff --git a/app/controllers/govuk_publishing_components/component_guide_controller.rb b/app/controllers/govuk_publishing_components/component_guide_controller.rb index c50a74b06a..97c1483572 100644 --- a/app/controllers/govuk_publishing_components/component_guide_controller.rb +++ b/app/controllers/govuk_publishing_components/component_guide_controller.rb @@ -9,7 +9,8 @@ def index @component_gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path @component_docs = component_docs.all @gem_component_docs = gem_component_docs.all - @components_in_use_docs = components_in_use_docs.used_in_this_app + @used_components = used_components_names.get_component_docs + @unused_components = unused_components_names.get_component_docs @components_in_use_sass = components_in_use_sass @components_in_use_js = components_in_use_js end @@ -47,7 +48,7 @@ def components_in_use_sass additional_files = "@import 'govuk_publishing_components/govuk_frontend_support';\n" additional_files << "@import 'govuk_publishing_components/component_support';\n" - components = find_all_partials_in(components_in_use) + components = find_all_partials_in(get_used_component_names) components.map { |component| "@import 'govuk_publishing_components/components/#{component.gsub('_', '-')}';" if component_has_sass_file(component.gsub("_", "-")) @@ -57,7 +58,7 @@ def components_in_use_sass def components_in_use_js additional_files = "//= require govuk_publishing_components/lib\n" - components = find_all_partials_in(components_in_use) + components = find_all_partials_in(get_used_component_names) components.map { |component| "//= require govuk_publishing_components/components/#{component.gsub('_', '-')}" if component_has_js_file(component.gsub("_", "-")) @@ -74,11 +75,15 @@ def gem_component_docs @gem_component_docs ||= ComponentDocs.new(gem_components: true) end - def components_in_use_docs - @components_in_use_docs ||= ComponentDocs.new(gem_components: true, limit_to: components_in_use) + def used_components_names + @used_components_names ||= ComponentDocs.new(gem_components: true, limit_to: get_used_component_names) end - def components_in_use + def unused_components_names + @unused_components_names ||= ComponentDocs.new(gem_components: true, limit_to: get_unused_component_names) + end + + def get_used_component_names matches = [] files = Dir["#{@application_path}/app/views/**/*.erb"] @@ -93,6 +98,11 @@ def components_in_use matches.flatten.uniq.map(&:to_s).sort end + def get_unused_component_names + all_components = ComponentDocs.new(gem_components: true).all.map(&:id) + all_components - get_used_component_names + end + def find_all_partials_in(templates) components = [templates] diff --git a/app/models/govuk_publishing_components/component_docs.rb b/app/models/govuk_publishing_components/component_docs.rb index 72c648041b..ba14cfd3a2 100644 --- a/app/models/govuk_publishing_components/component_docs.rb +++ b/app/models/govuk_publishing_components/component_docs.rb @@ -12,11 +12,11 @@ def get(id) end def all - fetch_component_docs.map { |component| build(component) }.sort_by(&:name) + fetch_component_doc_files.map { |component| build(component) }.sort_by(&:name) end - def used_in_this_app - fetch_component_docs.map { |component| build(component) if component_in_use(component[:id]) }.compact.sort_by(&:name) + def get_component_docs + fetch_component_doc_files.map { |component| build(component) if component_in_use?(component[:id]) }.compact.sort_by(&:name) end private @@ -25,13 +25,13 @@ def build(component) ComponentDoc.new(component) end - def fetch_component_docs + def fetch_component_doc_files doc_files = Rails.root.join(@documentation_directory, "*.yml") Dir[doc_files].sort.map { |file| parse_documentation(file) } end - def component_in_use(component) - true if @limit_to.include?(component) + def component_in_use?(component) + @limit_to.include?(component) end def fetch_component_doc(id) diff --git a/app/views/govuk_publishing_components/component_guide/index.html.erb b/app/views/govuk_publishing_components/component_guide/index.html.erb index 3ea34c2020..5bcf2274bf 100644 --- a/app/views/govuk_publishing_components/component_guide/index.html.erb +++ b/app/views/govuk_publishing_components/component_guide/index.html.erb @@ -15,7 +15,7 @@ } %> -<% unless ENV["MAIN_COMPONENT_GUIDE"] %> +<% if !ENV["MAIN_COMPONENT_GUIDE"] %>

Components in this application (<%= @component_docs.length %>)

    <% @component_docs.each do |component_doc| %> @@ -28,7 +28,7 @@ <% end %>
-

Gem components used by this app (<%= @components_in_use_docs.length %>)

+

Gem components used by this app (<%= @used_components.length %>)

<%= render "govuk_publishing_components/components/details", { title: "Suggested imports for this application" @@ -53,7 +53,7 @@
    - <% @components_in_use_docs.each do |component_doc| %> + <% @used_components.each do |component_doc| %>
  • <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>

    @@ -63,19 +63,30 @@ <% end %>

-

All gem components (<%= @gem_component_docs.length %>)

-<% end %> +

Gem components not used by this app (<%= @unused_components.length %>)

+
    + <% @unused_components.each do |component_doc| %> +
  • + <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %> +

    + <%= component_doc.description %> +

    +
    • + <% end %> +
-
    - <% @gem_component_docs.each do |component_doc| %> -
  • - <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %> -

    - <%= component_doc.description %> -

    -
    • - <% end %> -
+<% else %> +
    + <% @gem_component_docs.each do |component_doc| %> +
  • + <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %> +

    + <%= component_doc.description %> +

    +
    • + <% end %> +
+<% end %>

If you cannot find a suitable component consider extending an existing component or creating a new one.

From c852597394139f0b6ac7fbdd71d9d2c32957dfc1 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Tue, 29 Oct 2024 16:55:06 +0000 Subject: [PATCH 3/3] Run Percy in main component guide Percy uses the list of all gem components to take screenshots. Since the previous commit moved this list to the gem or main component guide, Percy was failing. Set an environment variable to make Percy run in the main component guide. This makes the tests pass, however I'm not sure if this is the approach we should be taking or if we should configure Percy differently. I'll chat with the team to decide if doing this here is out of scope and and if we should just render a list of all gem components in all views for now. --- .github/workflows/visual-regression-tests.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/visual-regression-tests.yml b/.github/workflows/visual-regression-tests.yml index 5eae5f03e5..a0f7c3202b 100644 --- a/.github/workflows/visual-regression-tests.yml +++ b/.github/workflows/visual-regression-tests.yml @@ -53,3 +53,4 @@ jobs: - run: yarn run percy exec -- bundle exec rspec --tag visual_regression env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} + MAIN_COMPONENT_GUIDE: true