govuk_publishing_components 27.17.0 → 28.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss

@@ -0,0 +1,141 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into columns
+///
+/// The items can flow from horizontally or vertically.
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+/// @param {String} $direction - (optional) the flow of the items in the grid:
+///   * `row` goes from the left to right, top to bottom one row at a time
+///   * `column` goes from the top to bottom, left to right one column at a time
+///
+/// @example scss - A 7 item 2 column layout going left to right, top to bottom.
+///  .container {
+///    @include columns($items: 7, $columns: 2);
+///  }
+///
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $selector:"div");
+///  }
+///
+/// @example scss - A 16 item 2 column layout going from top to bottom
+///   elements.
+///  .container {
+///    @include columns($items: 9, $columns: 3, $flow:"column");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*", $flow: row) {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: $flow;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every child element.
+  @if $flow == "row" {
+    $grid: ();
+    $counter: 0;
+
+    @for $row from 1 through $rows {
+      $this-row: ();
+
+      @for $column from 1 through $columns {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    @for $row-count from 1 through length($grid) {
+      $this-column: nth($grid, $row-count);
+
+      @for $item-index from 1 through length($this-column) {
+        $this-item: nth($this-column, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $item-index;
+          -ms-grid-row: $row-count;
+        }
+      }
+    }
+  }
+
+  @if $flow == "column" {
+    // This creates a list of lists to represent the columns and rows; for
+    // example, a 7 item 2 column list would create this:
+    //   [
+    //     [1, 2, 3, 4 ] // column one
+    //     [5, 6, 7] // column two
+    //   ]
+    $grid: ();
+    $counter: 0;
+
+    @for $column from 1 through $columns {
+      $this-row: ();
+
+      @for $row from 1 through $rows {
+        $counter: $counter + 1;
+
+        // stylelint-disable max-nesting-depth
+        @if $counter <= $items {
+          $this-row: append($this-row, $counter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+
+      $grid: append($grid, $this-row, "comma");
+    }
+
+    // Now we can loop through the list of lists to create the rules needed for
+    // the older grid syntax; fist looping through the list to get the number
+    // needed for the column, then looping again to get the number for the grid
+    // row:
+    @for $column_index from 1 through length($grid) {
+      $this-row: nth($grid, $column_index);
+
+      @for $item-index from 1 through length($this-row) {
+        $this-item: nth($this-row, $item-index);
+
+        & > #{$selector}:nth-child(#{$this-item}) {
+          -ms-grid-column: $column_index;
+          -ms-grid-row: $item-index;
+        }
+      }
+    }
+  }
+}

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

@@ -21,6 +21,7 @@
   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
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"

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

@@ -9,7 +9,7 @@
   <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" 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><%= component_helper.button_text %>
 <% end %>
 <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
-  <%= tag.form class: "gem-c-single-page-notification-button", action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+  <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
     <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
     <%= content_tag(:button, button_text, {
       class: "govuk-body-s gem-c-single-page-notification-button__submit",

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

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

@@ -44,6 +44,9 @@ examples:
   large_version:
     data:
       size: "large"
+  large_version_on_mobile_only:
+    data:
+      size: "large-mobile"
   change_field_name:
     description: To be used if you need to change the default name 'q'
     data:

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

@@ -0,0 +1,39 @@
+name: Signup link
+description: Renders a box with a link to sign up for email notifications
+accessibility_criteria: |
+  - the component must use the correct heading level for the page
+  - text should have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+  - the icon must not be focusable or shown to screenreaders
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+  with_background_and_border:
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      background: true
+  link_only:
+    description: If no heading text is passed through, a more compact, link only version is rendered.
+    data:
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+  with_custom_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 no margin bottom.
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      margin_bottom: 8
+  with_custom_heading_level:
+    description: Override default heading level by passing through `heading_level` parameter (defaults to `h3`).
+    data:
+      heading: 'Sign up for email notifications'
+      link_text: 'Click right here to sign up!!'
+      link_href: '/this-signs-you-up'
+      heading_level: 1

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -1,9 +1,10 @@
 <form action="/contact/govuk/problem_reports"
   id="something-is-wrong"
-  class="gem-c-feedback__form js-feedback-form js-hidden"
+  class="gem-c-feedback__form js-feedback-form"
   data-track-category="Onsite Feedback"
   data-track-action="GOV.UK Send Form"
-  method="post">
+  method="post"
+  hidden>
   <button
     class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
     data-track-category="Onsite Feedback"
@@ -15,26 +16,28 @@
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-hidden js-errors" tabindex="-1"></div>
+      <div class="gem-c-feedback__error-summary gem-c-feedback__js-show js-errors" tabindex="-1" hidden></div>
 
       <input type="hidden" name="url" value="<%= url_without_pii %>">
 
       <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
       <p id="feedback_explanation" class="gem-c-feedback__form-paragraph"><%= t("components.feedback.dont_include_personal_info") %></p>
 
-      <%= render "govuk_publishing_components/components/input", {
+      <%= render "govuk_publishing_components/components/textarea", {
         label: {
           text: t("components.feedback.what_doing")
         },
         name: "what_doing",
+        rows: 3,
         describedby: "feedback_explanation"
       } %>
 
-      <%= render "govuk_publishing_components/components/input", {
+      <%= render "govuk_publishing_components/components/textarea", {
         label: {
           text: t("components.feedback.what_wrong")
         },
-        name: "what_wrong"
+        name: "what_wrong",
+        rows: 3
       } %>
 
       <%= render "govuk_publishing_components/components/button", {

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -1,6 +1,6 @@
 <form action="/contact/govuk/email-survey-signup"
   id="page-is-not-useful"
-  class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form js-hidden"
+  class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form"
   data-track-category="yesNoFeedbackForm"
   data-track-action="Send Form"
   method="post">
@@ -9,13 +9,14 @@
     data-track-category="yesNoFeedbackForm"
     data-track-action="ffFormClose"
     aria-controls="page-is-not-useful"
-    aria-expanded="true">
+    aria-expanded="true"
+    hidden>
     <%= t("components.feedback.close") %>
   </button>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds" id="survey-wrapper">
-      <div class="gem-c-feedback__error-summary js-hidden js-errors" tabindex="-1"></div>
+      <div class="gem-c-feedback__error-summary js-errors" tabindex="-1" hidden></div>
 
       <input name="email_survey_signup[survey_id]" type="hidden" value="footer_satisfaction_survey">
       <input name="email_survey_signup[survey_source]" type="hidden" value="<%= path_without_pii %>">

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -3,10 +3,10 @@
 %>
 
 <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
-  <div class="gem-c-feedback__prompt-questions js-prompt-questions">
+  <div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
     <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
     <!-- Maybe button exists only to try and capture clicks by bots -->
-    <button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
+    <button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" hidden>
       <%= t("components.feedback.maybe") %>
     </button>
     
@@ -23,10 +23,10 @@
       </li>
     </ul>
   </div>
-  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success js-hidden" role="alert">
+  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
     <%= t("components.feedback.thank_you_for_feedback") %>
   </div>
-  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
+  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
     <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
       <%= t("components.feedback.something_wrong") %>
     </button>

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,6 +1,6 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
-    <span class="govuk-header__logotype gem-c-header__logotype">
+    <span class="govuk-header__logotype gem-c-header__logotype header-logo">
       <!--[if gt IE 8]><!-->
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
         <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>