Move custom meta content above licence in footer (#511)

It appears that the custom meta content should be above the licence rather than underneath it. The [examples in the design system samples show it](https://govuk-frontend-review.herokuapp.com/components/footer) but it's not really covered by [the official documentation](https://design-system.service.gov.uk/components/footer/) (which was what the library was based on in the early days). | Before | After | | ------ | ------- | | ![Screenshot from 2024-02-23 11-53-34](https://github.com/x-govuk/govuk-components/assets/128088/3426db4e-7099-4c63-8dd2-4e7e7343c608) | ![Screenshot from 2024-02-23 11-56-58](https://github.com/x-govuk/govuk-components/assets/128088/222c3230-7267-4805-9638-1f851a4553af) |
x-govuk · Feb 23, 2024 · 32dbe66 · 32dbe66
2 parents 5a0bc57 + b975d8e
commit 32dbe66
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 46 deletions.
diff --git a/app/components/govuk_component/footer_component.html.erb b/app/components/govuk_component/footer_component.html.erb
@@ -25,6 +25,12 @@
             </ul>
           <% end %>
 
+          <% if meta_content.present? %>
+            <div class="<%= brand %>-footer__meta-custom">
+              <%= meta_content %>
+            </div>
+          <% end %>
+
           <% if meta_licence.nil? %>
             <svg aria-hidden="true" focusable="false" class="<%= brand %>-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
               <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
@@ -34,12 +40,6 @@
           <% elsif meta_licence.present? %>
             <%= tag.span(meta_licence, class: "#{brand}-footer__licence-description") %>
           <% end %>
-
-          <% if meta_content.present? %>
-            <div class="<%= brand %>-footer__meta-custom">
-              <%= meta_content %>
-            </div>
-          <% end %>
         </div>
 
         <%= tag.div(copyright, class: "#{brand}-footer__meta-item") %>

diff --git a/app/components/govuk_component/footer_component.rb b/app/components/govuk_component/footer_component.rb
@@ -67,9 +67,9 @@ def build_meta_links(links)
 
     case links
     when Array
-      links.map { |link| raw(link_to(link[:text], link[:href], class: "#{brand}-footer__link", **link.fetch(:attr, {}))) }
+      links.map { |link| govuk_footer_link_to(link[:text], link[:href], **link.fetch(:attr, {})) }
     when Hash
-      links.map { |text, href| raw(link_to(text, href, class: "#{brand}-footer__link")) }
+      links.map { |text, href| govuk_footer_link_to(text, href) }
     else
       fail(ArgumentError, 'meta links must be a hash or array of hashes') unless links.is_a?(Hash)
     end

diff --git a/app/helpers/govuk_link_helper.rb b/app/helpers/govuk_link_helper.rb
@@ -57,6 +57,12 @@ def govuk_breadcrumb_link_to(name, href = nil, **kwargs, &block)
     link_to(name, href, **link_args, &block)
   end
 
+  def govuk_footer_link_to(name, href = nil, **kwargs, &block)
+    link_args = { class: "#{brand}-footer__link" }.deep_merge_html_attributes(kwargs)
+
+    link_to(name, href, **link_args, &block)
+  end
+
   def govuk_link_classes(inverse: false, muted: false, no_underline: false, no_visited_state: false, text_colour: false)
     if [text_colour, inverse, muted].count(true) > 1
       fail("links can be only be one of text_colour, inverse or muted")

diff --git a/guide/content/components/footer.slim b/guide/content/components/footer.slim
@@ -32,11 +32,12 @@ p The footer provides copyright, licensing and other information about your
     attr is a hash of HTML attributes.
 
 == render('/partials/example.*',
-  caption: "Footer with custom content beneath the licence information",
+  caption: "Footer with custom content above the licence information",
   code: footer_with_custom_meta_html) do
 
   markdown:
-    The `meta_html` slot allows any custom HTML to be placed under the licence information.
+    The `meta_html` slot allows any custom HTML to be placed above the licence information. Use
+    the `govuk_footer_link_to` helper to build footer links.
 
 == render('/partials/example.*',
   caption: "Footer with entirely custom content",

diff --git a/guide/lib/examples/footer_helpers.rb b/guide/lib/examples/footer_helpers.rb
@@ -34,10 +34,9 @@ def footer_meta_complex_items
     def footer_with_custom_meta_html
       <<~FOOTER_META_HTML
         = render GovukComponent::FooterComponent.new do |footer|
-          - footer.meta_html do
-            .govuk-footer__meta-custom class="govuk-\!-margin-top-1"
-              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                a porta purus. Fusce faucibus aliquam massa sed eleifend.
+          - footer.with_meta_html do
+            | Built with love by
+            = govuk_footer_link_to("X-GOVUK", "https://x-govuk.github.io/")
       FOOTER_META_HTML
     end
 
@@ -75,43 +74,27 @@ def footer_with_navigation
               h2.govuk-footer__heading.govuk-heading-m Section one
 
               ul.govuk-footer__list.govuk-footer__list--columns-2
-                li: a.govuk-footer__link href="#"
-                  | First
-                li: a.govuk-footer__link href="#"
-                  | Second
-                li: a.govuk-footer__link href="#"
-                  | Third
-                li: a.govuk-footer__link href="#"
-                  | Fourth
-                li: a.govuk-footer__link href="#"
-                  | Fifth
-                li: a.govuk-footer__link href="#"
-                  | Sixth
+                li == govuk_footer_link_to("First", "#")
+                li == govuk_footer_link_to("Second", "#")
+                li == govuk_footer_link_to("Third", "#")
+                li == govuk_footer_link_to("Fourth", "#")
+                li == govuk_footer_link_to("Fifth", "#")
+                li == govuk_footer_link_to("Sixth", "#")
 
             .govuk-footer__section.govuk-grid-column-two-thirds
               h2.govuk-footer__heading.govuk-heading-m Section two
 
               ul.govuk-footer__list.govuk-footer__list--columns-3
-                li: a.govuk-footer__link href="#"
-                  | First
-                li: a.govuk-footer__link href="#"
-                  | Second
-                li: a.govuk-footer__link href="#"
-                  | Third
-                li: a.govuk-footer__link href="#"
-                  | Fourth
-                li: a.govuk-footer__link href="#"
-                  | Fifth
-                li: a.govuk-footer__link href="#"
-                  | Sixth
-                li: a.govuk-footer__link href="#"
-                  | Seventh
-                li: a.govuk-footer__link href="#"
-                  | Eighth
-                li: a.govuk-footer__link href="#"
-                  | Nineth
-                li: a.govuk-footer__link href="#"
-                  | Tenth
+                li == govuk_footer_link_to("First", "#")
+                li == govuk_footer_link_to("Second", "#")
+                li == govuk_footer_link_to("Third", "#")
+                li == govuk_footer_link_to("Fourth", "#")
+                li == govuk_footer_link_to("Fifth", "#")
+                li == govuk_footer_link_to("Sixth", "#")
+                li == govuk_footer_link_to("Seventh", "#")
+                li == govuk_footer_link_to("Eighth", "#")
+                li == govuk_footer_link_to("Ninth", "#")
+                li == govuk_footer_link_to("Tenth", "#")
       FOOTER_WITH_NAVIGATION
     end
   end

diff --git a/spec/helpers/govuk_link_helper_spec.rb b/spec/helpers/govuk_link_helper_spec.rb
@@ -657,4 +657,21 @@ def url_for(path)
       end
     end
   end
+
+  describe "govuk_footer_link_to" do
+    let(:kwargs) { {} }
+    subject { govuk_footer_link_to("hello", "/world", **kwargs) }
+
+    specify "creates a footer link with the correct class" do
+      expect(subject).to have_tag("a", with: { class: "govuk-footer__link", href: "/world" }, text: "hello")
+    end
+
+    context "when extra classes and attributes are provided" do
+      let(:kwargs) { { class: "deep-orange", lang: "nl" } }
+
+      specify "creates a footer link with the additional attributes and classes" do
+        expect(subject).to have_tag("a", with: { class: %w(govuk-footer__link deep-orange), href: "/world", lang: "nl" }, text: "hello")
+      end
+    end
+  end
 end