govuk_publishing_components 27.11.0 → 27.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4cdfb123c38b321591389c84e2e9b397c5667f9782bc657efaaa59468d535f6a
-  data.tar.gz: 8d71ce616148c775034f93537252b16b40b134918ed34ff46bfb971963f93ca4
+  metadata.gz: fd11f04405f2a42af38607551e706bf8587d8dab56687f9dd7f9f568a76ee9da
+  data.tar.gz: c365b23d1ce8a71ff06cc0fb2510a9c1f7aadb984a21ccb481256a441aaa0ef6
 SHA512:
-  metadata.gz: 16d792dd3e4cdf1350cf32bd1b5090e7dfe097ae3bbad51637b820745fb84d0ddb9ef9b0aa697c100f721ff9845c519cd335b1c459a10ba392c883eaaaca7cb0
-  data.tar.gz: 02a880a029f8991916315ed45ca24e87bdc59db3c426966b005f8ab043f21fbcb9a7c00fcc9686a4e12a6fe6502168f4d022fdc0c32f5cbebcc1a2e5c54d7e71
+  metadata.gz: d4a1581abd6a891e2473feffcdf0a15c18d11536438d89387a6bfff055fa1c874f0cc38ec6f9299fba4f4dcd30ed5d4239d6f5133fac4c0e47dfffb62eca8eea
+  data.tar.gz: 92c5a4c880e24c071d1ecec8a72fbe6ca1b852e23406e6cf61466930de1a21e49b086a98d12d60451a62b2fcad664ac2b0ea8b8918d8993ab4fb84b153df6ad1

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

@@ -1,3 +1,5 @@
+@import "mixins/prefixed-transform";
+
 $gem-c-accordion-border-width: 3px;
 $gem-c-accordion-bottom-border-width: 1px;
 
@@ -69,6 +71,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
 
     &:after {
+      @include prefixed-transform($rotate: -45deg);
       content: "";
       display: block;
       box-sizing: border-box;
@@ -78,7 +81,6 @@ $gem-c-accordion-bottom-border-width: 1px;
       height: govuk-em(6, 14);
       border-top: govuk-em(2, 14) solid;
       border-right: govuk-em(2, 14) solid;
-      transform: rotate(-45deg);
       left: govuk-em(6, 14);
       bottom: govuk-em(5, 14);
 
@@ -111,7 +113,7 @@ $gem-c-accordion-bottom-border-width: 1px;
 
   // Rotate icon to create "Down" version
   .gem-c-accordion-nav__chevron--down {
-    transform: rotate(180deg);
+    @include prefixed-transform($rotate: 180deg);
   }
 
   .gem-c-accordion__section-heading {
@@ -296,12 +298,12 @@ $gem-c-accordion-bottom-border-width: 1px;
 
     // Reduce Chevron size
     .gem-c-accordion-nav__chevron {
+      @include prefixed-transform($scale: .875);
       width: govuk-em(20, 14);
       height: govuk-em(20, 14);
       margin-left: govuk-em(5, 14);
       border: govuk-em(1, 14) solid;
       border-radius: govuk-em(100, 14);
-      transform: scale(.875);
 
       &:after {
         width: govuk-em(6, 14);
@@ -314,7 +316,7 @@ $gem-c-accordion-bottom-border-width: 1px;
     }
 
     .gem-c-accordion-nav__chevron--down {
-      transform: scale(.875) rotate(180deg);
+      @include prefixed-transform($rotate: 180deg, $scale: .875);
     }
 
     .gem-c-accordion__section-summary {

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

@@ -1,3 +1,5 @@
+@import "mixins/prefixed-transform";
+
 /// Set grid row or column value using the fraction unit.
 ///
 /// @param {Integer} $number - number of fractions that the grid row or column
@@ -98,19 +100,21 @@
 
 $icon-size: 20px;
 $chevron-indent-spacing: 7px;
+$black-bar-height: 50px;
+$search-width-or-height: $black-bar-height;
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
     border-bottom-color: $colour;
     border-right-color: $colour;
   } @else {
-    border-bottom: 3px solid $colour;
-    border-right: 3px solid $colour;
+    @include prefixed-transform($rotate: 45deg, $translateY: -35%);
+    border-bottom: 2px solid $colour;
+    border-right: 2px solid $colour;
     content: " ";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 2px;
-    transform: translateY(-35%) rotate(45deg);
     vertical-align: middle;
     width: 8px;
   }
@@ -131,9 +135,9 @@ $chevron-indent-spacing: 7px;
   bottom: 0;
   content: " ";
   height: govuk-spacing(1);
-  left: govuk-spacing(4);
+  left: govuk-spacing(3);
   position: absolute;
-  right: govuk-spacing(4);
+  right: govuk-spacing(3);
   top: auto;
 }
 
@@ -165,7 +169,7 @@ $chevron-indent-spacing: 7px;
   position: relative;
 
   .lte-ie8 & {
-    height: govuk-spacing(9);
+    height: $black-bar-height;
   }
 
   [hidden] {
@@ -183,8 +187,8 @@ $chevron-indent-spacing: 7px;
 
 .gem-c-layout-super-navigation-header__header-logo {
   height: govuk-spacing(6);
-  padding-bottom: govuk-spacing(3);
-  padding-top: govuk-spacing(3);
+  padding-bottom: govuk-spacing(2);
+  padding-top: govuk-spacing(2);
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -228,24 +232,18 @@ $chevron-indent-spacing: 7px;
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
   }
-
-  .js-module-initialised & {
-    padding: 0 0 govuk-spacing(9) 0;
-
-    @include govuk-media-query($from: "desktop") {
-      padding: 0;
-    }
-  }
 }
 
 .gem-c-layout-super-navigation-header__navigation-item,
 .gem-c-layout-super-navigation-header__search-item {
   display: block;
-  margin: 0 govuk-spacing(3);
+  margin: 0;
+  padding: govuk-spacing(2) govuk-spacing(3);
   position: relative;
 
   @include govuk-media-query($from: "tablet") {
     margin: 0 govuk-spacing(6);
+    padding: govuk-spacing(2) 0;
   }
 
   @include govuk-media-query($from: "desktop") {
@@ -261,8 +259,15 @@ $chevron-indent-spacing: 7px;
 .gem-c-layout-super-navigation-header__navigation-item {
   border-bottom: 1px solid $govuk-border-colour;
 
+  .js-module-initialised & {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
   @include govuk-media-query($from: "desktop") {
     border-bottom: 0;
+    padding: 0;
   }
 }
 
@@ -279,7 +284,7 @@ $chevron-indent-spacing: 7px;
     font-size: govuk-px-to-rem(19px);
   }
   font-weight: bold;
-  margin: govuk-spacing(3) 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -326,7 +331,7 @@ $chevron-indent-spacing: 7px;
       // stylelint-enable max-nesting-depth
 
       height: govuk-spacing(4);
-      padding: govuk-spacing(4);
+      padding: govuk-spacing(3);
       position: relative;
 
       &:before {
@@ -343,28 +348,40 @@ $chevron-indent-spacing: 7px;
 
       // stylelint-disable max-nesting-depth
       @include focus-and-focus-visible {
-        box-shadow: none;
-        color: $govuk-focus-text-colour;
+        &,
+        &:hover {
+          box-shadow: none;
+          color: $govuk-focus-text-colour;
 
-        &:after {
-          background: $govuk-focus-text-colour;
+          &:after {
+            background: $govuk-focus-text-colour;
+          }
         }
       }
 
       @include focus-not-focus-visible {
         &,
         &:hover {
-          color: govuk-colour("white");
           text-decoration: none;
         }
-      }
-      // stylelint-enable max-nesting-depth
 
-      &:focus:not(:focus-visible) {
+        & {
+          color: govuk-colour("white");
+        }
+
+        &:hover {
+          color: govuk-colour("mid-grey");
+
+          &:after {
+            background: govuk-colour("mid-grey");
+          }
+        }
+
         &:after {
           background: none;
         }
       }
+      // stylelint-enable max-nesting-depth
 
       &:after {
         @include pseudo-underline;
@@ -423,8 +440,8 @@ $chevron-indent-spacing: 7px;
       @if $govuk-typography-use-rem {
         font-size: govuk-px-to-rem(16px);
       }
-      height: govuk-spacing(9);
-      padding: govuk-spacing(4);
+      height: $black-bar-height;
+      padding: govuk-spacing(3);
       position: relative;
       text-decoration: none;
 
@@ -463,7 +480,7 @@ $chevron-indent-spacing: 7px;
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
       &:before {
-        transform: translateY(0) rotate(225deg);
+        @include prefixed-transform($rotate: 225deg, $translateY: 0);
       }
     }
 
@@ -509,7 +526,7 @@ $chevron-indent-spacing: 7px;
       background: $govuk-brand-colour;
 
       &:hover {
-        background: none;
+        background: govuk-colour("black");
 
         &:before {
           left: 0;
@@ -524,6 +541,30 @@ $chevron-indent-spacing: 7px;
           content: none;
         }
       }
+
+      &:after {
+        left: 0;
+        right: 0;
+      }
+
+      @include focus-not-focus-visible {
+        background: $govuk-link-colour;
+
+        &:hover {
+          background: govuk-colour("black");
+        }
+      }
+
+      @include focus-and-focus-visible {
+        &:hover {
+          background: $govuk-focus-colour;
+        }
+
+        &:after,
+        &:hover:after {
+          background: $govuk-focus-colour;
+        }
+      }
     }
   }
 }
@@ -574,10 +615,10 @@ $chevron-indent-spacing: 7px;
   box-sizing: border-box;
   color: govuk-colour("white");
   cursor: pointer;
-  height: govuk-spacing(9);
+  height: $black-bar-height;
   padding: 0;
   position: absolute;
-  right: ((govuk-spacing(9) - govuk-spacing(3)) - 1px); // width of the search button (60px) - 15px - 1px to create an overlap between buttons and stop the border appearing to hang off the buttons when they're focused/open
+  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;
   z-index: 10;
 
@@ -629,7 +670,7 @@ $chevron-indent-spacing: 7px;
         @include govuk-media-query($from: 360px) {
           &:before {
             @include chevron(govuk-colour("black"), true);
-            transform: translateY(0) rotate(225deg);
+            @include prefixed-transform($rotate: 225deg, $translateY: 0);
           }
         }
       }
@@ -645,7 +686,7 @@ $chevron-indent-spacing: 7px;
         @include govuk-media-query($from: 360px) {
           &:before {
             @include chevron(govuk-colour("black"));
-            transform: translateY(0) rotate(225deg);
+            @include prefixed-transform($rotate: 225deg, $translateY: 0);
           }
         }
       }
@@ -658,7 +699,7 @@ $chevron-indent-spacing: 7px;
   display: inline-block;
   border-left: 1px solid govuk-colour("white");
   border-right: 1px solid govuk-colour("white");
-  margin: govuk-spacing(2) 0;
+  margin: 0;
   padding: govuk-spacing(2) govuk-spacing(4);
 
   @include govuk-media-query($from: 360px) {
@@ -675,12 +716,12 @@ $chevron-indent-spacing: 7px;
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
-  height: govuk-spacing(9);
-  padding: govuk-spacing(4);
+  height: $search-width-or-height;
+  padding: govuk-spacing(3);
   position: absolute;
   right: (0 - govuk-spacing(3));
   top: 0;
-  width: govuk-spacing(9);
+  width: $search-width-or-height;
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
@@ -749,7 +790,7 @@ $chevron-indent-spacing: 7px;
   font-weight: normal;
   left: 0;
   line-height: 22px;
-  padding: govuk-spacing(4) 0;
+  padding: govuk-spacing(3) 0;
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -769,7 +810,6 @@ $chevron-indent-spacing: 7px;
     left: 0;
     position: absolute;
     right: 0;
-    top: govuk-spacing(9);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss

@@ -0,0 +1,5 @@
+@mixin prefixed-transform($translateY: 0, $rotate: 0, $scale: 1) {
+  -webkit-transform: translateY($translateY) rotate($rotate) scale($scale);
+  -ms-transform: translateY($translateY) rotate($rotate) scale($scale);
+  transform: translateY($translateY) rotate($rotate) scale($scale);
+}

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

@@ -1,13 +1,16 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  id ||= "input-#{SecureRandom.hex(4)}"
-  value ||= nil
-  type ||= "text"
-  describedby ||= nil
+  autocomplete ||= nil
   controls ||= nil
   data ||= nil
-  autocomplete ||= nil
+  describedby ||= nil
+  enterkeyhint ||= nil
+  id ||= "input-#{SecureRandom.hex(4)}"
+  type ||= "text"
+  value ||= nil
+  inputmode ||= nil
+  pattern ||= nil
 
   label ||= nil
   hint ||= nil
@@ -32,6 +35,7 @@
   css_classes << "govuk-input--error" if has_error
   css_classes << "govuk-input--width-#{width}" if [2, 3, 4, 5, 10, 20, 30].include?(width)
   css_classes << "gem-c-input--with-search-icon" if search_icon
+
   form_group_css_classes = %w(govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error && !grouped
 
@@ -44,14 +48,21 @@
     aria_described_by = aria_described_by.join(" ")
   end
 
+  checked_enterkeyhint = enterkeyhint if [
+    "done",
+    "enter",
+    "go",
+    "next",
+    "previous",
+    "search",
+    "send",
+  ].include?(enterkeyhint)
+
   if type == "number"
     type = "text"
     inputmode = "numeric"
     pattern = "[0-9]*"
   end
-
-  inputmode ||= nil
-  pattern ||= nil
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>
@@ -87,24 +98,26 @@
     } %>
   <% end %>
 
-  <% input_tag = tag.input name: name,
-    value: value,
-    class: css_classes,
-    id: id,
-    type: type,
-    data: data,
+  <% input_tag = tag.input({
+    aria: {
+      describedby: aria_described_by,
+      controls: controls
+    },
     autocomplete: autocomplete,
-    tabindex: tabindex,
     autofocus: autofocus,
-    readonly: readonly,
-    maxlength: maxlength,
+    class: css_classes,
+    data: data,
+    enterkeyhint: checked_enterkeyhint,
+    id: id,
     inputmode: inputmode,
+    maxlength: maxlength,
+    name: name,
     pattern: pattern,
-    aria: {
-      describedby: aria_described_by,
-      controls: controls
-    }
-  %>
+    readonly: readonly,
+    tabindex: tabindex,
+    type: type,
+    value: value,
+  }) %>
 
   <% if prefix && suffix %>
     <%= tag.div class: "govuk-input__wrapper" do %>

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

@@ -43,6 +43,7 @@
       aria: {
         controls: aria_controls,
       },
+      enterkeyhint: "search",
       class: "gem-c-search__item gem-c-search__input js-class-toggle",
       id: id,
       name: name,
@@ -51,7 +52,7 @@
       value: value,
     ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes do %>
+      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>
         <%= button_text %>
         <%= render "govuk_publishing_components/components/search/search_icon" %>
       <% end %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -1,10 +1,9 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
-<% cta_helper = GovukPublishingComponents::Presenters::BrexitCtaHelper.new(content_item) %>
 <%
-  title = t(cta_helper.title_key)
-  link_text = t(cta_helper.link_text_key)
-  link_path = t(cta_helper.link_path_key)
-  lang = shared_helper.t_locale(cta_helper.title_key)
+  title = t("components.related_navigation.transition.title")
+  link_text = t("components.related_navigation.transition.link_text")
+  link_path = t("components.related_navigation.transition.link_path")
+  lang = shared_helper.t_locale("components.related_navigation.transition.title")
 %>
 
 <% data_attributes = {

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

@@ -170,3 +170,13 @@ examples:
       name: "lead-times"
       width: 10
       suffix: "days"
+  with_enterhintkey_attribute:
+    description: |
+      To help users with virtual keyboards this changes the "enter" key to be a word that's more descriptive of the action.
+
+      Must be one of `enter`, `done`, `go`, `next`, `previous`, `search`, or `send`. See the [list of values and descriptions on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint#values).
+    data:
+      label:
+        text: "Given name"
+      name: given-name
+      enterkeyhint: "next"

data/config/locales/ar.yml

@@ -166,9 +166,6 @@ ar:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/az.yml

@@ -166,9 +166,6 @@ az:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/be.yml

@@ -166,9 +166,6 @@ be:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/bg.yml

@@ -166,9 +166,6 @@ bg:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/bn.yml

@@ -166,9 +166,6 @@ bn:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/cs.yml

@@ -166,9 +166,6 @@ cs:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/cy.yml

@@ -166,9 +166,6 @@ cy:
       topical_events:
       topics: Archwilio’r pwnc
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title: Gwiriwr Brexit
         link_path: "/brexit.cy"
         link_text: Cael rhestr bersonol o gamau gweithredu
         title: Brexit

data/config/locales/da.yml

@@ -166,9 +166,6 @@ da:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/de.yml

@@ -166,9 +166,6 @@ de:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/dr.yml

@@ -166,9 +166,6 @@ dr:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/el.yml

@@ -166,9 +166,6 @@ el:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/en.yml

@@ -240,9 +240,6 @@ en:
       topical_events: Topical event
       topics: Explore the topic
       transition:
-        hub_page_link_path: "/transition-check/questions"
-        hub_page_link_text: Get a personalised list of actions
-        hub_page_title: Brexit checker
         link_path: "/brexit"
         link_text: Check what you need to do
         title: Brexit

data/config/locales/es-419.yml

@@ -166,9 +166,6 @@ es-419:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/es.yml

@@ -166,9 +166,6 @@ es:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/et.yml

@@ -166,9 +166,6 @@ et:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title: