govuk_publishing_components 66.4.1 → 66.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19af51f046dbc68b76e065963974758d205b625bd2b025f15a9cf317429c05ca
-  data.tar.gz: b83ab22b5b85c12abf3b22294482c7575c2b822d2d8553c7f72c3b8bab58f881
+  metadata.gz: fd72494a66aaa74f9aaae8ad23d1f728ce1cde7af9eaad8bf7f2796e3ebacdf0
+  data.tar.gz: a698a3a427cc0443f5a1d83fe27d8794caa129c9ff02a9d2572a6b19e2a02c37
 SHA512:
-  metadata.gz: 334265c53864c184cd064d7a1f16933db51c9bbac48eeed29accd96d59d4db690eb4c7752797a4e1156fca2f7b0172422f36412600fe809aa3e1051ff289e57e
-  data.tar.gz: bef35d323f9fa89eee4b65bb5d22dee1aaec5e1312c11f1b0acf99ada4f9e7f67fa43d8c33261a5f4683a3ae480ee9d4ff2b4a0403d5b5313f020269454202aa
+  metadata.gz: dd7c76ecfc56805e155ff091a41079d764b6f4fa9bdd4a4eaf29b9759b0773fa8b691e02c7cebd046d27de7b97bd8ab9e109e5fe6e128b3ce1a93426bdfc1200
+  data.tar.gz: 0eb74f2a10610b60e6beb6be3cda9a10b234fa1e340e7f63532f88463e481a488ebf26df6004729a86b4496738475c1f57668dd3ed58c2118373a8aced66ae71

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -74,7 +74,7 @@
     if (performance.navigation && typeof performance.navigation.type !== "undefined") {
       return performance.navigation.type;
     }
-    return "";
+    return undefined;
   }
   /**
   * Returns the delivery type for the current document. To differentiate between the valid empty
@@ -286,7 +286,19 @@
     return sinceNavigationStart;
   }
 
-  var version = "4.4.3";
+  var sendBeaconFallback = function (url, data) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("content-type", "application/json");
+    xhr.send(data);
+    return true;
+  };
+  var sendBeaconImpl = "sendBeacon" in navigator ? navigator.sendBeacon.bind(navigator) : sendBeaconFallback;
+  function postJson(url, data) {
+    return sendBeaconImpl(url, data);
+  }
+
+  var version = "4.5.0";
   var pkg = {
     version: version};
 
@@ -309,14 +321,6 @@
     return parseFloat(parts[0] + "." + padStart(parts[1], 2, "0") + padStart(parts[2], 2, "0"));
   }
 
-  var sendBeaconFallback = function (url, data) {
-    var xhr = new XMLHttpRequest();
-    xhr.open("POST", url, true);
-    xhr.setRequestHeader("content-type", "application/json");
-    xhr.send(String(data));
-    return true;
-  };
-  var sendBeacon = "sendBeacon" in navigator ? navigator.sendBeacon.bind(navigator) : sendBeaconFallback;
   /**
   * Some values should only be reported if they are non-zero. The exception to this is when the page
   * was prerendered or restored from BF cache
@@ -455,7 +459,7 @@
         startTime: this.startTime,
       }, metricData);
       try {
-        if (sendBeacon(beaconUrl, JSON.stringify(payload))) {
+        if (postJson(beaconUrl, JSON.stringify(payload))) {
           this.isSent = true;
           this.logger.logEvent(83 /* LogEvent.PostBeaconSent */, [beaconUrl, payload]);
           emit("beacon", payload);
@@ -501,20 +505,21 @@
     return {
       allowEmptyPostBeacon: getProperty(obj, "allowEmptyPostBeacon", false),
       auto: autoMode,
+      errorBeaconDelay: getProperty(obj, "errorBeaconDelay", 2000),
       beaconUrl: getProperty(obj, "beaconUrl", luxOrigin + "/lux/"),
       beaconUrlFallback: getProperty(obj, "beaconUrlFallback"),
       beaconUrlV2: getProperty(obj, "beaconUrlV2", "https://beacon.speedcurve.com/store"),
       conversions: getProperty(obj, "conversions"),
       cookieDomain: getProperty(obj, "cookieDomain"),
       customerid: getProperty(obj, "customerid"),
-      errorBeaconUrl: getProperty(obj, "errorBeaconUrl", luxOrigin + "/error/"),
+      errorBeaconUrl: getProperty(obj, "errorBeaconUrl", "https://beacon.speedcurve.com/store/error"),
       interactionBeaconDelay: getProperty(obj, "interactionBeaconDelay", 200),
       jspagelabel: getProperty(obj, "jspagelabel"),
       label: getProperty(obj, "label"),
       maxAttributionEntries: getProperty(obj, "maxAttributionEntries", 25),
       maxBeaconUrlLength: getProperty(obj, "maxBeaconUrlLength", 8190),
       maxBeaconUTEntries: getProperty(obj, "maxBeaconUTEntries", 20),
-      maxErrors: getProperty(obj, "maxErrors", 5),
+      maxErrors: getProperty(obj, "maxErrors", 64),
       maxMeasureTime: getProperty(obj, "maxMeasureTime", 60000),
       measureUntil: getProperty(obj, "measureUntil", spaMode ? "pagehidden" : "onload"),
       minMeasureTime: getProperty(obj, "minMeasureTime", 0),
@@ -645,6 +650,47 @@
     return selector;
   }
 
+  // This is the same value as MAX_ERRORS_PER_BEACON in speedcurve-rum-beacons-edge-service
+  var MAX_ERRORS_PER_BEACON = 64;
+  var buffer = [];
+  var pendingContext = null;
+  var pendingConfig = null;
+  var flushTimer = null;
+  function queueErrorBeacon(config, error, errorTime, context) {
+    // If the page ID has changed since the last error (e.g. due to a SPA navigation), or if the
+    // buffer is full, flush the current beacon before adding the new error.
+    var pageChanged = pendingContext && pendingContext.pageId !== context.pageId;
+    var bufferFull = buffer.length >= MAX_ERRORS_PER_BEACON;
+    if (pageChanged || bufferFull) {
+      flushErrorBeacon();
+    }
+    pendingContext = context;
+    pendingConfig = config;
+    buffer.push({
+      errorTime: errorTime,
+      filename: error.filename,
+      lineno: error.lineno,
+      colno: error.colno,
+      message: error.message,
+    });
+    if (flushTimer === null) {
+      flushTimer = setTimeout(flushErrorBeacon, config.errorBeaconDelay);
+    }
+  }
+  function flushErrorBeacon() {
+    if (flushTimer !== null) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (buffer.length === 0 || !pendingContext || !pendingConfig) {
+      return;
+    }
+    postJson(pendingConfig.errorBeaconUrl, JSON.stringify(Object.assign({}, pendingContext, { errors: buffer })));
+    buffer = [];
+    pendingContext = null;
+    pendingConfig = null;
+  }
+
   var KNOWN_TRACKING_PARAMS = [
     "utm_source",
     "utm_campaign",
@@ -1268,28 +1314,21 @@
         var isLuxError = e.filename.indexOf("/lux.js?") > -1 || e.message.indexOf("LUX") > -1;
         if (isLuxError || (nErrors <= globalConfig.maxErrors && _sample())) {
           // Sample & limit other errors.
-          // Send the error beacon.
-          new Image().src =
-          globalConfig.errorBeaconUrl +
-          "?v=" +
-          versionAsFloat() +
-          "&id=" +
-          getCustomerId() +
-          "&fn=" +
-          encodeURIComponent(e.filename) +
-          "&ln=" +
-          e.lineno +
-          "&cn=" +
-          e.colno +
-          "&msg=" +
-          encodeURIComponent(e.message) +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          (connectionType() ? "&ct=" + connectionType() : "") +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
+          queueErrorBeacon(globalConfig, e, msSincePageInit(), {
+            customerId: getCustomerId(),
+            pageId: gSyncId,
+            sessionId: gUid,
+            scriptVersion: VERSION,
+            hostname: document.location.hostname,
+            pathname: document.location.pathname,
+            pageLabel: _getPageLabel(),
+            connectionType: connectionType(),
+            deliveryType: deliveryType(),
+            navigationType: navigationType(),
+            deviceMemory: typeof navigator.deviceMemory === "number" ? round(navigator.deviceMemory) : undefined,
+            flags: gFlags,
+            customData: getAllCustomData(),
+          });
         }
       }
     }
@@ -2272,23 +2311,16 @@
       return getNavigationEntry().encodedBodySize || 0;
     }
     // Return the connection type based on Network Information API.
-    // Note this API is in flux.
     function connectionType() {
       var c = navigator.connection;
-      var connType = "";
       if (c && c.effectiveType) {
-        connType = c.effectiveType;
+        var connType = c.effectiveType;
         if ("slow-2g" === connType) {
-          connType = "Slow 2G";
-        }
-        else if ("2g" === connType || "3g" === connType || "4g" === connType || "5g" === connType) {
-          connType = connType.toUpperCase();
-        }
-        else {
-          connType = connType.charAt(0).toUpperCase() + connType.slice(1);
+          return "Slow 2G";
         }
+        return connType.toUpperCase();
       }
-      return connType;
+      return undefined;
     }
     // Return an array of image elements that are in the top viewport.
     function imagesATF() {
@@ -2506,6 +2538,7 @@
       var ds = docSize();
       var ct = connectionType();
       var dt = deliveryType();
+      var navType = navigationType();
       // Note some page stat values (the `PS` query string) are non-numeric. To make extracting these
       // values easier, we append an underscore "_" to the value. Values this is used for include
       // connection type (ct) and delivery type (dt).
@@ -2547,7 +2580,7 @@
       "er" +
       nErrors +
       "nt" +
-      navigationType() +
+      (typeof navType !== "undefined" ? navType : "") +
       (navigator.deviceMemory ? "dm" + round(navigator.deviceMemory) : "") + // device memory (GB)
       (sIx ? "&IX=" + sIx : "") +
       (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +

data/app/assets/stylesheets/component_guide/application.scss

@@ -457,10 +457,6 @@ $code-delete-bg: #fadddd;
   background: govuk-colour("white");
 }
 
-.component-doc__content-list {
-  margin-top: govuk-spacing(5);
-}
-
 .component__application-name {
   display: block;
   font-weight: normal;
@@ -477,22 +473,42 @@ $code-delete-bg: #fadddd;
   }
 }
 
-.table-container {
+.gem-full-width__container {
   container-type: inline-size;
-  container-name: page;
+  container-name: gem_page;
 }
 
-.table-wrapper {
+.full-width__table-wrapper {
   .govuk-table {
     display: block;
     overflow-x: scroll;
   }
 }
 
-@container page (width > 1040px) {
+.gem-full-width__element {
+  padding: 0;
+  padding-bottom: 0.1px; // forces child margin inside
+  border: 0;
+  margin-left: -(govuk-spacing(3));
+  margin-right: -(govuk-spacing(3));
+  border-top: solid 1px $govuk-border-colour;
+  border-bottom: solid 1px $govuk-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    margin-left: -(govuk-spacing(6));
+    margin-right: -(govuk-spacing(6));
+  }
+}
+
+@container gem_page (width > 1040px) {
   $w: 960px;
 
-  .table-wrapper {
+  .gem-full-width__element {
+    margin-left: calc((-100cqw + $w) / 2);
+    margin-right: calc((-100cqw + $w) / 2);
+  }
+
+  .full-width__table-wrapper {
     position: relative;
     z-index: 0;
     box-sizing: border-box;
@@ -513,8 +529,8 @@ $code-delete-bg: #fadddd;
 .govuk-tabs {
   $w: 920px;
 
-  @container page (width > 1040px) {
-    .table-wrapper {
+  @container gem_page (width > 1040px) {
+    .full-width__table-wrapper {
       margin-left: calc(((-100cqw + $w) / 2) - 1px);
       margin-right: calc(((-100cqw + $w) / 2) - 1px);
 

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -1,6 +1,7 @@
 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_-]+(?=['"])/
 
@@ -13,28 +14,45 @@ 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
-      @component_doc = component_docs.get(params[:component])
-      @guide_breadcrumbs = [index_breadcrumb, component_breadcrumb(@component_doc)]
+      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
     end
 
     def example
-      @component_doc = component_docs.get(params[:component])
+      @component_doc = params[:flexible_section] ? flexible_section_docs.get(params[:flexible_section]) : component_docs.get(params[:component])
       @component_example = @component_doc.examples.find { |f| f.id == params[:example] }
-      @guide_breadcrumbs = [
-        index_breadcrumb,
-        component_breadcrumb(@component_doc, @component_example),
-        {
-          title: @component_example.name,
-        },
-      ]
+
+      @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 }
     end
 
     def preview
       @component_examples = []
-      @component_doc = component_docs.get(params[:component])
+      @component_doc = params[:flexible_section] ? flexible_section_docs.get(params[:flexible_section]) : component_docs.get(params[:component])
       @preview = true
 
       if params[:example].present?
@@ -73,6 +91,10 @@ 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
@@ -166,5 +188,12 @@ 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,9 +7,10 @@ module GovukPublishingComponents
                 :component,
                 :accessibility_excluded_rules,
                 :source,
-                :embed
+                :embed,
+                :type
 
-    def initialize(component)
+    def initialize(component, type)
       @component = component
       @id = component[:id]
       @name = component[:name]
@@ -18,6 +19,7 @@ module GovukPublishingComponents
       @accessibility_excluded_rules = component[:accessibility_excluded_rules]
       @source = component[:source]
       @embed = component[:embed]
+      @type = type
     end
 
     def accessibility_criteria
@@ -88,6 +90,8 @@ 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,9 +1,11 @@
 module GovukPublishingComponents
   # @private
   class ComponentDocs
-    def initialize(gem_components: false, limit_to: false)
+    def initialize(gem_components: false, limit_to: false, flexible_sections: 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)
@@ -22,7 +24,7 @@ module GovukPublishingComponents
   private
 
     def build(component)
-      ComponentDoc.new(component)
+      ComponentDoc.new(component, @type)
     end
 
     def fetch_component_doc_files
@@ -56,5 +58,9 @@ 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/models/govuk_publishing_components/component_example.rb

@@ -83,6 +83,10 @@ module GovukPublishingComponents
       !!context["black_background"]
     end
 
+    def full_width?
+      context["full_width"].present?
+    end
+
     def html_description
       markdown_to_html(description) if description.present?
     end

data/app/models/govuk_publishing_components/shared_accessibility_criteria.rb

@@ -2,7 +2,7 @@ module GovukPublishingComponents
   module SharedAccessibilityCriteria
     def self.link
       "
-Links in the component must:
+Links must:
 
 - accept focus
 - be focusable with a keyboard
@@ -19,7 +19,7 @@ Links in the component must:
 
     def self.button
       "
-Buttons in the component must:
+Buttons must:
 
 - accept focus
 - be focusable with a keyboard

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

@@ -1,5 +1,5 @@
 <% content_for :title, "Applications consistency" %>
-<% content_for :body_classes, "table-container" %>
+<% content_for :body_classes, "gem-full-width__container" %>
 
 <%= render "govuk_publishing_components/components/back_link", {
   href: "/component-guide",
@@ -17,7 +17,7 @@
 <% end %>
 
 <div data-module="filter-list">
-  <div class="table-wrapper">
+  <div class="full-width__table-wrapper">
     <table class="govuk-table">
       <thead class="govuk-table__head">
         <tr class="govuk-table__row">

data/app/views/govuk_publishing_components/audit/_component_contents.html.erb

@@ -1,7 +1,7 @@
 <p class="govuk-body">
   Numbers in table headers show column totals. Numbers in table cells show number of lines in files. Note that component test files cannot currently be detected in applications that use minitest instead of Rspec.</p>
 </p>
-<div class="table-wrapper">
+<div class="full-width__table-wrapper">
   <table class="govuk-table">
     <thead class="govuk-table__head">
       <tr class="govuk-table__row" <% if show_application_name %> data-audit-headings<% end %>>

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

@@ -1,5 +1,5 @@
 <% content_for :title, "Component audit" %>
-<% content_for :body_classes, "table-container" %>
+<% content_for :body_classes, "gem-full-width__container" %>
 
 <%= render "govuk_publishing_components/components/back_link", {
   href: "/component-guide",

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

@@ -5,7 +5,11 @@
 <ul class="govuk-list govuk-list--bullet govuk-list--spaced">
   <% local_assigns[:components].each do |component_doc| %>
     <li data-filter-item>
-      <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
+      <% 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 %>
       <p class="govuk-body">
         <%= component_doc.description %>
       </p>

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

@@ -1,7 +1,12 @@
-<div class="component-guide-preview component-guide-preview--no-margin
-            <% if example.right_to_left? %>direction-rtl<% end %>
-            <% if example.dark_background? %>dark-background<% end %>
-            <% if example.black_background? %>black-background<% end %>
-            <% if preview_page %>component-guide-preview--simple<% end %>">
+<%
+  classes = %w[component-guide-preview component-guide-preview--no-margin]
+  classes << "direction-rtl" if example.right_to_left?
+  classes << "dark-background" if example.dark_background?
+  classes << "black-background" if example.black_background?
+  classes << "component-guide-preview--simple" if preview_page
+  classes << "gem-full-width__element" if example.full_width?
+%>
+
+<%= tag.div class: classes do %>
   <%= render "govuk_publishing_components/component_guide/component_doc/component_output", example: example, component_doc: component_doc %>
-</div>
+<% end %>

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

@@ -1,10 +1,19 @@
+<% 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, example.html_safe_data do %>
+    <%= render component_doc.partial_path, data do %>
       <%= render inline: example.block %>
     <% end %>
   <% else %>
-    <%= render component_doc.partial_path, example.html_safe_data %>
+    <%= render component_doc.partial_path, 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="<%= component_preview_path(@component_doc.id, @component_example.id) %>" class="govuk-link">preview</a>)</small>
+      <small class="govuk-!-font-size-16">(<a href="<%= @preview_path %>" 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

@@ -17,6 +17,13 @@
 
 <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,9 +5,17 @@
 <% 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="<%= component_example_path(@component_doc.id, example.id) %>"><%= example.name %></a></h2>
+      <h2 class="preview-title"><a href="<%= example_path %>"><%= 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,5 @@
-<% content_for :title, "#{@component_doc.name} component" %>
+<% content_for :title, "#{@component_doc.name} #{@component_doc.type}" %>
+
 <% content_for :application_stylesheet do %>
   <% if @component_doc.source == "application" %>
     <%= render "application_stylesheet" %>
@@ -7,7 +8,7 @@
 
 <%= render "govuk_publishing_components/components/heading", {
     text: @component_doc.name,
-    context: "Component",
+    context: @component_doc.type.capitalize,
     heading_level: 1,
     font_size: "xl",
     margin_bottom: 8,
@@ -30,7 +31,9 @@
           </div>
         </div>
       <% end %>
-      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
+      <% 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 %>
     </div>
   </div>
 
@@ -52,8 +55,8 @@
           href: "#overview",
           text: "Overview",
           items: [
-            { href: "#how-it-looks", text: "How it looks" },
-            { href: "#how-to-call-this-component", text: "How to call this component" },
+            ({ 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: "#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,
@@ -72,14 +75,23 @@
   </div>
 
   <h2 class="govuk-heading-l" id="overview">Overview</h2>
-  <h3 class="govuk-heading-m" id="how-it-looks">
-    <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 %>
+  <% 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>
+    </h3>
+    <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
+  <% end %>
 
-  <h3 class="govuk-heading-m govuk-!-margin-top-4" id="how-to-call-this-component">How to call this component</h3>
+  <% 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 %>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
@@ -127,8 +139,17 @@
     <% @component_doc.other_examples.each do |example| %>
       <div class="component-example" id="<%= example.id %>">
         <h3 class="govuk-heading-m">
-          <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>
+          <%
+            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>
         </h3>
         <% if example.html_description %>
           <div class="component-markdown component-markdown--no-margin">

data/config/routes.rb

@@ -1,9 +1,17 @@
 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/preview" => "component_guide#preview", as: :component_preview_all
-  get ":component/:example/preview" => "component_guide#preview", as: :component_preview
   get ":component" => "component_guide#show", as: :component_doc
+  get ":component/preview" => "component_guide#preview", as: :component_preview_all
   get ":component/:example" => "component_guide#example", as: :component_example
+  get ":component/:example/preview" => "component_guide#preview", as: :component_preview
 end

data/lib/govuk_publishing_components/config.rb

@@ -25,6 +25,10 @@ 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/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "66.4.1".freeze
+  VERSION = "66.4.2".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 66.4.1
+  version: 66.4.2
 platform: ruby
 authors:
 - GOV.UK Dev