govuk_publishing_components 62.0.0 → 62.2.0

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

@@ -2,9 +2,13 @@
   add_gem_component_stylesheet("table")
   add_gem_component_stylesheet("select")
   add_gem_component_stylesheet("summary-list")
+  content_for :title, "Component audit"
 %>
 
-<% content_for :title, "Component audit" %>
+<%= render "govuk_publishing_components/components/back_link", {
+  href: "/component-guide",
+} %>
+
 <%= render "govuk_publishing_components/components/heading", {
     text: "Components audit",
     heading_level: 1,

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

@@ -0,0 +1,14 @@
+<% if local_assigns[:heading] %>
+  <h2 class="govuk-heading-m"><%= local_assigns[:heading] %> (<%= local_assigns[:size] %>)</h2>
+<% end %>
+<%= local_assigns[:details] if local_assigns[:details] %>
+<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
+  <% local_assigns[:components].each do |component_doc| %>
+    <li data-filter-item>
+      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
+      <p class="govuk-body">
+        <%= component_doc.description %>
+      </p>
+    </li>
+  <% end %>
+</ul>

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

@@ -22,13 +22,13 @@
     <div class="component-markdown">
       <%= raw(@component_example.html_description) %>
     </div>
-    <h2 class="component-doc-h2">
+    <h2 class="govuk-heading-m">
       How it looks
-      <small>(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
+      <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
     </h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 
-    <h2 class="component-doc-h2">How to call this example</h2>
+    <h2 class="govuk-heading-m govuk-!-margin-top-4">How to call this example</h2>
     <%= code_example %>
   </div>
 </div>

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

@@ -5,94 +5,69 @@
     margin_bottom: 8,
   } %>
 
-<div class="component-markdown">
+<div class="component-markdown govuk-!-margin-bottom-8">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
   <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
   <ul>
     <li>Read about how to <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/publishing-to-rubygems.md">release a new version of the gem</a></li>
     <li><a href="/component-guide/audit">View component audits</a></li>
+    <li><a href="/component-guide/applications">View application information</a></li>
   </ul>
 </div>
 
-<form role="search" data-module="filter-components" class="component-search">
-  <%= render "govuk_publishing_components/components/search", {
-    label_text: "Search components",
-  } %>
-</form>
+<div data-module="filter-list" data-filter-label="Search components">
+  <% if !ENV["MAIN_COMPONENT_GUIDE"] %>
+    <%= render partial: "component_list", locals: {
+      heading: "Components in this application",
+      size: @component_docs.length,
+      components: @component_docs,
+    } %>
 
-<% if !ENV["MAIN_COMPONENT_GUIDE"] %>
-  <h2 class="component-doc-h2">Components in this application (<%= @component_docs.length %>)</h2>
-  <ul class="component-list" id="list-components-in-this-application">
-    <% @component_docs.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
+    <% details = capture do %>
+      <%= render "govuk_publishing_components/components/details", {
+        title: "Suggested imports for this application",
+        margin_bottom: 6,
+      } do %>
+        <%= render "govuk_publishing_components/components/textarea", {
+          label: {
+            text: "Add this to your application's main scss file, before your other local imports.",
+          },
+          name: "main-sass",
+          value: @components_in_use_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,
+          margin_bottom: 0,
+        } %>
+      <% end %>
     <% end %>
-  </ul>
-
-  <h2 class="component-doc-h2">Gem components used by this app (<%= @used_components.length %>)</h2>
 
-  <%= render "govuk_publishing_components/components/details", {
-    title: "Suggested imports for this application",
-  } do %>
-    <%= render "govuk_publishing_components/components/textarea", {
-      label: {
-        text: "Add this to your application's main scss file, before your other local imports.",
-      },
-      name: "main-sass",
-      value: @components_in_use_sass,
+    <%= render partial: "component_list", locals: {
+      heading: "Gem components used by this app",
+      size: @used_components.length,
+      components: @used_components,
+      details: details,
     } %>
-    <%= 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,
+
+    <%= render partial: "component_list", locals: {
+      heading: "Gem components not used by this app",
+      size: @unused_components.length,
+      components: @unused_components,
     } %>
+  <% else %>
+    <div id="list-all-components-in-the-gem">
+      <%= render partial: "component_list", locals: {
+        size: @gem_component_docs.length,
+        components: @gem_component_docs,
+      } %>
+    </div>
   <% end %>
-<pre>
-
-</pre>
-
-  <ul class="component-list">
-    <% @used_components.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-
-  <h2 class="component-doc-h2">Gem components not used by this app (<%= @unused_components.length %>)</h2>
-  <ul class="component-list">
-    <% @unused_components.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-
-<% else %>
-  <ul class="component-list" id="list-all-components-in-the-gem">
-    <% @gem_component_docs.each do |component_doc| %>
-      <li>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-        <p>
-          <%= component_doc.description %>
-        </p>
-      </li>
-    <% end %>
-  </ul>
-<% end %>
 
-<div class="component-markdown">
-  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/generate-a-new-component.md">creating a new one</a>.</p>
+  <div class="component-markdown">
+    <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/generate-a-new-component.md">creating a new one</a>.</p>
+  </div>
 </div>

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

@@ -64,18 +64,18 @@
     } %>
   </div>
 
-  <h2 class="component-doc-h2" id="how-it-looks">
+  <h2 class="govuk-heading-m" id="how-it-looks">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
-    <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
-    <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
+    <small class="govuk-!-font-size-16">(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
+  <h2 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
+    <h2 class="govuk-heading-m" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -90,7 +90,7 @@
   <% if @component_doc.accessibility_criteria.present? %>
     <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
-        <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
+        <h2 class="govuk-heading-m">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
           <%= raw(@component_doc.html_accessibility_criteria) %>
         </div>
@@ -100,7 +100,7 @@
 
   <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>
     <div class="examples">
-      <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
+      <h2 class="govuk-heading-m" id="other-examples">Other examples</h2>
 
       <% if @component_doc.uses_component_wrapper_helper? %>
         <div class="component-example" id="standard-options">

data/app/views/govuk_publishing_components/components/_image_card.html.erb

@@ -9,14 +9,11 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-image-card")
-  component_helper.add_class("govuk-grid-row") if card_helper.two_thirds
   component_helper.add_class("gem-c-image-card--large") if card_helper.large
   component_helper.add_class("gem-c-image-card--two-thirds") if card_helper.two_thirds
-  component_helper.add_class("gem-c-image-card--no-image") unless (card_helper.image_src || card_helper.youtube_video_id)
   component_helper.add_class(brand_helper.brand_class) if brand_helper.brand_class
 
   text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
-  text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
 
   font_size ||= card_helper.large ? "m" : "s"
   heading_class = %w[gem-c-image-card__title]
@@ -42,19 +39,20 @@
 <% if card_helper.href || card_helper.extra_details.any? %>
   <%= tag.div(**component_helper.all_attributes) do %>
     <%= content_tag(:div, class: text_wrapper_classes) do %>
-      <div class="gem-c-image-card__header-and-context-wrapper">
-        <% if card_helper.heading_text %>
-          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
-            <% if card_helper.href %>
-              <%= link_to card_helper.heading_text, card_helper.href, class: heading_link_classes %>
-            <% else %>
-              <%= card_helper.heading_text %>
-            <% end %>
+      <%= card_helper.context %>
+
+      <% if card_helper.heading_text %>
+        <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
+          <% if card_helper.href %>
+            <%= link_to card_helper.heading_text, card_helper.href, class: heading_link_classes %>
+          <% else %>
+            <%= card_helper.heading_text %>
           <% end %>
         <% end %>
-        <%= card_helper.context %>
-      </div>
+      <% end %>
+
       <%= card_helper.description %>
+
       <% if card_helper.extra_details.any? %>
         <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
           <% card_helper.extra_details.each do |link| %>

data/app/views/govuk_publishing_components/components/_inverse_header.html.erb

@@ -11,6 +11,7 @@
   component_helper.add_class("gem-c-inverse-header--html-publication-header") if local_assigns[:html_publication_header]
   component_helper.add_class("govuk-!-padding-top-#{padding_top}") if [*0..9].include?(padding_top)
   component_helper.add_class("govuk-!-padding-bottom-#{padding_bottom}") if [*0..9].include?(padding_bottom)
+  component_helper.add_class("gem-c-inverse-header--hmrc-header") if local_assigns[:hmrc_header]
 %>
 <% block = yield %>
 <% unless block.empty? %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb

@@ -4,31 +4,33 @@
   lang = shared_helper.t_locale("components.related_navigation.ukraine.title")
   data_module = "ga4-link-tracker" unless disable_ga4
 %>
-<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--ukraine", data: { module: data_module } do %>
-  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
-  <%= tag.ul class: "gem-c-contextual-sidebar__list" do %>
-    <% index_total = t("components.related_navigation.ukraine.links").length %>
-    <% t("components.related_navigation.ukraine.links").each_with_index do |link, index| %>
-      <%= tag.li class: "gem-c-contextual-sidebar__text govuk-body" do %>
-        <%
-          ga4_attributes = {
-            event_name: "navigation",
-            type: "related content",
-            index_section: "#{ga4_tracking_counts.index_section_count}",
-            index_link: "#{index + 1}",
-            index_section_count: "#{ga4_tracking_counts.index_section_count}",
-            index_total: "#{index_total}",
-            section: title,
-          } unless disable_ga4
-        %>
-        <%= link_to link[:label],
-          link[:href],
-          class: "govuk-link",
-          data: {
-            ga4_link: ga4_attributes,
-          },
-          lang: lang %>
+<div class="gem-c-contextual-sidebar__cta-ukraine">
+  <%= tag.div class: "gem-c-contextual-sidebar__cta", data: { module: data_module } do %>
+    <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+    <%= tag.ul class: "gem-c-contextual-sidebar__list" do %>
+      <% index_total = t("components.related_navigation.ukraine.links").length %>
+      <% t("components.related_navigation.ukraine.links").each_with_index do |link, index| %>
+        <%= tag.li class: "gem-c-contextual-sidebar__text govuk-body" do %>
+          <%
+            ga4_attributes = {
+              event_name: "navigation",
+              type: "related content",
+              index_section: "#{ga4_tracking_counts.index_section_count}",
+              index_link: "#{index + 1}",
+              index_section_count: "#{ga4_tracking_counts.index_section_count}",
+              index_total: "#{index_total}",
+              section: title,
+            } unless disable_ga4
+          %>
+          <%= link_to link[:label],
+            link[:href],
+            class: "govuk-link",
+            data: {
+              ga4_link: ga4_attributes,
+            },
+            lang: lang %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+</div>

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -874,6 +874,12 @@ examples:
           <li>two</li>
           <li>three</li>
         </ul>
+        <h2>unordered list without bullets:</h2>
+        <ul class="list-no-bullets">
+          <li>one</li>
+          <li>two</li>
+          <li>three</li>
+        </ul>
   legislative_lists:
     description: Example taken from [GOV.UK Immigration rules](https://www.gov.uk/guidance/immigration-rules/immigration-rules-introduction)
     data:

data/app/views/govuk_publishing_components/components/docs/inverse_header.yml

@@ -72,6 +72,20 @@ examples:
             margin_bottom: 0
           } %>
           <!-- end of example content -->
+  hmrc_header:
+    description: For use on HMRC manual pages such as [Capital Gains Manual](https://www.gov.uk/hmrc-internal-manuals/capital-gains-manual).
+    data:
+      hmrc_header: true
+      block: |
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/heading", {
+            context: "HMRC internal manual",
+            text: "Capital Gains Manual",
+            inverse: true,
+            margin_bottom: 0,
+            font_size: "xl"
+          } %>
+          <!-- end of example content -->
   with_paragraph_and_link:
     data:
       block: |

data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml

@@ -28,6 +28,12 @@ examples:
         name: 'Single Identity'
         url: 'http://www.gov.uk'
         crest: 'single-identity'
+  no_identity:
+    data:
+      organisation:
+        name: 'No Identity'
+        url: 'http://www.gov.uk'
+        crest: 'no-identity'
   attorney_generals_office:
     data:
       organisation:
@@ -139,7 +145,7 @@ examples:
         name: 'Land Registry'
         url: '/government/organisations/land-registry'
         brand: 'department-for-business-innovation-skills'
-        crest: null
+        crest: "custom"
         image:
           url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/69/HMLR_logo.png'
           alt_text: 'Land Registry'

data/config/routes.rb

@@ -1,5 +1,6 @@
 GovukPublishingComponents::Engine.routes.draw do
   get "/audit" => "audit#show", as: :audit
+  get "/applications" => "applications_page#show", as: :apps
   root to: "component_guide#index", as: :component_guide
   get ":component/preview" => "component_guide#preview", as: :component_preview_all
   get ":component/:example/preview" => "component_guide#preview", as: :component_preview

data/lib/govuk_publishing_components/minitest/component_guide_test.rb

@@ -11,7 +11,7 @@ module GovukPublishingComponents
           assert_equal "function", evaluate_script("typeof window.GOVUK.AccessibilityTest"), "AccessibilityTest JavaScript isn’t available"
           assert_equal "string", evaluate_script("typeof window.axe.version"), "aXe accessibility test library isn’t available"
 
-          all(:css, ".component-list a").map { |el| "#{el[:href]}/preview" }.each do |component|
+          all(:css, ".govuk-list.govuk-list--bullet a").map { |el| "#{el[:href]}/preview" }.each do |component|
             visit component
             assert page.has_css?(".js-test-a11y-finished"), "Accessibility test did not run on #{component}"
             assert page.has_css?(".js-test-a11y-success"), "Accessibility test found violations on #{component}"

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -58,7 +58,6 @@ module GovukPublishingComponents
 
       def image
         classes = %w[gem-c-image-card__image-wrapper]
-        classes << "gem-c-image-card__image-wrapper--one-third" if @two_thirds
         height = 200
         width = 300
         height = 90 if @two_thirds

data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb

@@ -30,9 +30,15 @@ module GovukPublishingComponents
         logo_class = "gem-c-organisation-logo__container"
         logo_class = "#{logo_class} gem-c-organisation-logo__link" if url
         logo_class = "#{logo_class} gem-c-organisation-logo__link-hide-underline" if hide_underline
-        logo_class = "#{logo_class} gem-c-organisation-logo__crest gem-c-organisation-logo__crest--#{crest}" if crest
+        logo_class = "#{logo_class} gem-c-organisation-logo__crest gem-c-organisation-logo__crest--#{crest}" if crest_has_visual_identity?
         logo_class
       end
+
+    private
+
+      def crest_has_visual_identity?
+        crest.present? && !%w[no-identity custom].include?(crest)
+      end
     end
   end
 end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "62.0.0".freeze
+  VERSION = "62.2.0".freeze
 end