govuk_publishing_components 34.10.1 → 34.12.0

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -91,8 +91,22 @@ $after-button-padding-left: govuk-spacing(4);
 
 .gem-c-layout-super-navigation-header__container {
   position: relative;
+}
 
-  @include govuk-media-query($from: "desktop") {
+.gem-c-layout-super-navigation-header__button-width-container {
+  position: relative;
+}
+
+.gem-c-layout-super-navigation-header__button-container {
+  @include govuk-media-query($until: "tablet") {
+    margin-right: govuk-spacing(-3);
+  }
+
+  top: -$black-bar-height;
+  position: absolute;
+  right: 0;
+
+  @include govuk-media-query($until: 300px) {
     position: static;
   }
 }
@@ -105,47 +119,13 @@ $after-button-padding-left: govuk-spacing(4);
 }
 
 .gem-c-layout-super-navigation-header__content {
-  @include govuk-media-query($until: "tablet") {
-    margin-right: govuk-spacing(-3);
-  }
-
-  display: inline-block;
-  float: right;
+  width: 100%;
 }
 
 .gem-c-layout-super-navigation-header__navigation-toggle-wrapper {
   position: relative;
 }
 
-// Top level navigation and search.
-.gem-c-layout-super-navigation-header__navigation-items,
-.gem-c-layout-super-navigation-header__search-items {
-  display: block;
-  float: left;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.gem-c-layout-super-navigation-header__navigation-items {
-  border-bottom: 1px solid $govuk-border-colour;
-
-  .js-module-initialised & {
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    border-bottom: 0;
-    padding: 0;
-
-    &:first-of-type {
-      margin-right: -1px;
-    }
-  }
-}
-
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
   background: govuk-colour("black");
@@ -165,7 +145,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: 19px;
   font-size: govuk-px-to-rem(19px);
   font-weight: bold;
-  margin: govuk-spacing(3) 0;
+  padding: govuk-spacing(3) 0;
   position: relative;
 
   @include govuk-media-query($from: "desktop") {
@@ -204,7 +184,7 @@ $after-button-padding-left: govuk-spacing(4);
 
     &:after {
       @include make-selectable-area-bigger;
-      @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-button-padding-right));
+      @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
     }
 
     // stylelint-disable max-nesting-depth
@@ -413,7 +393,7 @@ $after-button-padding-left: govuk-spacing(4);
   height: $black-bar-height;
   padding: 0;
   position: relative;
-  margin: 0 -3px 0 0; // overlap with the search button to hide right border on mobile
+  margin: 0;
   vertical-align: top;
 
   @include govuk-media-query($from: "desktop") {
@@ -566,7 +546,7 @@ $after-button-padding-left: govuk-spacing(4);
 // Styles for search toggle button.
 .gem-c-layout-super-navigation-header__search-toggle-button {
   @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
-  background: govuk-colour("black");
+  background: none;
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
@@ -657,25 +637,22 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
+.gem-c-layout-super-navigation-header__search-container {
+  padding-bottom: govuk-spacing(3);
+}
+
 // Dropdown menu.
 .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
+  @include govuk-media-query($until: 300px) {
+    padding-top: 80px;
+  }
+
   background: govuk-colour("light-grey");
   border-bottom: 1px govuk-colour("mid-grey") solid;
-  top: govuk-spacing(8);
-  left: govuk-spacing(-3);
-  padding: 0 govuk-spacing(3);
-  position: absolute;
-  right: govuk-spacing(-3);
-
-  @include govuk-media-query($from: "tablet") {
-    padding: 0 govuk-spacing(6);
-    left: govuk-spacing(-6);
-    right: govuk-spacing(-6);
-  }
+  padding-top: govuk-spacing(6);
 
   @include govuk-media-query($from: "desktop") {
-    left: 0;
-    right: 0;
+    padding-top: govuk-spacing(5);
   }
 }
 
@@ -692,31 +669,24 @@ $after-button-padding-left: govuk-spacing(4);
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
-  padding: 0 0 govuk-spacing(5) 0;
+  padding: 0 0 govuk-spacing(3) 0;
   position: relative;
+  margin: 0 0 govuk-spacing(2) 0;
   @include govuk-media-query($from: "desktop") {
-    padding: 0 0 govuk-spacing(4) 0;
+    padding: 0 0 govuk-spacing(3) 0;
+    margin: 0 govuk-spacing(3) govuk-spacing(1) govuk-spacing(3);
   }
 }
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
-
   list-style: none;
   margin: 0;
   padding: govuk-spacing(3) govuk-spacing(5) govuk-spacing(5) 0;
 
-  & > li {
-    margin: 0;
-  }
-
   @include govuk-media-query($from: "desktop") {
     margin: 0 (0 - govuk-spacing(3)) govuk-spacing(9);
     padding: govuk-spacing(2) 0 0 0;
-
-    & > li {
-      margin: 0 govuk-spacing(3);
-    }
   }
 }
 
@@ -743,11 +713,15 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
+  &:after {
+    @include make-selectable-area-bigger;
+  }
+
   @include govuk-media-query($from: "desktop") {
     padding: 0;
 
     &:after {
-      content: none;
+      @include make-selectable-area-bigger;
     }
   }
 }
@@ -771,29 +745,8 @@ $after-button-padding-left: govuk-spacing(4);
   margin: govuk-spacing(1) 0 0 0;
 }
 
-// Search dropdown.
-.gem-c-layout-super-navigation-header__search-items {
-  .js-module-initialised & {
-    margin: 0 (0 - govuk-spacing(3));
-    position: absolute;
-
-    @include govuk-media-query($from: "tablet") {
-      margin: 0 (0 - govuk-spacing(6));
-    }
-  }
-
-  background: govuk-colour("light-grey");
-  left: 0;
-  right: 0;
-  z-index: 999;
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0;
-  }
-}
-
 .gem-c-layout-super-navigation-header__search-form {
-  padding: govuk-spacing(3) 0 govuk-spacing(6) 0;
+  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 }
 
 // Popular links.
@@ -811,12 +764,6 @@ $after-button-padding-left: govuk-spacing(4);
   &:after {
     @include make-selectable-area-bigger;
   }
-
-  @include govuk-media-query($from: "desktop") {
-    &:after {
-      content: none;
-    }
-  }
 }
 
 .gem-c-layout-super-navigation-header__width-container {
@@ -826,8 +773,9 @@ $after-button-padding-left: govuk-spacing(4);
   }
 
   @include govuk-media-query($from: "desktop") {
-    margin: govuk-spacing(5) auto 0;
+    margin: 0 auto;
     max-width: 960px;
+    padding: govuk-spacing(5);
   }
 }
 

data/app/models/govuk_publishing_components/audit_components.rb

@@ -34,12 +34,19 @@ module GovukPublishingComponents
   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: clean_files(@all_templates, @templates_full_path).sort,
         components_containing_components: find_all_partials_in(@all_templates),
-        component_file_details: get_component_file_details(path),
+        component_file_details: component_file_details,
         component_numbers: @component_numbers,
+        helper_usage: helper_usage,
       }
     end
 
@@ -96,6 +103,8 @@ module GovukPublishingComponents
       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
@@ -215,5 +224,50 @@ module GovukPublishingComponents
 
       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/views/govuk_publishing_components/audit/_components.html.erb

@@ -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/components/_breadcrumbs.html.erb

@@ -13,7 +13,7 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(classes.join(" "))
-  component_helper.add_data_attribute({ module: "gem-track-click" })
+  component_helper.add_data_attribute({ module: "gem-track-click ga4-link-tracker" })
 %>
 
 <script type="application/ld+json">