dsfr-view-components 0.0.1

data/app/components/dsfr_component/pagination_component.rb

@@ -0,0 +1,129 @@
+class DsfrComponent::PaginationComponent < DsfrComponent::Base
+  include Pagy::UrlHelpers
+
+  attr_reader :pagy,
+              :next_text,
+              :previous_text,
+              :page_items,
+              :previous_content,
+              :next_content,
+              :block_mode,
+              :landmark_label
+
+  alias_method :block_mode?, :block_mode
+
+  renders_many :items, "DsfrComponent::PaginationComponent::Item"
+
+  renders_one :next_page, ->(href:, text: default_adjacent_text(:next), label_text: nil, classes: [], html_attributes: {}) do
+    DsfrComponent::PaginationComponent::NextPage.new(
+      text: text,
+      href: href,
+      label_text: label_text,
+      block_mode: block_mode?,
+      classes: classes,
+      html_attributes: html_attributes
+    )
+  end
+
+  renders_one :previous_page, ->(href:, text: default_adjacent_text(:prev), label_text: nil, classes: [], html_attributes: {}) do
+    DsfrComponent::PaginationComponent::PreviousPage.new(
+      text: text,
+      href: href,
+      label_text: label_text,
+      block_mode: block_mode?,
+      classes: classes,
+      html_attributes: html_attributes
+    )
+  end
+
+  def initialize(pagy: nil,
+                 next_text: nil,
+                 previous_text: nil,
+                 block_mode: false,
+                 landmark_label: config.default_pagination_landmark_label,
+                 classes: [],
+                 html_attributes: {})
+    @pagy                          = pagy
+    @next_text                     = next_text
+    @previous_text                 = previous_text
+    @block_mode                    = block_mode
+    @landmark_label                = landmark_label
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def before_render
+    @page_items = if pagy.present?
+                    build_items
+                  elsif items.any?
+                    items
+                  else
+                    []
+                  end
+
+    @previous_content = previous_page || build_previous
+    @next_content     = next_page || build_next
+  end
+
+  def call
+    attributes = html_attributes.tap { |ha| (ha[:class] << "govuk-pagination--block") if items.empty? }
+
+    tag.nav(**attributes) do
+      safe_join([
+        previous_content,
+        tag.ul(class: "govuk-pagination__list") { safe_join(page_items) },
+        next_content
+      ])
+    end
+  end
+
+  def render?
+    # probably isn't any point rendering if there's only one page
+    (pagy.present? && pagy.series.size > 1) || @previous_content.present? || @next_content.present?
+  end
+
+private
+
+  def default_attributes
+    { role: "navigation", aria: { label: landmark_label }, class: %w(govuk-pagination) }
+  end
+
+  def build_previous
+    return unless pagy&.prev
+
+    kwargs = {
+      href: pagy_url_for(pagy, pagy.prev),
+      text: @previous_text,
+    }
+
+    previous_page(**kwargs.compact)
+  end
+
+  def build_next
+    return unless pagy&.next
+
+    kwargs = {
+      href: pagy_url_for(pagy, pagy.next),
+      text: @next_text,
+    }
+
+    next_page(**kwargs.compact)
+  end
+
+  def build_items
+    pagy.series.map { |i| item(number: i, href: pagy_url_for(pagy, i), from_pagy: true) }
+  end
+
+  def default_adjacent_text(side)
+    visible, hidden = *case side
+                       when :next
+                         config.default_pagination_next_text
+                       when :prev
+                         config.default_pagination_previous_text
+                       end
+
+    return visible if hidden.blank?
+
+    (visible + tag.span(" #{hidden}", class: "govuk-visually-hidden")).html_safe
+  end
+end

data/app/components/dsfr_component/panel_component.rb

@@ -0,0 +1,56 @@
+class DsfrComponent::PanelComponent < DsfrComponent::Base
+  attr_reader :id, :title_text, :text, :heading_level
+
+  renders_one :title_html
+
+  def initialize(title_text: nil, text: nil, heading_level: 1, id: nil, classes: [], html_attributes: {})
+    @heading_level = heading_level
+    @title_text    = title_text
+    @text          = text
+    @id            = id
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(id: id, **html_attributes) do
+      safe_join([panel_title, panel_body].compact)
+    end
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-panel govuk-panel--confirmation) }
+  end
+
+  def heading_tag
+    "h#{heading_level}"
+  end
+
+  def panel_content
+    content || text
+  end
+
+  def title
+    title_html || title_text
+  end
+
+  def panel_title
+    return if title.blank?
+
+    content_tag(heading_tag, title, class: "govuk-panel__title")
+  end
+
+  def panel_body
+    return if panel_content.blank?
+
+    tag.div(class: "govuk-panel__body") do
+      panel_content
+    end
+  end
+
+  def render?
+    title.present? || panel_content.present?
+  end
+end

data/app/components/dsfr_component/phase_banner_component.html.erb

@@ -0,0 +1,6 @@
+<%= tag.div(**html_attributes) do %>
+  <p class="govuk-phase-banner__content">
+    <%= render(phase_tag_component) %>
+    <%= tag.span((content.presence || @text), class: "govuk-phase-banner__text") %>
+  </p>
+<% end %>

data/app/components/dsfr_component/phase_banner_component.rb

@@ -0,0 +1,25 @@
+class DsfrComponent::PhaseBannerComponent < DsfrComponent::Base
+  attr_reader :text, :phase_tag
+
+  def initialize(
+    tag: { text: config.default_phase_banner_tag },
+    text: config.default_phase_banner_text,
+    classes: [],
+    html_attributes: {}
+  )
+    @phase_tag = tag
+    @text      = text
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def phase_tag_component
+    DsfrComponent::TagComponent.new(**phase_tag.deep_merge(classes: "govuk-phase-banner__content__tag"))
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-phase-banner) }
+  end
+end

data/app/components/dsfr_component/section_break_component.rb

@@ -0,0 +1,49 @@
+class DsfrComponent::SectionBreakComponent < DsfrComponent::Base
+  SIZES = %w(m l xl).freeze
+
+  def initialize(
+    visible: config.default_section_break_visible,
+    size: config.default_section_break_size,
+    classes: [],
+    html_attributes: {}
+  )
+    @visible = visible
+    @size    = size
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.hr(**html_attributes)
+  end
+
+private
+
+  attr_reader :size, :visible
+
+  def default_attributes
+    { class: default_classes }
+  end
+
+  def default_classes
+    class_names(
+      "govuk-section-break",
+      size_class,
+      "govuk-section-break--visible" => visible?
+    ).split
+  end
+
+  def size_class
+    if size.blank?
+      ""
+    elsif size.in?(SIZES)
+      "govuk-section-break--#{size}"
+    else
+      raise ArgumentError, "invalid size #{size}, supported sizes are #{SIZES.to_sentence}"
+    end
+  end
+
+  def visible?
+    visible
+  end
+end

data/app/components/dsfr_component/start_button_component.rb

@@ -0,0 +1,55 @@
+class DsfrComponent::StartButtonComponent < DsfrComponent::Base
+  BUTTON_ATTRIBUTES = {
+    draggable: 'false',
+    data: { module: 'fr-btn' }
+  }.freeze
+
+  LINK_ATTRIBUTES = BUTTON_ATTRIBUTES.merge({ role: 'button' }).freeze
+
+  attr_reader :text, :href, :as_button
+
+  def initialize(text:, href:, as_button: config.default_start_button_as_button, classes: [], html_attributes: {})
+    @text = text
+    @href = href
+    @as_button = as_button
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    if as_button
+      button_to(href, **html_attributes) do
+        safe_join([text, icon])
+      end
+    else
+      link_to(href, **html_attributes) do
+        safe_join([text, icon])
+      end
+    end
+  end
+
+private
+
+  def default_attributes
+    (as_button ? BUTTON_ATTRIBUTES : LINK_ATTRIBUTES)
+      .merge({ class: %w(fr-btn fr-btn--start) })
+  end
+
+  def icon
+    tag.svg(**svg_attributes) do
+      tag.path(fill: "currentColor", d: "M0 0h13l20 20-20 20H0l20-20z")
+    end
+  end
+
+  def svg_attributes
+    {
+      class: "fr-btn__start-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "17.5",
+      height: "19",
+      viewBox: "0 0 33 40",
+      focusable: "false",
+      aria: { hidden: "true" }
+    }
+  end
+end

data/app/components/dsfr_component/summary_list_component/action_component.rb

@@ -0,0 +1,42 @@
+class DsfrComponent::SummaryListComponent::ActionComponent < DsfrComponent::Base
+  attr_reader :href, :text, :visually_hidden_text, :attributes, :classes
+
+  def initialize(href: nil, text: 'Change', visually_hidden_text: false, classes: [], html_attributes: {})
+    @visually_hidden_text = visually_hidden_text
+
+    if config.require_summary_list_action_visually_hidden_text && visually_hidden_text == false
+      fail(ArgumentError, "missing keyword: visually_hidden_text")
+    end
+
+    super(classes: classes, html_attributes: html_attributes)
+
+    @href = href
+    @text = text
+  end
+
+  def render?
+    href.present?
+  end
+
+  def call
+    link_to(href, **html_attributes) do
+      safe_join([action_text, visually_hidden_span].compact, " ")
+    end
+  end
+
+private
+
+  def default_attributes
+    link_classes = dsfr_link_classes.append(classes).flatten
+
+    { class: link_classes }
+  end
+
+  def action_text
+    content || text || fail(ArgumentError, "no text or content")
+  end
+
+  def visually_hidden_span
+    tag.span(visually_hidden_text, class: "govuk-visually-hidden") if visually_hidden_text.present?
+  end
+end

data/app/components/dsfr_component/summary_list_component/key_component.rb

@@ -0,0 +1,23 @@
+class DsfrComponent::SummaryListComponent::KeyComponent < DsfrComponent::Base
+  attr_reader :text
+
+  def initialize(text: nil, classes: [], html_attributes: {})
+    @text = text
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.dt(key_content, **html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-summary-list__key) }
+  end
+
+  def key_content
+    content || text || fail(ArgumentError, "no text or content")
+  end
+end

data/app/components/dsfr_component/summary_list_component/row_component.rb

@@ -0,0 +1,57 @@
+class DsfrComponent::SummaryListComponent::RowComponent < DsfrComponent::Base
+  attr_reader :href, :visually_hidden_text, :show_actions_column
+
+  renders_one :key, DsfrComponent::SummaryListComponent::KeyComponent
+  renders_one :value, DsfrComponent::SummaryListComponent::ValueComponent
+  renders_many :actions, DsfrComponent::SummaryListComponent::ActionComponent
+
+  def initialize(show_actions_column: nil, classes: [], html_attributes: {})
+    @show_actions_column = show_actions_column
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(**html_attributes) do
+      safe_join([key, value, actions_content])
+    end
+  end
+
+  def before_render
+    if show_actions_column && actions.none?
+      html_attributes[:class] << no_actions_class
+    end
+  end
+
+private
+
+  def actions_content
+    return unless show_actions_column && actions.any?
+
+    (actions.one?) ? single_action : actions_list
+  end
+
+  def single_action
+    tag.dd(class: actions_class) { safe_join(actions) }
+  end
+
+  def actions_list
+    tag.dd(class: actions_class) do
+      tag.ul(class: "govuk-summary-list__actions-list") do
+        safe_join(actions.map { |action| tag.li(action, class: "govuk-summary-list__actions-list-item") })
+      end
+    end
+  end
+
+  def default_attributes
+    { class: %w(govuk-summary-list__row) }
+  end
+
+  def actions_class
+    "govuk-summary-list__actions"
+  end
+
+  def no_actions_class
+    "govuk-summary-list__row--no-actions"
+  end
+end

data/app/components/dsfr_component/summary_list_component/value_component.rb

@@ -0,0 +1,23 @@
+class DsfrComponent::SummaryListComponent::ValueComponent < DsfrComponent::Base
+  attr_reader :text
+
+  def initialize(text: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @text = text
+  end
+
+  def call
+    tag.dd(value_content, **html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-summary-list__value) }
+  end
+
+  def value_content
+    content || text || ""
+  end
+end

data/app/components/dsfr_component/summary_list_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.dl(**html_attributes) do %>
+  <% rows.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/summary_list_component.rb

@@ -0,0 +1,49 @@
+module DsfrComponent
+  class SummaryListComponent < DsfrComponent::Base
+    attr_reader :borders, :actions
+
+    renders_many :rows, ->(classes: [], html_attributes: {}, &block) do
+      DsfrComponent::SummaryListComponent::RowComponent.new(
+        show_actions_column: @show_actions_column,
+        classes: classes,
+        html_attributes: html_attributes,
+        &block
+      )
+    end
+
+    def initialize(rows: nil, actions: true, borders: config.default_summary_list_borders, classes: [], html_attributes: {})
+      @borders             = borders
+      @show_actions_column = actions
+
+      super(classes: classes, html_attributes: html_attributes)
+
+      return unless rows.presence
+
+      build(rows)
+    end
+
+  private
+
+    def borders_class
+      %(govuk-summary-list--no-border) unless borders
+    end
+
+    def default_attributes
+      { class: ["govuk-summary-list", borders_class].compact }
+    end
+
+    def build(rows)
+      @show_actions_column = rows.any? { |r| r.key?(:actions) }
+
+      rows.each do |data|
+        k, v, a = data.values_at(:key, :value, :actions)
+
+        row(**data.slice(:classes, :html_attributes)) do |r|
+          r.key(**k)
+          r.value(**v)
+          Array.wrap(a).each { |ad| r.action(**ad) }
+        end
+      end
+    end
+  end
+end

data/app/components/dsfr_component/tab_component.html.erb

@@ -0,0 +1,11 @@
+<%= tag.div(**html_attributes) do %>
+  <%= tag.h2(title, class: "govuk-tabs__title") %>
+  <ul class="govuk-tabs__list">
+    <% tabs.each.with_index do |tab, i| %>
+      <%= tag.li(tab.li_link, class: tab.li_classes(i)) %>
+    <% end %>
+  </ul>
+  <% tabs.each.with_index do |tab, i| %>
+    <%= tag.div(tab, **tab.combined_attributes(i)) %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/tab_component.rb

@@ -0,0 +1,61 @@
+class DsfrComponent::TabComponent < DsfrComponent::Base
+  using HTMLAttributesUtils
+
+  renders_many :tabs, "Tab"
+
+  attr_reader :title, :id
+
+  def initialize(title:, id: nil, classes: [], html_attributes: {})
+    @title = title
+    @id    = id
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { id: id, class: %w(govuk-tabs), data: { module: 'govuk-tabs' } }
+  end
+
+  class Tab < DsfrComponent::Base
+    attr_reader :label, :text
+
+    def initialize(label:, text: nil, classes: [], html_attributes: {})
+      @label = label
+      @text  = text
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def id(prefix: nil)
+      [prefix, label.parameterize].join
+    end
+
+    def hidden_class(i = nil)
+      return [] if i&.zero?
+
+      %w(fr-tabs__panel--hidden)
+    end
+
+    def li_classes(i = nil)
+      class_names("govuk-tabs__list-item", "govuk-tabs__list-item--selected" => i&.zero?).split
+    end
+
+    def li_link
+      link_to(label, id(prefix: '#'), class: "govuk-tabs__tab")
+    end
+
+    def default_attributes
+      { id: id, class: %w(fr-tabs__panel) }
+    end
+
+    def combined_attributes(i)
+      html_attributes.deep_merge_html_attributes({ class: hidden_class(i) }).deep_tidy_html_attributes
+    end
+
+    def call
+      content || text || fail(ArgumentError, "no text or content")
+    end
+  end
+end

data/app/components/dsfr_component/table_component/body_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.tbody(**html_attributes) do %>
+  <% rows.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/table_component/body_component.rb

@@ -0,0 +1,21 @@
+class DsfrComponent::TableComponent::BodyComponent < DsfrComponent::Base
+  renders_many :rows, "DsfrComponent::TableComponent::RowComponent"
+
+  def initialize(rows: nil, first_cell_is_header: false, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    build_rows_from_row_data(rows, first_cell_is_header)
+  end
+
+private
+
+  def build_rows_from_row_data(data, first_cell_is_header)
+    return if data.blank?
+
+    data.each { |d| row(cell_data: d, first_cell_is_header: first_cell_is_header) }
+  end
+
+  def default_attributes
+    { class: %w(govuk-table__body) }
+  end
+end

data/app/components/dsfr_component/table_component/caption_component.rb

@@ -0,0 +1,37 @@
+class DsfrComponent::TableComponent::CaptionComponent < DsfrComponent::Base
+  attr_reader :text, :size
+
+  SIZES = %w(s m l xl).freeze
+
+  def initialize(text: nil, id: nil, size: 'm', classes: [], html_attributes: {})
+    @id   = id
+    @text = text
+    @size = size
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.caption(caption_content, **html_attributes)
+  end
+
+  def render?
+    caption_content.present?
+  end
+
+private
+
+  def caption_content
+    @caption_content ||= (content || text)
+  end
+
+  def default_attributes
+    { class: class_names("govuk-table__caption", caption_size_class => size).split }
+  end
+
+  def caption_size_class
+    fail(ArgumentError, "bad size #{size}, must be in #{SIZES}") unless size.in?(SIZES)
+
+    %(govuk-table__caption--#{size})
+  end
+end