govuk_publishing_components 16.29.0 → 17.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss

@@ -2,19 +2,19 @@
   @include govuk-text-colour;
   position: relative;
   padding: 10px;
-  background: $grey-4;
-  border-top: solid 1px $grey-2;
-  border-bottom: solid 1px $grey-2;
+  background: govuk-colour("grey-4");
+  border-top: solid 1px govuk-colour("grey-2");
+  border-bottom: solid 1px govuk-colour("grey-2");
 
-  @include media(tablet) {
-    padding: $gutter-half;
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(3);
   }
 }
 
 // scss-lint:disable SelectorFormat
 
 .gem-c-step-nav-header__part-of {
-  @include bold-16;
+  @include govuk-font(16, $weight: bold);
 
   display: block;
   padding-bottom: .2em;
@@ -22,7 +22,7 @@
 
 .gem-c-step-nav-header__title {
   @extend %govuk-link;
-  @include bold-24;
+  @include govuk-font(24, $weight: bold);
 }
 
 // scss-lint:enable SelectorFormat

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -1,40 +1,44 @@
 .gem-c-step-nav-related {
   @include govuk-text-colour;
-  border-top: 2px solid $govuk-blue;
-  margin-bottom: $gutter;
+  border-top: 2px solid govuk-colour("blue");
+  margin-bottom: govuk-spacing(6);
 }
 
 .gem-c-step-nav-related__heading {
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-one-third;
-  @include bold-19;
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
+  @include govuk-font(19, $weight: bold);
 }
 
 .gem-c-step-nav-related__links {
-  @include bold-16;
+  @include govuk-font(16, $weight: bold);
   margin: 0;
   padding: 0;
 }
 
 .gem-c-step-nav-related--singular {
-  margin-bottom: $gutter-one-third + 3;
+  margin-bottom: govuk-spacing(2) + 3;
 
   .gem-c-step-nav-related__heading {
-    @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
-    margin-top: $gutter-two-thirds;
+    @include govuk-font(19, $weight: bold, $line-height: 1.4);
+    margin-top: govuk-spacing(4);
+
+    @include govuk-media-query($until: tablet) {
+      font-size: 19px;
+    }
   }
 
   .gem-c-step-nav-related__pretitle {
-    margin-bottom: $gutter-one-quarter;
+    margin-bottom: govuk-spacing(6) / 4;
   }
 }
 
 .gem-c-step-nav-related__pretitle {
   display: block;
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 
-  @include media(tablet) {
-    margin-bottom: 5px;
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(1);
   }
 }
 
@@ -43,10 +47,10 @@
 }
 
 .gem-c-step-nav-related__link-item {
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 
-  @include media(tablet) {
-    margin-top: 5px;
+  @include govuk-media-query($from: tablet) {
+    margin-top: govuk-spacing(1);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -8,7 +8,7 @@
 
   .gem-c-subscription-links__list {
     list-style: none;
-    margin: 0 (-govuk-spacing(3) / 2);
+    margin: 0 (- govuk-spacing(3) / 2);
     padding: 0;
   }
 
@@ -44,7 +44,7 @@
     background-repeat: no-repeat;
     background-position: 0 20%;
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       background-position: 0 35%;
     }
   }
@@ -67,7 +67,7 @@
     background-image: image-url("govuk_publishing_components/mail-icon.png");
     padding-left: govuk-spacing(5);
 
-    @include device-pixel-ratio {
+    @include govuk-device-pixel-ratio {
       background-image: image-url("govuk_publishing_components/mail-icon-x2.png");
       background-size: govuk-spacing(4) govuk-spacing(3);
     }
@@ -76,7 +76,7 @@
   .gem-c-subscription-links__feed-box {
     padding: govuk-spacing(3);
     margin-bottom: govuk-spacing(3);
-    background: $grey-3;
+    background: govuk-colour("grey-3");
 
     .js-enabled &.js-hidden {
       display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -4,14 +4,14 @@
   border: $gem-border-width-mobile solid $gem-success-colour;
   @include govuk-responsive-margin(8, "bottom");
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding: $gem-spacing-scale-4;
     border-width: $gem-border-width-tablet;
   }
 }
 
 .gem-c-success-alert__message {
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
   margin: 0;
 }
 
@@ -19,15 +19,15 @@
   margin-top: 0;
   margin-bottom: $gem-spacing-scale-3;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-bottom: $gem-spacing-scale-4;
   }
 
-  @include bold-24;
+  @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-success-summary__body {
-  @include core-19;
+  @include govuk-font(19);
   margin: 0;
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss

@@ -1,10 +1,10 @@
 .gem-c-taxonomy-list {
   display: flex;
   flex-wrap: wrap;
-  margin: $gutter-half 0 0 0;
+  margin: govuk-spacing(3) 0 0 0;
   padding: 0;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-right: -25px;
   }
 }
@@ -12,10 +12,10 @@
 .gem-c-taxonomy-list__item {
   list-style: none;
 
-  @include media(tablet) {
-    @include box-sizing(border-box);
+  @include govuk-media-query($from: tablet) {
+    box-sizing: border-box;
     width: 33%;
-    padding-right: $gutter-one-third;
+    padding-right: govuk-spacing(2);
     vertical-align: top;
   }
 }

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

@@ -6,10 +6,10 @@
 // but we don't have one yet, so this is in anticipation of that
 // suggested scale is as follows, not fully implemented
 // no margin = 0
-// $gutter = 4
+// govuk-spacing(6)= 4
 // responsive-bottom-margin = 5
 .gem-c-title--margin-bottom-4 {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 }
 
 .gem-c-title--margin-bottom-5 {
@@ -17,7 +17,7 @@
 }
 
 .gem-c-title--inverse {
-  color: $white;
+  color: govuk-colour("white");
 
   .gem-c-title__text,
   .gem-c-title__context {
@@ -26,8 +26,8 @@
 }
 
 .gem-c-title__context {
-  @include core-24;
-  color: $secondary-text-colour;
+  @include govuk-font(24);
+  color: $govuk-secondary-text-colour;
   margin: 0;
 }
 
@@ -39,7 +39,7 @@
     color: inherit;
 
     &:focus {
-      color: $black;
+      color: $govuk-text-colour;
     }
   }
 
@@ -51,10 +51,10 @@
 
 .gem-c-title__text {
   @include govuk-text-colour;
-  @include bold-48;
+  @include govuk-font(48, $weight: bold);
   margin: 0;
 }
 
 .gem-c-title__text--long {
-  @include bold-36;
+  @include govuk-font(36, $weight: bold);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss

@@ -5,7 +5,7 @@
 }
 
 .gem-c-step-nav-header__title {
-  @include bold-24;
+  @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-step-nav-header__skip-link {

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

@@ -7,43 +7,51 @@
   cookie_banner_helper = GovukPublishingComponents::Presenters::CookieBannerHelper.new(local_assigns)
 
   message = cookie_banner_helper.message
-  confirmation_message = cookie_banner_helper.confirmation_message
 %>
 
-<div id="<%= id %>" class="<%= cookie_banner_class %>" data-module="cookie-banner">
+<div id="<%= id %>" class="<%= cookie_banner_class %>" data-module="cookie-banner" aria-live="polite">
   <div class="gem-c-cookie-banner__wrapper govuk-width-container">
     <p class="gem-c-cookie-banner__message"><%= message %></p>
     <% if new_cookie_banner %>
       <div class="gem-c-cookie-banner__buttons">
-        <%= render "govuk_publishing_components/components/button", {
-          text: "Accept cookies",
-          secondary: true,
-          inline_layout: true,
-          data_attributes: {
-            module: "track-click",
-            "accept-cookies": "true",
-            "track-category": "cookieBanner",
-            "track-action": "Cookie banner accepted"
-          }
-        } %>
-        <%= render "govuk_publishing_components/components/button", {
-          text: "Cookie settings",
-          href: "/help/cookies",
-          secondary: true,
-          inline_layout: true,
-          data_attributes: {
-            module: "track-click",
-            "track-category": "cookieBanner",
-            "track-action": "Cookie banner settings clicked"
-          }
-        } %>
+        <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-accept">
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Accept cookies",
+            secondary: true,
+            inline_layout: true,
+            data_attributes: {
+              module: "track-click",
+              "accept-cookies": "true",
+              "track-category": "cookieBanner",
+              "track-action": "Cookie banner accepted"
+            }
+          } %>
+        </div>
+        <div class="gem-c-cookie-banner__button gem-c-cookie-banner__button-settings">
+          <%= render "govuk_publishing_components/components/button", {
+            text: "Cookie settings",
+            href: "/help/cookies",
+            secondary: true,
+            inline_layout: true,
+            data_attributes: {
+              module: "track-click",
+              "track-category": "cookieBanner",
+              "track-action": "Cookie banner settings clicked"
+            }
+          } %>
+        </div>
       </div>
     <% end %>
   </div>
 
   <% if new_cookie_banner %>
     <div class="gem-c-cookie-banner__confirmation govuk-width-container">
-      <p class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></p>
+      <p class="gem-c-cookie-banner__confirmation-message">
+        You&#8217;ve accepted all cookies. You can
+        <a class="govuk-link" href="/help/cookies" data-module="track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation">
+          change your cookie settings
+        </a> at any time.
+      </p>
       <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true">Hide</button>
     </div>
   <% end %>

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

@@ -31,9 +31,11 @@
         <% items.each_with_index do |item, index| %>
           <li class="gem-c-error-summary__list-item">
             <% if item[:href] %>
-              <%= link_to item[:text], item[:href], target: item[:target] %>
+              <%= link_to item[:text], item[:href], target: item[:target], data: item[:data_attributes] %>
             <% else %>
-              <%= item[:text] %>
+              <%= tag.span data: item[:data_attributes] do %>
+                <%= item[:text] %>
+              <% end %>
             <% end %>
           </li>
         <% end %>

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

@@ -3,6 +3,7 @@
   description_text ||= false
   description_govspeak ||= false
   description ||= yield || false
+  aria_live ||= false
   local_assigns[:margin_bottom] ||= 8
   local_assigns[:margin_bottom] = 8 if local_assigns[:margin_bottom] > 9
 
@@ -11,10 +12,12 @@
   css_classes = %w(gem-c-notice)
   css_classes << (shared_helper.get_margin_bottom)
 
+  aria_attributes = aria_live ? {label: 'Notice', live: 'polite'} : {label: 'Notice'}
+
   description_present = description.present? || description_text.present? || description_govspeak.present?
 %>
 <% if title || description_present %>
-  <%= tag.section class: css_classes, aria: { label: "Notice" }, role: "region" do %>
+  <%= tag.section class: css_classes, aria: aria_attributes, role: "region" do %>
     <% if title %>
       <% if description_present %>
         <%= tag.h2 title, class: "gem-c-notice__title" %>

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

@@ -2,6 +2,8 @@ name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
+
+  If the examples below are not showing the banner, make sure the `seen_cookie_message` cookie is not present or is set to false.
 accessibility_criteria: |
   Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
 

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

@@ -21,9 +21,15 @@ examples:
       items:
       - text: Descriptive link to the question with an error 1
         href: '#example-error-1'
+        data_attributes:
+          tracking: GTM-123AA
       - text: Descriptive link to the question with an error 2
         href: '#example-error-2'
+        data_attributes:
+          tracking: GTM-123AB
       - text: Description of error without link
+        data_attributes:
+          tracking: GTM-123AC
   with_data_attributes:
     data:
       title: Message to alert the user to a problem goes here

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

@@ -36,3 +36,9 @@ examples:
   without_title:
     data:
       description_govspeak: '<p>Scheduled to publish at 8am on 25 April 2019<br/><a href="change-date">Change date</a><br/><a href="stop-scheduled-publishing">Stop scheduled publishing</a></p>'
+  with_aria_live:
+    description: Passing the aria live flag to the notice component will read the notice out to users if the notice changes, e.g on form submission the notice may go from hidden to visible.
+    data:
+      title: 'Your settings have been saved'
+      description_govspeak: <p>This is a confirmation message to tell you your settings have been saved</p>
+      aria_live: true

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

@@ -1,4 +1,4 @@
-name: Success Alert
+name: Success alert
 description: Used at the top of the page, to summarise a successful user action.
 accessibility_criteria: |
   - should be focused on page load, to ensure the message is noticed by

data/lib/govuk_publishing_components/presenters/cookie_banner_helper.rb

@@ -9,10 +9,6 @@ module GovukPublishingComponents
         @local_assigns = local_assigns
       end
 
-      def confirmation_message
-        'You\'ve accepted all cookies. You can <a class="govuk-link" href="/help/cookies" data-module="track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation">change your cookie settings</a> at any time.'.html_safe
-      end
-
       def message
         return @message if @message.present?
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '16.29.0'.freeze
+  VERSION = '17.0.0'.freeze
 end