govuk_publishing_components 27.18.0 → 28.1.0

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -45,17 +45,21 @@
   }
 
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: one-third, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: mobile);
+    @include govuk-grid-column($width: one-half, $at: mobile);
   }
 }
 
 .gem-c-image-card__image {
   display: block;
   max-width: 100%;
+  border-top: 1px solid $govuk-border-colour;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
 }
 
 .gem-c-image-card__title {
@@ -100,7 +104,13 @@
 
 .gem-c-image-card__context,
 .gem-c-image-card__metadata {
-  @include govuk-font(14);
+  @include govuk-font($size: false);
+  font-size: 16px;
+
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   margin: 0 0 (govuk-spacing(3) / 2);
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
@@ -110,13 +120,13 @@
 }
 
 .gem-c-image-card__description {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   padding-top: (govuk-spacing(3) / 2);
   word-wrap: break-word;
 }
 
 .gem-c-image-card__list {
-  @include govuk-font($size: 16);
+  @include govuk-font($size: 19);
   position: relative;
   z-index: 2;
   padding: (govuk-spacing(3) / 2) 0 0 0;
@@ -160,7 +170,7 @@
 
 .gem-c-image-card--large {
   .gem-c-image-card__image-wrapper {
-    @include govuk-grid-column($width: two-thirds, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     margin-bottom: govuk-spacing(2);
     float: none;
@@ -175,7 +185,7 @@
   }
 
   .gem-c-image-card__text-wrapper {
-    @include govuk-grid-column($width: one-third, $at: tablet);
+    @include govuk-grid-column($width: one-half, $at: tablet);
 
     padding: 0;
     overflow: hidden;

data/app/assets/stylesheets/govuk_publishing_components/components/_signup-link.scss

@@ -0,0 +1,34 @@
+.gem-c-signup-link__link {
+  @include govuk-font($size: 19);
+}
+
+.gem-c-signup-link__inner {
+  position: relative;
+}
+
+.gem-c-signup-link__icon {
+  position: absolute;
+
+  @include govuk-media-query($from: tablet) {
+    top: 2px;
+  }
+}
+
+.gem-c-signup-link__title {
+  margin-bottom: govuk-spacing(2);
+  margin-left: govuk-spacing(5);
+}
+
+.gem-c-signup-link--with-background-and-border {
+  padding: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+  border: 1px solid $govuk-border-colour;
+}
+
+.gem-c-signup-link--link-only .gem-c-signup-link__link {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  margin-left: govuk-spacing(5);
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -34,4 +34,11 @@
       margin-left: 1em;
     }
   }
+
+  // Prevent excessive spacing when placed in a call-to-action block
+  .call-to-action {
+    .help-notice:first-child {
+      margin-top: 0;
+    }
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -145,4 +145,10 @@
     margin-bottom: $govuk-gutter;
     border-top: 1px solid $govuk-border-colour;
   }
+
+  code {
+    padding: 0 5px;
+    color: govuk-colour("red");
+    background-color: govuk-colour("light-grey");
+  }
 }

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

@@ -24,7 +24,11 @@
     } %>
   <% end %>
 
-  <% if navigation.show_brexit_cta? || navigation.show_brexit_related_links? %>
+  <% if navigation.show_brexit_cta? %>
     <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
   <% end %>
+
+  <% if navigation.show_covid_booster_cta? %>
+    <%= render 'govuk_publishing_components/components/contextual_sidebar/covid_cta', content_item: content_item %>
+  <% end %>
 </div>

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

@@ -1,4 +1,5 @@
 <%
+  sizes ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)

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

@@ -3,8 +3,10 @@
   suggestion_link_text ||= false
   suggestion_link_url ||= false
   suggestion_text ||= nil
+  hide ||= false
   new_tab ||= false
 
+
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
   suggestion_data_attributes ||= {}
@@ -34,9 +36,16 @@
 
     suggestion_link_text = intervention_helper.accessible_text
   end
+
+  section_options = {
+    class: "gem-c-intervention",
+    role: "region", aria: aria_attributes,
+    data: data_attributes,
+  }
+  section_options.merge!({ hidden: true }) if hide
 %>
 <% if suggestion_text || (suggestion_link_text && suggestion_link_url) %>
-  <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes 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 %>

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

@@ -17,7 +17,7 @@
   classes << "gem-c-metadata--inverse" if inverse
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
-<%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
+<%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
   <dl data-module="gem-track-click">
     <% if from.any? %>
       <dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
@@ -44,7 +44,7 @@
       <dd class="gem-c-metadata__definition">
         <%= last_updated %>
         <% if local_assigns.include?(:see_updates_link) %>
-          &#8212; <a href="#history" class="gem-c-metadata__definition-link govuk-!-display-none-print"
+          &#8212; <a href="#history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
                              data-track-category="content-history"
                              data-track-action="see-all-updates-link-clicked"
                              data-track-label="history">

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

@@ -0,0 +1,30 @@
+<%
+  local_assigns[:heading_level] ||= 3
+  local_assigns[:margin_bottom] ||= 0
+  link_text ||= false
+  link_href ||= false
+  heading ||= false
+  background ||= false
+  data ||= false
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  classes = %w(gem-c-signup-link govuk-!-display-none-print)
+  classes << shared_helper.get_margin_bottom
+  classes << "gem-c-signup-link--link-only" unless heading
+  classes << "gem-c-signup-link--with-background-and-border" if background
+%>
+<% if link_text && link_href %>
+  <div class="<%= classes.join(' ') %>">
+    <div class="gem-c-signup-link__inner govuk-width-container">
+      <svg  class="gem-c-signup-link__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334">
+        <path fill="black" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/>
+      </svg>
+      <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-heading-s gem-c-signup-link__title") if heading %>
+      <%= link_to( link_text, link_href, {
+        class: "govuk-link gem-c-signup-link__link",
+        data: data
+      }) %>
+    </div>
+  </div>
+<% end %>

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

@@ -15,9 +15,9 @@
   "track-dimension-index": "29",
 } %>
 
-<%= tag.div class: "gem-c-contextual-sidebar__brexit-cta" do %>
-  <%= tag.h2 title, class: "gem-c-contextual-sidebar__brexit-heading govuk-heading-s" %>
-  <%= tag.p class: "gem-c-contextual-sidebar__brexit-text govuk-body" do %>
+<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--brexit" do %>
+  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+  <%= tag.p class: "gem-c-contextual-sidebar__text govuk-body" do %>
     <%= link_to link_text,
       link_path,
       class: "govuk-link",

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

@@ -0,0 +1,27 @@
+<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  title = t("components.related_navigation.covid_booster.title")
+  link_text = t("components.related_navigation.covid_booster.link_text")
+  link_path = t("components.related_navigation.covid_booster.link_path")
+  lang = shared_helper.t_locale("components.related_navigation.covid_booster.title")
+%>
+
+<% data_attributes = {
+  "module": "gem-track-click",
+  "track-category": "relatedLinkClicked",
+  "track-action": "1.0 Coronavirus",
+  "track-label": link_path,
+  "track-dimension": link_text,
+  "track-dimension-index": "29",
+} %>
+
+<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--covid" do %>
+  <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
+  <%= tag.p class: "gem-c-contextual-sidebar__text govuk-body" do %>
+    <%= link_to link_text,
+      link_path,
+      class: "govuk-link",
+      data: data_attributes,
+      lang: lang %>
+  <% end %>
+<% end %>

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

@@ -3,33 +3,34 @@ description: The accordion component lets users show and hide sections of relate
 govuk_frontend_components:
   - accordion
 body: |
-  This component is based on the [design system accordion component](https://design-system.service.gov.uk/components/accordion/)
-  and is currently experimental because more research is needed to validate it.  If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/components/accordion/#next-steps).
+  This component is based on the [GOV.UK Design System accordion component](https://design-system.service.gov.uk/components/accordion/)
+  and is currently experimental because more research is needed to validate it.  If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/get-in-touch/).
 
 accessibility_criteria: |
   The accordion must:
 
     * accept focus
     * be usable with a keyboard
-    * the controls must change in appearance when keyboard focus moves to it
-    * the controls must indicate when the mouse is hovered over it
+    * allow the controls to change in appearance when keyboard focus moves to it
+    * allow the controls to indicate when users hover their cursor over it
     * be usable with touch
     * be usable with voice commands
     * have visible text
     * indicate to users that each section can be expanded and collapsed
-    * inform the user when a step has been expanded or collapsed
+    * tell the user when a step has been expanded or collapsed
     * be readable when only the [text of the page is zoomed in](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text)
-    * zoom in up to 300% without the text spilling off the screen
-    * pass colour contrast
-    * the accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
-    * section content must have aria-label / aria-labelledby with a value that refers to the button that controls display of the content.
+    * zoom in up to 300% [without the text spilling off the screen](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)
+    * pass [colour contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
+    * be readable should a [user change colours](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use)
+    * associate panel content with the control that opens it using the `aria-controls` attribute
+    * have `aria-label` / `aria-labelledby` on section content with a value that refers to the button that controls display of the content
 
-  Section headings must use a button element:
+  Section headings must use a button element so that users:
 
-    * so that sections can be toggled with the space and enter keys
-    * so that sections can't be opened in a new tab or window
+    * can toggle sections with the space and enter keys
+    * cannot open sections in a new tab or window
 
-  When JavaScript is unavailable the component must:
+  When CSS and / or JavaScript is unavailable, the component must:
 
   * be fully expanded
   * not be marked as expandable
@@ -57,9 +58,9 @@ examples:
             html: <p class="govuk-body">This is the content for How people read.</p>
   with_supplied_identification:
     description: |
-      An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
+      An `id` for an individual accordion is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
 
-      The `id` must be **unique** across the domain of your service - this is because as the open / closed state of individual instances of the accordion persists across page loads using `localStorage`.
+      The `id` must be unique across the domain of your service. This is because the open or closed state of individual instances of the accordion uses `localStorage` to persist across page loads.
 
       Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes.
     data:
@@ -182,11 +183,11 @@ examples:
               </ul>'
   with_data_attributes:
     description: |
-      Adds custom data attributes to the accordion to each section. Accepts an hash, so multiple attributes can be added.
+      Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
 
       The `data_attributes` hash is for the outermost element in the accordion.
 
-      Each item can also have a `data_attributes` hash. This is placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
+      Each item can also have a `data_attributes` hash. These `data_attributes` are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
     data:
       data_attributes:
@@ -240,7 +241,7 @@ examples:
             html: <p class="govuk-body">This is the content for How people read.</p>
   with_margin_bottom:
     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 a margin bottom of 30px.
+      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 a margin bottom of `30px`.
     data:
       margin_bottom: 0
       items:
@@ -254,7 +255,7 @@ examples:
             html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_section_open:
     description: |
-      Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
+      Adding `expanded: true` to the item will mean the section defaults to being open, rather than closed. Once a user opens or closes a section, the state of each section is remembered.
     data:
       items:
         - heading:
@@ -276,13 +277,18 @@ examples:
             html: <p class="govuk-body">This is the content for How people read.</p>
   with_the_anchor_link_navigation:
     description: |
-      Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
+      Some apps require custom `id`s per accordion section heading. Custom `id`s allow you to link section headings, sometimes across multiple pages. 
+      
+      For example on [guidance pages for Content Designers, referred to as "manuals",](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations) each manual includes multiple sets of accordions and will reference between specific sections to easily access content.
 
-      This feature automatically opens accordions when an anchor link is clicked within another accordion that links to either the id of an accordion section heading or an id within the content of an accordion. This will also automatically navigate to and open accordions on page load using the same rules.
+      Using the same rules, custom `id`s automatically open accordions when users click within another accordion that links to either 
 
-      This feature won't be used if the `anchor_navigation` flag isn't passed as true to mitigate performance risk from event listeners on a large number of links.
+      * the `id` of an accordion section heading 
+      * an `id` within the content of an accordion (this will also automatically navigate to and open accordions on page load)
 
-      Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this feature aren't stored in `localStorage` so don't need to be unique across your domain, but **should still be unique in the context of the page**.
+      This feature will only be used if the `anchor_navigation` flag is passed as `true`. This mitigates performance risk from event listeners on a large number of links.
+
+      Unlike with the accordion-wide custom `id` attribute, any `id`s passed to accordion headings as part of this are not stored in `localStorage`. `id`s do not need to be unique across your domain, but should still be unique in the context of the page.
     data:
       anchor_navigation: true
       items:
@@ -305,7 +311,7 @@ examples:
             html: <p class="govuk-body">This is the content for How people read.</p>
   condensed_layout:
     description: |
-      This 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.
+      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:
@@ -397,4 +403,4 @@ examples:
                   <li>
                     <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
                   </li>
-              </ul>'
+              </ul>'

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

@@ -11,6 +11,8 @@ 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
@@ -86,69 +88,6 @@ examples:
                       - text: The Highway Code
                         href: "/guidance/the-highway-code"
                     optional: false
-  with_brexit_and_other_related_links:
-    data:
-      content_item:
-        title: "A content item"
-        links:
-          taxons:
-            - content_id: "test"
-              title: "Not Brexit"
-              phase: "live"
-              links:
-                parent_taxons:
-                  - content_id: "d6c2de5d-ef90-45d1-82d4-5f2438369eea"
-                    title: "Brexit"
-          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_brexit_related_links_and_step_by_steps:
-    data:
-      content_item:
-        title: "A content item"
-        links:
-          taxons:
-            - content_id: "d6c2de5d-ef90-45d1-82d4-5f2438369eea"
-              title: "Brexit"
-              phase: "live"
-          part_of_step_navs:
-            - title: "Choosing a micropig or micropug: step by step"
-              base_path: "/micropigs-vs-micropugs"
-              details:
-                step_by_step_nav:
-                  title: 'Stay in the UK after it leaves the EU (''settled status''): step by step'
-                  steps:
-                  - title: Check if you need to apply to the EU Settlement Scheme
-                    contents:
-                    - type: paragraph
-                      text: 'You may need to apply to the EU Settlement Scheme to continue living
-                        in the UK. '
-                    - type: list
-                      contents:
-                      - text: Check if you need to apply
-                        href: "/settled-status-eu-citizens-families/eligibility"
-                    optional: false
-                  - title: Find out what status you’ll get
-                    contents:
-                    - type: paragraph
-                      text: You’ll get settled or pre-settled status depending on how long you’ve
-                        been living in the UK. This might affect when you choose to apply.
-                    - type: list
-                      contents:
-                      - text: Find out what you’ll get
-                        href: "/settled-status-eu-citizens-families/what-settled-and-presettled-status-means"
-                    optional: false
   with_brexit_cta:
     description: For documents tagged with certain taxons defined in `brexit_cta_taxon_allow_list` we show a custom Brexit call to action element.
     data:
@@ -172,17 +111,19 @@ examples:
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
           taxons:
-            - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
-              title: "Transport"
+            - content_id: "2f8b848d-23c8-4f42-a41a-df1f81c64d0f"
+              title: "Exporting"
               phase: "live"
-  with_brexit_cta_document_exception:
-    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_document_type_exceptions`.
+  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: "30 creative teams awarded up to £100,000 each for Festival UK* 2022 R&D project"
-        content_id: "c3752802-f091-43a9-ba90-33568fccf391"
-        locale: "en"
+        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
@@ -197,17 +138,12 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
-          taxons:
-            - content_id: "e2ca2f1a-0ff3-43ce-b813-16645ff27904"
-              title: "Society and culture"
-              phase: "live"
-  with_brexit_cta_taxon_exception:
-    description: Illustrates an exception to showing the custom Brexit call to action element as defined in `brexit_cta_taxon_exception_list`.
+  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: "Local transport news story"
-        content_id: "5c82db20-7631-11e4-a3cb-005056011aef"
-        locale: "en"
+        title: "A content item"
+        document_type: smart_answer
         links:
           ordered_related_items:
           - title: Find an apprenticeship
@@ -223,11 +159,3 @@ examples:
           - title: The future of jobs and skills
             base_path: /government/collections/the-future-of-jobs-and-skills
             document_type: document_collection
-          taxons:
-            - content_id: "3b4d6319-fcef-4637-b35a-e3df76321894"
-              title: "Local transport"
-              phase: "live"
-              links:
-                parent_taxons:
-                  - content_id: "a4038b29-b332-4f13-98b1-1c9709e216bc"
-                    title: "Transport"

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

@@ -5,6 +5,11 @@ body: |
 
   This component uses JavaScript for expanding and collapsing and also for submitting form responses. This code is not compatible with Internet Explorer, so IE11 and down do not use JavaScript to submit the forms, instead falling back to a normal form submission.
 accessibility_criteria: |
+  The form must:
+
+  * be functional and accessible with JavaScript disabled
+  * be usable and accessible with stylesheets disabled
+
   Form elements in the component must:
 
   * accept focus

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

@@ -253,3 +253,32 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: Yr hyn rydym ni'n ei wneud
       lang: cy
+  with_sizes_attribute:
+    description: |
+      `sizes` is an attribute that makes use of html's native responsive images functionality.
+
+      [Read more about responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+    data:
+      href: "/not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "News headline"
+      sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px"
+  with_srcset:
+    description: |
+      `srcset` is another responsive images attribute (see `sizes` section above for info on how responsive images work).
+
+      `srcset` strings typically pull from the `asset/images` directory of a repo so use this as a starting point when writing paths for your `srcset` image keys.
+
+      Note that the below example will appear to render incorrectly as we don't want to include `srcset` example images in our component guide as this will get served to frontend apps, adding weight to the user to download.
+    data:
+      href: "/not-a-page"
+      image_src: "/assets/govuk_publishing_components/image-card-srcset/afghan-image-promo.jpg"
+      image_alt: "some meaningful alt text please"
+      heading_text: "News headline"
+      srcset:
+        /assets/govuk_publishing_components/image-card-srcset/cop26.jpg: 610w
+        /assets/govuk_publishing_components/image-card-srcset/cop26-480.jpg: 480w
+        /assets/govuk_publishing_components/image-card-srcset/cop26-320.jpg: 320w
+        /assets/govuk_publishing_components/image-card-srcset/cop26-240.jpg: 240w
+        /assets/govuk_publishing_components/image-card-srcset/cop26-170.jpg: 170w

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

@@ -31,7 +31,7 @@ examples:
       name: "address"
       type: "email"
   numeric_input:
-    description: If input is set to `type="number"` we set the component up as described in the [Design System guidance](https://design-system.service.gov.uk/components/text-input/#numbers) adding `inputmode` and `pattern`. These values can be overridden if necessary.
+    description: If input is set to `type="number"` we set the component up as described in the [GOV.UK Design System guidance](https://design-system.service.gov.uk/components/text-input/#numbers) adding `inputmode` and `pattern`. These values can be overridden if necessary.
     data:
       label:
         text: "Account number"

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

@@ -38,6 +38,15 @@ examples:
       suggestion_link_text: "You can now apply for a permit online."
       suggestion_link_url: "/permit"
 
+  with_hide:
+    description: |
+      This example is for when we want to hide by default and display to the user based on some logic,
+      either in the backend or with Javascript.
+    data:
+      suggestion_link_text: "You may be invited to fill in a questionnaire"
+      suggestion_link_url: "/questionnaire"
+      hide: true
+
   open_suggestion_link_in_new_tab:
     description: |
       When sending users to another online task, you don't want to completely hijack