govuk_publishing_components 28.5.0 → 28.8.0

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

@@ -4,12 +4,10 @@
 
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
-  condensed ||= false
   anchor_navigation ||= false
 
-  accordion_classes = %w(gem-c-accordion)
-  accordion_classes << 'gem-c-accordion--condensed' if condensed
-  accordion_classes << shared_helper.get_margin_bottom
+  accordion_classes = %w(gem-c-accordion govuk-accordion)
+  accordion_classes << (shared_helper.get_margin_bottom)
 
   translations = {
     show_text: "components.accordion.show",
@@ -22,7 +20,7 @@
   locales = {}
 
   data_attributes ||= {}
-  data_attributes[:module] = 'gem-accordion'
+  data_attributes[:module] = 'govuk-accordion gem-accordion'
   data_attributes[:anchor_navigation] = anchor_navigation
 
   translations.each do |key, translation|
@@ -39,27 +37,44 @@
       data_attributes[:locale] = unique_locales[0]
     end
   end
+
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
     <% items.each_with_index do |item, i| %>
       <%
+        # The GOVUK Frontend JavaScript for this component 
+        # uses a loop starting at 1 for accessing heading ID values, 
+        # hence the increment below
         index = i + 1
 
-        section_classes = %w(gem-c-accordion__section)
-        section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
+        item[:data_attributes] ||= nil
 
-        summary_classes = %w(gem-c-accordion__section-summary govuk-body)
-      %>
+        section_classes = %w(govuk-accordion__section)
+        section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
 
-      <%= tag.section(class: section_classes) do %>
-        <div class="gem-c-accordion__section-header">
-          <%= content_tag(shared_helper.get_heading_level, class: 'gem-c-accordion__section-heading', id: item[:heading][:id]) do %>
-            <%= tag.span(item[:heading][:text], id: "#{id}-heading-#{index}", data: item[:data_attributes], class: 'gem-c-accordion__section-button') %>
-          <% end %>
+        summary_classes = %w(govuk-accordion__section-summary govuk-body)
+      %>
+      <%= tag.div(class: section_classes) do %>
+        <%= tag.div(class: "govuk-accordion__section-header") do %>
+          <%=
+            content_tag(
+              shared_helper.get_heading_level,
+              content_tag(
+                'span', 
+                item[:heading][:text], 
+                class: "govuk-accordion__section-button",
+                id: "#{id}-heading-#{index}"
+                
+              ),
+              class: "govuk-accordion__section-heading",
+              id: item[:heading][:id],
+              data: item[:data_attributes]
+            )
+          %>
           <%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
-        </div>
-        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "gem-c-accordion__section-content", 'aria-label': "#{item[:heading][:text]}") %>
+        <% end %>
+        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "govuk-accordion__section-content", 'aria-labelledby': "#{id}-heading-#{index}") %>
       <% end %>
     <% end %>
   <% end %>

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

@@ -83,7 +83,9 @@
       <% end %>
     <% end %>
 
-    <% if attachment.alternative_format_contact_email %>
+    <% if attachment.display_accessible_format_request_form_link? %>
+      <%= link_to "Request an accessible format of this document", "/contact/govuk/request-accessible-format?content_id=#{attachment.owning_document_content_id}&attachment_id=#{attachment.attachment_id}", class: "govuk-link" %>
+    <% elsif attachment.alternative_format_contact_email %>
       <%= tag.p t("components.attachment.request_format_text"), class: "gem-c-attachment__metadata" %>
       <%= render "govuk_publishing_components/components/details", {
         title: t("components.attachment.request_format_cta")

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

@@ -7,7 +7,7 @@
 
 <% start_button_text = capture do %>
   <%= button.text %>
-  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
   </svg>
 <% end %>
@@ -21,11 +21,11 @@
 %>
 
 <% if button.link? %>
-  <%= link_to button_text, button.href, button.html_options %>
+  <%= link_to button_text, button.href, **button.html_options %>
 <% else %>
-  <%= content_tag :button, button_text, button.html_options %>
+  <%= content_tag :button, button_text, **button.html_options %>
 <% end %>
 
 <% if button.info_text %>
-  <%= tag.span button.info_text, button.info_text_options %>
+  <%= tag.span button.info_text, **button.info_text_options %>
 <% end %>

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

@@ -17,8 +17,8 @@
 
     <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
 
-    <span id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+    <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
       <%= t("components.character_count.body", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
-    </span>
+    </div>
   <% end %>
 <% end %>

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

@@ -15,11 +15,11 @@
         <% end %>
 
         <% if cb_helper.hint_text %>
-          <%= tag.span cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
+          <%= tag.div cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
         <% end %>
 
         <% if cb_helper.error %>
-          <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
+          <%= tag.p error, id: "#{id}-error", class: "govuk-error-message" %>
         <% end %>
 
         <%= tag.ul class: cb_helper.list_classes, data: {

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

@@ -10,6 +10,6 @@
     text = raw(errors.join("<br />"))
   end
 %>
-<%= tag.span id: id, class: css_classes do %>
+<%= tag.p id: id, class: css_classes do %>
   <span class="govuk-visually-hidden">Error:</span> <%= text %>
 <% end %>

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/_input.html.erb

@@ -98,7 +98,7 @@
     } %>
   <% end %>
 
-  <% input_tag = tag.input({
+  <% input_tag = tag.input(
     aria: {
       describedby: aria_described_by,
       controls: controls
@@ -116,8 +116,8 @@
     readonly: readonly,
     tabindex: tabindex,
     type: type,
-    value: value,
-  }) %>
+    value: value
+  ) %>
 
   <% if prefix && suffix %>
     <%= tag.div class: "govuk-input__wrapper" 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/_intervention.html.erb

@@ -45,11 +45,11 @@
   section_options.merge!({ hidden: true }) if hide
 %>
 <% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
-  <%= tag.section section_options do %>
+  <%= tag.section **section_options do %>
     <p class="govuk-body">
       <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
       <% if suggestion_link_text && suggestion_link_url %>
-        <%= tag.a suggestion_link_text, suggestion_tag_options %>
+        <%= tag.a suggestion_link_text, **suggestion_tag_options %>
       <% end %>
     </p>
 

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/_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/_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

@@ -39,7 +39,7 @@
   label_classes << "govuk-!-margin-bottom-#{label_margin_bottom}" if [*1..9].include?(label_margin_bottom) and local_assigns.include?(:inline_label)
 
   tag_label = capture do
-    tag.label({ for: id, class: label_classes }) do
+    tag.label(for: id, class: label_classes) do
       label_text
     end
   end
@@ -47,9 +47,7 @@
 
 <div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <% if wrap_label_in_a_heading %>
-    <%= content_tag(shared_helper.get_heading_level, {
-      class: "govuk-!-margin-0",
-    }) do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "govuk-!-margin-0") do %>
       <%= tag_label %>
     <% end %>
   <% else %>

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

@@ -1,67 +1,39 @@
 <%
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-
-  options ||= []
+  # select_helper.css_classes generates "gem-c-select"
   id ||= false
   label ||= false
-  full_width ||= false
   name ||= id
   is_page_heading ||= false
-  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
-    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
-
-  select_classes = %w(govuk-select)
-  select_classes << "gem-c-select__select--full-width" if full_width
-  select_classes << "govuk-select--error" if error_id
-
-  label_classes = %w(govuk-label)
-  label_classes << "govuk-label--#{heading_size}" if heading_size
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
+  select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(local_assigns)
 
-  select_helper = GovukPublishingComponents::Presenters::SelectHelper.new(options)
+  aria_describedby = { describedby: select_helper.describedby }
   data_module = { module: "track-select-change" } unless select_helper.data_tracking?.eql?(false)
 %>
-<% if options.any? && id && label %>
-  <%= content_tag :div, class: css_classes do %>
+<% if select_helper.options.any? && id && label %>
+  <%= content_tag :div, class: select_helper.css_classes do %>
     <% if is_page_heading %>
-      <%= tag.h1 label_tag(id, label, class: label_classes), class: "gem-c-title__text" %>
+      <%= tag.h1 label_tag(id, label, class: select_helper.label_classes), class: "gem-c-title__text" %>
     <% else %>
-      <%= label_tag(id, label, class: label_classes) %>
+      <%= label_tag(id, label, class: select_helper.label_classes) %>
     <% end %>
 
-    <% if hint %>
+    <% if select_helper.hint %>
       <%= render "govuk_publishing_components/components/hint", {
-        id: hint_id,
+        id: select_helper.hint_id,
         text: hint
       } %>
     <% end %>
 
-    <% if error_message %>
+    <% if select_helper.error_message %>
       <%= render "govuk_publishing_components/components/error_message", {
-        id: error_id,
-        text: error_message
+        id: select_helper.error_id,
+        text: select_helper.error_message
       } %>
     <% end %>
 
-    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_classes, data: data_module, aria: aria_describedby %>
+    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_helper.select_classes, data: data_module, aria: aria_describedby %>
   <% end %>
 <% end %>

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

@@ -49,17 +49,16 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/>
             </svg><%= sl_helper.feed_link_text %>
           <% end %>
-          <%= tag.button feed_link_text, {
+          <%= tag.button(feed_link_text,
             class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
             data: sl_helper.feed_link_data_attributes,
             lang: feed_link_text_locale
-          } if sl_helper.feed_link_box_value %>
-          <%= link_to feed_link_text, sl_helper.feed_link,
-            {
-              class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
-              data: sl_helper.feed_link_data_attributes,
-              lang: feed_link_text_locale
-            } unless sl_helper.feed_link_box_value %>
+          ) if sl_helper.feed_link_box_value %>
+          <%= link_to(feed_link_text, sl_helper.feed_link,
+            class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            data: sl_helper.feed_link_data_attributes,
+            lang: feed_link_text_locale
+          ) unless sl_helper.feed_link_box_value %>
         </li>
       <% end %>
     </ul>

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/attachment.yml

@@ -76,6 +76,17 @@ examples:
         content_type: application/pdf
         file_size: 20000
         alternative_format_contact_email: defra.helpline@defra.gsi.gov.uk
+  with_link_to_request_accessible_format_form:
+    data:
+      attachment:
+        title: "Department for Transport information asset register"
+        url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv
+        filename: department-for-transport-information-asset-register.csv
+        content_type: application/pdf
+        file_size: 20000
+        owning_document_content_id: 456_abc
+        attachment_id: 123
+        alternative_format_contact_email: alternative.formats@education.gov.uk
   with_data_attributes:
     data:
       attachment:

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

@@ -47,7 +47,7 @@ examples:
     data:
       id: 'dropdown2-1'
       label: 'Choose your preferred thing'
-      hint_text: 'You might need some more information here'
+      hint: 'You might need some more information here'
       hint_id: 'optional-hint-id'
       options:
       - text: 'Something'

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'
         },
         {