design_system 0.13.2 → 0.15.0

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

@@ -0,0 +1,26 @@
+module DesignSystem
+  module Generic
+    # Plain, bullet, or numbered list rendered by ds_list.
+    class ListComponent < DesignSystem::BaseComponent
+      def initialize(list:, type: :default, **options)
+        super()
+        @list = list
+        @type = type.to_sym
+        @options = options
+      end
+
+      attr_reader :list, :type, :options
+
+      def tag_name
+        type == :number ? :ol : :ul
+      end
+
+      def list_options
+        classes = ["#{brand}-list"]
+        classes << "#{brand}-list--bullet" if type == :bullet
+        classes << "#{brand}-list--number" if type == :number
+        css_class_options_merge(options, classes)
+      end
+    end
+  end
+end

data/app/components/design_system/generic/notification_component.html.erb

@@ -0,0 +1,15 @@
+<% success = type == :success %>
+<div class="<%= brand %>-notification-banner<%= " #{brand}-notification-banner--success" if success %>"
+     role="<%= success ? 'alert' : 'region' %>"
+     aria-labelledby="<%= brand %>-notification-banner-title"
+     data-module="<%= brand %>-notification-banner">
+  <div class="<%= brand %>-notification-banner__header">
+    <h2 class="<%= brand %>-notification-banner__title" id="<%= brand %>-notification-banner-title"><%= success ? 'Success' : 'Important' %></h2>
+  </div>
+  <div class="<%= brand %>-notification-banner__content">
+    <% if heading_text.present? %>
+      <%= content_tag(heading_tag, heading_text, class: "#{brand}-notification-banner__heading") %>
+    <% end %>
+    <%= body %>
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+module DesignSystem
+  module Generic
+    # Notification banner rendered by ds_notice. Shows an "Important"/"Success"
+    # header followed by a content area with an optional heading and the
+    # message (or block) body.
+    class NotificationComponent < DesignSystem::BaseComponent
+      TYPES = %i[information success].freeze
+      HEADING_TAGS = %i[h3 p].freeze
+
+      def initialize(message: nil, type: :information, content_heading: {})
+        super()
+        @message = message
+        @type = type
+        @content_heading = content_heading || {}
+
+        return if TYPES.include?(type)
+
+        raise ArgumentError, "Invalid notification type: #{type}. Must be one of: #{TYPES.join(', ')}"
+      end
+
+      attr_reader :message, :type, :content_heading
+
+      def heading_tag
+        tag = content_heading.fetch(:tag, :h3)
+        raise ArgumentError, "Invalid content_heading tag: #{tag}." unless HEADING_TAGS.include?(tag)
+
+        tag
+      end
+
+      def heading_text
+        content_heading[:text]
+      end
+
+      def body
+        content.presence || message
+      end
+    end
+  end
+end

data/app/components/design_system/generic/panel_component.html.erb

@@ -0,0 +1,4 @@
+<div class="<%= panel_classes.join(' ') %>">
+  <h1 class="<%= brand %>-panel__title"><%= title %></h1>
+  <div class="<%= brand %>-panel__body"><%= body %></div>
+</div>

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

@@ -0,0 +1,18 @@
+module DesignSystem
+  module Generic
+    # Confirmation/transaction panel rendered by ds_panel.
+    class PanelComponent < DesignSystem::BaseComponent
+      def initialize(title:, body:)
+        super()
+        @title = title
+        @body = body
+      end
+
+      attr_reader :title, :body
+
+      def panel_classes
+        ["#{brand}-panel"]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+module DesignSystem
+  module Generic
+    # Body paragraph with typography styling, rendered by ds_paragraph.
+    # Content can be passed as the `text` argument or as a block. An optional
+    # `size` selects a smaller body style.
+    class ParagraphComponent < DesignSystem::BaseComponent
+      FONT_SIZES = %i[s].freeze
+
+      def initialize(text: nil, size: nil, **options)
+        super()
+        @text = text
+        @size = size
+        @options = options
+      end
+
+      attr_reader :text, :size, :options
+
+      # Renders nothing when neither block content nor text is supplied,
+      # matching the previous builder behaviour.
+      def render?
+        body.present?
+      end
+
+      def call
+        content_tag(:p, body, **paragraph_options)
+      end
+
+      private
+
+      def body
+        content.presence || text
+      end
+
+      def paragraph_options
+        { class: classes }.merge(options)
+      end
+
+      def classes
+        return "#{brand}-body" if size.nil?
+        raise ArgumentError, "Invalid size: #{size}" unless size.in?(FONT_SIZES)
+
+        "#{brand}-body-#{size}"
+      end
+    end
+  end
+end

data/app/components/design_system/generic/start_button_component.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:a, href: href, class: "#{brand}-button #{brand}-button--start",
+                role: 'button', draggable: 'false', **options) do %>
+<span class="<%= brand %>-button-text"><%= text %></span><svg class="<%= brand %>-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg>
+<% end %>

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

@@ -0,0 +1,17 @@
+module DesignSystem
+  module Generic
+    # The "start a service" CTA. GOV.UK defined the pattern and NHS adopted it
+    # unchanged — both brands ship identical markup with only the brand-derived
+    # CSS prefix differing, so the implementation lives here.
+    class StartButtonComponent < DesignSystem::BaseComponent
+      def initialize(text, href, options = {})
+        super()
+        @text = text
+        @href = href
+        @options = options.merge('data-module': "#{brand}-button")
+      end
+
+      attr_reader :text, :href, :options
+    end
+  end
+end

data/app/components/design_system/generic/summary_card_component.html.erb

@@ -0,0 +1,15 @@
+<div class="<%= brand %>-card">
+  <div class="<%= brand %>-card__heading-container">
+    <%= ds_heading(title, class: "#{brand}-card__heading #{brand}-heading-m") %>
+    <% if actions.any? %>
+      <ul class="<%= brand %>-card__actions">
+        <% actions.each do |action| %>
+          <li class="<%= brand %>-card__action"><%= render_action(action) %></li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+  <div class="<%= brand %>-card__content">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+module DesignSystem
+  module Generic
+    # Card that groups a titled summary list (or any content) with optional
+    # actions, rendered by ds_summary_card. The GOV.UK brand renders a
+    # summary-card variant via its own subclass and template.
+    #
+    # Each action is a hash of { text:, href:, hidden_text: }, where
+    # hidden_text is appended in a visually hidden span to give the link an
+    # accessible, unambiguous name (e.g. " (Karen Francis)").
+    class SummaryCardComponent < DesignSystem::BaseComponent
+      include DesignSystemHelper
+
+      def initialize(title:, actions: [])
+        super()
+        @title = title
+        @actions = Array(actions)
+      end
+
+      attr_reader :title, :actions
+
+      def render_action(action)
+        link_to(action[:href] || '#', class: "#{brand}-link") do
+          safe_join([action[:text], render_hidden_text(action[:hidden_text])])
+        end
+      end
+
+      private
+
+      def render_hidden_text(hidden_text)
+        return '' if hidden_text.blank?
+
+        content_tag(:span, hidden_text, class: visually_hidden_class)
+      end
+
+      def visually_hidden_class
+        "#{brand}-u-visually-hidden"
+      end
+    end
+  end
+end

data/app/components/design_system/generic/summary_list_component.html.erb

@@ -0,0 +1,21 @@
+<dl class="<%= brand %>-summary-list">
+  <% summary_list.rows.each do |row| %>
+    <div class="<%= brand %>-summary-list__row<%= " #{brand}-summary-list__row--no-actions" if row[:actions].blank? %>">
+      <dt class="<%= brand %>-summary-list__key"><%= row[:key][:content] %></dt>
+      <dd class="<%= brand %>-summary-list__value"><%= value_content(row) %></dd>
+      <% if row[:actions].present? %>
+        <dd class="<%= brand %>-summary-list__actions">
+          <% if row[:actions].length == 1 %>
+            <%= render_action(row[:actions].first) %>
+          <% else %>
+            <ul class="<%= brand %>-summary-list__actions-list">
+              <% row[:actions].each do |action| %>
+                <li class="<%= brand %>-summary-list__actions-list-item"><%= render_action(action) %></li>
+              <% end %>
+            </ul>
+          <% end %>
+        </dd>
+      <% end %>
+    </div>
+  <% end %>
+</dl>

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

@@ -0,0 +1,59 @@
+module DesignSystem
+  module Generic
+    # Summary list (dl) rendered by ds_summary_list. Each row has a key, one
+    # or more values, and optional actions. Brands override paragraph class
+    # and hidden text via subclasses.
+    class SummaryListComponent < DesignSystem::BaseComponent
+      def initialize(summary_list:)
+        super()
+        @summary_list = summary_list
+      end
+
+      attr_reader :summary_list
+
+      def value_content(row)
+        if row[:values].blank?
+          ''
+        elsif row[:values].length == 1
+          wrap_value(row[:values].first)
+        else
+          safe_join(row[:values].map { |value| wrap_value(value, paragraph: true) })
+        end
+      end
+
+      def render_action(action)
+        options = action[:options].dup
+        path = options.delete(:path) || '#'
+        hidden_text = options.delete(:hidden_text)
+
+        link_to(path, { class: "#{brand}-link" }.merge(options)) do
+          safe_join([action[:content], render_hidden_text(hidden_text)])
+        end
+      end
+
+      def wrap_value(value, paragraph: false)
+        content = if value[:options]&.dig(:path)
+                    link_to(value[:content], value[:options][:path] || '#', class: "#{brand}-link")
+                  else
+                    value[:content]
+                  end
+
+        return content unless paragraph
+
+        content_tag(:p, content, class: value_paragraph_class)
+      end
+
+      private
+
+      def value_paragraph_class
+        "#{brand}-body"
+      end
+
+      def render_hidden_text(hidden_text)
+        return '' if hidden_text.blank?
+
+        content_tag(:span, hidden_text, class: "#{brand}-visually-hidden")
+      end
+    end
+  end
+end

data/app/components/design_system/generic/tab_component.html.erb

@@ -0,0 +1,21 @@
+<div class="<%= brand %>-tabs" data-module="<%= brand %>-tabs">
+  <% if tab.title %>
+    <h2 class="<%= brand %>-tabs__title"><%= tab.title %></h2>
+  <% end %>
+
+  <% if tab.tabs.present? %>
+    <ul class="<%= brand %>-tabs__list">
+      <% tab.tabs.each do |name, _content, id, selected| %>
+        <li class="<%= brand %>-tabs__list-item<%= " #{brand}-tabs__list-item--selected" if selected %>">
+          <a class="<%= brand %>-tabs__tab" href="#<%= id %>"><%= name %></a>
+        </li>
+      <% end %>
+    </ul>
+
+    <% tab.tabs.each do |_name, content, id, selected| %>
+      <div class="<%= brand %>-tabs__panel<%= " #{brand}-tabs__panel--hidden" unless selected %>" id="<%= id %>">
+        <%= content %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+module DesignSystem
+  module Generic
+    # Tabs rendered by ds_tab: a list of tab links followed by their panels,
+    # with the selected panel visible. Brand subclasses inherit unchanged.
+    class TabComponent < DesignSystem::BaseComponent
+      def initialize(tab:)
+        super()
+        @tab = tab
+      end
+
+      attr_reader :tab
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+module DesignSystem
+  module Generic
+    # Table rendered by ds_table. Wraps a caption, header row and body rows
+    # built via the Table data object. Brands override markup via their own
+    # templates; cell helpers live here for reuse.
+    class TableComponent < DesignSystem::BaseComponent
+      def initialize(table:, **options)
+        super()
+        @table = table
+        @options = options
+      end
+
+      attr_reader :table, :options
+
+      def cell_content(cell)
+        if cell[:content].is_a?(Numeric)
+          cell[:content].to_s
+        elsif cell[:content].is_a?(Proc)
+          capture(&cell[:content])
+        else
+          cell[:content]
+        end
+      end
+
+      def cell_numeric?(cell)
+        cell[:options][:type] == 'numeric'
+      end
+
+      def html_cell_options(cell, **extra)
+        cell[:options].except(:type).merge(extra)
+      end
+
+      def header_classes(cell)
+        classes = "#{brand}-table__header"
+        classes += " #{brand}-table__header--numeric" if cell_numeric?(cell)
+        classes
+      end
+
+      def data_cell_classes(cell)
+        classes = "#{brand}-table__cell"
+        classes += " #{brand}-table__cell--numeric" if cell_numeric?(cell)
+        classes
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= link_to name, options, html_options.merge(class: "#{brand}-button") %>

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

@@ -0,0 +1,8 @@
+module DesignSystem
+  module Govuk
+    # GOV.UK doesn't have a dedicated action-link pattern, so we render a
+    # button-styled link.
+    class ActionLinkComponent < DesignSystem::Generic::ActionLinkComponent
+    end
+  end
+end

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

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

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

@@ -0,0 +1,11 @@
+<nav class="<%= brand %>-breadcrumbs" aria-label="Breadcrumb">
+  <ol class="<%= brand %>-breadcrumbs__list">
+    <% breadcrumbs.each do |breadcrumb| %>
+      <li class="<%= brand %>-breadcrumbs__list-item">
+        <%= link_to breadcrumb[:label], breadcrumb[:path],
+                    class: "#{brand}-breadcrumbs__link",
+                    'aria-current': current_page_aria(breadcrumb) %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

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

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

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

data/app/components/design_system/govuk/callout_component.html.erb

@@ -0,0 +1,6 @@
+<div class="<%= brand %>-warning-text">
+  <span class="<%= brand %>-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="<%= brand %>-warning-text__text">
+    <span class="<%= brand %>-visually-hidden">Warning</span><%= label %> <%= body %>
+  </strong>
+</div>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+module DesignSystem
+  module Govuk
+    # GOV.UK link: maps button :type values to govuk-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--inverse"
+        }
+      end
+    end
+  end
+end

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

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

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

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

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

@@ -0,0 +1,10 @@
+module DesignSystem
+  module Govuk
+    # GOV.UK confirmation panel.
+    class PanelComponent < DesignSystem::Generic::PanelComponent
+      def panel_classes
+        super + ["#{brand}-panel--confirmation"]
+      end
+    end
+  end
+end

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

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

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

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

data/app/components/design_system/govuk/summary_card_component.html.erb

@@ -0,0 +1,15 @@
+<div class="<%= brand %>-summary-card">
+  <div class="<%= brand %>-summary-card__title-wrapper">
+    <%= ds_heading(title, class: "#{brand}-summary-card__title") %>
+    <% if actions.any? %>
+      <ul class="<%= brand %>-summary-card__actions">
+        <% actions.each do |action| %>
+          <li class="<%= brand %>-summary-card__action"><%= render_action(action) %></li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+  <div class="<%= brand %>-summary-card__content">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+module DesignSystem
+  module Govuk
+    # GOV.UK summary card: uses the summary-card block names and the
+    # govuk-visually-hidden class for action suffixes.
+    class SummaryCardComponent < DesignSystem::Generic::SummaryCardComponent
+      private
+
+      def visually_hidden_class
+        "#{brand}-visually-hidden"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+module DesignSystem
+  module Govuk
+    class SummaryListComponent < DesignSystem::Generic::SummaryListComponent
+    end
+  end
+end

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

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

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

@@ -0,0 +1,30 @@
+<%= content_tag(:div, **options) do %>
+  <table class="<%= brand %>-table">
+    <% if table.caption %>
+      <caption class="<%= brand %>-table__caption <%= brand %>-table__caption--m"><%= 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))) %>
+        <% 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, cell_content(cell),
+                              **html_cell_options(cell, scope: 'row', class: header_classes(cell))) %>
+            <% else %>
+              <%= content_tag(:td, cell_content(cell),
+                              **html_cell_options(cell, class: data_cell_classes(cell))) %>
+            <% end %>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

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

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