From 94a2b51c92ff49cd0ab1ffb3881411810bbbdbb4 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Thu, 9 Sep 2021 11:16:54 +0100
Subject: [PATCH 1/3] Reorder the navigation lists vertically

Lists are easier to scan when each column is alphabetically sorted vertically.
This is possible to do automagically with CSS columns, but Chrome doesn't like
CSS columns when links are using `text-decoration-thickness` [1][2] - so another
solution was needed.

CSS Grid Layout has support going back to IE 10[3] and allows for vertical
columns as long as the number of items in the columns are known - so when the
navigation is updated the CSS controlling the grid needs to be updated.

[1]: https://github.com/alphagov/govuk-frontend/issues/2204
[2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
[3]: https://caniuse.com/css-grid
---
 .../_layout-super-navigation-header.scss      | 143 +++++++++++++++++-
 .../_layout_super_navigation_header.html.erb  |   2 +-
 2 files changed, 140 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
index ff1bbd7438..9c81902f16 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -599,8 +599,11 @@ $search-icon-size: 20px;
   padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 
   @include govuk-media-query($from: "desktop") {
-    display: flex;
-    flex-wrap: wrap;
+    display: -ms-grid;
+    display: grid;
+    grid-auto-flow: column;
+    -ms-grid-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     margin-left: (0 - govuk-spacing(3));
     margin-right: (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -610,7 +613,139 @@ $search-icon-size: 20px;
       margin-bottom: 0;
       padding-left: govuk-spacing(3);
       padding-right: govuk-spacing(3);
-      width: 50%;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
+  @include govuk-media-query($from: "desktop") {
+    -ms-grid-rows: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+
+    & > li {
+      &:nth-child(1) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(2) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(3) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(4) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(5) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 2;
+      }
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+  @include govuk-media-query($from: "desktop") {
+    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    & > li {
+      &:nth-child(1) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(2) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(3) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(4) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(5) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(6) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(7) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(8) {
+        -ms-grid-row: 8;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(9) {
+        -ms-grid-row: 9;
+        -ms-grid-column: 1;
+      }
+
+      &:nth-child(10) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(11) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(12) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(13) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(14) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(15) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(16) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(17) {
+        -ms-grid-row: 8;
+        -ms-grid-column: 2;
+      }
+
+      &:nth-child(18) {
+        -ms-grid-row: 9;
+        -ms-grid-column: 2;
+      }
     }
   }
 }
@@ -628,8 +763,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   @include govuk-font($size: 19, $weight: bold);
+  margin-top: govuk-spacing(2);
   margin-bottom: 0;
-  padding-bottom: govuk-spacing(1);
 }
 
 // Dropdown menu footer links.
diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
index 115af61d59..ac547f89bb 100644
--- a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
+++ b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
@@ -134,7 +134,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                     </div>
                     <% if link[:menu_contents].present? %>
                       <div class="govuk-grid-column-two-thirds-from-desktop">
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
+                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?

From 5c785b79051c6ef68436c8d899089153ae17a7db Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 14 Sep 2021 14:43:03 +0100
Subject: [PATCH 2/3] Add mixin for more robust navigation updates

The mixin outputs the styles needed for the grid layout to work in IE10+ - this
is quite a repetative syntax, so the mixin takes the number of items and the
number of columns and works out the rest.

Added comments to the pertinent parts of the navigation localisation to remind
future people that they need to update the styles as well.
---
 .../_layout-super-navigation-header.scss      | 229 ++++++++----------
 config/locales/en.yml                         |   8 +-
 2 files changed, 104 insertions(+), 133 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
index 9c81902f16..c569b64e41 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -1,3 +1,97 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into vertical columns
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+///
+/// @example scss - A 7 item 2 column layout.
+///  .container {
+///    @include columns(7, 2);
+///  }
+
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns(9, 3, "div");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*") {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: column;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every element.
+
+  // This creates a list of lists to represent the columns and rows; for
+  // example, a 7 item 2 column list would create this:
+  //   [
+  //     [1, 2, 3, 4 ] // column one
+  //     [5, 6, 7] // column two
+  //   ]
+  $grid: ();
+  $counter: 0;
+
+  @for $column from 1 through $columns {
+    $this-row: ();
+
+    @for $row from 1 through $rows {
+      $counter: $counter + 1;
+
+      @if $counter <= $items {
+        $this-row: append($this-row, $counter);
+      }
+    }
+
+    $grid: append($grid, $this-row, "comma");
+  }
+
+  // Now we can loop through the list of lists to create the rules needed for
+  // the older grid syntax; fist looping through the list to get the number
+  // needed for the column, then looping again to get the number for the grid
+  // row:
+  @for $column_index from 1 through length($grid) {
+    $this-row: nth($grid, $column_index);
+
+    @for $item-index from 1 through length($this-row) {
+      $this-item: nth($this-row, $item-index);
+
+      & > #{$selector}:nth-child(#{$this-item}) {
+        -ms-grid-column: $column_index;
+        -ms-grid-row: $item-index;
+      }
+    }
+  }
+}
+
 $search-icon-size: 20px;
 
 @mixin chevron($colour) {
@@ -599,11 +693,6 @@ $search-icon-size: 20px;
   padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 
   @include govuk-media-query($from: "desktop") {
-    display: -ms-grid;
-    display: grid;
-    grid-auto-flow: column;
-    -ms-grid-columns: 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
     margin-left: (0 - govuk-spacing(3));
     margin-right: (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -617,136 +706,16 @@ $search-icon-size: 20px;
   }
 }
 
-.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
+.gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    -ms-grid-rows: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-
-    & > li {
-      &:nth-child(1) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(2) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(3) {
-        -ms-grid-row: 3;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(4) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(5) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 2;
-      }
-    }
+    @include columns(18, 2, "li");
   }
 }
 
-.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
   @include govuk-media-query($from: "desktop") {
-    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-
-    & > li {
-      &:nth-child(1) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(2) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(3) {
-        -ms-grid-row: 3;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(4) {
-        -ms-grid-row: 4;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(5) {
-        -ms-grid-row: 5;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(6) {
-        -ms-grid-row: 6;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(7) {
-        -ms-grid-row: 7;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(8) {
-        -ms-grid-row: 8;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(9) {
-        -ms-grid-row: 9;
-        -ms-grid-column: 1;
-      }
-
-      &:nth-child(10) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(11) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(12) {
-        -ms-grid-row: 3;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(13) {
-        -ms-grid-row: 4;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(14) {
-        -ms-grid-row: 5;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(15) {
-        -ms-grid-row: 6;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(16) {
-        -ms-grid-row: 7;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(17) {
-        -ms-grid-row: 8;
-        -ms-grid-column: 2;
-      }
-
-      &:nth-child(18) {
-        -ms-grid-row: 9;
-        -ms-grid-column: 2;
-      }
-    }
+    @include columns(5, 2, "li");
+    padding-bottom: govuk-spacing(3);
   }
 }
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 0bdeb13a34..e89b85b35c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -47,7 +47,7 @@ en:
       - We also use cookies set by other sites to help us deliver content from their services.
       title: Cookies on GOV.UK
     devolved_nations:
-      applies_to: Applies to  
+      applies_to: Applies to
       england: England
       northern_ireland: Northern Ireland
       scotland: Scotland
@@ -124,7 +124,8 @@ en:
       - label: Topics
         href: "/browse"
         description: Find information and services
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: Benefits
           href: "/browse/benefits"
         - label: Births, death, marriages and care
@@ -166,7 +167,8 @@ en:
       - label: Government activity
         href: "/search/news-and-communications"
         description: Find out what the government is doing
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: News
           href: "/search/news-and-communications"
           description: News stories, speeches, letters and notices

From ca563850a603b9970a79c79be924b4ab6d4b2cdb Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Tue, 14 Sep 2021 18:34:36 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4845a0fb08..92f14f2322 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Add big number component ([PR #2278](https://github.com/alphagov/govuk_publishing_components/pull/2278))
 * Add missing `govuk-template` class to public layout ([PR #2307](https://github.com/alphagov/govuk_publishing_components/pull/2307))
 * Fix sticky hover on search button in navigation header([PR #2304](https://github.com/alphagov/govuk_publishing_components/pull/2304))
+* Reorder the navigation lists vertically ([PR #2303](https://github.com/alphagov/govuk_publishing_components/pull/2303))
 
 ## 27.0.0