design_system 0.13.2 → 0.15.0

data/app/components/design_system/nhsuk/action_link_component.html.erb

@@ -0,0 +1,7 @@
+<%= link_to options, html_options.merge(class: "#{brand}-action-link") do %>
+  <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36">
+    <path d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>
+  </svg>
+  <span class="<%= brand %>-action-link__text"><%= name %></span>
+<% end %>

data/app/components/design_system/nhsuk/action_link_component.rb

@@ -0,0 +1,7 @@
+module DesignSystem
+  module Nhsuk
+    # NHS UK action link with arrow icon.
+    class ActionLinkComponent < DesignSystem::Generic::ActionLinkComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/alert_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class AlertComponent < DesignSystem::Generic::AlertComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/breadcrumbs_component.html.erb

@@ -0,0 +1,16 @@
+<nav aria-label="Breadcrumb" class="<%= brand %>-breadcrumb">
+  <ol class="<%= brand %>-breadcrumb__list">
+    <% breadcrumbs.each do |breadcrumb| %>
+      <li class="<%= brand %>-breadcrumb__list-item">
+        <%= link_to breadcrumb[:label], breadcrumb[:path],
+                    class: "#{brand}-breadcrumb__link",
+                    'aria-current': current_page_aria(breadcrumb) %>
+      </li>
+    <% end %>
+  </ol>
+  <%= link_to breadcrumbs.last[:path],
+              class: "#{brand}-back-link",
+              'aria-current': current_page_aria(breadcrumbs.last) do %>
+    <span class="<%= brand %>-u-visually-hidden">Back to</span> <%= breadcrumbs.last[:label] %>
+  <% end %>
+</nav>

data/app/components/design_system/nhsuk/breadcrumbs_component.rb

@@ -0,0 +1,7 @@
+module DesignSystem
+  module Nhsuk
+    # NHS breadcrumbs markup lives in the brand template.
+    class BreadcrumbsComponent < DesignSystem::Generic::BreadcrumbsComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/button_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class ButtonComponent < DesignSystem::Generic::ButtonComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/callout_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class CalloutComponent < DesignSystem::Generic::CalloutComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/details_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class DetailsComponent < DesignSystem::Generic::DetailsComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/grid_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class GridComponent < DesignSystem::Generic::GridComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/heading_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class HeadingComponent < DesignSystem::Generic::HeadingComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/inset_text_component.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:div, **inset_options) do %>
+  <span class="<%= brand %>-u-visually-hidden">Information: </span>
+  <%= content || content_tag(:p, text) %>
+<% end %>

data/app/components/design_system/nhsuk/inset_text_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class InsetTextComponent < DesignSystem::Generic::InsetTextComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/link_component.rb

@@ -0,0 +1,17 @@
+module DesignSystem
+  module Nhsuk
+    # NHS link: maps button :type values to nhsuk-button style classes.
+    class LinkComponent < DesignSystem::Generic::LinkComponent
+      private
+
+      def button_type_class_hash
+        {
+          button: "#{brand}-button",
+          secondary_button: "#{brand}-button #{brand}-button--secondary",
+          warning_button: "#{brand}-button #{brand}-button--warning",
+          reverse_button: "#{brand}-button #{brand}-button--reverse"
+        }
+      end
+    end
+  end
+end

data/app/components/design_system/nhsuk/list_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class ListComponent < DesignSystem::Generic::ListComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/notification_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class NotificationComponent < DesignSystem::Generic::NotificationComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/panel_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class PanelComponent < DesignSystem::Generic::PanelComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/paragraph_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class ParagraphComponent < DesignSystem::Generic::ParagraphComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/start_button_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class StartButtonComponent < DesignSystem::Generic::StartButtonComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/summary_card_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class SummaryCardComponent < DesignSystem::Generic::SummaryCardComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/summary_list_component.rb

@@ -0,0 +1,19 @@
+module DesignSystem
+  module Nhsuk
+    # NHS summary list: hidden action text uses the nhsuk-u-visually-hidden
+    # utility class.
+    class SummaryListComponent < DesignSystem::Generic::SummaryListComponent
+      private
+
+      def value_paragraph_class
+        nil
+      end
+
+      def render_hidden_text(hidden_text)
+        return '' if hidden_text.blank?
+
+        content_tag(:span, hidden_text, class: "#{brand}-u-visually-hidden")
+      end
+    end
+  end
+end

data/app/components/design_system/nhsuk/tab_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class TabComponent < DesignSystem::Generic::TabComponent
+    end
+  end
+end

data/app/components/design_system/nhsuk/table_component.html.erb

@@ -0,0 +1,43 @@
+<%= content_tag(:div, **options) do %>
+  <table class="<%= brand %>-table-responsive" role="table">
+    <% if table.caption %>
+      <caption class="<%= brand %>-table__caption">
+        <%= table.caption %>
+      </caption>
+    <% end %>
+    <thead class="<%= brand %>-table__head" role="rowgroup">
+      <tr class="<%= brand %>-table__row" role="row">
+        <% table.columns.each do |column| %>
+          <%= content_tag(:th, cell_content(column),
+                          **html_cell_options(column, scope: 'col', class: header_classes(column),
+                                              role: 'columnheader')) %>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody class="<%= brand %>-table__body">
+      <% table.rows.each do |row| %>
+        <tr class="<%= brand %>-table__row" role="row">
+          <% row.each_with_index do |cell, index| %>
+            <% if index.zero? %>
+              <%= content_tag(:th, **html_cell_options(cell, scope: 'row', class: header_classes(cell),
+                                                       role: 'rowheader')) do %>
+                <%= content_tag(:span, table.columns[index][:content],
+                                class: "#{brand}-table-responsive__heading",
+                                aria: { hidden: true }) %>
+                <%= cell_content(cell) %>
+              <% end %>
+            <% else %>
+              <%= content_tag(:td, **html_cell_options(cell, class: data_cell_classes(cell),
+                                                       role: 'cell')) do %>
+                <%= content_tag(:span, table.columns[index][:content],
+                                class: "#{brand}-table-responsive__heading",
+                                aria: { hidden: true }) %>
+                <%= cell_content(cell) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

data/app/components/design_system/nhsuk/table_component.rb

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Nhsuk
+    class TableComponent < DesignSystem::Generic::TableComponent
+    end
+  end
+end

data/app/controllers/concerns/design_system/branded.rb

@@ -7,6 +7,7 @@ module DesignSystem
       attr_reader :navigation_items
       attr_reader :footer_links
       attr_accessor :copyright_notice
+      attr_writer :govuk_footer_elements
 
       helper DesignSystemHelper
     end
@@ -15,6 +16,11 @@ module DesignSystem
       raise NotImplementedError, 'You need to implement #brand in your ApplicationController'
     end
 
+    # Hide the GOV.UK footer's Crown emblem, Open Government Licence and copyright logo if it is not yet a verified GOV.UK product
+    def govuk_footer_elements?
+      @govuk_footer_elements != :hidden
+    end
+
     def add_navigation_item(label, path, options = {})
       @navigation_items ||= []
       @navigation_items << { label:, path:, options: }

data/app/helpers/design_system_helper.rb

@@ -34,34 +34,43 @@ module DesignSystemHelper
     render(template: "layouts/#{brand}/#{design_system_layout}")
   end
 
-  def ds_table(options = {}, &)
+  def ds_table(options = {}, &block)
     raise ArgumentError unless block_given?
 
-    DesignSystem::Registry.builder(brand, 'table', self).render_table(options, &)
+    table = ::DesignSystem::Components::Table.new
+    block.call(table)
+    render ::DesignSystem::Registry.component(brand, :table).new(table:, **options)
   end
 
-  def ds_summary_list(&)
+  def ds_summary_list(&block)
     raise ArgumentError unless block_given?
 
-    DesignSystem::Registry.builder(brand, 'summary_list', self).render_summary_list(&)
+    summary_list = ::DesignSystem::Components::SummaryList.new
+    block.call(summary_list)
+    render ::DesignSystem::Registry.component(brand, :summary_list).new(summary_list:)
   end
 
-  def ds_tab(&)
+  def ds_tab(&block)
     raise ArgumentError unless block_given?
 
-    DesignSystem::Registry.builder(brand, 'tab', self).render_tabs(&)
+    tab = ::DesignSystem::Components::Tab.new(self)
+    block.call(tab)
+    render ::DesignSystem::Registry.component(brand, :tab).new(tab:)
   end
 
   def ds_start_button(text, href = '#', options = {})
-    DesignSystem::Registry.builder(brand, 'button', self).render_start_button(text, href, options)
+    render DesignSystem::Registry.component(brand, :start_button).new(text, href, options)
   end
 
-  def ds_button_tag(content_or_options = nil, options = nil, &)
-    DesignSystem::Registry.builder(brand, 'button', self).render_button(content_or_options, options, &)
+  def ds_button_tag(content_or_options = nil, options = nil, &block)
+    component = DesignSystem::Registry.component(brand, :button).new(content_or_options, options)
+    render(component) { block ? capture(&block) : nil }
   end
 
-  def ds_link_to(name = nil, options = nil, html_options = nil, &)
-    DesignSystem::Registry.builder(brand, 'link', self).render_link_to(name, options, html_options, &)
+  def ds_link_to(name = nil, options = nil, html_options = nil, &block)
+    klass = DesignSystem::Registry.component(brand, :link)
+    component = klass.new(name, options, html_options, link_context: @link_context)
+    render(component) { block ? capture(&block) : nil }
   end
 
   def ds_pagination(collection = nil, options = {})
@@ -74,16 +83,22 @@ module DesignSystemHelper
     will_paginate(collection, defaults.merge!(options))
   end
 
-  def ds_alert(message = nil, &)
-    DesignSystem::Registry.builder(brand, 'notification', self).render_alert(message, &)
+  def ds_alert(message = nil, &block)
+    component = DesignSystem::Registry.component(brand, :alert).new(message)
+    render(component) { block ? capture(&block) : nil }
   end
 
-  def ds_notice(message = nil, header: nil, type: :information, &)
-    DesignSystem::Registry.builder(brand, 'notification', self).render_notice(message, header:, type:, &)
+  def ds_notice(message = nil, type: :information, content_heading: { text: nil, tag: :h3 }, &block)
+    previous_link_context = @link_context
+    @link_context = :notification_banner
+    component = DesignSystem::Registry.component(brand, :notification).new(message:, type:, content_heading:)
+    render(component) { block ? capture(&block) : nil }
+  ensure
+    @link_context = previous_link_context
   end
 
   def ds_heading(text, level: 2, **options)
-    DesignSystem::Registry.builder(brand, 'heading', self).render_heading(text, level:, **options)
+    render DesignSystem::Registry.component(brand, :heading).new(text, level:, **options)
   end
 
   def ds_timeago(date, refresh_interval: 60_000, format: :long)
@@ -102,38 +117,61 @@ module DesignSystemHelper
   end
 
   def ds_panel(title, body)
-    DesignSystem::Registry.builder(brand, 'panel', self).render_panel(title, body)
+    render DesignSystem::Registry.component(brand, :panel).new(title:, body:)
+  end
+
+  def ds_summary_card(title:, actions: [], &block)
+    component = DesignSystem::Registry.component(brand, :summary_card).new(title:, actions:)
+    render(component) { block ? capture(&block) : nil }
   end
 
   def ds_callout(label, body)
-    DesignSystem::Registry.builder(brand, 'callout', self).render_callout(label, body)
+    render DesignSystem::Registry.component(brand, :callout).new(label:, body:)
   end
 
-  def ds_details(summary_text, &)
+  def ds_details(summary_text, &block)
     raise ArgumentError unless block_given?
 
-    DesignSystem::Registry.builder(brand, 'details', self).render_details(summary_text, &)
+    component = DesignSystem::Registry.component(brand, :details).new(summary_text)
+    render(component) { capture(&block) }
   end
 
   def ds_action_link(name = nil, options = nil, html_options = nil)
-    DesignSystem::Registry.builder(brand, 'action_link', self).render_action_link(name, options, html_options)
+    render DesignSystem::Registry.component(brand, :action_link).new(name, options, html_options)
   end
 
-  def ds_grid(options = {}, &)
+  def ds_grid(options = {}, &block)
     raise ArgumentError unless block_given?
 
-    DesignSystem::Registry.builder(brand, 'grid', self).render_grid(options, &)
+    grid = ::DesignSystem::Components::Grid.new
+    block.call(grid)
+    render ::DesignSystem::Registry.component(brand, :grid).new(grid:, **options)
   end
 
   def ds_paragraph(text = nil, size: nil, **options, &block)
-    DesignSystem::Registry.builder(brand, 'paragraph', self).render_paragraph(text, size:, **options, &block)
+    component = DesignSystem::Registry.component(brand, :paragraph).new(text:, size:, **options)
+    render(component) { block ? capture(&block) : nil }
   end
 
   def ds_list(type: :default, **options, &block)
-    DesignSystem::Registry.builder(brand, 'list', self).render_list(type:, **options, &block)
+    raise ArgumentError, 'block required' unless block_given?
+
+    list_data = ::DesignSystem::Components::List.new
+    block.call(list_data)
+    render ::DesignSystem::Registry.component(brand, :list).new(list: list_data, type:, **options)
+  end
+
+  def ds_inset_text(text = nil, **options, &block)
+    component = DesignSystem::Registry.component(brand, :inset_text).new(text:, **options)
+    output = if block
+               render(component) { capture(&block) }
+             else
+               render(component)
+             end
+    output.presence
   end
 
-  def ds_inset_text(text = nil, ...)
-    DesignSystem::Registry.builder(brand, 'inset_text', self).render_inset_text(text, ...)
+  def ds_code(code, language)
+    DesignSystem::Registry.builder(brand, 'code', self).render_code(code, language)
   end
 end

data/app/javascript/design_system/controllers/clipboard_controller.js

@@ -0,0 +1,41 @@
+// app/javascript/controllers/clipboard_controller.js
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['source', 'buttonText']
+
+  // Copies the selected text to the clipboard.
+  copy () {
+    if (navigator.clipboard && this.hasSourceTarget) {
+      // The selected text to be copied.
+      const copytext = this.sourceTarget.value || this.sourceTarget.innerText
+
+      navigator.clipboard.writeText(copytext)
+        .then(() => {
+        // Fired when the text is successfully copied to the clipboard.
+          this.showCopiedMessage()
+        }).catch(err => {
+        // Fired if an error occurs while copying the text to the clipboard.
+          console.error('Failed to copy text: ', err)
+        })
+    } else {
+      // Fired if the Clipboard API is not available or the source target is missing.
+      console.error('Clipboard API not available or source target missing')
+    }
+  }
+
+  showCopiedMessage () {
+    // The text to be displayed in the button.
+    this.buttonTextTarget.textContent = 'Copied!'
+
+    // The time interval after which the button text should be reset to "Copy".
+    const resetInterval = 2000
+
+    // Resets the button text to "Copy" after the specified time interval.
+    const resetButtonText = () => {
+      this.buttonTextTarget.textContent = 'Copy'
+    }
+
+    setTimeout(resetButtonText, resetInterval)
+  }
+}

data/app/javascript/design_system/controllers/code_highlight_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+import hljs from 'highlight.js'
+
+// Connects to data-controller="code-highlight"
+export default class extends Controller {
+  connect () {
+    hljs.highlightElement(this.element)
+  }
+}

data/app/javascript/design_system/controllers/hello_world_controller.js

@@ -1,7 +1,13 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
+  static targets = ['name', 'greeting']
+
   connect () {
     console.log('Hello from the Design System!')
   }
+
+  greet () {
+    this.greetingTarget.textContent = `Hello, ${this.nameTarget.value}!`
+  }
 }

data/app/javascript/design_system/index.js

@@ -1,10 +1,14 @@
 // Import and register all your controllers
+import ClipboardController from './controllers/clipboard_controller'
+import CodeHighlightController from './controllers/code_highlight_controller'
 import HelloWorldController from './controllers/hello_world_controller'
 import ShowPasswordController from './controllers/show_password_controller'
 import Timeago from '@stimulus-components/timeago'
 
 // Register design system controllers with Stimulus
 export const registerControllers = (application) => {
+  application.register('ds--clipboard', ClipboardController)
+  application.register('ds--code-highlight', CodeHighlightController)
   application.register('ds--hello-world', HelloWorldController)
   application.register('ds--show-password', ShowPasswordController)
   application.register('timeago', Timeago)

data/app/views/layouts/govuk/application.html.erb

@@ -53,7 +53,7 @@
   <header class="govuk-header" data-module="govuk-header">
     <div class="govuk-header__container govuk-width-container">
       <div class="govuk-header__logo">
-        <a href="#" class="govuk-header__link govuk-header__link--homepage">
+        <a href="<%= main_app.root_path %>" class="govuk-header__link govuk-header__link--homepage">
           <svg
             focusable="false"
             role="img"
@@ -120,12 +120,17 @@
     <%= yield :breadcrumbs %>
     <%= yield :backlink %>
     <main class="govuk-main-wrapper" id="main-content">
-      <%= render :partial => 'layouts/alert_and_notice' %>
-      <%= yield %>
+      <% if content_for?(:main_content_wrapper) %>
+        <%= yield :main_content_wrapper %>
+      <% else %>
+        <%= render :partial => 'layouts/alert_and_notice' %>
+        <%= yield %>
+      <% end %>
     </main>
   </div>
   <footer class="govuk-footer">
     <div class="govuk-width-container">
+      <% if controller.govuk_footer_elements? %>
       <svg
         focusable="false"
         role="presentation"
@@ -146,6 +151,7 @@
           <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
         </g>
       </svg>
+      <% end %>
       <div class="govuk-footer__meta">
         <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
           <h2 class="govuk-visually-hidden">Support links</h2>
@@ -160,6 +166,7 @@
               <% end %>
             <% end %>
           </ul>
+          <% if controller.govuk_footer_elements? %>
           <svg
             aria-hidden="true"
             focusable="false"
@@ -179,14 +186,20 @@
               href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
               rel="license">Open Government Licence v3.0</a>, except where otherwise stated
           </span>
+          <% end %>
+          <% if controller.copyright_notice.present? && !controller.govuk_footer_elements? %>
+            <div class="govuk-footer__meta-custom">
+              <%= controller.copyright_notice %>
+            </div>
+          <% end %>
         </div>
-        <div class="govuk-footer__meta-item">
-          <% if controller.copyright_notice.present? %>
+        <% if controller.copyright_notice.present? && controller.govuk_footer_elements? %>
+          <div class="govuk-footer__meta-item">
             <span class="govuk-footer__link govuk-footer__copyright-logo">
               <%= controller.copyright_notice %>
             </span>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
       </div>
     </div>
   </footer>

data/app/views/layouts/nhsuk/application.html.erb

@@ -30,7 +30,7 @@
 
     <div class="nhsuk-header__container nhsuk-width-container">
       <div class="nhsuk-header__service">
-        <a class="nhsuk-header__service-logo nhsuk-header__link--service" href="/" aria-label="NHS homepage">
+        <a class="nhsuk-header__service-logo nhsuk-header__link--service" href="<%= main_app.root_path %>" aria-label="NHS homepage">
           <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
             <title>NHS</title>
             <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
@@ -68,13 +68,16 @@
     <%= yield :backlink %>
 
     <main class="nhsuk-main-wrapper " id="maincontent" role="main">
-      <%= render :partial => 'layouts/alert_and_notice' %>
-      <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-full">
-          <%= yield %>
+      <% if content_for?(:main_content_wrapper) %>
+        <%= yield :main_content_wrapper %>
+      <% else %>
+        <%= render :partial => 'layouts/alert_and_notice' %>
+        <div class="nhsuk-grid-row">
+          <div class="nhsuk-grid-column-full">
+            <%= yield %>
+          </div>
         </div>
-      </div>
-
+      <% end %>
     </main>
   </div>
 

data/lib/design_system/brand_derivable.rb

@@ -0,0 +1,9 @@
+module DesignSystem
+  # Mixin that derives the design-system brand name from the including class's
+  # second-level namespace (e.g. `DesignSystem::Govuk::PanelComponent` → `'govuk'`).
+  module BrandDerivable
+    def brand
+      self.class.name.split('::')[1].underscore
+    end
+  end
+end

data/lib/design_system/engine.rb

@@ -1,5 +1,6 @@
 require 'action_dispatch/middleware/remote_ip'
 require 'stimulus-rails'
+require 'view_component'
 
 module DesignSystem
   # This is the main engine class for the design system.

data/lib/design_system/generic/builders/base.rb

@@ -5,7 +5,7 @@ module DesignSystem
     module Builders
       # This is the base class for design system builders.
       class Base
-        include DesignSystem::Generic::Builders::Concerns::BrandDerivable
+        include DesignSystem::BrandDerivable
         include DesignSystem::Helpers::CssHelper
 
         delegate :button_tag, :capture, :content_for, :content_tag, :link_to, :link_to_unless_current, to: :@context