govuk_publishing_components 70.2.0 → 71.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1a6d5f7de8f25961e21640cb7b451099f2c1d5cf7b885b189a6c7f1db6229dd
-  data.tar.gz: 319ae2c442a8165da752b22f7572c8efe3c14d35d9243cf6f76a4c238be8b538
+  metadata.gz: 74db3ccfb835e4b5298212da9a2fbcdd6c6df533a174622e62ef8c09f838e163
+  data.tar.gz: 6c8d9fba438b66e7f71191021547d009ffffff268061665ee7b3b7701888aef1
 SHA512:
-  metadata.gz: 0ca7d6d4464fc5d4e604619e44f7c4e0cb8c579e12caa9c0d1b15ecc8adf712fc72677244f6253ff43dc60e36c8ddcc0a0ff3e20630d80ccf1eac771d824133e
-  data.tar.gz: 8cabc09cbdbe57bdf87a68b141a58e9a199cfc47a6ed844c296a862214392a52444bb5a1c28aab06103250caf50d27c11d0524afdaa5a424527150d513f55f23
+  metadata.gz: 6a304e13a7a304c5851f17efc0e6920589401ebe9943f16837b0e548a3ca80d9f4468ddb6b3d5114506ab0cfd1cd90f34e619f01591f31df4420eddb4f6b22ad
+  data.tar.gz: d0814535e7016e51788030010ad2cc7b6a490a138e81ccca427e3dc80cb9e143dfceb3792593571ec8c94da87ad536930b3cb55bf3542d3fdfc45a801b64aa9c

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -69,13 +69,28 @@
             user_created_at: this.getMetaContent('user-created-at'),
             user_organisation_name: this.getMetaContent('user-organisation-name'),
             user_role: this.getMetaContent('user-role'),
-            user_id: this.getMetaContent('user-id')
+            user_id: this.getMetaContent('user-id'),
+
+            utm_source: this.getUtmParams('utm_source'),
+            utm_medium: this.getUtmParams('utm_medium'),
+            utm_campaign: this.getUtmParams('utm_campaign'),
+            utm_term: this.getUtmParams('utm_term'),
+            utm_content: this.getUtmParams('utm_content')
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
       }
     },
 
+    getUtmParams: function (key) {
+      if (this.getLocation().indexOf('?') > -1) {
+        var queryStringParams = new URLSearchParams(this.getLocation().split('?')[1])
+        return queryStringParams.get(key) || undefined
+      } else {
+        return undefined
+      }
+    },
+
     removeHyphensAndDowncase: function (text) {
       if (text) {
         return text.replace(/-/g, ' ').toLowerCase()
@@ -102,7 +117,8 @@
 
     getLocation: function () {
       // We don't want to remove dates on search pages.
-      return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href), this.stripDates, true)
+      // Where a token is present this should be redacted
+      return this.PIIRemover.stripPIIWithOverride(this.stripGaParam(document.location.href.replace(/(&token=)(\S+)/, '')), this.stripDates, true)
     },
 
     getSearchTerm: function () {
@@ -149,6 +165,7 @@
         queryString = this.stripGaParam(queryString)
         queryString = this.PIIRemover.stripPIIWithOverride(queryString, this.stripDates, true)
         queryString = queryString.substring(1) // removes the '?' character from the start.
+        queryString = queryString.replace(/(&token=)(\S+)/, '') // where a token is present this should be redacted
         return queryString
       }
     },

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/govspeak.js

@@ -9,6 +9,10 @@
     }
 
     this.createBarcharts()
+
+    if (this.$module.querySelectorAll('table').length) {
+      this.tableScroll()
+    }
   }
 
   Govspeak.prototype.embedYoutube = function () {
@@ -21,5 +25,10 @@
     enhancement.init()
   }
 
+  Govspeak.prototype.tableScroll = function () {
+    var enhancement = new window.GOVUK.GovspeakTableScroll(this.$module)
+    enhancement.init()
+  }
+
   Modules.Govspeak = Govspeak
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -287,7 +287,7 @@
 
     var loaded = this.loadFromSessionStorage(this.$module.sessionStoreLink)
     var activeParent = this.$module.querySelectorAll('.' + this.$module.activeLinkClass)[0]
-    var activeChild = activeParent.firstChild
+    var activeChild = activeParent.firstElementChild
     var foundLink = activeChild.getAttribute('data-position')
     var lastClicked = loaded || foundLink // the value saved has priority
 

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/table-scroll.js

@@ -0,0 +1,108 @@
+(function (GOVUK) {
+  'use strict'
+
+  var TableScroll = function ($element) {
+    this.element = $element
+    this.tables = this.element.querySelectorAll('table')
+    this.windowResizeTimeout = null
+  }
+
+  TableScroll.prototype.init = function () {
+    if (this.tables.length === 0) {
+      return
+    }
+
+    // a small timeout ensures scrollWidth is accurate
+    setTimeout(() => {
+      this.windowResized()
+    }, 10)
+
+    window.onresize = () => {
+      if (this.windowResizeTimeout) {
+        clearTimeout(this.windowResizeTimeout)
+      }
+
+      this.windowResizeTimeout = setTimeout(function () {
+        this.windowResized()
+      }.bind(this), 500)
+    }
+  }
+
+  TableScroll.prototype.windowResized = function () {
+    this.destroyElements()
+    this.setupElements()
+  }
+
+  TableScroll.prototype.setupElements = function () {
+    this.tables.forEach(table => {
+      const tablewrapper = table.closest('.tablewrapper')
+
+      if (!(table.scrollWidth > table.clientWidth)) {
+        if (tablewrapper) {
+          tablewrapper.className = 'tablewrapper'
+        }
+        return
+      }
+
+      // wrap the table in a div, but only the first time
+      if (!tablewrapper) {
+        var wrapper = document.createElement('div')
+        wrapper.classList.add('tablewrapper')
+        table.parentNode.insertBefore(wrapper, table)
+        wrapper.appendChild(table)
+      }
+
+      const scrollBar = document.createElement('div')
+      scrollBar.setAttribute('tabindex', '-1')
+      scrollBar.classList.add('govspeak-table-scrollbar')
+
+      const scrollBarChild = document.createElement('div')
+      scrollBarChild.classList.add('govspeak-table-scrollbar__child')
+      scrollBarChild.style.width = `${table.scrollWidth}px`
+
+      scrollBar.append(scrollBarChild)
+      table.before(scrollBar)
+      scrollBar.scrollLeft = table.scrollLeft
+      this.updateLeftRight(table)
+
+      scrollBar.onscroll = () => {
+        if (this.preventScrolling) {
+          this.preventScrolling = false
+          return
+        }
+        this.preventScrolling = true
+        table.scrollLeft = scrollBar.scrollLeft
+        this.updateLeftRight(table)
+      }
+
+      table.onscroll = () => {
+        if (this.preventScrolling) {
+          this.preventScrolling = false
+          return
+        }
+        this.preventScrolling = true
+        scrollBar.scrollLeft = table.scrollLeft
+        this.updateLeftRight(table)
+      }
+    })
+  }
+
+  TableScroll.prototype.updateLeftRight = function (table) {
+    if ((table.scrollWidth - table.scrollLeft) < (table.offsetWidth + 1)) {
+      table.parentElement.className = 'tablewrapper tablewrapper--active tablewrapper--end'
+    } else if (table.scrollLeft < 1) {
+      table.parentElement.className = 'tablewrapper tablewrapper--active tablewrapper--start'
+    } else {
+      table.parentElement.className = 'tablewrapper tablewrapper--active'
+    }
+  }
+
+  TableScroll.prototype.destroyElements = function () {
+    const scrollBars = this.element.querySelectorAll('.govspeak-table-scrollbar')
+    scrollBars.forEach(bar => {
+      bar.remove()
+    })
+  }
+
+  GOVUK.GovspeakTableScroll = TableScroll
+}(window.GOVUK))

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

@@ -298,7 +298,7 @@
     return sendBeaconImpl(url, data);
   }
 
-  var version = "4.5.2";
+  var version = "4.5.3";
   var pkg = {
     version: version};
 
@@ -1191,7 +1191,7 @@
       var po = new PerformanceObserver(function (list) {
         list.getEntries().forEach(function (entry) { return callback(entry); });
       });
-      po.observe(Object.assign({ type: type, buffered: true }, { options: options }));
+      po.observe(Object.assign({ type: type, buffered: true }, options));
       return po;
     }
     return undefined;

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

@@ -115,7 +115,7 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--violation,
 .component-guide-preview--warning {
   margin-top: -$gem-guide-border-width;
-  
+
   color: govuk-functional-colour(text);
   @include govuk-font($size: 19);
 
@@ -217,6 +217,11 @@ html {
   .preview-title {
     padding-left: govuk-spacing(3);
   }
+
+  .gem-full-width__element {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 // Rouge syntax highlighting
@@ -489,10 +494,9 @@ $code-delete-bg: #fadddd;
   padding: 0;
   padding-bottom: 0.1px; // forces child margin inside
   border: 0;
+  border-top: solid 1px govuk-functional-colour(border);
   margin-left: -(govuk-spacing(3));
   margin-right: -(govuk-spacing(3));
-  border-top: solid 1px govuk-functional-colour(border);
-  border-bottom: solid 1px govuk-functional-colour(border);
 
   @include govuk-media-query($from: tablet) {
     margin-left: -(govuk-spacing(6));

data/app/assets/stylesheets/govuk_publishing_components/all-components.scss

@@ -72,7 +72,6 @@ $govuk-output-custom-properties: true;
 @import "components/phase-banner";
 @import "components/pagination";
 @import "components/print-link";
-@import "components/published-dates";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/reorderable-list";

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

@@ -7,20 +7,7 @@
   padding: 0;
   margin: 0;
   display: grid;
-  // stylelint-disable-next-line property-no-deprecated
-  grid-column-gap: govuk-spacing(6); // Use deprecated grid-column-gap for Grade C browser support
   column-gap: govuk-spacing(6);
-
-  @include govuk-media-query($from: "desktop") {
-    // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
-    // especially for screen magnifier users
-    width: 50%;
-
-    // Reset the width for browsers that support CSS grid
-    @supports (display: grid) {
-      width: initial;
-    }
-  }
 }
 
 .gem-c-cards__list--one-column {

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

@@ -28,15 +28,36 @@
     margin: 0;
   }
 
-  .govuk-table .govuk-table__header {
-    text-align: center;
-  }
+}
 
-  .govuk-table .govuk-table__cell {
-    text-align: center;
-  }
+.gem-c-chart div svg g[clip-path] rect,
+.gem-c-chart div svg g[clip-path] circle {
+  cursor: pointer;
+}
+
+// Legend
+.gem-c-chart div svg g:has(text[text-anchor="start"]) * {
+  cursor: pointer;
+}
+
+// For line chart points
+.gem-c-chart svg circle {
+  cursor: pointer;
 }
 
+// Prevent line chart lines having cursor: pointer
+.gem-c-chart svg g[clip-path] path[fill="none"] {
+  cursor: default;
+}
+
+// Force grid lines back to default
+.gem-c-chart div svg g[clip-path] rect[height="1"],
+.gem-c-chart div svg g[clip-path] rect[width="1"] {
+  cursor: default;
+  pointer-events: none;
+}
+
+
 .gem-c-chart .gem-c-chart__a11y-note-link {
   display: none;
   margin-bottom: govuk-spacing(2);
@@ -56,6 +77,10 @@
   }
 }
 
+.gem-c-chart__source {
+  color: govuk-functional-colour(secondary-text);
+}
+
 .js-enabled {
   .gem-c-chart .gem-c-chart__a11y-note-link {
     display: inline;

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

@@ -8,10 +8,6 @@
     @include govuk-link-common;
     @include govuk-link-style-default;
   }
-
-  .gem-c-metadata__definition-link {
-    font-weight: normal;
-  }
 }
 
 .direction-rtl .gem-c-metadata,

data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss

@@ -2,6 +2,7 @@
 
 .gem-c-service-navigation--full-width {
   padding-left: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
 }
 
 .gem-c-service-navigation--hide-service-name-on-mobile {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -54,6 +54,73 @@
       text-align: right;
     }
   }
+
+  .tablewrapper {
+    position: relative;
+  }
+
+  .tablewrapper--active {
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 24px;
+      width: 10px;
+      bottom: 20px;
+      background: rgb(0, 0, 0, 0.1);
+      border-color: $govuk-border-colour;
+      border-width: 5px;
+    }
+
+    &::before {
+      left: 0;
+      border-left-style: solid;
+      border-radius: 0 15px 15px 0;
+    }
+
+    &::after {
+      right: 0;
+      border-right-style: solid;
+      border-radius: 15px 0 0 15px;
+    }
+  }
+
+  .tablewrapper--start {
+    &::before {
+      display: none;
+    }
+  }
+
+  .tablewrapper--end {
+    &::after {
+      display: none;
+    }
+  }
+
+  .govspeak-table-scrollbar {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 20px;
+    margin-bottom: 5px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .govspeak-table-scrollbar__child {
+    height: 20px;
+  }
+
+  .govspeak-table-scrollbar + table:focus {
+    outline: $govuk-focus-width solid govuk-functional-colour(focus);
+    box-shadow: 0 0 0 6px govuk-functional-colour("focus-text");
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
 }
 
 // Add rtl table styling when `direction: "rtl"` is set

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,