govuk-components 5.5.0 → 5.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5fa50663dcfbb48693515d4cc519f16bb9e0be2a432e631fceff9327191b4965
-  data.tar.gz: fc05c7022b6f3a4fa1205d6548e14c18ef790c3539d8557c345ccb1d72ec1eda
+  metadata.gz: ee7308a556bfe89c65bc0d7a239ffedf9266ae531b5fc320f7e85be9954fbf32
+  data.tar.gz: '09d4a6adc3c583c71bc8a40e60cf64ffb61d0cdc83b5505e1801134897a50028'
 SHA512:
-  metadata.gz: da7f78f5378def00c0acdecb82c37dce7fdcd4ce9c1654a3cc46b1a180a3f322d3fdd881c1673f1a3cb065a0dedb56e6a7c9c3648298962e10f6b84f4016e96f
-  data.tar.gz: e3f930679c6accfa1e462b3ea33881f34fb12426000ccd7a728e15db2c3af19a2bc7070f0d1c0836641b2ec97bad8f9b4e73d0accb5f49ea357b5a163e7ba898
+  metadata.gz: 175d8404af31999dcef4f7507745b3711da5a0c47cc00f2299f4a3c84a9efb400af417c8e43f2dc6ca6742d17a35a3f09eb5b9e44a931f1d9d1aee7fc36f264d
+  data.tar.gz: 98e3cf8d4d9822888ddd2a4b04489931523e9bda4deb9a112827efbc1d4bb1d8d5155d98b8b7340993097f8d5e74e2324c0f27a5ad1aeabb2aa6343b3ff263df

data/README.md

@@ -6,7 +6,7 @@
 [![Gem](https://img.shields.io/gem/dt/govuk-components?logo=rubygems)](https://rubygems.org/gems/govuk-components)
 [![Test coverage](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/test_coverage)](https://codeclimate.com/github/x-govuk/govuk-components/test_coverage)
 [![Licence](https://img.shields.io/github/license/x-govuk/govuk-components)](https://github.com/x-govuk/govuk-components/blob/main/LICENSE.txt)
-[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.5.0-brightgreen)](https://design-system.service.gov.uk)
+[![GOV.UK Design System version](https://img.shields.io/badge/GOV.UK%20Design%20System-5.6.0-brightgreen)](https://design-system.service.gov.uk)
 [![ViewComponent](https://img.shields.io/badge/ViewComponent-3.3.0-brightgreen)](https://viewcomponent.org/)
 [![Rails](https://img.shields.io/badge/Rails-7.0.8%20%E2%95%B1%207.1.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
 [![Ruby](https://img.shields.io/badge/Ruby-3.1.6%20%20%E2%95%B1%203.2.4%20%20%E2%95%B1%203.3.4-E16D6D)](https://www.ruby-lang.org/en/downloads/)

data/app/components/govuk_component/base.rb

@@ -27,6 +27,13 @@ class GovukComponent::Base < ViewComponent::Base
   end
 
   def brand(override = nil)
-    override || config.brand
+    override || config.brand_overrides.fetch(class_prefix, config.brand)
+  end
+
+  # We want the main component and the subcomponents here so
+  # match on the second segment of the component class name
+  def class_prefix
+    # FIXME: this looks a bit dodgy...
+    self.class.name.match(/\w+::\w+/).to_s
   end
 end

data/app/components/govuk_component/header_component.rb

@@ -9,7 +9,8 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
               :menu_button_label,
               :navigation_label,
               :custom_navigation_classes,
-              :custom_container_classes
+              :custom_container_classes,
+              :full_width_border
 
   def initialize(classes: [],
                  html_attributes: {},
@@ -19,7 +20,8 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
                  navigation_label: config.default_header_navigation_label,
                  service_name: config.default_header_service_name,
                  service_url: config.default_header_service_url,
-                 container_classes: nil)
+                 container_classes: nil,
+                 full_width_border: false)
 
     @homepage_url              = homepage_url
     @service_name              = service_name
@@ -28,6 +30,7 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
     @custom_navigation_classes = navigation_classes
     @navigation_label          = navigation_label
     @custom_container_classes  = container_classes
+    @full_width_border         = full_width_border
 
     super(classes:, html_attributes:)
   end
@@ -35,7 +38,12 @@ class GovukComponent::HeaderComponent < GovukComponent::Base
 private
 
   def default_attributes
-    { class: ["#{brand}-header"] }
+    {
+      class: class_names(
+        "#{brand}-header",
+        "#{brand}-header--full-width-border" => full_width_border
+      )
+    }
   end
 
   def navigation_html_attributes

data/app/components/govuk_component/service_navigation_component/navigation_item_component.rb

@@ -0,0 +1,83 @@
+class GovukComponent::ServiceNavigationComponent::NavigationItemComponent < GovukComponent::Base
+  attr_reader :text, :href, :current_path, :active_when, :current, :active
+
+  def initialize(text:, href: nil, current_path: nil, active_when: nil, current: false, active: false, classes: [], html_attributes: {})
+    @current = current
+    @active = active
+    @text = text
+    @href = href
+
+    @current_path = current_path
+    @active_when = active_when
+
+    super(classes:, html_attributes:)
+  end
+
+  def call
+    tag.li(**html_attributes) do
+      if href.present?
+        wrap_link(link_to(text, href, class: "#{brand}-service-navigation__link", **aria_current))
+      else
+        tag.span(text, class: "#{brand}-service-navigation__text")
+      end
+    end
+  end
+
+private
+
+  def wrap_link(link)
+    if current_or_active?
+      tag.strong(link, class: "#{brand}-service-navigation__active-fallback")
+    else
+      link
+    end
+  end
+
+  def current?
+    current || auto_current?
+  end
+
+  def active?
+    active || auto_active?
+  end
+
+  def current_or_active?
+    current? || active?
+  end
+
+  def auto_current?
+    return if current_path.blank?
+
+    current_path == href
+  end
+
+  def auto_active?
+    return if current_path.blank?
+
+    case active_when
+    when Regexp
+      active_when.match?(current_path)
+    when String
+      current_path.start_with?(active_when)
+    when Array
+      active_when.any? { |p| current_path.start_with?(p) }
+    else
+      false
+    end
+  end
+
+  def default_attributes
+    {
+      class: class_names(
+        "#{brand}-service-navigation__item",
+        "#{brand}-service-navigation__item--active" => current_or_active?
+      )
+    }
+  end
+
+  def aria_current
+    current = (current?) ? 'page' : true
+
+    { aria: { current: } }
+  end
+end

data/app/components/govuk_component/service_navigation_component/service_name_component.rb

@@ -0,0 +1,30 @@
+class GovukComponent::ServiceNavigationComponent::ServiceNameComponent < GovukComponent::Base
+  attr_reader :service_name, :service_url
+
+  def initialize(service_name:, service_url: nil, classes: [], html_attributes: {})
+    @service_name = service_name
+    @service_url = service_url
+
+    super(classes:, html_attributes:)
+  end
+
+  def call
+    text = (service_url.present?) ? build_link : build_span
+
+    tag.span(text, **html_attributes)
+  end
+
+private
+
+  def build_link
+    link_to(service_name, service_url, class: "#{brand}-service-navigation__link")
+  end
+
+  def build_span
+    tag.span(service_name, class: "#{brand}-service-navigation__text")
+  end
+
+  def default_attributes
+    { class: "#{brand}-service-navigation__service-name" }
+  end
+end

data/app/components/govuk_component/service_navigation_component.rb

@@ -0,0 +1,92 @@
+class GovukComponent::ServiceNavigationComponent < GovukComponent::Base
+  renders_one :start_slot
+  renders_one :end_slot
+
+  renders_one :service_name, "GovukComponent::ServiceNavigationComponent::ServiceNameComponent"
+  renders_many :navigation_items, ->(text:, href: nil, current_path: nil, active_when: nil, current: false, active: false, classes: [], html_attributes: {}) do
+    GovukComponent::ServiceNavigationComponent::NavigationItemComponent.new(
+      text:,
+      href:,
+      current_path: current_path || @current_path,
+      active_when:,
+      current:,
+      active:,
+      classes:,
+      html_attributes:
+    )
+  end
+
+  attr_reader :aria_label_text, :navigation_id
+
+  def initialize(service_name: nil, service_url: nil, navigation_items: [], current_path: nil, aria_label: "Service information", navigation_id: 'navigation', classes: [], html_attributes: {})
+    @service_name_text = service_name
+    @service_url = service_url
+    @current_path = current_path
+    @aria_label_text = aria_label
+    @navigation_id = navigation_id
+
+    if @service_name_text.present?
+      with_service_name(service_name: @service_name_text, service_url:)
+    end
+
+    navigation_items.each { |ni| with_navigation_item(current_path:, **ni) }
+
+    super(classes:, html_attributes:)
+  end
+
+  def call
+    outer_element do
+      tag.div(class: "#{brand}-width_container") do
+        safe_join(
+          [
+            start_slot,
+            tag.div(class: "#{brand}-service-navigation__container") do
+              safe_join([service_name, navigation].compact)
+            end,
+            end_slot
+          ]
+        )
+      end
+    end
+  end
+
+  def navigation
+    return unless navigation_items?
+
+    tag.nav(aria: { label: "Menu" }, class: "#{brand}-service-navigation__wrapper") do
+      safe_join([menu_button, navigation_list])
+    end
+  end
+
+  def navigation_list
+    tag.ul(safe_join(navigation_items), id: navigation_id, class: "#{brand}-service-navigation__list")
+  end
+
+private
+
+  def outer_element(&block)
+    if service_name?
+      tag.section(**aria_attributes, **html_attributes, &block)
+    else
+      tag.div(**html_attributes, &block)
+    end
+  end
+
+  def default_attributes
+    { class: "#{brand}-service-navigation", data: { module: "#{brand}-service-navigation" } }
+  end
+
+  def aria_attributes
+    { aria: { label: aria_label_text } }
+  end
+
+  def menu_button
+    tag.button(
+      "Menu",
+      type: 'button',
+      class: ["#{brand}-service-navigation__toggle", "#{brand}-js-service-navigation-toggle"],
+      aria: { controls: navigation_id },
+      hidden: true
+    )
+  end
+end

data/app/helpers/govuk_components_helper.rb

@@ -13,6 +13,7 @@ module GovukComponentsHelper
     govuk_pagination: 'GovukComponent::PaginationComponent',
     govuk_panel: 'GovukComponent::PanelComponent',
     govuk_phase_banner: 'GovukComponent::PhaseBannerComponent',
+    govuk_service_navigation: 'GovukComponent::ServiceNavigationComponent',
     govuk_section_break: 'GovukComponent::SectionBreakComponent',
     govuk_start_button: 'GovukComponent::StartButtonComponent',
     govuk_summary_list: 'GovukComponent::SummaryListComponent',

data/lib/govuk/components/engine.rb

@@ -33,6 +33,7 @@ module Govuk
     # Default components configuration
     #
     # +:brand+ sets the value used to prefix all classes, used to allow the components to be branded for alternative (similar) design systems
+    # +:brand_overrides+ sets the value used to prefix classes and slots for the component class.
     # +:default_back_link_text+ Default text for the back link, defaults to +Back+
     # +:default_breadcrumbs_collapse_on_mobile+ false
     # +:default_breadcrumbs_hide_in_print+ false
@@ -75,6 +76,30 @@ module Govuk
     # +:enable_auto_table_scopes+ automatically adds a scope of 'col' to th elements in thead and 'row' to th elements in tbody.
     DEFAULTS = {
       brand: 'govuk',
+      brand_overrides: {
+        # 'GovukComponent::AccordionComponent'           => 'another-brand',
+        # 'GovukComponent::BackLinkComponent'            => 'another-brand',
+        # 'GovukComponent::BreadcrumbsComponent'         => 'another-brand',
+        # 'GovukComponent::CookieBannerComponent'        => 'another-brand',
+        # 'GovukComponent::DetailsComponent'             => 'another-brand',
+        # 'GovukComponent::ExitThisPageComponent'        => 'another-brand',
+        # 'GovukComponent::FooterComponent'              => 'another-brand',
+        # 'GovukComponent::HeaderComponent'              => 'another-brand',
+        # 'GovukComponent::InsetTextComponent'           => 'another-brand',
+        # 'GovukComponent::NotificationBannerComponent'  => 'another-brand',
+        # 'GovukComponent::PaginationComponent'          => 'another-brand',
+        # 'GovukComponent::PanelComponent'               => 'another-brand',
+        # 'GovukComponent::PhaseBannerComponent'         => 'another-brand',
+        # 'GovukComponent::SectionBreakComponent'        => 'another-brand',
+        # 'GovukComponent::ServiceNavigationComponent'   => 'another-brand',
+        # 'GovukComponent::StartButtonComponent'         => 'another-brand',
+        # 'GovukComponent::SummaryListComponent'         => 'another-brand',
+        # 'GovukComponent::TableComponent'               => 'another-brand',
+        # 'GovukComponent::TabComponent'                 => 'another-brand',
+        # 'GovukComponent::TagComponent'                 => 'another-brand',
+        # 'GovukComponent::TaskListComponent'            => 'another-brand',
+        # 'GovukComponent::WarningTextComponent'         => 'another-brand',
+      },
       default_back_link_text: 'Back',
       default_breadcrumbs_collapse_on_mobile: false,
       default_breadcrumbs_hide_in_print: false,

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '5.5.0'.freeze
+    VERSION = '5.6.0'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 5.5.0
+  version: 5.6.0
 platform: ruby
 authors:
 - DfE developers
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-13 00:00:00.000000000 Z
+date: 2024-09-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -59,7 +59,7 @@ dependencies:
         version: '3.9'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.14'
+        version: '3.15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -69,7 +69,7 @@ dependencies:
         version: '3.9'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.14'
+        version: '3.15'
 - !ruby/object:Gem::Dependency
   name: deep_merge
   requirement: !ruby/object:Gem::Requirement
@@ -300,14 +300,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.27.0
+        version: 0.28.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.27.0
+        version: 0.28.0
 - !ruby/object:Gem::Dependency
   name: webrick
   requirement: !ruby/object:Gem::Requirement
@@ -360,6 +360,9 @@ files:
 - app/components/govuk_component/phase_banner_component.html.erb
 - app/components/govuk_component/phase_banner_component.rb
 - app/components/govuk_component/section_break_component.rb
+- app/components/govuk_component/service_navigation_component.rb
+- app/components/govuk_component/service_navigation_component/navigation_item_component.rb
+- app/components/govuk_component/service_navigation_component/service_name_component.rb
 - app/components/govuk_component/start_button_component.rb
 - app/components/govuk_component/summary_list_component.rb
 - app/components/govuk_component/summary_list_component/action_component.rb