Change layout of footer

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 Records breaking changes from major version bumps
 
+## 36.0.0
+
+PR: [489](https://github.com/alphagov/digitalmarketplace-frontend-toolkit/pull/489)
+
+* Changes the layout of the footer
+
+We want our footer to look more like the footer from GOV.UK and GOV.UK Deisgn System, so we can swap the components on
+an app by app basis in the future. We also wanted to simplify the content in the footer, and reduce the number of
+columns.
+
+This release changes the footer to a two column-layout; the "Contact" and "About" columns have been merged.
+Additionally Digital Outcomes and Specialists is now abbreviated as DOS in the footer links.
+
 ## 35.0.0
 
 PR: [480](https://github.com/alphagov/digitalmarketplace-frontend-toolkit/pull/480)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "digitalmarketplace-frontend-toolkit",
   "description": "A toolkit for design patterns used across Digital Marketplace projects",
-  "version": "35.2.1",
+  "version": "36.0.0",
   "repository": "[email protected]:alphagov/digitalmarketplace-frontend-toolkit.git",
   "author": "[email protected]",
   "private": true,

toolkit/scss/_footer.scss

@@ -12,9 +12,8 @@
   .footer-categories {
 
     .footer-about,
-    .footer-buyers,
-    .footer-suppliers {
-      @include grid-column( 1/3 );
+    .footer-guidance {
+      @include grid-column( 1/2 );
       @include media(tablet) {
         padding-bottom: $gutter * 2;
       }
@@ -86,6 +85,11 @@
        chrome is breaking this layout when font-size-adjust is set */
     font-size-adjust: none;
 
+    p {
+      @include core-16;
+      margin: 0 0 20px 0;
+    }
+
     .terms-and-conditions {
       display: block;
       @include core-16;

toolkit/templates/layouts/_base_page.html

@@ -48,13 +48,7 @@
 {% endblock %}
 
 {% block footer_support_links %}
-    <h2 class="visuallyhidden">Support links</h2>
-    <ul>
-        <li><a href="/terms-and-conditions" class="terms-and-conditions">Terms and conditions</a></li>
-        <li><a href="/cookies">Cookies</a></li>
-        <li><a href="/privacy-notice">Privacy notice</a></li>
-        <li>Built by the <a href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a></li>
-    </ul>
+  {% include "toolkit/layouts/_footer_support_links.html" %}
 {% endblock %}
 
 {% block body_end %}

toolkit/templates/layouts/_footer_categories.html

@@ -1,19 +1,12 @@
 <div class="footer-categories">
   <div class="footer-about">
     <h2>
-      Contact
+      About the Digital Marketplace
     </h2>
     <ul>
       <li>
-        <a href="{{ url_for('external.help') }}">Digital Marketplace help</a>
+        <a href="{{ url_for('external.help') }}">Contact</a>
       </li>
-    </ul>
-  </div>
-  <div class="footer-buyers">
-    <h2>
-      About the Digital Marketplace
-    </h2>
-    <ul>
       <li>
         <a href="https://www.gov.uk/guidance/digital-marketplace-buyers-guide">Services you can buy</a>
       </li>
@@ -31,25 +24,25 @@ <h2>
       </li>
     </ul>
   </div>
-  <div class="footer-suppliers">
+  <div class="footer-guidance">
     <h2>
-        Guidance
+        Guidance for using Digital Marketplace
     </h2>
     <ul>
       <li>
         <a href="https://www.gov.uk/guidance/g-cloud-suppliers-guide">Applying to sell on the G-Cloud framework</a>
       </li>
       <li>
-        <a href="https://www.gov.uk/guidance/digital-outcomes-and-specialists-suppliers-guide">Applying to sell on the Digital Outcomes and Specialists framework</a>
+        <a href="https://www.gov.uk/guidance/digital-outcomes-and-specialists-suppliers-guide">Applying to sell on the DOS framework</a>
       </li>
       <li>
-        <a href="https://www.gov.uk/guidance/how-to-sell-your-digital-outcomes-and-specialists-services">Responding to buyer requirements on the Digital Outcomes and Specialists framework</a>
+        <a href="https://www.gov.uk/guidance/how-to-sell-your-digital-outcomes-and-specialists-services">Responding to buyer requirements on the DOS framework</a>
       </li>
       <li>
         <a href="https://www.gov.uk/guidance/g-cloud-buyers-guide">Buying on the G-Cloud framework</a>
       </li>
       <li>
-        <a href="https://www.gov.uk/guidance/digital-outcomes-and-specialists-buyers-guide">Buying on the Digital Outcomes and Specialists framework</a>
+        <a href="https://www.gov.uk/guidance/digital-outcomes-and-specialists-buyers-guide">Buying on the DOS framework</a>
       </li>
       <li>
         <a href="https://www.gov.uk/guidance/the-crown-hosting-data-centres-framework-on-the-digital-marketplace">Buying on the Crown Hosting framework</a>

toolkit/templates/layouts/_footer_support_links.html

@@ -0,0 +1,13 @@
+<h2 class="visuallyhidden">
+  Support links
+</h2>
+
+<ul>
+  <li><a href="/terms-and-conditions" class="terms-and-conditions">Terms and conditions</a></li>
+  <li><a href="/cookies">Cookies</a></li>
+  <li><a href="/privacy-notice">Privacy notice</a></li>
+</ul>
+
+<p>
+  Built by the <a href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a>
+</p>