govuk_publishing_components 30.4.0 → 30.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d544979af086e1b51d9bc444a8df7915e8bfbb5408cd57bd810e895d82bb6248
-  data.tar.gz: df81a0cc285b349a82f5f74c16131ccf5b4729103c93aa7a7ea0f9c897791012
+  metadata.gz: 50a87147aabeeeb4c5d2fc38027b8c6e161becb7ac1aff2fe66ea8b6e7c1c9e1
+  data.tar.gz: 8d2bf92bd32628dc06f865ca12f6235b811dbf13f604c31cb0284f20efa34752
 SHA512:
-  metadata.gz: db5a2631e57d734da3540471a07974d71a73d95ac013bc5d9dcd9185decc34602dd99dd110d6c3092971bf44096d92e9c26967ba33bd2c79b21a465179d7ea7f
-  data.tar.gz: 5fca1e9effe07e496bba47fb30ad6b9ff32e99a81b675812c0ae8c27cf51610e04616aa3d3d1b5cc5939dd1fd26cc1209a20c6a95ac7e4f4c41cc82e0fad88a4
+  metadata.gz: b54767f3c3e9d4c1d4796045d508ca619eabca6e576da063f54534a0917211341f771e23710060374432d1783322efd4301b2d296df9c31e9ca7bedc14f87e69
+  data.tar.gz: 6a298a85b7bc0aa909e393759324220a3ba41b4fc45325e2cf59848b82d0a247e8be3129397e5bf23ee7e54f8312c3247c1374314a69802bf88d38a7120fe7c5

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

@@ -8,6 +8,10 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
+$after-link-padding: govuk-spacing(6);
+$after-button-padding-right: govuk-spacing(6);
+$after-button-padding-left: govuk-spacing(5);
+
 @mixin chevron($colour, $update: false) {
   @if $update == true {
     border-bottom-color: $colour;
@@ -35,15 +39,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   top: 0;
 }
 
-@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4), $width: false) {
   background: none;
-  bottom: 0;
   content: "";
   height: $pseudo-underline-height;
   left: $left;
   position: absolute;
   right: $right;
   top: auto;
+  @if $width {
+    width: $width;
+  }
 }
 
 @mixin focus-and-focus-visible {
@@ -177,7 +183,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
     &:first-of-type {
       margin-right: -1px;
 
-      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner,
+      .gem-c-layout-super-navigation-header__navigation-item-link-inner {
         border-left: 1px solid $button-pipe-colour;
         border-right: 1px solid $button-pipe-colour;
       }
@@ -242,10 +249,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       @if $govuk-typography-use-rem {
         font-size: govuk-px-to-rem(16px);
       }
-      // stylelint-enable max-nesting-depth
 
       height: govuk-spacing(4);
-      padding: govuk-spacing(3);
       position: relative;
 
       &:before {
@@ -260,8 +265,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
         }
       }
 
-      // stylelint-disable max-nesting-depth
+      &:focus:not(:focus-visible) {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $button-pipe-colour;
+        }
+      }
+
       @include focus-and-focus-visible {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $govuk-focus-colour;
+        }
+
         &,
         &:hover {
           box-shadow: none;
@@ -295,11 +309,27 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
           background: none;
         }
       }
-      // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
+        @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-link-padding));
       }
+
+      .js-module-initialised & {
+        // If js is initialised, we are hiding the links and
+        // making the buttons visible instead. This means we have
+        // to remove the padding added to make the links vertically
+        // aligned, as the buttons are styled vertically aligned by
+        // default.
+
+        padding: 0;
+        margin: 0;
+
+        &:after {
+          @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: calc(100% - $after-button-padding-left));
+        }
+      }
+
+      // stylelint-enable max-nesting-depth
     }
   }
 
@@ -308,6 +338,13 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link,
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3) 0;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-item-link {
   .js-module-initialised & {
     margin-left: govuk-spacing(4);
@@ -459,20 +496,31 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link-inner {
+  @include govuk-media-query($from: "desktop") {
+    // links have different left padding to the button as
+    // they do not have the 5px wide caret pseudo element
+    padding: govuk-spacing(1) $after-link-padding;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
-    padding: govuk-spacing(1) govuk-spacing(6) govuk-spacing(1) govuk-spacing(5);
+    padding: govuk-spacing(1) $after-button-padding-right govuk-spacing(1) $after-button-padding-left;
   }
 }
 
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3);
+  }
+
   &:link,
   &:visited {
     @include govuk-media-query($from: "desktop") {
       background: $govuk-brand-colour;
-      border-bottom: 1px solid govuk-colour("dark-blue");
 
       &:hover {
         background: govuk-colour("black");
@@ -494,6 +542,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       &:after {
         left: 0;
         right: 0;
+        width: 100%;
       }
 
       @include focus-not-focus-visible {

data/app/models/govuk_publishing_components/component_example.rb

@@ -1,5 +1,4 @@
 require "rouge"
-require "awesome_print"
 
 module GovukPublishingComponents
   class ComponentExample
@@ -30,8 +29,8 @@ module GovukPublishingComponents
     end
 
     def pretty_data
-      json_key_regex = /"(\w*)"\s*:/ # matches quoted keys ending with a colon, i.e. "key":
-      output = data.awesome_inspect(indent: -2, index: false, plain: true).gsub("=>", ":").gsub(json_key_regex, '\1:')
+      json_key_regex = /"(\w*)":/ # matches quoted keys ending with a colon, i.e. "key":
+      output = JSON.pretty_generate(data).gsub('\\n', "\n    ").gsub(json_key_regex, '\1:')
 
       quoted_string_regex = /"((?:[^"\\]|\\.)*)"/ # matches "some text" - ignores escaped quotes, i.e. \"
       output.gsub(quoted_string_regex) do |group|

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

@@ -96,7 +96,7 @@
           %>
           <%= tag.li class: li_classes do %>
             <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
-              <%= link_to link[:label], link[:href], {
+              <%= link_to link[:href], {
                 class: "gem-c-layout-super-navigation-header__navigation-item-link",
                 data: {
                   track_action: "#{tracking_label}Link",
@@ -105,7 +105,11 @@
                   track_dimension: link[:label],
                   track_dimension_index: "29",
                 }
-              } %>
+              } do %>
+                <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+                  <%= link[:label] %>
+                </span>
+              <% end %>
               <% if has_children %>
                 <%= content_tag(:button, {
                   aria: {

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.4.0".freeze
+  VERSION = "30.4.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 30.4.0
+  version: 30.4.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-09-02 00:00:00.000000000 Z
+date: 2022-09-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -108,20 +108,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '3'
-- !ruby/object:Gem::Dependency
-  name: awesome_print
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: capybara
   requirement: !ruby/object:Gem::Requirement