design_system 0.7.0

data/app/helpers/design_system_helper.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+require 'design_system/registry'
+
+# The helpers for the design system
+module DesignSystemHelper
+  include ActionView::Helpers::FormHelper
+
+  def brand
+    controller.send(:brand)
+  end
+
+  # This method provides access to the current design system adapter
+  def ds_fixed_elements
+    instance = DesignSystem::Registry.builder(brand, 'fixed_elements', self)
+
+    if block_given?
+      yield instance
+
+      instance.render
+    else
+      instance
+    end
+  end
+
+  def ds_form_builder
+    DesignSystem::Registry.form_builder(brand)
+  end
+
+  def ds_form_with(model: nil, scope: nil, url: nil, format: nil, **options, &)
+    form_with(model:, scope:, url:, format:, builder: ds_form_builder, **options, &)
+  end
+
+  def ds_render_template(design_system_layout = 'application')
+    @design_system_layout = design_system_layout
+    render(template: "layouts/#{brand}/#{design_system_layout}")
+  end
+
+  def ds_table(options = {}, &)
+    raise ArgumentError unless block_given?
+
+    DesignSystem::Registry.builder(brand, 'table', self).render_table(options, &)
+  end
+
+  def ds_summary_list(&)
+    raise ArgumentError unless block_given?
+
+    DesignSystem::Registry.builder(brand, 'summary_list', self).render_summary_list(&)
+  end
+
+  def ds_tab(&)
+    raise ArgumentError unless block_given?
+
+    DesignSystem::Registry.builder(brand, 'tab', self).render_tabs(&)
+  end
+
+  def ds_start_button(text, href = '#', options = {})
+    DesignSystem::Registry.builder(brand, 'button', self).render_start_button(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, &)
+  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, &)
+  end
+
+  def ds_pagination(collection = nil, options = {})
+    defaults = {
+      renderer: DesignSystem::Registry.builder(brand, 'pagination_renderer', self),
+      previous_label: '« Previous',
+      next_label: 'Next »'
+    }
+
+    will_paginate(collection, defaults.merge!(options))
+  end
+
+  def ds_alert(message)
+    DesignSystem::Registry.builder(brand, 'notification', self).render_alert(message)
+  end
+
+  def ds_notice(message)
+    DesignSystem::Registry.builder(brand, 'notification', self).render_notice(message)
+  end
+
+  def ds_heading(text, level: 2, **options)
+    DesignSystem::Registry.builder(brand, 'heading', self).render_heading(text, level:, **options)
+  end
+
+  def ds_timeago(date, refresh_interval: 60_000, format: :long)
+    return if date.blank?
+
+    content = I18n.l(date, format:)
+
+    tag.time(content,
+             title: content,
+             data: {
+               controller: 'timeago',
+               timeago_datetime_value: date.iso8601,
+               timeago_refresh_interval_value: refresh_interval,
+               timeago_add_suffix_value: true
+             })
+  end
+
+  def ds_panel(title, body)
+    DesignSystem::Registry.builder(brand, 'panel', self).render_panel(title, body)
+  end
+
+  def ds_callout(label, body)
+    DesignSystem::Registry.builder(brand, 'callout', self).render_callout(label, body)
+  end
+end

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

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect () {
+    console.log('Hello from the Design System!')
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['password', 'button']
+  static values = {
+    showText: String,
+    hideText: String
+  }
+
+  showPasswordSvg = `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="password-field__icon">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+  `
+
+  hidePasswordSvg = `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="password-field__icon">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+    </svg>
+  `
+
+  toggle () {
+    if (this.passwordTarget.type === 'password') {
+      this.passwordTarget.type = 'text'
+      if (this.hideTextValue) {
+        this.buttonTarget.textContent = this.hideTextValue
+      } else {
+        this.buttonTarget.innerHTML = this.hidePasswordSvg
+      }
+    } else {
+      this.passwordTarget.type = 'password'
+      if (this.showTextValue) {
+        this.buttonTarget.textContent = this.showTextValue
+      } else {
+        this.buttonTarget.innerHTML = this.showPasswordSvg
+      }
+    }
+  }
+}

data/app/javascript/design_system/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers
+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--hello-world', HelloWorldController)
+  application.register('ds--show-password', ShowPasswordController)
+  application.register('timeago', Timeago)
+}

data/app/views/govuk/_navigation.html.erb

@@ -0,0 +1,14 @@
+<% if controller.navigation_items.present? %>
+  <nav aria-label="Menu" class="govuk-header__navigation">
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
+      Menu
+    </button>
+    <ul id="navigation" class="govuk-header__navigation-list">
+      <% controller.navigation_items.each do |item| %>
+        <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
+          <%= link_to(item[:label], item[:path], item[:options].merge(class: 'govuk-header__link')) %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+<% end %>

data/app/views/layouts/_alert_and_notice.html.erb

@@ -0,0 +1,7 @@
+<% if alert %>
+  <%= ds_alert(alert) %>
+<% end %>
+
+<% if notice %>
+ <%= ds_notice(notice) %>
+<% end %>

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

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en" class="govuk-template govuk-template--rebranded">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#1d70b8">
+    <meta name="robots" content="noindex, nofollow">
+
+    <link rel="icon" sizes="48x48" href="/design_system/static/govuk-frontend-5.11.1/rebrand/images/favicon.ico">
+    <link rel="icon" sizes="any" href="/design_system/static/govuk-frontend-5.11.1/rebrand/images/favicon.svg" type="image/svg+xml">
+    <link rel="mask-icon" href="/design_system/static/govuk-frontend-5.11.1/rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
+    <link rel="apple-touch-icon" href="/design_system/static/govuk-frontend-5.11.1/rebrand/images/govuk-icon-180.png">
+    <link rel="manifest" href="/design_system/static/govuk-frontend-5.11.1/rebrand/manifest.json">
+    <%= stylesheet_link_tag 'govuk', 'data-turbo-track': 'reload' %>
+
+    <meta property="og:image" content="/design_system/static/govuk-frontend-5.11.1/images/govuk-opengraph-image.png">
+
+    <%= yield :head %>
+  </head>
+<body class="govuk-template__body" data-test="My value" data-other="report:details" data-ds-brand="<%= brand %>" data-ds-layout="<%= @design_system_layout %>">
+  <script>
+    document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
+  </script>
+  <% if false %>
+  <form action="/form-handler" method="post" novalidate>
+    <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on [name of service]">
+      <div class="govuk-cookie-banner__message govuk-width-container">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-two-thirds">
+            <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+              Cookies on [name of service]
+            </h2>
+            <div class="govuk-cookie-banner__content">
+              <p class="govuk-body">We use some essential cookies to make this service work.</p>
+              <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+            </div>
+          </div>
+        </div>
+        <div class="govuk-button-group">
+          <button value="yes" type="submit" name="cookies[analytics]" class="govuk-button" data-module="govuk-button">
+            Accept analytics cookies
+          </button>
+          <button value="no" type="submit" name="cookies[analytics]" class="govuk-button" data-module="govuk-button">
+            Reject analytics cookies
+          </button>
+          <a class="govuk-link" href="#">View cookies</a>
+        </div>
+      </div>
+    </div>
+  </form>
+  <% end %>
+  <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+  <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">
+          <svg
+            focusable="false"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 324 60"
+            height="30"
+            width="162"
+            fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK">
+            <title>GOV.UK</title>
+            <g>
+              <circle cx="20" cy="17.6" r="3.7" />
+              <circle cx="10.2" cy="23.5" r="3.7" />
+              <circle cx="3.7" cy="33.2" r="3.7" />
+              <circle cx="31.7" cy="30.6" r="3.7" />
+              <circle cx="43.3" cy="17.6" r="3.7" />
+              <circle cx="53.2" cy="23.5" r="3.7" />
+              <circle cx="59.7" cy="33.2" r="3.7" />
+              <circle cx="31.7" cy="30.6" r="3.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>
+            <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3" />
+            <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9" />
+          </svg>
+        </a>
+      </div>
+      <div class="govuk-header__content">
+        <a href="#" class="govuk-header__link govuk-header__service-name">
+          <%= @service_name %>
+        </a>
+        <%= render partial: 'govuk/navigation' %>
+      </div>
+    </div>
+  </header>
+  <div class="govuk-width-container">
+    <div class="govuk-phase-banner">
+      <p class="govuk-phase-banner__content">
+        <strong class="govuk-tag govuk-phase-banner__content__tag">
+          Alpha
+        </strong>
+        <span class="govuk-phase-banner__text">
+          This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
+        </span>
+      </p>
+    </div>
+    <a href="#" class="govuk-back-link">Back</a>
+
+    <%= yield :breadcrumbs %>
+
+    <main class="govuk-main-wrapper" id="main-content">
+      <%= render :partial => 'layouts/alert_and_notice' %>
+      <%= yield %>
+    </main>
+  </div>
+  <footer class="govuk-footer">
+    <div class="govuk-width-container">
+      <svg
+        focusable="false"
+        role="presentation"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 64 60"
+        height="30"
+        width="32"
+        fill="currentcolor" class="govuk-footer__crown">
+        <g>
+          <circle cx="20" cy="17.6" r="3.7" />
+          <circle cx="10.2" cy="23.5" r="3.7" />
+          <circle cx="3.7" cy="33.2" r="3.7" />
+          <circle cx="31.7" cy="30.6" r="3.7" />
+          <circle cx="43.3" cy="17.6" r="3.7" />
+          <circle cx="53.2" cy="23.5" r="3.7" />
+          <circle cx="59.7" cy="33.2" r="3.7" />
+          <circle cx="31.7" cy="30.6" r="3.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>
+      <div class="govuk-footer__meta">
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                Help
+              </a>
+            </li>
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                Cookies
+              </a>
+            </li>
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                Contact
+              </a>
+            </li>
+            <li class="govuk-footer__inline-list-item">
+              <a class="govuk-footer__link" href="#">
+                Terms and conditions
+              </a>
+            </li>
+          </ul>
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            class="govuk-footer__licence-logo"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 483.2 195.7"
+            height="17"
+            width="41">
+            <path
+              fill="currentColor"
+              d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+          </svg>
+          <span class="govuk-footer__licence-description">
+            All content is available under the
+            <a
+              class="govuk-footer__link"
+              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>
+        </div>
+        <div class="govuk-footer__meta-item">
+          <a
+            class="govuk-footer__link govuk-footer__copyright-logo"
+            href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
+            © Crown copyright
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <script type="module" src="/design_system/static/govuk-frontend-5.11.1/govuk-frontend.min.js"></script>
+  <script type="module">
+    import {
+      initAll
+    } from '/design_system/static/govuk-frontend-5.11.1/govuk-frontend.min.js'
+    initAll()
+  </script>
+</body>
+
+</html>

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

@@ -0,0 +1,2 @@
+<%# The GOVUK full_page layout is currently no different to application %>
+<%= render template: 'layouts/govuk/application' %>

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

@@ -0,0 +1,2 @@
+<%# The GOVUK left_panel layout is no different to application %>
+<%= render template: 'layouts/govuk/application' %>

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

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
+    <link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
+    <link rel="preconnect  dns-prefetch" href="https://www.nhs.uk/">
+    <link rel="preconnect  dns-prefetch" href="https://assets.nhs.uk/" crossorigin>
+
+    <%= stylesheet_link_tag 'nhsuk', 'data-turbo-track': 'reload' %>
+
+    <script src="/design_system/static/nhsuk-frontend-9.6.4/nhsuk.min.js" defer></script>
+
+    <link rel="shortcut icon" href="/design_system/static/nhsuk-frontend-9.6.4/favicons/favicon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="/design_system/static/nhsuk-frontend-9.6.4/favicons/apple-touch-icon-180x180.png">
+    <link rel="mask-icon" href="/design_system/static/nhsuk-frontend-9.6.4/favicons/favicon.svg" color="#005eb8">
+    <link rel="icon" sizes="192x192" href="/design_system/static/nhsuk-frontend-9.6.4/favicons/favicon-192x192.png">
+    <meta name="msapplication-TileImage" content="/design_system/static/nhsuk-frontend-9.6.4/favicons/mediumtile-144x144.png">
+    <meta name="msapplication-TileColor" content="#005eb8">
+    <meta name="msapplication-square70x70logo" content="/design_system/static/nhsuk-frontend-9.6.4/favicons/smalltile-70x70.png">
+    <meta name="msapplication-square150x150logo" content="/design_system/static/nhsuk-frontend-9.6.4/favicons/mediumtile-150x150.png">
+    <meta name="msapplication-wide310x150logo" content="/design_system/static/nhsuk-frontend-9.6.4/favicons/widetile-310x150.png">
+    <meta name="msapplication-square310x310logo" content="/design_system/static/nhsuk-frontend-9.6.4/favicons/largetile-310x310.png">
+
+    <%= yield :head %>
+  </head>
+<body class="" data-ds-brand="<%= brand %>" data-ds-layout="<%= @design_system_layout %>">
+  <%= javascript_tag nonce: true do %>
+    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+  <% end %>
+
+  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>
+
+  <header class="nhsuk-header" role="banner">
+
+    <div class="nhsuk-header__container">
+      <div class="nhsuk-header__logo"><a class="nhsuk-header__link nhsuk-header__link--service" href="/" aria-label="NHS homepage">
+
+          <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+            <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
+            <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          </svg>
+          <span class="nhsuk-header__service-name">
+            <%= @service_name %>
+          </span>
+        </a>
+      </div>
+
+      <div class="nhsuk-header__content" id="content-header">
+        <div class="nhsuk-header__search">
+          <div class="nhsuk-header__search-wrap" id="wrap-search">
+            <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
+              <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
+              <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
+              <button class="nhsuk-search__submit" type="submit">
+                <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                  <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+                </svg>
+                <span class="nhsuk-u-visually-hidden">Search</span>
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <%= render partial: 'nhsuk/navigation' %>
+  </header>
+
+  <%= yield :breadcrumbs %>
+
+  <div class="nhsuk-width-container ">
+
+    <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 %>
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+  <footer role="contentinfo">
+    <div class="nhsuk-footer-container">
+      <div class="nhsuk-width-container">
+        <h2 class="nhsuk-u-visually-hidden">Support links</h2>
+        <div class="nhsuk-footer">
+
+          <ul class="nhsuk-footer__list">
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">NHS sites</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">About us</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Site map</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Our policies</a>
+            </li>
+            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+              <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
+            </li>
+          </ul>
+          <div>
+            <p class="nhsuk-footer__copyright">&copy; NHS England</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </footer>
+
+</body>
+
+</html>

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

@@ -0,0 +1,2 @@
+<%# The NHS full_page layout is currently no different to application %>
+<%= render template: 'layouts/nhsuk/application' %>

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

@@ -0,0 +1,2 @@
+<%# The NHS left_panel layout is no different to application %>
+<%= render template: 'layouts/nhsuk/application' %>

data/app/views/nhsuk/_navigation.html.erb

@@ -0,0 +1,25 @@
+<% if controller.navigation_items.present? %>
+  <div class="nhsuk-navigation-container">
+    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <ul class="nhsuk-header__navigation-list">
+        <% controller.navigation_items.each do |item| %>
+          <li class="nhsuk-header__navigation-item">
+            <%= link_to(item[:label], item[:path], item[:options].merge(class: 'nhsuk-header__navigation-link')) %>
+          </li>
+        <% end %>
+        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+          <%= link_to('Home', root_path, class: 'nhsuk-header__navigation-link') %>
+        </li>
+        <li class="nhsuk-mobile-menu-container">
+          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+            <span class="nhsuk-u-visually-hidden">Browse</span>
+            More
+            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+<% end %>

data/config/importmap.rb

@@ -0,0 +1,4 @@
+pin 'ds-stimulus-loading', to: '/design_system/static/stimulus-3.2.2/stimulus-loading.js'
+# We pin the design system controllers to the importmap, so they can be imported,
+# rather than just be included in the HTML.
+pin 'design_system/controllers', to: "/design_system/static/design_system-#{DesignSystem::VERSION}/design_system.js"