govuk_publishing_components 28.2.0 → 28.6.0

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

@@ -14,7 +14,6 @@
   data: { module: "govuk-error-summary" }.merge(data_attributes),
   aria: { labelledby: title_id },
   role: "alert",
-  tabindex: -1,
   id: id,
 ) do %>
   <% if title %>

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

@@ -10,7 +10,7 @@
   classes << heading_helper.classes
   classes << brand_helper.brand_class
   classes << brand_helper.border_color_class
-  classes << (shared_helper.get_margin_bottom) if [*0..9].include?(local_assigns[:margin_bottom])
+  classes << shared_helper.get_margin_bottom if [*0..9].include?(local_assigns[:margin_bottom])
 %>
 <%= content_tag(shared_helper.get_heading_level, text,
   class: classes,

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

@@ -3,7 +3,7 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w( gem-c-hint govuk-hint )
-  css_classes << (shared_helper.get_margin_bottom)
+  css_classes << shared_helper.get_margin_bottom
 %>
 
 <%= tag.div id: id, class: css_classes do %>

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

@@ -1,7 +1,18 @@
 <%
   id ||= "inset-text-#{SecureRandom.hex(4)}"
+  margin_top ||= 6
+  margin_bottom ||= 6
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
+    margin_top: margin_top,
+    margin_bottom: margin_bottom
+  })
+
+  classes = %w[gem-c-inset-text govuk-inset-text]
+  classes << shared_helper.get_margin_top
+  classes << shared_helper.get_margin_bottom
 %>
-<%= tag.div id: id, class: "gem-c-inset-text govuk-inset-text" do %>
+<%= tag.div id: id, class: classes do %>
   <% if defined? text %>
     <%= text %>
   <% elsif block_given? %>

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

@@ -72,7 +72,7 @@
             <% end %>
           </ul>
         <% end %>
-        <svg role="presentation" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
           <path
             fill="currentColor"
             d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"

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

@@ -108,24 +108,28 @@
                   track_dimension_index: "29",
                 }
               } %>
-              <%= content_tag(:button, link[:label], {
-                aria: {
-                  controls: "super-navigation-menu__section-#{unique_id}",
-                  expanded: false,
-                  label: show_menu_text,
-                },
-                class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
-                data: {
-                  text_for_hide: hide_menu_text,
-                  text_for_show: show_menu_text,
-                  toggle_desktop_group: "top",
-                  toggle_mobile_group: "second",
-                  tracking_key: tracking_label,
-                },
-                hidden: true,
-                id: "super-navigation-menu__section-#{unique_id}-toggle",
-                type: "button",
-              }) if has_children %>
+              <% if has_children %>
+                <%= content_tag(:button, {
+                  aria: {
+                    controls: "super-navigation-menu__section-#{unique_id}",
+                    expanded: false,
+                    label: show_menu_text,
+                  },
+                  class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
+                  data: {
+                    text_for_hide: hide_menu_text,
+                    text_for_show: show_menu_text,
+                    toggle_desktop_group: "top",
+                    toggle_mobile_group: "second",
+                    tracking_key: tracking_label,
+                  },
+                  hidden: true,
+                  id: "super-navigation-menu__section-#{unique_id}-toggle",
+                  type: "button",
+                }) do %>
+                  <%= tag.span link[:label], class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner" %>
+                <% end %>
+              <% end %>
             </div>
             <% if has_children %>
               <div

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

@@ -14,7 +14,7 @@
   classes << "govuk-list--spaced" if extra_spacing
   # Setting the  `margin_bottom` to 4 is the same as the default margin - so we
   # can omit the override class. To do this we leave out `4` from the array:
-  classes << (shared_helper.get_margin_bottom) if [0,1,2,3,5,6,7,8,9].include?(local_assigns[:margin_bottom])
+  classes << shared_helper.get_margin_bottom if [0,1,2,3,5,6,7,8,9].include?(local_assigns[:margin_bottom])
 
   # Default list type is unordered list.
   list_tag = "ul"

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

@@ -11,7 +11,7 @@
   <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
   <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
     <%= tag.div class: "gem-c-modal-dialogue__header" do %>
-      <svg role="presentation" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
+      <svg aria-hidden="true" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
         <path fill="currentColor" fill-rule="evenodd"
           d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
         <image src="<%= asset_path('govuk-logotype-crown.png') %>" class="gem-c-modal-dialogue__logotype-crown-fallback-image"></image>

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

@@ -16,7 +16,7 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w[govuk-notification-banner gem-c-notice]
-  css_classes << (shared_helper.get_margin_bottom)
+  css_classes << shared_helper.get_margin_bottom
 
   aria_attributes = {label: 'Notice'}
   aria_attributes[:live] = 'polite' if aria_live

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

@@ -15,8 +15,8 @@
 
   wrapper_classes = %w(gem-c-print-link govuk-!-display-none-print)
   wrapper_classes << "gem-c-print-link--show-without-js" unless require_js
-  wrapper_classes << (shared_helper.get_margin_top)
-  wrapper_classes << (shared_helper.get_margin_bottom)
+  wrapper_classes << shared_helper.get_margin_top
+  wrapper_classes << shared_helper.get_margin_bottom
 
   classes = %w[govuk-link]
   classes << "govuk-body-s gem-c-print-link__button" if href.nil?

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

@@ -122,7 +122,7 @@
           <% end %>
 
           <% if item[:conditional] %>
-            <%= tag.div item[:conditional], class:"govuk-radios__conditional govuk-radios__conditional--hidden", id: conditional_id %>
+            <%= tag.div item[:conditional], class:"govuk-radios__conditional govuk-radios__conditional--hidden govuk-body", id: conditional_id %>
           <% end %>
 
         <% end %>

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

@@ -18,8 +18,8 @@
   data_attributes[:module] = 'gem-track-click'
 
   classes = %w[gem-c-search govuk-!-display-none-print]
-  classes << (shared_helper.get_margin_top)
-  classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
+  classes << shared_helper.get_margin_top
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
   classes << "gem-c-search--large" if size == "large"
   classes << "gem-c-search--large-on-mobile" if size == "large-mobile"
   classes << "gem-c-search--no-border" if no_border

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

@@ -10,12 +10,23 @@
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   error_message ||= nil
   error_id ||= nil
+  hint ||= nil
+  hint_id ||= nil
+
+  describedby = %w[]
 
   if error_message || error_id
     error_id = "error-#{SecureRandom.hex(4)}" unless error_id
-    aria_describedby = { describedby: error_id }
+    describedby << error_id
+  end
+
+  if hint
+    hint_id = "hint-#{SecureRandom.hex(4)}" unless hint_id
+    describedby << hint_id
   end
 
+  aria_describedby = { describedby: describedby } if describedby
+
   css_classes = %w(govuk-form-group gem-c-select)
   css_classes << "govuk-form-group--error" if error_message
 
@@ -37,6 +48,13 @@
       <%= label_tag(id, label, class: label_classes) %>
     <% end %>
 
+    <% if hint %>
+      <%= render "govuk_publishing_components/components/hint", {
+        id: hint_id,
+        text: hint
+      } %>
+    <% end %>
+
     <% if error_message %>
       <%= render "govuk_publishing_components/components/error_message", {
         id: error_id,

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

@@ -55,38 +55,41 @@
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-                  <path fill="currentColor" d="M31.006 0H.993A.997.997 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.013a.998.998 0 0 0 .994-.993V.993A.999.999 0 0 0 31.006 0z"/>
-                  <path fill="#FFF" d="M17.892 10.751h1.787V8.009L17.216 8c-2.73 0-3.352 2.045-3.352 3.353v1.828h-1.581v2.824h1.581V24h3.322v-7.995h2.242l.291-2.824h-2.533V11.52c.001-.623.415-.769.706-.769z"/>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                 </svg>
-
               <% elsif link[:icon] == 'twitter' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-                  <path fill="currentColor" d="M31.007 0H.993A.999.999 0 0 0 0 .993v30.014c0 .55.452.993.993.993h30.014a.997.997 0 0 0 .993-.993V.993A.998.998 0 0 0 31.007 0z"/>
-                  <path fill="#FFF" d="M8 21.027a9.286 9.286 0 0 0 5.032 1.475c6.038 0 9.34-5.002 9.34-9.339 0-.143-.004-.284-.012-.425a6.619 6.619 0 0 0 1.639-1.699c-.6.265-1.234.439-1.885.516a3.287 3.287 0 0 0 1.443-1.816 6.571 6.571 0 0 1-2.086.797 3.28 3.28 0 0 0-5.592 2.993 9.311 9.311 0 0 1-6.766-3.43 3.294 3.294 0 0 0-.443 1.651 3.28 3.28 0 0 0 1.46 2.732 3.278 3.278 0 0 1-1.488-.411v.041a3.288 3.288 0 0 0 2.633 3.22 3.28 3.28 0 0 1-1.481.055 3.285 3.285 0 0 0 3.065 2.281 6.59 6.59 0 0 1-4.076 1.404A6.76 6.76 0 0 1 8 21.027z"/>
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                 </svg>
-
               <% elsif link[:icon] == 'email' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M34.983 18.76v12.48H15.016V18.76h19.967m2.496-2.496H12.52v17.472h24.959V16.264z"/><path fill="none" stroke="#FFF" stroke-width="2.496" stroke-miterlimit="10" d="M14.59 18.963L25 26.945l10.263-7.869"/></svg>
-
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM58.37,21,36.92,39.45,15.47,21ZM11.65,23.66,26.27,36.23,11.65,49.9ZM15.1,52.83,29.7,39.18l7.22,6.21,7.22-6.21,14.6,13.65ZM62.19,49.9,47.57,36.23,62.19,23.66Z"/>
+                </svg>
               <% elsif link[:icon] == 'flickr' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M23.72 25a5.76 5.76 0 1 1-11.52 0 5.76 5.76 0 1 1 11.52 0m14.08 0c0 3.182-2.578 5.76-5.76 5.76s-5.76-2.578-5.76-5.76a5.76 5.76 0 1 1 11.52 0"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/>
+                </svg>
               <% elsif link[:icon] == 'instagram' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M25 28.2a3.204 3.204 0 0 1-3.2-3.2c0-1.764 1.436-3.2 3.2-3.2 1.765 0 3.2 1.436 3.2 3.2 0 1.765-1.435 3.2-3.2 3.2"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" fill="#FFF" d="M25 22.44c1.412 0 2.56 1.148 2.56 2.56s-1.147 2.56-2.56 2.56a2.561 2.561 0 0 1 0-5.12m0-1.28A3.844 3.844 0 0 0 21.16 25 3.844 3.844 0 0 0 25 28.84 3.845 3.845 0 0 0 28.84 25 3.844 3.844 0 0 0 25 21.16"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#e" overflow="visible"/></clipPath><path clip-path="url(#f)" fill="#FFF" d="M17.32 35.24c-1.555 0-2.56-1.005-2.56-2.561V17.373c0-1.611.981-2.613 2.56-2.613h15.36c1.58 0 2.561 1.002 2.561 2.613v15.36c0 1.522-1.005 2.507-2.561 2.507H17.32zM25 17.96c-3.881 0-7.04 3.159-7.04 7.04 0 3.881 3.159 7.04 7.04 7.04 3.881 0 7.04-3.159 7.04-7.04 0-3.881-3.159-7.04-7.04-7.04m7.36-2.56a2.243 2.243 0 0 0-2.24 2.24 2.243 2.243 0 0 0 2.24 2.24 2.241 2.241 0 0 0 0-4.48"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#g" overflow="visible"/></clipPath><path clip-path="url(#h)" fill="#FFF" d="M30.552 15.4a2.873 2.873 0 0 0-.704 3.648A7.64 7.64 0 0 0 25 17.319c-4.235 0-7.68 3.445-7.68 7.68 0 4.235 3.445 7.68 7.68 7.68 4.235 0 7.68-3.444 7.68-7.68a7.642 7.642 0 0 0-1.728-4.848 2.876 2.876 0 0 0 3.647-.703v13.285c0 1.169-.717 1.866-1.92 1.866H17.32c-1.22 0-1.92-.699-1.92-1.92V17.373c0-1.254.7-1.973 1.92-1.973h13.232m2.128-1.28H17.32c-1.92 0-3.2 1.28-3.2 3.253V32.68c0 1.92 1.28 3.2 3.2 3.2h15.36c1.92 0 3.2-1.28 3.2-3.146v-15.36c0-1.974-1.28-3.254-3.2-3.254m-.32 5.12a1.6 1.6 0 1 1-.001-3.2 1.6 1.6 0 0 1 .001 3.2M25 31.4a6.4 6.4 0 1 1 .002-12.802A6.4 6.4 0 0 1 25 31.4"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
+                </svg>
               <% elsif link[:icon] == 'linkedin' %>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.24 35.24V21.8h-4.48v13.44h4.48z"/><defs><path d="M9 9h32v32H9z"/></defs><clipPath><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FFF" d="M26.28 35.24V28.2c0-1.92.64-3.2 1.92-3.2h.64c1.28 0 1.92 1.28 1.92 4.48v5.76h4.48V28.2c0-4.48-1.28-6.4-4.48-6.4-3.84 0-4.479 1.92-4.479 1.92V21.8H21.8v13.44h4.48zm-6.72-17.92a2.56 2.56 0 1 1-5.12 0 2.56 2.56 0 0 1 5.12 0"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
               <% elsif link[:icon] == 'youtube' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M19.88 33.32V16.68L33.32 25l-13.44 8.32z"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                </svg>
               <% elsif link[:icon] == 'whatsapp' %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true"><path d="M0 32V0h32v32H0zm20.839-13.894c-.263-.131-1.555-.766-1.796-.854-.24-.088-.416-.132-.59.131-.176.263-.68.855-.833 1.03-.153.176-.307.198-.57.066-.262-.131-1.109-.41-2.113-1.304-.78-.697-1.308-1.557-1.461-1.82-.153-.263-.016-.406.115-.536.118-.118.263-.308.394-.46.131-.154.175-.264.263-.44.088-.174.044-.328-.022-.46-.066-.131-.591-1.424-.81-1.95-.214-.513-.43-.443-.59-.452a10.506 10.506 0 0 0-.505-.009.964.964 0 0 0-.7.329c-.241.263-.92.899-.92 2.192 0 1.293.942 2.542 1.073 2.718.131.176 1.852 2.83 4.489 3.967.626.27 1.116.433 1.497.554.63.2 1.202.172 1.655.104.505-.075 1.555-.636 1.774-1.25.219-.613.219-1.14.153-1.25-.066-.108-.24-.174-.503-.306zm-4.795 6.547h-.003a8.73 8.73 0 0 1-4.449-1.219l-.319-.19-3.308.869.883-3.226-.208-.33a8.718 8.718 0 0 1-1.336-4.652c.001-4.819 3.922-8.74 8.744-8.74a8.68 8.68 0 0 1 6.179 2.564 8.686 8.686 0 0 1 2.557 6.183c-.002 4.82-3.922 8.74-8.74 8.74zm7.44-16.18a10.449 10.449 0 0 0-7.44-3.084c-5.796 0-10.513 4.717-10.516 10.516 0 1.853.484 3.662 1.404 5.256l-1.492 5.45 5.574-1.463a10.504 10.504 0 0 0 5.026 1.28h.004c5.796 0 10.514-4.717 10.516-10.515a10.455 10.455 0 0 0-3.077-7.44z" fill="currentColor"/></svg>
-
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
+                </svg>
               <% else %>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="9 9 32 32" aria-hidden="true"><path fill="currentColor" d="M9 9h32v32H9V9z"/><path fill="#FFF" d="M12.84 14.12v19.2h5.76l5.76 5.76v-5.76h12.8v-19.2H12.84zm3.2 8.32H28.2V25H16.04v-2.56zm16 7.68h-16v-2.56h16v2.56zm1.92-10.24H16.04v-2.56h17.92v2.56z"/></svg>
-
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.84 73.84" aria-hidden="true" focusable="false">
+                  <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>
+                </svg>
               <% end %>
             </span><%= link_text %><% end %>
         </li>

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

@@ -2,4 +2,4 @@
   href ||= '#main-content'
   text ||= t('components.skip_link.text')
 %>
-<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print") %>
+<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print", data: { module: "govuk-skip-link" }) %>

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

@@ -9,7 +9,7 @@
   local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
 
   css_classes = %w( gem-c-subscription-links govuk-!-display-none-print )
-  css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
+  css_classes << shared_helper.get_margin_bottom unless local_assigns[:margin_bottom] == 0
   css_classes << brand_helper.brand_class
   css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
 

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

@@ -25,7 +25,7 @@
   css_classes << "govuk-textarea--error" if has_error
   form_group_css_classes = %w(gem-c-textarea govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error
-  form_group_css_classes << (shared_helper.get_margin_bottom)
+  form_group_css_classes << shared_helper.get_margin_bottom
 
   aria_described_by ||= nil
   if hint || has_error || describedby

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

@@ -13,8 +13,8 @@
 
   classes = %w[gem-c-title]
   classes << "gem-c-title--inverse" if inverse
-  classes << (shared_helper.get_margin_top)
-  classes << (shared_helper.get_margin_bottom)
+  classes << shared_helper.get_margin_top
+  classes << shared_helper.get_margin_bottom
 
   heading_classes = %w[gem-c-title__text]
   heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
@@ -30,7 +30,7 @@
   <% if context && !context_inside %>
     <%= @context_block %>
   <% end %>
-  
+
   <h1 class="<%= heading_classes.join(" ") %>">
     <% if context && context_inside %>
       <%= @context_block %>

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

@@ -296,11 +296,11 @@ examples:
             text: Writing well for the web
             id: writing-well-for-the-web
           content:
-            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
+            html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test" class="govuk-link">link</a></p>
         - heading:
             text: Writing well for specialists
           content:
-            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
+            html: <p class="govuk-body" id="anchor-nav-test">This is content for accordion 2 of 2</p>
         - heading:
             text: Know your audience
           content:
@@ -309,98 +309,3 @@ examples:
             text: How people read
           content:
             html: <p class="govuk-body">This is the content for How people read.</p>
-  condensed_layout:
-    description: |
-      This layout is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
-    data:
-      condensed: true
-      items:
-        - heading:
-            text: Understanding agile project management
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile and government services: an introduction</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile methods: an introduction</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Core principles of agile</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Working with agile methods
-          summary:
-            text: Workspaces, tools and techniques, user stories, planning.
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Creating an agile working environment</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile tools and techniques</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Set up a team wall</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Writing user stories</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Planning in agile</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Deciding on priorities</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Developing a roadmap</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Governing agile services
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Governance principles for agile service delivery</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Measuring and reporting progress</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: check if you need approval to spend money on a service</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: apply for approval to spend money on a service</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: the new pipeline process</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Working across organisational boundaries</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Phases of an agile project
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the discovery phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the alpha phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the beta phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the live phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
-                  </li>
-              </ul>'

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

@@ -11,8 +11,6 @@ body: |
 
   It must always be used [with the contextual breadcrumbs component][contextual_breadcrumbs].
 
-  The COVID CTA will displayed on all pages except for a few exemptions documented below.
-
   [preview]: /contextual-navigation
   [step-by-step]: /component-guide/step_by_step_nav
   [related_navigation]: /component-guide/related_navigation
@@ -114,48 +112,3 @@ examples:
             - content_id: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f"
               title: "Exporting"
               phase: "live"
-  with_covid_cta_taxon_exception:
-    description: The COVID Booster call to action element is not displayed on content tagged to taxons in `covid_booster_cta_taxon_exception_list`.
-    data:
-      content_item:
-        title: "A content item"
-        links:
-          taxons:
-            - content_id: ac7b8472-5d09-4679-9551-87847b0ac827
-              title: "Not Covid"
-              phase: "live"
-          ordered_related_items:
-          - title: Find an apprenticeship
-            base_path: /apply-apprenticeship
-          - title: Training and study at work
-            base_path: /training-study-work-your-rights
-          - title: Careers helpline for teenagers
-            base_path: /careers-helpline-for-teenagers
-          document_collections:
-          - title: Recruit an apprentice (formerly apprenticeship vacancies)
-            base_path: /government/collections/apprenticeship-vacancies
-            document_type: document_collection
-          - title: The future of jobs and skills
-            base_path: /government/collections/the-future-of-jobs-and-skills
-            document_type: document_collection
-  with_covid_cta_document_type_exception:
-    description: Illustrates an exception to showing the custom COVID Booster call to action element as defined in `covid_booster_cta_document_type_exceptions`.
-    data:
-      content_item:
-        title: "A content item"
-        document_type: smart_answer
-        links:
-          ordered_related_items:
-          - title: Find an apprenticeship
-            base_path: /apply-apprenticeship
-          - title: Training and study at work
-            base_path: /training-study-work-your-rights
-          - title: Careers helpline for teenagers
-            base_path: /careers-helpline-for-teenagers
-          document_collections:
-          - title: Recruit an apprentice (formerly apprenticeship vacancies)
-            base_path: /government/collections/apprenticeship-vacancies
-            document_type: document_collection
-          - title: The future of jobs and skills
-            base_path: /government/collections/the-future-of-jobs-and-skills
-            document_type: document_collection

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

@@ -816,7 +816,7 @@ examples:
       block: |
         <p>
           <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
-          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
+          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
         </p>
   image:
     data:

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

@@ -18,3 +18,9 @@ examples:
           <h2 class="govuk-heading-m" id='heading'>To publish this step by step you need to</h2>
           <a class="govuk-link" href='/foo'>Check for broken links</a>
         </div>
+  with_custom_margins:
+    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 having margin of 6 (30px) top and bottom.
+    data:
+      text: "When a failure occurs, you must submit logbook, landing and transhipment data manually to the UK Fisheries Call Centre each day and by no later than 23.59 UTC"
+      margin_top: 0
+      margin_bottom: 9

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

@@ -42,6 +42,18 @@ examples:
         selected: true
       - text: 'Option three'
         value: 'option3'
+  with_hint:
+    description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
+    data:
+      id: 'dropdown2-1'
+      label: 'Choose your preferred thing'
+      hint_text: 'You might need some more information here'
+      hint_id: 'optional-hint-id'
+      options:
+      - text: 'Something'
+        value: 'option1'
+      - text: 'Something else'
+        value: 'option2'
   with_tracking:
     description: 'Tracking can be enabled on the select component by passing a minimum of data_track_category and data_track_action. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.'
     data:

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

@@ -125,7 +125,7 @@ examples:
         },
         {
           href: '/email-share-link',
-          text: 'Share on email to someone you know',
+          text: 'Email',
           icon: 'email'
         },
         {