govuk_publishing_components 27.12.0 → 27.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd11f04405f2a42af38607551e706bf8587d8dab56687f9dd7f9f568a76ee9da
-  data.tar.gz: c365b23d1ce8a71ff06cc0fb2510a9c1f7aadb984a21ccb481256a441aaa0ef6
+  metadata.gz: 21c2a281f7de0f79303971394f9cad3102533d7e619f660809078457687552ce
+  data.tar.gz: b246c494a88448ab43d2d2230c12a918b2107eda3217f4f44754ee5b2ef0f4de
 SHA512:
-  metadata.gz: d4a1581abd6a891e2473feffcdf0a15c18d11536438d89387a6bfff055fa1c874f0cc38ec6f9299fba4f4dcd30ed5d4239d6f5133fac4c0e47dfffb62eca8eea
-  data.tar.gz: 92c5a4c880e24c071d1ecec8a72fbe6ca1b852e23406e6cf61466930de1a21e49b086a98d12d60451a62b2fcad664ac2b0ea8b8918d8993ab4fb84b153df6ad1
+  metadata.gz: a1a5354695ffc567bfa7547af429dfdfa0145e8c009408a4a8200731e2677f883922b228dd4d3623770483ba704eafecfe68c1a895bf2dc6b978ac3da59b5c7c
+  data.tar.gz: 344cee88bde5f7c64393028e7020dc62b62eb8794b568b05ecbf94746bb94381bf44cba4627332d8475fadb49cbdc1f79f51598bd7c7194c17eb157a925a0176

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -102,7 +102,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // either `desktop` or `mobile` so it can be interpolated to access the
   // `data-toggle-{desktop|mobile}-group` attribute.
   var windowSize = function () {
-    return window.innerWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
+    return document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop ? 'desktop' : 'mobile'
   }
 
   function SuperNavigationMegaMenu ($module) {

data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss

@@ -16,7 +16,6 @@
 @import "govspeak/place";
 @import "govspeak/stat-headline";
 @import "govspeak/steps";
-@import "govspeak/summary";
 @import "govspeak/tables";
 @import "govspeak/typography";
 @import "govspeak/warning-callout";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -134,7 +134,7 @@ $search-width-or-height: $black-bar-height;
   background: none;
   bottom: 0;
   content: " ";
-  height: govuk-spacing(1);
+  height: 3px;
   left: govuk-spacing(3);
   position: absolute;
   right: govuk-spacing(3);
@@ -284,7 +284,7 @@ $search-width-or-height: $black-bar-height;
     font-size: govuk-px-to-rem(19px);
   }
   font-weight: bold;
-  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
+  margin: govuk-spacing(3) 0;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -480,7 +480,7 @@ $search-width-or-height: $black-bar-height;
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
       &:before {
-        @include prefixed-transform($rotate: 225deg, $translateY: 0);
+        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
       }
     }
 
@@ -617,6 +617,7 @@ $search-width-or-height: $black-bar-height;
   cursor: pointer;
   height: $black-bar-height;
   padding: 0;
+  margin: 0;
   position: absolute;
   right: (($search-width-or-height - govuk-spacing(3)) - 1px); // width of the search button (50px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
   top: 0;
@@ -656,6 +657,10 @@ $search-width-or-height: $black-bar-height;
     }
   }
 
+  &:after {
+    @include pseudo-underline;
+  }
+
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     // stylelint-disable max-nesting-depth
@@ -663,6 +668,10 @@ $search-width-or-height: $black-bar-height;
       @include govuk-focused-text;
       box-shadow: none;
 
+      &:after {
+        background-color: $govuk-focus-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
         border-color: $govuk-focus-colour;
@@ -670,7 +679,7 @@ $search-width-or-height: $black-bar-height;
         @include govuk-media-query($from: 360px) {
           &:before {
             @include chevron(govuk-colour("black"), true);
-            @include prefixed-transform($rotate: 225deg, $translateY: 0);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -679,14 +688,18 @@ $search-width-or-height: $black-bar-height;
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
+      &:after {
+        background-color: $govuk-link-colour;
+      }
+
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("black");
+        color: $govuk-link-colour;
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
           &:before {
-            @include chevron(govuk-colour("black"));
-            @include prefixed-transform($rotate: 225deg, $translateY: 0);
+            @include chevron($govuk-link-colour);
+            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
         }
       }
@@ -825,96 +838,56 @@ $search-width-or-height: $black-bar-height;
 
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
-  margin: 0 0 0 $chevron-indent-spacing;
-  padding: govuk-spacing(2) 0;
+  box-sizing: border-box;
+  padding: 0 0 govuk-spacing(4) 0;
   position: relative;
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0;
-    padding: govuk-spacing(2) 0;
-  }
 }
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
-  margin: 0 auto;
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(4);
+
+  & > li {
+    margin: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin-left: (0 - govuk-spacing(3));
-    margin-right: (0 - govuk-spacing(3));
-    padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
 
     & > li {
-      box-sizing: border-box;
-      margin: 0 govuk-spacing(3) govuk-spacing(2) govuk-spacing(3);
+      margin: 0 govuk-spacing(3);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns(18, 2, "li");
-    @include columns-children(18, 2, "li");
+    @include columns(17, 2, "li");
+    @include columns-children(17, 2, "li");
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
-  & > li:first-child {
-    margin-bottom: govuk-spacing(7);
-  }
-
   @include govuk-media-query($from: "desktop") {
-    @include columns(7, 2, "li");
+    @include columns(6, 2, "li");
+    @include columns-children(6, 2, "li");
     padding-bottom: 0;
 
-    & > li,
-    & > li:first-child {
-      margin-bottom: govuk-spacing(4);
-    }
-
-    @supports (display: grid) {
-      & > li:first-child {
-        grid-column: span 2;
-      }
-    }
-
-    & > li:first-child {
-      border-bottom: 1px solid $govuk-border-colour;
-      padding-bottom: 0;
-      -ms-grid-column-span: 2;
-      -ms-grid-column: 1;
-      -ms-grid-row: 1;
-    }
-
-    & > li:nth-child(2) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(3) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 3;
-    }
-
-    & > li:nth-child(4) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 4;
-    }
-
-    & > li:nth-child(5) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(6) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 3;
+    & > li {
+      box-sizing: border-box;
+      padding-bottom: govuk-spacing(4);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   &:after {
     @include make-selectable-area-bigger;
   }
@@ -930,9 +903,11 @@ $search-width-or-height: $black-bar-height;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
-  @include govuk-font($size: 19, $weight: bold);
-  margin-bottom: 0;
-  margin-top: govuk-spacing(2);
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: bold;
 }
 
 // Dropdown menu footer links.
@@ -944,28 +919,31 @@ $search-width-or-height: $black-bar-height;
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-list {
   list-style: none;
-  padding: 0 0 govuk-spacing(8) 0;
+  padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    margin: 0 (0 - govuk-spacing(3)) 0 (0 - govuk-spacing(3));
-    padding: govuk-spacing(8) 0 govuk-spacing(9) 0;
     @include columns(2, 2, "li");
     @include columns-children(2, 2, "li");
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-item {
-  padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
+  padding: govuk-spacing(2) 0;
   position: relative;
 
   @include govuk-media-query($from: "desktop") {
-    padding: 0 govuk-spacing(3) 0 govuk-spacing(3);
+    padding: 0 govuk-spacing(3);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
-  @include govuk-font($size: 19, $weight: normal);
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -974,9 +952,21 @@ $search-width-or-height: $black-bar-height;
 
   @include govuk-media-query($from: "desktop") {
     display: inline;
-    font-weight: bold;
     padding: 0;
+
+    &:after {
+      content: none;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
   }
+  font-weight: normal;
+  margin: govuk-spacing(1) 0 0 0;
 }
 
 // Search dropdown.
@@ -1004,12 +994,34 @@ $search-width-or-height: $black-bar-height;
 }
 
 // Popular links.
+.gem-c-layout-super-navigation-header__popular-item {
+  position: relative;
+  padding: govuk-spacing(1) 0;
+}
+
 .gem-c-layout-super-navigation-header__popular-link {
-  padding: govuk-spacing(2) 0;
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  padding: 0;
+
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin: govuk-spacing(1) 0;
-    padding: 0;
+    &:after {
+      content: none;
+    }
+  }
+}
+
+// To be used with .govuk-width-container - we only need the margins from
+// desktop onwards.
+.gem-c-layout-super-navigation-header__width-container {
+  @include govuk-media-query($until: "desktop") {
+    margin: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss

@@ -2,7 +2,7 @@
   margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(6) * 1.5;
+    margin-bottom: govuk-spacing(7);
   }
 }
 
@@ -10,7 +10,7 @@
   margin-top: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-top: govuk-spacing(6) * 1.5;
+    margin-top: govuk-spacing(7);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss

@@ -17,3 +17,12 @@ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;
+
+$govuk-colours-organisations: map-merge(
+  $govuk-colours-organisations,
+  (
+    "department-for-levelling-up-housing-and-communities": (
+      colour: #012169,
+    ),
+  )
+);

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

@@ -133,7 +133,7 @@
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
                 id="super-navigation-menu__section-<%= unique_id %>"
               >
-                <div class="govuk-width-container">
+                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
                   <div class="govuk-grid-row">
                     <div class="govuk-grid-column-one-third-from-desktop">
                       <% if link[:description].present? %>
@@ -163,7 +163,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
+                                <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                               </li>
                             <% end %>
                           </ul>

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

@@ -11,9 +11,11 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w(gem-c-metadata)
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
   classes << "gem-c-metadata--inverse" if inverse
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
   <dl data-module="gem-track-click">

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

@@ -811,12 +811,6 @@ examples:
         <div class="place">
           <p>This is a place</p>
         </div>
-  summary:
-    data:
-      block: |
-        <div class="summary">
-          <p>This is a summary</p>
-        </div>
   buttons:
     data:
       block: |

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

@@ -357,3 +357,10 @@ examples:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
     context:
       dark_background: true
+  with_custom_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)
+    data:
+      first_published: 14 June 2014
+      last_updated: 10 September 2015
+      margin_bottom: 2

data/config/locales/en.yml

@@ -125,8 +125,6 @@ en:
           href: "/browse/benefits"
         - label: Births, death, marriages and care
           href: "/browse/births-deaths-marriages"
-        - label: Brexit
-          href: "/brexit"
         - label: Business and self-employed
           href: "/browse/business"
         - label: Childcare and parenting
@@ -179,7 +177,7 @@ en:
           description: Consultations and strategy
         - label: Transparency
           href: "/search/transparency-and-freedom-of-information-releases"
-          description: Government data, Freedom of Information releases and corporate reports
+          description: Data, Freedom of Information releases and corporate reports
         footer_links:
         - label: How government works
           href: "/government/how-government-works"

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -66,6 +66,7 @@ module GovukPublishingComponents
         options[:name] = name if name.present? && value.present?
         options[:value] = value if name.present? && value.present?
         options[:aria] = { label: aria_label } if aria_label
+        options[:draggable] = false if link?
         options
       end
 

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -111,10 +111,10 @@ module GovukPublishingComponents
       def show_brexit_related_links?
         # If tagged directly to /brexit or /world/brexit
         # Or if tagged to a taxon which has /brexit as a parent
-        # And is not the brexit checker start page
-        brexit_start_page_content_id = "58d093a1-787d-4f36-a568-86da23a7b884"
-        page_content_id = content_item["content_id"]
-        tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
+        # And is not the brexit hub pages
+        return false if brexit_hub_pages.include?(content_item["content_id"])
+
+        tagged_to_brexit?
       end
 
       def brexit_cta_document_exceptions

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.12.0".freeze
+  VERSION = "27.13.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.12.0
+  version: 27.13.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-11 00:00:00.000000000 Z
+date: 2021-11-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -624,7 +624,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss
-- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss

@@ -1,27 +0,0 @@
-.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
-.gem-c-govspeak {
-  .summary {
-    margin: 0 0 2em;
-    padding: 0;
-    color: $govuk-text-colour;
-
-    p {
-      @include govuk-font($size: 19);
-    }
-
-    @include govuk-media-query($until: tablet) {
-      margin: 0 0 2em;
-      padding: 0;
-    }
-
-    p,
-    h2 {
-      border: 0;
-      margin: 0 .75em 0 0;
-    }
-
-    h2 {
-      line-height: 1.35em;
-    }
-  }
-}