RubyGems - design_system - Versions diffs - 0.10.0 → 0.12.0 - Mend

design_system 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (292) hide show

data/app/helpers/design_system_helper.rb CHANGED Viewed

@@ -74,12 +74,12 @@ module DesignSystemHelper
     will_paginate(collection, defaults.merge!(options))
   end
-  def ds_alert(message)
-    DesignSystem::Registry.builder(brand, 'notification', self).render_alert(message)
+  def ds_alert(message = nil, &)
+    DesignSystem::Registry.builder(brand, 'notification', self).render_alert(message, &)
   end
-  def ds_notice(message)
-    DesignSystem::Registry.builder(brand, 'notification', self).render_notice(message)
+  def ds_notice(message = nil, &)
+    DesignSystem::Registry.builder(brand, 'notification', self).render_notice(message, &)
   end
   def ds_heading(text, level: 2, **options)
@@ -114,4 +114,8 @@ module DesignSystemHelper
     DesignSystem::Registry.builder(brand, 'details', self).render_details(summary_text, &)
   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)
+  end
 end

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

@@ -118,6 +118,7 @@
   </header>
   <div class="govuk-width-container">
     <%= yield :breadcrumbs %>
+    <%= yield :backlink %>
     <main class="govuk-main-wrapper" id="main-content">
       <%= render :partial => 'layouts/alert_and_notice' %>
       <%= yield %>

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

@@ -2,8 +2,7 @@
 <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">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <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>
@@ -12,36 +11,29 @@
     <%= 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">
+    <link rel="icon" href="/design_system/static/nhsuk-frontend-10.3.1/images/favicon.ico" sizes="48x48">
+    <link rel="icon" href="/design_system/static/nhsuk-frontend-10.3.1/images/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="mask-icon" href="/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-mask.svg" color="#005eb8">
+    <link rel="apple-touch-icon" href="/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-180.png">
+    <link rel="manifest" href="/design_system/static/nhsuk-frontend-10.3.1/manifest.json">
     <%= 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');
+    document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');
   <% 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">
+  <header class="nhsuk-header" role="banner" data-module="nhsuk-header">
-          <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>
+    <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">
+          <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" />
           </svg>
           <span class="nhsuk-header__service-name">
             <%= @service_name %>
@@ -49,31 +41,31 @@
         </a>
       </div>
       <% if @searchbar_url %>
-        <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="<%= @searchbar_url %>" 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>
+        <search class="nhsuk-header__search">
+          <form class="nhsuk-header__search-form" id="search" action="<%= @searchbar_url %>" method="get" role="search" novalidate>
+            <div class="nhsuk-form-group">
+              <label class="nhsuk-label nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
+              <div class="nhsuk-input-wrapper">
+                <input class="nhsuk-input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
+                <button class="nhsuk-button nhsuk-button--small" data-module="nhsuk-button" type="submit">
+                  <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
+                    <title>Search</title>
+                    <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
                   </svg>
-                  <span class="nhsuk-u-visually-hidden">Search</span>
                 </button>
-              </form>
+              </div>
             </div>
-          </div>
-        </div>
+          </form>
+        </search>
       <% end %>
     </div>
     <%= render partial: 'nhsuk/navigation' %>
   </header>
-  <%= yield :breadcrumbs %>
   <div class="nhsuk-width-container ">
+    <%= yield :breadcrumbs %>
+    <%= yield :backlink %>
     <main class="nhsuk-main-wrapper " id="maincontent" role="main">
       <%= render :partial => 'layouts/alert_and_notice' %>
@@ -86,34 +78,35 @@
     </main>
   </div>
-<footer role="contentinfo">
-  <div class="nhsuk-footer-container">
-    <div class="nhsuk-width-container">
+<footer class="nhsuk-footer" role="contentinfo">
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-footer__meta">
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
-      <div class="nhsuk-footer">
-        <ul class="nhsuk-footer__list">
-          <% if controller.footer_links.present? %>
-            <% controller.footer_links.each do |link| %>
-              <li class="nhsuk-footer__list-item">
-                <%= link_to link[:name],
-                    link[:href],
-                    { class: "nhsuk-footer__list-item-link" }.merge(link[:options] || {}) %>
-              </li>
-            <% end %>
+      <ul class="nhsuk-footer__list">
+        <% if controller.footer_links.present? %>
+          <% controller.footer_links.each do |link| %>
+            <li class="nhsuk-footer__list-item">
+              <%= link_to link[:name],
+                  link[:href],
+                  { class: "nhsuk-footer__list-item-link" }.merge(link[:options] || {}) %>
+            </li>
           <% end %>
-        </ul>
-        <div>
-          <p class="nhsuk-footer__copyright">
-            <% if controller.copyright_notice.present? %>
-              <%= controller.copyright_notice %>
-            <% end %>
-          </p>
-        </div>
-      </div>
+        <% end %>
+      </ul>
+      <p class="nhsuk-body-s">
+        <% if controller.copyright_notice.present? %>
+          <%= controller.copyright_notice %>
+        <% end %>
+      </p>
     </div>
   </div>
 </footer>
+  <script type="module" src="/design_system/static/nhsuk-frontend-10.3.1/nhsuk-frontend.min.js"></script>
+  <script type="module">
+    import { initAll } from '/design_system/static/nhsuk-frontend-10.3.1/nhsuk-frontend.min.js'
+    initAll()
+  </script>
 </body>
 </html>

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

@@ -1,22 +1,18 @@
 <% if controller.navigation_items.present? %>
-  <div class="nhsuk-navigation-container">
-    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+  <nav class="nhsuk-header__navigation" aria-label="Menu">
+    <div class="nhsuk-header__navigation-container nhsuk-width-container">
       <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-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>
+        <li class="nhsuk-header__menu" hidden>
+          <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
+          </button>
+        </li>
       </ul>
-    </nav>
-  </div>
+    </div>
+  </nav>
 <% end %>

data/lib/design_system/engine.rb CHANGED Viewed

@@ -16,7 +16,7 @@ module DesignSystem
         urls: [
           "/design_system/static/design_system-#{DesignSystem::VERSION}",
           '/design_system/static/govuk-frontend-5.11.1',
-          '/design_system/static/nhsuk-frontend-9.6.4',
+          '/design_system/static/nhsuk-frontend-10.3.1',
           '/design_system/static/stimulus-3.2.2',
           '/design_system/static/tailwind-4.1.6'
         ],

data/lib/design_system/generic/builders/action_link.rb ADDED Viewed

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+module DesignSystem
+  module Generic
+    module Builders
+      # This class provides generic methods to display action links, which should be used to signpost the start of a digital service.
+      class ActionLink < Base
+        def render_action_link(name = nil, options = nil, html_options = nil)
+          options ||= {}
+          html_options ||= {}
+          prep_style(name, options, html_options)
+        end
+      end
+    end
+  end
+end

data/lib/design_system/generic/builders/elements/backlink.rb ADDED Viewed

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+module DesignSystem
+  module Generic
+    module Builders
+      module Elements
+        # This mixin module is used to provide back link.
+        module Backlink
+          def backlink(label, path)
+            @backlink = true
+            @label = label || 'Back'
+            @path = path
+          end
+          private
+          def content_for_backlink
+            content_for(:backlink) do
+              render_backlink
+            end
+          end
+          def render_backlink
+            link_to(@label, @path, class: "#{brand}-back-link")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/design_system/generic/builders/fixed_elements.rb CHANGED Viewed

@@ -5,12 +5,16 @@ module DesignSystem
     module Builders
       # This class is used to provide the generic fixed elements builder.
       class FixedElements < Base
+        include Elements::Backlink
         include Elements::Breadcrumbs
         include Elements::Form
         include Elements::Headings
         def render
+          raise ArgumentError, 'Cannot use both backlink and breadcrumbs' if @backlink && @breadcrumbs.present?
           content_for_breadcrumbs if @breadcrumbs.present?
+          content_for_backlink if @backlink.present?
           render_main_container do
             safe_buffer = ActiveSupport::SafeBuffer.new

data/lib/design_system/generic/builders/link.rb CHANGED Viewed

@@ -25,6 +25,15 @@ module DesignSystem
         def prep_link_classes(type)
           if type && button_type_class_hash[type].present?
             button_type_class_hash[type]
+          else
+            link_class
+          end
+        end
+        def link_class
+          case @context.instance_variable_get(:@link_context)
+          when :notification_banner
+            "#{brand}-notification-banner__link"
           else
             "#{brand}-link"
           end

data/lib/design_system/generic/builders/notification.rb CHANGED Viewed

@@ -7,19 +7,23 @@ module DesignSystem
       class Notification < Base
         include ActionView::Helpers::SanitizeHelper
-        def render_alert(msg)
+        def render_alert(msg = nil, &)
+          content_to_display = block_given? ? capture(&) : msg
           content_tag(:div, class: "#{brand}-error-summary", 'aria-labelledby': 'error-summary-title', role: 'alert',
                             tabindex: '-1') do
-            content_tag(:h2, sanitize(msg, tags: %w[b p br a], attributes: %w[href target]),
+            content_tag(:h2, content_to_display,
                         class: "#{brand}-error-summary__title", id: 'error-summary-title')
           end
         end
-        def render_notice(msg)
+        def render_notice(msg = nil, &)
+          @context.instance_variable_set(:@link_context, :notification_banner)
+          content_to_display = block_given? ? capture(&) : msg
           content_tag(:div, class: "#{brand}-notification-banner", role: 'region',
                             'aria-labelledby': "#{brand}-notification-banner-title",
                             'data-module': "#{brand}-notification-banner") do
-            banner_tile + banner_content(msg)
+            banner_tile + banner_content(content_to_display)
           end
         end
@@ -32,9 +36,9 @@ module DesignSystem
           end
         end
-        def banner_content(msg)
+        def banner_content(content)
           content_tag(:div, class: "#{brand}-notification-banner__content") do
-            content_tag(:p, sanitize(msg, tags: %w[b p br a], attributes: %w[href targ]),
+            content_tag(:p, content,
                         class: "#{brand}-notification-banner__heading")
           end
         end

data/lib/design_system/generic/builders/pagination_renderer.rb CHANGED Viewed

@@ -60,11 +60,8 @@ module DesignSystem
         # SVG for the "Previous" icon
         def previous_icon
           %(
-          <svg class="#{brand}-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-          aria-hidden="true" width="34" height="34">
-          <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4
-          1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7
-           3c0 .2 0 .4.1.6z"></path>
+          <svg class="#{brand}-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+            <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
           </svg>
           )
         end
@@ -72,10 +69,8 @@ module DesignSystem
         # SVG for the "Next" icon
         def next_icon
           %(
-          <svg class="#{brand}-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-          aria-hidden="true" width="34" height="34">
-          <path d="M19.9 11.7l-2.7-3c-.2-.2-.5-.2-.7 0-.1.1-.1.2-.1.3v2H5c-.6 0-1 .4-1 1s.4 1 1 1h11v2c0
-          .2.1.4.3.5h.2c.1 0 .3-.1.4-.2l2.7-3c0-.2 0-.4-.1-.6z"></path>
+          <svg class="#{brand}-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+            <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
           </svg>
           )
         end

data/lib/design_system/govuk/builders/action_link.rb ADDED Viewed

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+module DesignSystem
+  module Govuk
+    module Builders
+      # This class provides GOVUK Action Link. GOVUK doesn't have a specific action link component, so we use the button styled link component.
+      class ActionLink < ::DesignSystem::Generic::Builders::ActionLink
+        private
+        def prep_style(name, options, html_options)
+          html_options[:class] = "#{brand}-button"
+          link_to(name, options, html_options)
+        end
+      end
+    end
+  end
+end

data/lib/design_system/govuk/form_builder.rb CHANGED Viewed

@@ -405,14 +405,18 @@ module DesignSystem
         # If translation returns the humanized version of the value,
         # it means no translation was found, so return the original value
         # Extra condition: if value contains dots and translation is only the last part
-        if translation == value.to_s.humanize ||
-           (value.to_s.include?('.') && translation == value.to_s.split('.').last.humanize)
+        if translation == value.to_s.humanize || value_contains_dots?(value, translation)
           value.to_s
         else
           translation
         end
       end
+      def value_contains_dots?(value, translation)
+        (value.to_s.include?('.') && translation == value.to_s.split('.').last.humanize) ||
+          (value.to_s.ends_with?('.') && translation.blank?)
+      end
       # GOVUKDesignSystemFormBuilder::Base field_id method
       def govuk_field_id(method, link_errors: false)
         GOVUKDesignSystemFormBuilder::Base.new(self, object_name, method).field_id(link_errors:)

data/lib/design_system/govuk/test_helpers/form_builder_testable.rb CHANGED Viewed

@@ -137,6 +137,20 @@ module DesignSystem
             end
           end
+          test 'ds_check_box item ending with dot in value is not incorrectly translated' do
+            value_ending_with_dot = 'Made up dummy values with a full stop.'
+            @output_buffer = ds_form_with(model: DummyModel.new, builder: @builder, url: '/') do |f|
+              f.ds_check_box(:role, {}, value_ending_with_dot)
+            end
+            assert_select('form') do
+              assert_select("div.#{@brand}-checkboxes__item") do
+                label = assert_select("label.#{@brand}-label.#{@brand}-checkboxes__label").first
+                assert_equal value_ending_with_dot, label.text.strip
+              end
+            end
+          end
           test 'ds_collection_select' do
             @output_buffer = ds_form_with(model: assistants(:one), builder: @builder) do |f|
               f.ds_collection_select(:department_id, Department.all, :id, :title)

data/lib/design_system/nhsuk/builders/action_link.rb ADDED Viewed

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+module DesignSystem
+  module Nhsuk
+    module Builders
+      # This class provides NHSUK Action Link.
+      class ActionLink < ::DesignSystem::Generic::Builders::ActionLink
+        private
+        def prep_style(name, options, html_options)
+          html_options[:class] = "#{brand}-action-link"
+          link_to(options, html_options) do
+            arrow_right_circle_icon +
+              content_tag(:span, name, class: "#{brand}-action-link__text")
+          end
+        end
+        def arrow_right_circle_icon
+          %(
+            <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>
+          ).html_safe
+        end
+      end
+    end
+  end
+end

data/lib/design_system/nhsuk/builders/elements/breadcrumbs.rb CHANGED Viewed

@@ -9,31 +9,27 @@ module DesignSystem
           def content_for_breadcrumbs
             content_for(:breadcrumbs) do
               content_tag(:nav, 'aria-label': 'Breadcrumb', class: "#{brand}-breadcrumb") do
-                content_tag(:div, class: "#{brand}-width-container") do
-                  content_tag(:ol, class: "#{brand}-breadcrumb__list") do
-                    @breadcrumbs.each_with_object(ActiveSupport::SafeBuffer.new) do |breadcrumb, safe_buffer|
-                      safe_buffer.concat(render_breadcrumb(breadcrumb))
-                    end
-                  end +
-                    content_for_back_link
-                end
+                content_tag(:ol, class: "#{brand}-breadcrumb__list") do
+                  @breadcrumbs.each_with_object(ActiveSupport::SafeBuffer.new) do |breadcrumb, safe_buffer|
+                    safe_buffer.concat(render_breadcrumb(breadcrumb))
+                  end
+                end +
+                  content_for_back_link
               end
             end
           end
           def content_for_back_link
-            content_tag(:p, class: "#{brand}-breadcrumb__back") do
-              link_to(@breadcrumbs.last[:path],
-                      class: "#{brand}-breadcrumb__backlink",
-                      'aria-current': @context.current_page?(@breadcrumbs.last[:path]) ? 'page' : nil) do
-                content_tag(:span, 'Back to &nbsp;'.html_safe, class: "#{brand}-u-visually-hidden") +
-                  @breadcrumbs.last[:label]
-              end
+            link_to(@breadcrumbs.last[:path],
+                    class: "#{brand}-back-link",
+                    'aria-current': @context.current_page?(@breadcrumbs.last[:path]) ? 'page' : nil) do
+              content_tag(:span, 'Back to &nbsp;'.html_safe, class: "#{brand}-u-visually-hidden") +
+                @breadcrumbs.last[:label]
             end
           end
           def render_breadcrumb(breadcrumb)
-            content_tag(:li, class: "#{brand}-breadcrumb__item") do
+            content_tag(:li, class: "#{brand}-breadcrumb__list-item") do
               link_to(breadcrumb[:label],
                       breadcrumb[:path],
                       class: "#{brand}-breadcrumb__link",

data/lib/design_system/nhsuk/builders/notification.rb CHANGED Viewed

@@ -5,12 +5,6 @@ module DesignSystem
     module Builders
       # This class provides Nhsuk notifications html.
       class Notification < ::DesignSystem::Govuk::Builders::Notification
-        def render_notice(msg)
-          content = content_tag(:p, sanitize(msg, tags: %w[b p br a], attributes: %w[href target]))
-          content_tag(:div, class: "#{brand}-inset-text") do
-            content_tag(:span, 'Information:', class: "#{brand}-u-visually-hidden") + content
-          end
-        end
       end
     end
   end

data/lib/design_system/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module DesignSystem
-  VERSION = '0.10.0'.freeze
+  VERSION = '0.12.0'.freeze
 end

data/lib/tasks/nhsuk.rake CHANGED Viewed

@@ -39,7 +39,7 @@ module NhsukHelpers
   end
   def self.copy_scss_files(temp_dir, version, brand)
-    base_path = "#{temp_dir}/node_modules/#{brand}-frontend/packages"
+    base_path = "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}"
     target_base = "#{STYLESHEET_PATH}/#{versioned_dir(version, brand)}"
     # Copy SCSS files from directories
@@ -53,24 +53,29 @@ module NhsukHelpers
     end
     # Copy root SCSS files
+    FileUtils.cp("#{base_path}/index.scss", "#{target_base}/index.scss")
     FileUtils.cp("#{base_path}/#{brand}.scss", "#{target_base}/#{brand}.scss")
   end
   def self.copy_assets_files(temp_dir, version, brand)
     FileUtils.cp_r(
-      "#{temp_dir}/node_modules/#{brand}-frontend/packages/assets/.",
+      "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}/assets/.",
       "#{ASSETS_PATH}/#{versioned_dir(version, brand)}/"
     )
   end
   def self.copy_js_files(temp_dir, version, brand)
     FileUtils.cp(
-      "#{temp_dir}/node_modules/#{brand}-frontend/packages/#{brand}.js",
+      "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}/#{brand}.js",
       "#{ASSETS_PATH}/#{versioned_dir(version, brand)}/#{brand}.js"
     )
     FileUtils.cp(
-      "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}.min.js",
-      "#{ASSETS_PATH}/#{versioned_dir(version, brand)}/#{brand}.min.js"
+      "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}/#{brand}-frontend.min.js",
+      "#{ASSETS_PATH}/#{versioned_dir(version, brand)}/#{brand}-frontend.min.js"
+    )
+    FileUtils.cp(
+      "#{temp_dir}/node_modules/#{brand}-frontend/dist/#{brand}/#{brand}-frontend.min.js.map",
+      "#{ASSETS_PATH}/#{versioned_dir(version, brand)}/#{brand}-frontend.min.js.map"
     )
   end
 end

data/public/design_system/static/{nhsuk-frontend-9.6.4/favicons → nhsuk-frontend-10.3.1/images}/favicon.ico RENAMED Viewed

Binary file

data/public/design_system/static/nhsuk-frontend-10.3.1/images/favicon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108">
+  <path fill="#FFF" d="M4 34h100v40H4z"/>
+  <path fill="#005EB8" d="M104 34v40H4V34h100Zm-13.8 2.8c-7.2 0-14.5 2.5-14.5 11 0 5 3.9 6.7 7.4 8.1l.4.1c2.7 1 5 2 5 4.3 0 3.2-4.3 3.7-7 3.7a19 19 0 0 1-8-1.8l-2 6.8c2.8 1 6.8 1.8 10 1.8 7.8 0 16-2.3 16-11.3 0-9.8-12.8-8.3-12.8-12.8 0-2.7 2.8-3.2 6.3-3.2 2.5 0 5 .5 7.3 1.5l2-6.8c-2.3-1-6-1.5-10-1.5Zm-65.5 1h-11l-7 32.5H15l4.5-22.5h.3l6.7 22.5h10.8l7-32.5H36l-4.5 22.5h-.3l-6.4-22.5Zm31.6 0h-9l-6.5 32.5h8.5l3-14h10.2l-2.8 14h8.8l6.8-32.5h-8.8L63.7 50h-10l2.5-12.3Z"/>
+</svg>

data/public/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-180.png ADDED Viewed

Binary file

data/public/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-192.png ADDED Viewed

Binary file

data/public/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-512.png ADDED Viewed

Binary file

data/public/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-icon-mask.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108">
+  <path d="M104 34v40H4V34h100Zm-13.8 2.8c-7.2 0-14.5 2.5-14.5 11 0 5 3.9 6.7 7.4 8.1l.4.1c2.7 1 5 2 5 4.3 0 3.2-4.3 3.7-7 3.7a19 19 0 0 1-8-1.8l-2 6.8c2.8 1 6.8 1.8 10 1.8 7.8 0 16-2.3 16-11.3 0-9.8-12.8-8.3-12.8-12.8 0-2.7 2.8-3.2 6.3-3.2 2.5 0 5 .5 7.3 1.5l2-6.8c-2.3-1-6-1.5-10-1.5Zm-65.5 1h-11l-7 32.5H15l4.5-22.5h.3l6.7 22.5h10.8l7-32.5H36l-4.5 22.5h-.3l-6.4-22.5Zm31.6 0h-9l-6.5 32.5h8.5l3-14h10.2l-2.8 14h8.8l6.8-32.5h-8.8L63.7 50h-10l2.5-12.3Z"/>
+</svg>

data/public/design_system/static/nhsuk-frontend-10.3.1/images/nhsuk-opengraph-image.png ADDED Viewed

Binary file