govuk_publishing_components 70.1.0 → 70.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a208990405169cdf86868f1f1348fdacf2d42112b7bc2f4076bad3fc979fb296
-  data.tar.gz: 9be0a018eef194e89559ae804b341b7b9770b47acab3b27fe9d8e039eb9398ef
+  metadata.gz: c7b177c9da6fb435cb1e67132c22ed5d934c3c4d1195ebbbad43f4bdf840db6b
+  data.tar.gz: b1e988e6f1af0ea310b5aee90fa639e7eab8f1081369224569185649d0564948
 SHA512:
-  metadata.gz: 1496a72e47e1a86373ca73e6f8a4a535c5821899af6ab3b5d20f3bd20b618f20d05df9dae456d34f56616bca48600d172a384587b70147b263dce51faa0cdd4f
-  data.tar.gz: 053e638e9b073f6a49cbe4f06c3e9d83c04e1ea350c4fc1d1d456401280aeaa635408e43ff0d2ae78e478b262a151f5609fc29dc491f27796a36b58667bbd3d9
+  metadata.gz: 6d64abc0c3978040d42a6050dd242715afc67d72c1f23029a40a872c66949ece8dfcca0c5326f842ae9768121cc9c4203bd2694b5a0d667a866b4a16f730c9a6
+  data.tar.gz: 6e8a95eb759c7fad99b61bca15d2f889a181f0152dbb7e1c0911e4a720eaac5f38655105645f91574e856f8bb735701f98cfa4bd251bbb29a72d605f7fd82782

data/app/assets/images/govuk_publishing_components/icon-notification.svg

@@ -0,0 +1 @@
+<svg 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>

data/app/assets/images/govuk_publishing_components/icon-print.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_30_240)"><path d="M7.86133 1H13.4766V7H4.49219V4.02H7.86133V1ZM4.49219 10H13.4766V17H4.49219V10ZM5.61523 12H12.3535V11H5.61523V12ZM5.61523 14H12.3535V13H5.61523V14ZM5.61523 16H12.3535V15H5.61523V16Z" fill="white"/><path d="M12.3535 16H5.61523V15H12.3535V16ZM14.5996 7H17.9688V14H14.5996V18H3.36914V14H0V7H3.36914V3H4.49219V2H5.61523V1H6.73828V0H14.5996V7ZM13.4766 10H4.49219V17H13.4766V10ZM13.4766 1H7.86133V4.02H4.49219V7H13.4766V1ZM12.3535 13H5.61523V14H12.3535V13ZM12.3535 11H5.61523V12H12.3535V11Z" fill="#0B0C0C"/></g><defs><clipPath id="clip0_30_240"><rect width="17.9688" height="18" fill="white"/></clipPath></defs></svg>

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -10,8 +10,8 @@
   // e.g. 1990/01/01 or 1990-01-01 or 1990-1-1 or 1990/1/1 or 1990\1\1 or 1990\01\01
   var DATE_PATTERN_NUMERIC_2 = /\d{4}([-\/\\])\d{1,2}([-\/\\])\d{1,2}/g // eslint-disable-line no-useless-escape
 
-  // e.g. 12345678 (This originated from the UA PII Remover)
-  var DATE_PATTERN_NUMERIC_3 = /[0-9]{8}/g
+  // e.g. Matches 8 digit date strings in either DDMMYYYY or YYYYMMDD format, constrained to years between 1900 and 2099.
+  const DATE_PATTERN_NUMERIC_3 = /\b(?:(?:0[1-9]|[12]\d|3[01])(?:0[1-9]|1[0-2])(?:19|20)\d{2}|(?:19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01]))\b/g
 
   // e.g. 1(st) (of) Jan(uary) 1990 (or 90 or '90) - where the bracketed characters are optional parts that can be matched
   var DATE_PATTERN_STRING_1 = /\d{1,2}(?:st|nd|rd|th)?\s(?:of\s)?(Jan(?:uary)?|Feb(?:ruary)?|Mar(?:ch)?|Apr(?:il)?|May|Jun(?:e)?|Jul(?:y)?|Aug(?:ust)?|Sep(?:t)?(?:ember)?|Oct(?:ober)?|Nov(?:ember)?|Dec(?:ember)?)\s(?:')?(\d{4}|\d{2})/gi
@@ -33,7 +33,7 @@
 
   // 2 valid letters - optional +/space - 6 digits with optional +/spaces every 2 digits (to account for '12 34 56') - optional +/space - 1 valid letter. Case insensitive.
   // e.g. 'AB123456A', 'AB 12 34 56 A', 'ab 123456 a', 'ab 12 34 56 a', 'AB+12+34+56+A'
-  var NATIONAL_INSURANCE_NUMBER = /[A-CEGHJ-OPR-TW-Z]{2}(\s+|\++)?(\d{2}(\s+|\++)?){3}[A-D]/gi
+  var NATIONAL_INSURANCE_NUMBER = /\b[A-CEGHJ-OPR-TW-Z]{2}(\s+|\++)?(\d{2}(\s+|\++)?){3}[A-D]\b/gi
 
   function shouldStripDates () {
     var metas = document.querySelectorAll('meta[name="govuk:ga4-strip-dates"]')

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -37,11 +37,11 @@
             // If response returns active, user has subscribed to notifications
             if (active === true) {
               if (customText) {
-                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customUnsubscribeText
+                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customUnsubscribeText
               }
             } else {
               if (customText) {
-                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customSubscribeText
+                this.$module.querySelector('.gem-c-button__outline--notification').textContent = customSubscribeText
               }
             }
           }

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

@@ -101,6 +101,42 @@
   }
 }
 
+.gem-c-button__outline {
+  $gem-c-button-icon-background-width: 18px;
+  $gem-c-button-icon-background-height: 18px;
+
+  border: 1px solid govuk-colour("black", $variant: "tint-25");
+  color: govuk-functional-colour(link);
+  cursor: pointer;
+  background: no-repeat govuk-spacing(2) 50%;
+  background-size: $gem-c-button-icon-background-width $gem-c-button-icon-background-height;
+  margin: govuk-spacing(0);
+  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-button-icon-background-width);
+  text-decoration: none;
+  box-shadow: none;
+  @include govuk-font(16);
+
+  &:hover {
+    color: govuk-colour("black");
+    background-color: govuk-colour("black", $variant: "tint-95");
+  }
+
+  &:focus,
+  &:active {
+    background-color: govuk-functional-colour(focus);
+    border-color: transparent;
+    @include govuk-focused-text;
+  }
+}
+
+.gem-c-button__outline--print {
+  background-image: url("govuk_publishing_components/icon-print.svg");
+}
+
+.gem-c-button__outline--notification {
+  background-image: url("govuk_publishing_components/icon-notification.svg");
+}
+
 @include govuk-media-query($media-type: print) {
   .gem-c-button {
     @include govuk-font(16);

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

@@ -10,6 +10,18 @@
   }
 }
 
+.gem-c-intervention__dismiss-link-text {
+  text-decoration: underline;
+}
+
+.gem-c-intervention__dismiss-link-text:hover {
+  text-decoration-thickness: max(3px, .1875rem, .12em); // Same as .govuk-link
+}
+
+.gem-c-intervention__dismiss-link:focus .gem-c-intervention__dismiss-link-text, .gem-c-intervention__dismiss-link:hover {
+  text-decoration: none;
+}
+
 .gem-c-intervention--image {
   border-left: 0;
   display: flex;

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

@@ -14,42 +14,3 @@ $gem-c-print-link-background-height: 18px;
     display: block;
   }
 }
-
-.gem-c-print-link__link,
-.gem-c-print-link__button {
-  background: url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
-  background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
-  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
-  text-decoration: none;
-
-  @include govuk-device-pixel-ratio($ratio: 2) {
-    background-image: url("govuk_publishing_components/icon-print-2x.png");
-  }
-
-  &:hover {
-    background-color: govuk-colour("black", $variant: "tint-95");
-  }
-}
-
-.gem-c-print-link__link {
-  box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-25");
-
-  &:focus {
-    border: 0;
-    box-shadow: 0 $govuk-focus-width govuk-functional-colour(text);
-  }
-}
-
-.gem-c-print-link__button {
-  border: 1px solid govuk-colour("black", $variant: "tint-25");
-  color: govuk-functional-colour(link);
-  cursor: pointer;
-  margin: govuk-spacing(0);
-  @include govuk-font(16);
-
-  &:focus {
-    background-color: govuk-functional-colour(focus);
-    border-color: transparent;
-    @include govuk-focused-text;
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -1,34 +1,3 @@
-.gem-c-single-page-notification-button__submit {
-  padding: govuk-spacing(2);
-  margin: govuk-spacing(0);
-  border: 1px solid govuk-colour("black", $variant: "tint-25");
-  color: govuk-functional-colour(link);
-  cursor: pointer;
-  background: none;
-  @include govuk-font(16);
-
-  &:focus {
-    border-color: transparent;
-    @include govuk-focused-text;
-  }
-
-  &:hover {
-    background-color: govuk-colour("black", $variant: "tint-95");
-    color: govuk-functional-colour(link-hover);
-
-    &:focus {
-      color: govuk-functional-colour(text);
-      box-shadow: 0 $govuk-focus-width govuk-functional-colour(text);
-    }
-  }
-}
-
-.gem-c-single-page-notification-button__icon {
-  color: govuk-colour("black");
-  vertical-align: top;
-  margin-right: govuk-spacing(1);
-}
-
 .govuk-frontend-supported .gem-c-single-page-notification-button.js-personalisation-enhancement {
   opacity: 0;
 

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

@@ -53,60 +53,6 @@
   }
 }
 
-.gem-c-subscription-links__item--button {
-  cursor: pointer;
-  display: none;
-  padding: govuk-spacing(2);
-  border: 1px solid $gem-quiet-button-colour;
-  background-color: $gem-secondary-button-background-colour;
-  @include govuk-font(19, $weight: bold);
-
-  .govuk-frontend-supported & {
-    display: inline-block;
-  }
-
-  &:not(.brand__color) {
-    color: govuk-functional-colour(link);
-  }
-
-  &:hover {
-    color: govuk-functional-colour(link-hover);
-  }
-
-  &:visited,
-  &:active,
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:focus {
-    color: govuk-functional-colour(focus-text);
-    border: 1px solid govuk-functional-colour(focus);
-    outline: 3px solid transparent;
-  }
-
-  &:hover:not(:focus) {
-    background-color: $gem-secondary-button-hover-background-colour;
-    text-decoration: none;
-  }
-}
-
-.gem-c-subscription-links__feed-box {
-  padding: govuk-spacing(3);
-  margin-bottom: govuk-spacing(3);
-  background: govuk-colour("black", $variant: "tint-95");
-
-  .govuk-frontend-supported &.js-hidden {
-    display: none;
-  }
-}
-
-.gem-c-subscription-links__feed-hidden-description {
-  .govuk-frontend-supported & {
-    @include govuk-visually-hidden;
-  }
-}
-
 .gem-c-subscription-links__icon {
   margin-right: govuk-spacing(1);
   color: govuk-colour("black");
@@ -116,14 +62,3 @@
   transform: scale(.9);
   transform-origin: bottom left;
 }
-
-.gem-c-subscription-links--with-feed-box {
-  .gem-c-subscription-links__item--link {
-    padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
-    border: 1px solid transparent;
-
-    &:focus {
-      border-bottom-color: transparent;
-    }
-  }
-}

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -1,7 +1,6 @@
 module GovukPublishingComponents
   class ComponentGuideController < GovukPublishingComponents::ApplicationController
     append_view_path Rails.root.join("app", "views", GovukPublishingComponents::Config.component_directory_name).to_s
-    append_view_path Rails.root.join("app", "views", GovukPublishingComponents::Config.flexible_sections_directory_name).to_s
 
     MATCH_COMPONENTS = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
 
@@ -14,45 +13,29 @@ module GovukPublishingComponents
       @unused_components = unused_components_names.get_component_docs
       @components_in_use_sass = components_in_use_sass
       @components_in_use_js = components_in_use_js
-      @flexible_section_docs = flexible_section_docs.all
     end
 
     def show
-      if params[:flexible_section]
-        @component_doc = flexible_section_docs.get(params[:flexible_section])
-        @example_path = flexible_section_example_path(@component_doc.id, "default")
-        @preview_path = flexible_section_preview_path(@component_doc.id, "default")
-        @preview_all_path = flexible_section_preview_all_path(@component_doc.id)
-
-        @guide_breadcrumbs = [index_breadcrumb, flexible_section_breadcrumb(@component_doc)]
-      else
-        @component_doc = component_docs.get(params[:component])
-        @example_path = component_example_path(@component_doc.id, "default")
-        @preview_path = component_preview_path(@component_doc.id, "default")
-        @preview_all_path = component_preview_all_path(@component_doc.id)
-
-        @guide_breadcrumbs = [index_breadcrumb, component_breadcrumb(@component_doc)]
-      end
+      @component_doc = component_docs.get(params[:component])
+      @guide_breadcrumbs = [index_breadcrumb, component_breadcrumb(@component_doc)]
     end
 
     def example
-      @component_doc = params[:flexible_section] ? flexible_section_docs.get(params[:flexible_section]) : component_docs.get(params[:component])
+      @component_doc = component_docs.get(params[:component])
       @component_example = @component_doc.examples.find { |f| f.id == params[:example] }
 
-      @guide_breadcrumbs = [index_breadcrumb]
-      if params[:flexible_section]
-        @preview_path = flexible_section_preview_path(@component_doc.id, @component_example.id)
-        @guide_breadcrumbs << flexible_section_breadcrumb(@component_doc, @component_example)
-      else
-        @preview_path = component_preview_path(@component_doc.id, @component_example.id)
-        @guide_breadcrumbs << component_breadcrumb(@component_doc, @component_example)
-      end
-      @guide_breadcrumbs << { title: @component_example.name }
+      @guide_breadcrumbs = [
+        index_breadcrumb,
+        component_breadcrumb(@component_doc, @component_example),
+        {
+          title: @component_example.name,
+        },
+      ]
     end
 
     def preview
       @component_examples = []
-      @component_doc = params[:flexible_section] ? flexible_section_docs.get(params[:flexible_section]) : component_docs.get(params[:component])
+      @component_doc = component_docs.get(params[:component])
       @preview = true
 
       if params[:example].present?
@@ -91,10 +74,6 @@ module GovukPublishingComponents
       @gem_component_docs ||= ComponentDocs.new(gem_components: true)
     end
 
-    def flexible_section_docs
-      @flexible_section_docs ||= ComponentDocs.new(flexible_sections: true)
-    end
-
     def used_components_names
       @used_components_names ||= ComponentDocs.new(gem_components: true, limit_to: get_used_component_names)
     end
@@ -188,12 +167,5 @@ module GovukPublishingComponents
         h[:url] = component_doc_path(component_doc.id) if component_example
       end
     end
-
-    def flexible_section_breadcrumb(component_doc, component_example = nil)
-      {}.tap do |h|
-        h[:title] = "#{component_doc.name} (flexible section)"
-        h[:url] = flexible_section_doc_path(component_doc.id) if component_example
-      end
-    end
   end
 end

data/app/models/govuk_publishing_components/component_doc.rb

@@ -7,10 +7,9 @@ module GovukPublishingComponents
                 :component,
                 :accessibility_excluded_rules,
                 :source,
-                :embed,
-                :type
+                :embed
 
-    def initialize(component, type)
+    def initialize(component)
       @component = component
       @id = component[:id]
       @name = component[:name]
@@ -19,7 +18,6 @@ module GovukPublishingComponents
       @accessibility_excluded_rules = component[:accessibility_excluded_rules]
       @source = component[:source]
       @embed = component[:embed]
-      @type = type
     end
 
     def accessibility_criteria
@@ -90,8 +88,6 @@ module GovukPublishingComponents
     def partial_path
       if source == "gem"
         "govuk_publishing_components/components/#{id}"
-      elsif type == "flexible section"
-        "#{GovukPublishingComponents::Config.flexible_sections_directory_name}/#{id}"
       else
         "#{GovukPublishingComponents::Config.component_directory_name}/#{id}"
       end

data/app/models/govuk_publishing_components/component_docs.rb

@@ -1,11 +1,9 @@
 module GovukPublishingComponents
   # @private
   class ComponentDocs
-    def initialize(gem_components: false, limit_to: false, flexible_sections: false)
+    def initialize(gem_components: false, limit_to: false)
       @limit_to = limit_to
       @documentation_directory = gem_components ? gem_documentation_directory : app_documentation_directory
-      @documentation_directory = flexible_sections_documentation_directory if flexible_sections
-      @type = flexible_sections ? "flexible section" : "component"
     end
 
     def get(id)
@@ -24,7 +22,7 @@ module GovukPublishingComponents
   private
 
     def build(component)
-      ComponentDoc.new(component, @type)
+      ComponentDoc.new(component)
     end
 
     def fetch_component_doc_files
@@ -58,9 +56,5 @@ module GovukPublishingComponents
     def gem_documentation_directory
       Pathname.new(GovukPublishingComponents::Config.gem_directory).join("app", "views", "govuk_publishing_components", "components", "docs")
     end
-
-    def flexible_sections_documentation_directory
-      Rails.root.join("app", "views", GovukPublishingComponents::Config.flexible_sections_directory_name, "docs")
-    end
   end
 end

data/app/views/govuk_publishing_components/component_guide/_component_list.html.erb

@@ -5,11 +5,7 @@
 <ul class="govuk-list govuk-list--bullet govuk-list--spaced">
   <% local_assigns[:components].each do |component_doc| %>
     <li data-filter-item data-filter-item-search-terms="<%= component_doc.id %>">
-      <% if local_assigns[:type] == "flexible_section" %>
-        <%= link_to component_doc.name, flexible_section_doc_path(component_doc.id), class: "govuk-link" %>
-      <% else %>
-        <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
-      <% end %>
+      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
       <p class="govuk-body">
         <%= component_doc.description %>
       </p>

data/app/views/govuk_publishing_components/component_guide/component_doc/_component_output.html.erb

@@ -1,19 +1,11 @@
 <% content_for :body_classes, "gem-full-width__container", flush: true %>
-<%
-  if @component_doc.type == "component"
-    data = example.html_safe_data
-  else
-    flexible_section_class = "FlexiblePage::FlexibleSection::#{@component_doc.id.titleize.gsub(" ", "")}".constantize
-    data = { flexible_section: flexible_section_class.new(**example.html_safe_data.deep_symbolize_keys)}
-  end
-%>
 <% component = capture do %>
   <% if example.has_block? %>
-    <%= render component_doc.partial_path, data do %>
+    <%= render component_doc.partial_path, example.html_safe_data do %>
       <%= render inline: example.block %>
     <% end %>
   <% else %>
-    <%= render component_doc.partial_path, data %>
+    <%= render component_doc.partial_path, example.html_safe_data %>
   <% end %>
 <% end %>
 

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -24,7 +24,7 @@
     </div>
     <h2 class="govuk-heading-m">
       How it looks
-      <small class="govuk-!-font-size-16">(<a href="<%= @preview_path %>" class="govuk-link">preview</a>)</small>
+      <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
     </h2>
     <%= render partial: "govuk_publishing_components/component_guide/component_doc/preview", locals: { component_doc: @component_doc, example: @component_example } %>
 

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -18,13 +18,6 @@
 
 <div data-module="filter-list" data-filter-label="Search components">
   <% if !ENV["MAIN_COMPONENT_GUIDE"] %>
-    <%= render partial: "component_list", locals: {
-      heading: "Flexible sections in this application",
-      size: @flexible_section_docs.length,
-      components: @flexible_section_docs,
-      type: "flexible_section",
-    } %>
-
     <%= render partial: "component_list", locals: {
       heading: "Components in this application",
       size: @component_docs.length,

data/app/views/govuk_publishing_components/component_guide/preview.html.erb

@@ -5,17 +5,9 @@
 <% end %>
 
 <% @component_examples.each do |example| %>
-  <%
-    if @component_doc.type == "component"
-      example_path = component_example_path(@component_doc.id, example.id)
-    else
-      example_path = flexible_section_example_path(@component_doc.id, example.id)
-    end
-  %>
-
   <div class="component-guide-preview-page">
     <% if @component_examples.length > 1 %>
-      <h2 class="preview-title"><a href="<%= example_path %>"><%= example.name %></a></h2>
+      <h2 class="preview-title"><a href="<%= component_example_path(@component_doc.id, example.id) %>"><%= example.name %></a></h2>
     <% end %>
     <div data-module="test-a11y" data-excluded-rules="<%= @component_doc.accessibility_excluded_rules %>">
       <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: true %>

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -1,4 +1,4 @@
-<% content_for :title, "#{@component_doc.name} #{@component_doc.type}" %>
+<% content_for :title, "#{@component_doc.name} component" %>
 
 <% content_for :application_stylesheet do %>
   <% if @component_doc.source == "application" %>
@@ -8,7 +8,7 @@
 
 <%= render "govuk_publishing_components/components/heading", {
     text: @component_doc.name,
-    context: @component_doc.type.capitalize,
+    context: "Component",
     heading_level: 1,
     font_size: "xl",
     margin_bottom: 8,
@@ -31,9 +31,7 @@
           </div>
         </div>
       <% end %>
-      <% if @component_doc.type == "component" %>
-        <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
-      <% end %>
+      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
     </div>
   </div>
 
@@ -56,7 +54,7 @@
           text: "Overview",
           items: [
             ({ href: "#how-it-looks", text: "How it looks" } if @component_doc.display_preview? || @component_doc.display_html?),
-            { href: "#how-to-call-this-component", text: @component_doc.type == "component" ? "How to call this component" : "Passing data to this flexible section" },
+            { href: "#how-to-call-this-component", text: "How to call this component" },
             ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
             ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
           ].compact,
@@ -77,21 +75,14 @@
   <h2 class="govuk-heading-l" id="overview">Overview</h2>
   <% if @component_doc.display_preview? || @component_doc.display_html? %>
     <h3 class="govuk-heading-m" id="how-it-looks">
-      <a href="<%= @example_path %>" class="govuk-link">How it looks</a>
-      <small class="govuk-!-font-size-16">(<a href="<%= @preview_path %>" class="govuk-link">preview</a>)</small>
-      <small class="govuk-!-font-size-16">(<a href="<%= @preview_all_path %>" class="govuk-link">preview all</a>)</small>
+      <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
+      <small class="govuk-!-font-size-16">(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
+      <small class="govuk-!-font-size-16">(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
     </h3>
     <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
   <% end %>
 
-  <% if @component_doc.type == "component" %>
-    <h3 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h3>
-  <% else %>
-    <h3 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">Passing data to this flexible section</h3>
-    <div class="component-markdown component-markdown--no-margin">
-      <p>Flexible sections are not called in the way shown below, however this information serves as a reference for the data required by this flexible section.</p>
-    </div>
-  <% end %>
+  <h3 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h3>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
@@ -139,17 +130,8 @@
     <% @component_doc.other_examples.each do |example| %>
       <div class="component-example" id="<%= example.id %>">
         <h3 class="govuk-heading-m">
-          <%
-            if @component_doc.type == "component"
-              example_path = component_example_path(@component_doc.id, example.id)
-              preview_path = component_preview_path(@component_doc.id, example.id)
-            else
-              example_path = flexible_section_example_path(@component_doc.id, example.id)
-              preview_path = flexible_section_preview_path(@component_doc.id, example.id)
-            end
-          %>
-          <a href="<%= example_path %>" class="govuk-link"><%= example.name %></a>
-          <small>(<a href="<%= preview_path %>" class="govuk-link">preview</a>)</small>
+          <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
+          <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>
         </h3>
         <% if example.html_description %>
           <div class="component-markdown component-markdown--no-margin">

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

@@ -70,7 +70,7 @@
 
     <% if dismiss_text %>
       <%= tag.p class: "govuk-body govuk-!-display-none-print", data: dismiss_data_attributes do %>
-        <%= tag.a class: "govuk-link js-dismiss-link", href: dismiss_href, data: dismiss_link_data_attributes do %>
+        <%= tag.a class: "govuk-link govuk-link--no-underline gem-c-intervention__dismiss-link js-dismiss-link", href: dismiss_href, data: dismiss_link_data_attributes do %>
           <svg class="gem-c-intervention__dismiss-icon"
             width="19" height="19" viewBox="0 0 19 19"
             aria-hidden="true"
@@ -79,7 +79,7 @@
             <path d="M13.3477 5.4209L9.67383 9.09473L6 5.4209" />
             <path d="M6 13.4209L9.67383 9.74707L13.3477 13.4209" />
           </svg>
-          <%= dismiss_text %>
+          <span class="gem-c-intervention__dismiss-link-text"><%= dismiss_text %></span>
         <% end %>
       <% end %>
     <% end %>

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

@@ -9,6 +9,7 @@
 
   page_history ||= []
   page_history = Array(page_history)
+  page_history_details_ga4 ||= {}
 
   history ||= nil
   first_published ||= nil
@@ -89,6 +90,8 @@
                 title: t("components.metadata.show_all_updates", locale: :en),
                 small: true,
                 inverse: inverse,
+                ga4_attributes: page_history_details_ga4,
+                disable_ga4: disable_ga4,
               } do %>
                 <ol class="gem-c-metadata__change-history">
                   <% page_history.each do |change| %>

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

@@ -2,7 +2,7 @@
   text ||= t("components.print_link.text")
   href ||= nil
   child_data_attributes ||= {}
-  require_js ||= href.nil?
+  require_js = href.nil?
   local_assigns[:margin_bottom] ||= 3
 
   ((child_data_attributes[:module] ||= "") << " " << (require_js ? "print-link" : "button")).strip!
@@ -16,19 +16,13 @@
   component_helper.add_class("gem-c-print-link--show-without-js") unless require_js
 %>
 <%= tag.div(**component_helper.all_attributes) do %>
-  <% if require_js %>
-    <%= content_tag(:button, text, {
-        class: child_classes,
-        data: child_data_attributes,
-    }) %>
-  <% else %>
-    <%= link_to(
-      text,
-      href,
-      class: child_classes,
-      rel: "alternate",
-      data: child_data_attributes,
-      role: "button",
-    ) %>
-  <% end %>
+  <%= render "govuk_publishing_components/components/button", {
+    text: text,
+    href: href,
+    type: "button",
+    print_button: true,
+    data_attributes: child_data_attributes,
+    rel: "alternate",
+    margin_bottom: 0,
+  } %>
 <% end %>

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

@@ -18,9 +18,6 @@
   component_helper.add_class("govuk-!-display-none-print")
   component_helper.add_data_attribute({ module: ga4_data_attributes[:module] }) if ga4_data_attributes
 %>
-<% button_text = capture do %>
-  <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><span class="gem-c-single-page-notication-button__text"><%= spnb_helper.button_text %></span>
-<% end %>
 <%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.form action: spnb_helper.form_action, method: "POST" do %>
     <input type="hidden" name="base_path" value="<%= spnb_helper.base_path %>">
@@ -28,12 +25,12 @@
       <input type="hidden" name="<%= spnb_helper.skip_account_param %>" value="true">
       <input type="hidden" name="link" value="<%= spnb_helper.base_path %>">
     <% end %>
-    <%= content_tag(:button, button_text, {
-      class: "gem-c-single-page-notification-button__submit",
-      type: "submit",
-      data: {
+    <%= render "govuk_publishing_components/components/button", {
+      text: spnb_helper.button_text,
+      notification_button: true,
+      data_attributes: {
         ga4_link: ga4_link_data_attributes,
       },
-    }) %>
+    } %>
   <% end %>
 <% end if spnb_helper.base_path %>

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

@@ -1,13 +1,8 @@
 <%
-  brand ||= false
-  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-
   sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.add_class("gem-c-subscription-links govuk-!-display-none-print #{brand_helper.brand_class}")
-  component_helper.add_class("gem-c-subscription-links--with-feed-box") if sl_helper.feed_link_box_value
-  component_helper.add_data_attribute({ module: "gem-toggle" }) if sl_helper.feed_link_box_value
+  component_helper.add_class("gem-c-subscription-links govuk-!-display-none-print")
 
   hide_heading ||= false
 
@@ -27,46 +22,26 @@
             </svg><%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale,
           } %>
         </li>
       <% end %>
 
-      <% if sl_helper.feed_link_box_value || sl_helper.feed_link %>
+      <% if sl_helper.feed_link %>
         <li class="gem-c-subscription-links__list-item<%= " gem-c-subscription-links__list-item--small" if local_assigns[:small_form] == true %>">
           <% feed_link_text = capture do %>
             <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,
-            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 gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item 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>
-
-    <% if sl_helper.feed_link_box_value %>
-      <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
-        <h3 class="gem-c-subscription-links__feed-hidden-description visuallyhidden govuk-!-margin-top-0"><%= sl_helper.feed_link_text %></h3>
-        <div lang="en">
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: t("components.subscription_links.feed_link_label"),
-            },
-            name: "feed-reader-box",
-            value: feed_link_box_value,
-          } %>
-        </div>
-      </div>
-    <% end %>
   <% end %>
 <% end %>

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

@@ -64,6 +64,14 @@ examples:
     data:
       text: Secondary solid button
       secondary_solid: true
+  print_button:
+    data:
+      text: Print this page
+      print_button: true
+  notification_button:
+    data:
+      text: Get emails about this page
+      notification_button: true
   destructive_button:
     data:
       text: Destructive button

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

@@ -42,6 +42,8 @@ examples:
       This will set up an expandable section on the page, with a top border, to let users toggle the display of the page history. It also includes a hidden H2 heading of 'Updates to this page'. This heading will not be included if one is passed to the component using the `title` option.
 
       This example includes an expandable 'part of' section to show both toggling elements working together in one component instance.
+
+      GA4 attributes can also be passed to the 'Show all updates' details component to override the default tracking attributes on that component using `page_history_details_ga4`.
     data:
       border_top: true
       part_of:
@@ -68,6 +70,8 @@ examples:
       - display_time: 14th October 2000
         note: Updated information on pupil premium reviews and what information schools need to publish on their websites.
         timestamp: 2000-10-14T15:42:37.000+00:00
+      page_history_details_ga4:
+        section: Footer
   extensive:
     data:
       from:

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

@@ -1,9 +1,8 @@
 name: Service Navigation
-description: Renders a box with a link to sign up for email notifications
+description: Helps users understand that they're using your service and lets them navigate around your service.
 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
 accessibility_excluded_rules:
   - landmark-unique
 uses_component_wrapper_helper: true

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

@@ -32,20 +32,6 @@ examples:
       email_signup_link_text: 'Get notifications'
       feed_link: '/foreign-travel-advice/singapore.atom'
       feed_link_text: 'View feed'
-  with_copyable_feed_link:
-    description: |
-      This option changes the feed link to a toggle control, which opens a hidden element containing an input prepopulated with the value passed to the component, usually a URL to an atom feed. This uses the [form input](/component-guide/input) component.
-
-      Note that this option overrides the feed_link option, so if both are passed feed_link is ignored. Note that a value for email_signup_link can also be passed as normal.
-    data:
-      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
-      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
-  with_number_10_branding:
-    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
-    data:
-      brand: 'prime-ministers-office-10-downing-street'
-      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
-      feed_link: '/foreign-travel-advice/singapore.atom'
   with_data_attributes_on_links:
     description: Data attributes can be passed for each link as shown.
     data:
@@ -53,9 +39,9 @@ examples:
       email_signup_link_data_attributes: {
         an_attribute: some_value
       }
-      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
+      feed_link: '/foreign-travel-advice/singapore.atom'
       feed_link_data_attributes: {
-        an_attribute: some_value
+        an_attribute: some_other_value
       }
   as_small_form:
     data:

data/config/routes.rb

@@ -2,13 +2,6 @@ GovukPublishingComponents::Engine.routes.draw do
   get "/audit" => "audit#show", as: :audit
   get "/applications" => "applications_page#show", as: :apps
 
-  scope "/flexible-sections/" do
-    get ":flexible_section" => "component_guide#show", as: :flexible_section_doc
-    get ":flexible_section/preview" => "component_guide#preview", as: :flexible_section_preview_all
-    get ":flexible_section/:example" => "component_guide#example", as: :flexible_section_example
-    get ":flexible_section/:example/preview" => "component_guide#preview", as: :flexible_section_preview
-  end
-
   root to: "component_guide#index", as: :component_guide
   get ":component" => "component_guide#show", as: :component_doc
   get ":component/preview" => "component_guide#preview", as: :component_preview_all

data/lib/govuk_publishing_components/config.rb

@@ -25,10 +25,6 @@ module GovukPublishingComponents
       APP_COMPONENT_DIRECTORY
     end
 
-    def self.flexible_sections_directory_name
-      "flexible_page/flexible_sections"
-    end
-
     def self.gem_directory
       Gem::Specification.find_by_name("govuk_publishing_components").gem_dir
     end

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -19,6 +19,8 @@ module GovukPublishingComponents
                   :secondary,
                   :secondary_quiet,
                   :secondary_solid,
+                  :print_button,
+                  :notification_button,
                   :destructive,
                   :name,
                   :value,
@@ -51,6 +53,8 @@ module GovukPublishingComponents
         @secondary = local_assigns[:secondary]
         @secondary_quiet = local_assigns[:secondary_quiet]
         @secondary_solid = local_assigns[:secondary_solid]
+        @print_button = local_assigns[:print_button]
+        @notification_button = local_assigns[:notification_button]
         @destructive = local_assigns[:destructive]
         @name = local_assigns[:name]
         @value = local_assigns[:value]
@@ -125,6 +129,10 @@ module GovukPublishingComponents
         css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
         css_classes << "govuk-button--secondary" if secondary_solid
         css_classes << "govuk-button--warning" if destructive
+
+        css_classes = %w[gem-c-button__outline gem-c-button__outline--print] if print_button
+        css_classes = %w[gem-c-button__outline gem-c-button__outline--notification] if notification_button
+
         if margin_bottom && !info_text
           margin_class = get_margin_bottom(margin_bottom, false)
           css_classes << margin_class

data/lib/govuk_publishing_components/presenters/subscription_links_helper.rb

@@ -1,14 +1,12 @@
 module GovukPublishingComponents
   module Presenters
     class SubscriptionLinksHelper
-      attr_reader :feed_box_id, :email_signup_link, :email_signup_link_data_attributes, :feed_link_box_value
+      attr_reader :email_signup_link, :email_signup_link_data_attributes
 
       def initialize(local_assigns)
         @local_assigns = local_assigns
-        @feed_box_id = "feed-reader-#{SecureRandom.hex(2)}"
         @email_signup_link = @local_assigns[:email_signup_link]
         @email_signup_link_data_attributes = @local_assigns[:email_signup_link_data_attributes]
-        @feed_link_box_value = @local_assigns[:feed_link_box_value]
       end
 
       def email_signup_link_text
@@ -24,7 +22,7 @@ module GovukPublishingComponents
       end
 
       def component_data_is_valid?
-        email_signup_link.present? || feed_link.present? || feed_link_box_value.present?
+        email_signup_link.present? || feed_link.present?
       end
 
       def tracking_is_present?
@@ -32,16 +30,11 @@ module GovukPublishingComponents
       end
 
       def feed_link
-        return "#" if feed_link_box_value
-
         @local_assigns[:feed_link]
       end
 
       def feed_link_data_attributes
-        data = @local_assigns[:feed_link_data_attributes] || {}
-        data[:controls] = feed_box_id if feed_link_box_value
-        data[:expanded] = "false" if feed_link_box_value
-        data
+        @local_assigns[:feed_link_data_attributes] || {}
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "70.1.0".freeze
+  VERSION = "70.2.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 70.1.0
+  version: 70.2.1
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -456,8 +456,8 @@ files:
 - app/assets/images/govuk_publishing_components/icon-close.svg
 - app/assets/images/govuk_publishing_components/icon-file-download.svg
 - app/assets/images/govuk_publishing_components/icon-important.svg
-- app/assets/images/govuk_publishing_components/icon-print-2x.png
-- app/assets/images/govuk_publishing_components/icon-print.png
+- app/assets/images/govuk_publishing_components/icon-notification.svg
+- app/assets/images/govuk_publishing_components/icon-print.svg
 - app/assets/images/govuk_publishing_components/icon-search.svg
 - app/assets/images/govuk_publishing_components/image-card-srcset/cop26-170.jpg
 - app/assets/images/govuk_publishing_components/image-card-srcset/cop26-240.jpg
@@ -2117,7 +2117,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.21
+rubygems_version: 4.0.22
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []