Merge pull request #1542 from alphagov/only-default-two-thirds-footer…

…-for-two-sections

Only default two thirds/one-third layout when footer has two sections

CHANGELOG.md

@@ -34,6 +34,7 @@ govukInput({
 - [Pull request #1523: Improve accessibility of details component by polyfilling only where the native element is not available](https://github.com/alphagov/govuk-frontend/pull/1523).
 - [Pull request #1512: Update components to only output items when they are defined](https://github.com/alphagov/govuk-frontend/pull/1512).
 - [Pull request #1538: Simplify button types to avoid unnecessary type attribute](https://github.com/alphagov/govuk-frontend/pull/1538).
+- [Pull request #1542: Only default two thirds/one-third layout when footer has two sections](https://github.com/alphagov/govuk-frontend/pull/1542).
 
 ## 3.0.0 (Breaking release)
 

src/govuk/components/footer/_footer.scss

@@ -196,9 +196,11 @@
     }
   }
 
-  // Sections two-third:one-third on desktop
+  // If there are only two sections, set the layout to be two-third:one-third on desktop
   @include mq ($from: desktop) {
-    .govuk-footer__section:first-child {
+    // We match the first section with `:first-child`.
+    // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
+    .govuk-footer__section:first-child:nth-last-child(2) {
       flex-grow: 2; // Support: Flexbox
     }
   }

src/govuk/components/footer/footer.yaml

@@ -251,3 +251,53 @@ examples:
         - href: '/cymraeg'
           text: Rhestr o Wasanaethau Cymraeg
       html: Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>
+
+- name: Three equal columns
+  description: A full example to demonstrate three equal width columns
+  data:
+    navigation:
+      - title: Single column list 1
+        columns: 1
+        items:
+          - href: '#1'
+            text: Navigation item 1
+          - href: '#2'
+            text: Navigation item 2
+          - href: '#3'
+            text: Navigation item 3
+          - href: '#4'
+            text: Navigation item 4
+          - href: '#5'
+            text: Navigation item 5
+          - href: '#6'
+            text: Navigation item 6
+      - title: Single column list 2
+        columns: 1
+        items:
+          - href: '#1'
+            text: Navigation item 1
+          - href: '#2'
+            text: Navigation item 2
+          - href: '#3'
+            text: Navigation item 3
+          - href: '#4'
+            text: Navigation item 4
+          - href: '#5'
+            text: Navigation item 5
+          - href: '#6'
+            text: Navigation item 6
+      - title: Single column list 3
+        columns: 1
+        items:
+          - href: '#1'
+            text: Navigation item 1
+          - href: '#2'
+            text: Navigation item 2
+          - href: '#3'
+            text: Navigation item 3
+          - href: '#4'
+            text: Navigation item 4
+          - href: '#5'
+            text: Navigation item 5
+          - href: '#6'
+            text: Navigation item 6