dsfr-view-components 0.0.1

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

@@ -0,0 +1,57 @@
+class DsfrComponent::TableComponent::CellComponent < DsfrComponent::Base
+  attr_reader :text, :header, :numeric, :width
+
+  alias_method :numeric?, :numeric
+
+  WIDTHS = {
+    "full"           => "govuk-!-width-full",
+    "three-quarters" => "govuk-!-width-three-quarters",
+    "two-thirds"     => "govuk-!-width-two-thirds",
+    "one-half"       => "govuk-!-width-one-half",
+    "one-third"      => "govuk-!-width-one-third",
+    "one-quarter"    => "govuk-!-width-one-quarter",
+  }.freeze
+
+  def initialize(header: false, text: nil, numeric: false, width: nil, classes: [], html_attributes: {})
+    @header  = header
+    @text    = text
+    @numeric = numeric
+    @width   = width
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    content_tag(cell_element, cell_content, **html_attributes)
+  end
+
+private
+
+  def width?
+    width.present?
+  end
+
+  def cell_content
+    content || text
+  end
+
+  def cell_element
+    header ? :th : :td
+  end
+
+  def default_attributes
+    { class: default_classes }
+  end
+
+  def default_classes
+    if header
+      class_names("govuk-table__header", "govuk-table__header--numeric" => numeric?, width_class => width?).split
+    else
+      class_names("govuk-table__cell", "govuk-table__cell--numeric" => numeric?, width_class => width?).split
+    end
+  end
+
+  def width_class
+    WIDTHS.fetch(width, nil)
+  end
+end

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

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

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

@@ -0,0 +1,23 @@
+class DsfrComponent::TableComponent::HeadComponent < DsfrComponent::Base
+  renders_many :rows, "DsfrComponent::TableComponent::RowComponent"
+
+  attr_reader :row_data
+
+  def initialize(rows: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    build_rows_from_row_data(rows)
+  end
+
+private
+
+  def build_rows_from_row_data(data)
+    return if data.blank?
+
+    data.each { |d| row(cell_data: d, header: true) }
+  end
+
+  def default_attributes
+    { class: %w(govuk-table__head) }
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= tag.tr(**html_attributes) do %>
+  <% cells.each do |cell| %>
+    <%= cell %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,30 @@
+class DsfrComponent::TableComponent::RowComponent < DsfrComponent::Base
+  renders_many :cells, "DsfrComponent::TableComponent::CellComponent"
+
+  attr_reader :header, :first_cell_is_header
+
+  def initialize(cell_data: nil, first_cell_is_header: false, header: false, classes: [], html_attributes: {})
+    @header = header
+    @first_cell_is_header = first_cell_is_header
+
+    super(classes: classes, html_attributes: html_attributes)
+
+    build_cells_from_cell_data(cell_data)
+  end
+
+private
+
+  def build_cells_from_cell_data(cell_data)
+    return if cell_data.blank?
+
+    cell_data.map.with_index { |cd, i| cell(header: cell_is_header?(i), text: cd) }
+  end
+
+  def cell_is_header?(count)
+    header || (first_cell_is_header && count.zero?)
+  end
+
+  def default_attributes
+    { class: %w(govuk-table__row) }
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= tag.table(**html_attributes) do %>
+  <%= caption %>
+  <%= head %>
+  <% bodies.each do |body| %>
+    <%= body %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/table_component.rb

@@ -0,0 +1,35 @@
+module DsfrComponent
+  class TableComponent < DsfrComponent::Base
+    renders_one :caption, "DsfrComponent::TableComponent::CaptionComponent"
+    renders_one :head, "DsfrComponent::TableComponent::HeadComponent"
+    renders_many :bodies, "DsfrComponent::TableComponent::BodyComponent"
+
+    attr_accessor :id, :first_cell_is_header, :caption_text
+
+    def initialize(id: nil, rows: nil, head: nil, caption: nil, first_cell_is_header: false, classes: [], html_attributes: {})
+      @id                   = id
+      @first_cell_is_header = first_cell_is_header
+      @caption_text         = caption
+
+      super(classes: classes, html_attributes: html_attributes)
+
+      # when no rows are passed in it's likely we're taking the slot approach
+      return unless rows.presence
+
+      # if no head is passed in,use the first row for headers
+      build(*(head ? [head, rows] : [rows[0], rows[1..]]), caption_text)
+    end
+
+  private
+
+    def build(head_data, body_data, caption_text)
+      caption(text: caption_text)
+      head(rows: [head_data])
+      body(rows: body_data, first_cell_is_header: first_cell_is_header)
+    end
+
+    def default_attributes
+      { id: id, class: %w(govuk-table) }
+    end
+  end
+end

data/app/components/dsfr_component/tag_component.rb

@@ -0,0 +1,44 @@
+class DsfrComponent::TagComponent < DsfrComponent::Base
+  attr_reader :text, :colour
+
+  COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
+
+  def initialize(text: nil, colour: config.default_tag_colour, classes: [], html_attributes: {})
+    @text   = text
+    @colour = colour
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.strong(tag_content, **html_attributes)
+  end
+
+private
+
+  def tag_content
+    @text || content || fail(ArgumentError, "no text or content")
+  end
+
+  def default_attributes
+    {
+      class: ["govuk-tag", colour_class]
+    }
+  end
+
+  def colour_class
+    return nil if colour.blank?
+
+    fail(ArgumentError, colour_error_message) unless valid_colour?
+
+    %(govuk-tag--#{colour})
+  end
+
+  def valid_colour?
+    @colour.in?(COLOURS)
+  end
+
+  def colour_error_message
+    "invalid tag colour #{colour}, supported colours are #{COLOURS.to_sentence}"
+  end
+end

data/app/components/dsfr_component/traits/custom_html_attributes.rb

@@ -0,0 +1,7 @@
+module DsfrComponent
+  module Traits
+    module CustomHtmlAttributes
+      attr_reader :html_attributes
+    end
+  end
+end

data/app/components/dsfr_component/traits.rb

@@ -0,0 +1 @@
+module DsfrComponent::Traits; end

data/app/components/dsfr_component/warning_text_component.rb

@@ -0,0 +1,37 @@
+class DsfrComponent::WarningTextComponent < DsfrComponent::Base
+  attr_reader :text, :icon, :icon_fallback_text
+
+  def initialize(text: nil, icon_fallback_text: config.default_warning_text_icon_fallback_text, icon: config.default_warning_text_icon, classes: [], html_attributes: {})
+    @text = text
+    @icon = icon
+    @icon_fallback_text = icon_fallback_text
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(**html_attributes) do
+      safe_join([icon_element, warning_text])
+    end
+  end
+
+private
+
+  def icon_element
+    tag.span(icon, class: 'govuk-warning-text__icon', aria: { hidden: true })
+  end
+
+  def warning_text
+    tag.strong(class: 'govuk-warning-text__text') do
+      safe_join([assistive, (content || text)])
+    end
+  end
+
+  def assistive
+    tag.span(icon_fallback_text, class: 'govuk-warning-text__assistive')
+  end
+
+  def default_attributes
+    { class: %w(govuk-warning-text) }
+  end
+end

data/app/components/dsfr_component.rb

@@ -0,0 +1 @@
+module DsfrComponent; end

data/app/helpers/dsfr_back_to_top_link_helper.rb

@@ -0,0 +1,14 @@
+module DsfrBackToTopLinkHelper
+  def dsfr_back_to_top_link(target = '#top')
+    link_to(target, class: 'fr-link fr-link--no-visited-state') do
+      <<-HTML.squish.html_safe
+      <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
+        <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+      </svg>
+      Back to top
+      HTML
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include DsfrBackToTopLinkHelper }

data/app/helpers/dsfr_components_helper.rb

@@ -0,0 +1,33 @@
+module DsfrComponentsHelper
+  {
+    dsfr_accordion: 'DsfrComponent::AccordionComponent',
+    dsfr_back_link: 'DsfrComponent::BackLinkComponent',
+    dsfr_breadcrumbs: 'DsfrComponent::BreadcrumbsComponent',
+    dsfr_cookie_banner: 'DsfrComponent::CookieBannerComponent',
+    dsfr_details: 'DsfrComponent::DetailsComponent',
+    dsfr_footer: 'DsfrComponent::FooterComponent',
+    dsfr_header: 'DsfrComponent::HeaderComponent',
+    dsfr_inset_text: 'DsfrComponent::InsetTextComponent',
+    dsfr_notification_banner: 'DsfrComponent::NotificationBannerComponent',
+    dsfr_pagination: 'DsfrComponent::PaginationComponent',
+    dsfr_panel: 'DsfrComponent::PanelComponent',
+    dsfr_phase_banner: 'DsfrComponent::PhaseBannerComponent',
+    dsfr_section_break: 'DsfrComponent::SectionBreakComponent',
+    dsfr_start_button: 'DsfrComponent::StartButtonComponent',
+    dsfr_summary_list: 'DsfrComponent::SummaryListComponent',
+    dsfr_table: 'DsfrComponent::TableComponent',
+    dsfr_tabs: 'DsfrComponent::TabComponent',
+    dsfr_tag: 'DsfrComponent::TagComponent',
+    dsfr_warning_text: 'DsfrComponent::WarningTextComponent',
+  }.each do |name, klass|
+    define_method(name) do |*args, **kwargs, &block|
+      capture do
+        render(klass.constantize.new(*args, **kwargs)) do |com|
+          block.call(com) if block.present?
+        end
+      end
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include DsfrComponentsHelper }

data/app/helpers/dsfr_link_helper.rb

@@ -0,0 +1,123 @@
+module DsfrLinkHelper
+  LINK_STYLES = {
+    inverse:          "fr-link--inverse",
+    muted:            "fr-link--muted",
+    no_underline:     "fr-link--no-underline",
+    no_visited_state: "fr-link--no-visited-state",
+    text_colour:      "fr-link--text-colour",
+  }.freeze
+
+  BUTTON_STYLES = {
+    disabled:  "fr-btn--disabled",
+    secondary: "fr-btn--secondary",
+    warning:   "fr-btn--warning",
+  }.freeze
+
+  def dsfr_link_classes(*styles, default_class: 'fr-link')
+    if (invalid_styles = (styles - LINK_STYLES.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{LINK_STYLES.keys.to_sentence}")
+    end
+
+    [default_class] + LINK_STYLES.values_at(*styles).compact
+  end
+
+  def dsfr_button_classes(*styles, default_class: 'fr-btn')
+    if (invalid_styles = (styles - BUTTON_STYLES.keys)) && invalid_styles.any?
+      fail(ArgumentError, "invalid styles #{invalid_styles.to_sentence}. Valid styles are #{BUTTON_STYLES.keys.to_sentence}")
+    end
+
+    [default_class] + BUTTON_STYLES.values_at(*styles).compact
+  end
+
+  def dsfr_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = build_html_options(extra_options)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+  def dsfr_mail_to(email_address, name = nil, extra_options = {}, &block)
+    extra_options = name if block_given?
+    html_options = build_html_options(extra_options)
+
+    if block_given?
+      mail_to(email_address, html_options, &block)
+    else
+      mail_to(email_address, name, html_options)
+    end
+  end
+
+  def dsfr_button_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = build_html_options(extra_options, style: :button)
+
+    if block_given?
+      button_to(options, html_options, &block)
+    else
+      button_to(name, options, html_options)
+    end
+  end
+
+  def dsfr_button_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = DsfrComponent::StartButtonComponent::LINK_ATTRIBUTES
+      .merge build_html_options(extra_options, style: :button)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+  def dsfr_breadcrumb_link_to(name = nil, options = nil, extra_options = {}, &block)
+    extra_options = options if block_given?
+    html_options = build_html_options(extra_options, style: :breadcrumb)
+
+    if block_given?
+      link_to(name, html_options, &block)
+    else
+      link_to(name, options, html_options)
+    end
+  end
+
+private
+
+  def build_html_options(provided_options, style: :link)
+    styles = case style
+             when :link       then LINK_STYLES
+             when :button     then BUTTON_STYLES
+             else {}
+             end
+
+    remaining_options = provided_options&.slice!(*styles.keys)
+
+    return {} unless (style_classes = build_style_classes(style, provided_options))
+
+    inject_class(remaining_options, class_name: style_classes)
+  end
+
+  def build_style_classes(style, provided_options)
+    keys = *provided_options&.keys
+
+    case style
+    when :link then dsfr_link_classes(*keys)
+    when :button then dsfr_button_classes(*keys)
+    when :breadcrumb then %w(govuk-breadcrumbs__link)
+    end
+  end
+
+  def inject_class(attributes, class_name:)
+    attributes ||= {}
+
+    attributes.with_indifferent_access.tap do |attrs|
+      attrs[:class] = Array.wrap(attrs[:class]).prepend(class_name).flatten.join(" ")
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include DsfrLinkHelper }

data/app/helpers/dsfr_skip_link_helper.rb

@@ -0,0 +1,13 @@
+module DsfrSkipLinkHelper
+  def dsfr_skip_link(text: 'Skip to main content', href: '#main-content', classes: [], **html_attributes, &block)
+    link_classes = Array.wrap(classes).append('govuk-skip-link')
+
+    html_attributes_with_data_module = { data: { module: "govuk-skip-link" } }.deep_merge(html_attributes)
+
+    return link_to(href, class: link_classes, **html_attributes_with_data_module, &block) if block_given?
+
+    link_to(text, href, class: link_classes, **html_attributes_with_data_module)
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include DsfrSkipLinkHelper }

data/config/routes.rb

@@ -0,0 +1,2 @@
+Dsfr::Components::Engine.routes.draw do
+end

data/lib/dsfr/components/engine.rb

@@ -0,0 +1,110 @@
+require "rails/engine"
+require "active_support/configurable"
+
+module Dsfr
+  module Components
+    include ActiveSupport::Configurable
+
+    class << self
+      # Configure the form builder in the usual manner. All of the
+      # keys in {DEFAULTS} can be configured as per the example below
+      #
+      # @example
+      #   Dsfr::Components.configure do |conf|
+      #     conf.do_some_things = 'yes'
+      #   end
+      def configure
+        yield(config)
+      end
+
+      # Resets each of the configurable values to its default
+      #
+      # @note This method is only really intended for use to clean up
+      #   during testing
+      def reset!
+        configure do |c|
+          DEFAULTS.each { |k, v| c.send("#{k}=", v) }
+        end
+      end
+    end
+
+    # @!group Defaults
+    #
+    # Default components configuration
+    #
+    # +: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
+    # +:default_cookie_banner_aria_label+ "Cookie banner"
+    # +:default_cookie_banner_hide_in_print+ true
+    # +:default_header_navigation_label+ 'Navigation menu'
+    # +:default_header_menu_button_label+ 'Show or hide navigation menu'
+    # +:default_header_logotype+ 'GOV.UK'
+    # +:default_header_homepage_url+ '/'
+    # +:default_header_service_name+ nil
+    # +:default_header_service_url+ '/'
+    # +:default_footer_meta_text+ nil
+    # +:default_footer_copyright_text+ '© Crown copyright'
+    # +:default_footer_copyright_url+ "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+    # +:default_pagination_landmark_label+ "results"
+    # +:default_pagination_next_text+ Default 'next' text for pagination. An +Array+ where the first item is visible and the second visually hidden. Defaults to ["Next", "page"]
+    # +:default_pagination_previous_text+ Default 'previous' text for pagination. An +Array+ where the first item is visible and the second visually hidden. Defaults to ["Previous", "page"]
+    # +:default_phase_banner_tag+ nil
+    # +:default_phase_banner_text+ nil
+    # +:default_section_break_visible+ false
+    # +:default_section_break_size+ Size of the section break, possible values: +m+, +l+ and +xl+. Defaults to nil.
+    # +:default_tag_colour+ the default colour for tags, possible values: +grey+, +green+, +turquoise+, +blue+, +red+, +purple+, +pink+, +orange+, +yellow+. Defaults to +nil+
+    # +:default_start_button_as_button+ false
+    # +:default_summary_list_borders+ true
+    # +:default_notification_banner_title_id+ "govuk-notification-banner-title"
+    # +:default_notification_disable_auto_focus+ nil
+    # +:default_notification_title_heading_level+ 2
+    # +:default_notification_title_success+ false
+    # +:default_warning_text_icon_fallback_text+ "Warning"
+    # +:default_warning_text_icon+ "!"
+    #
+    # +:require_summary_list_action_visually_hidden_text+ when true forces visually hidden text to be set for every action. It can still be explicitly skipped by passing in +nil+. Defaults to +false+
+    DEFAULTS = {
+      default_back_link_text: 'Back',
+      default_breadcrumbs_collapse_on_mobile: false,
+      default_breadcrumbs_hide_in_print: false,
+      default_cookie_banner_aria_label: "Cookie banner",
+      default_cookie_banner_hide_in_print: true,
+      default_header_navigation_label: 'Navigation menu',
+      default_header_menu_button_label: 'Show or hide navigation menu',
+      default_header_logotype: 'GOV.UK',
+      default_header_homepage_url: '/',
+      default_header_service_name: nil,
+      default_header_service_url: '/',
+      default_footer_meta_text: nil,
+      default_footer_copyright_text: '© Crown copyright',
+      default_footer_copyright_url: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
+      default_pagination_landmark_label: "results",
+      default_pagination_next_text: %w(Next page),
+      default_pagination_previous_text: %w(Previous page),
+      default_phase_banner_tag: nil,
+      default_phase_banner_text: nil,
+      default_section_break_visible: false,
+      default_section_break_size: nil,
+      default_tag_colour: nil,
+      default_start_button_as_button: false,
+      default_summary_list_borders: true,
+      default_notification_banner_title_id: "govuk-notification-banner-title",
+      default_notification_disable_auto_focus: nil,
+      default_notification_title_heading_level: 2,
+      default_notification_title_success: false,
+      default_warning_text_icon_fallback_text: "Warning",
+      default_warning_text_icon: "!",
+
+      require_summary_list_action_visually_hidden_text: false,
+    }.freeze
+
+    DEFAULTS.each_key { |k| config_accessor(k) { DEFAULTS[k] } }
+
+    class Engine < ::Rails::Engine
+      isolate_namespace Dsfr::Components
+    end
+  end
+end
+
+Dir[Dsfr::Components::Engine.root.join("app", "helpers", "*.rb")].sort.each { |f| require f }

data/lib/dsfr/components/helpers/css_utilities.rb

@@ -0,0 +1,22 @@
+module Dsfr
+  module Components
+    module Helpers
+      module CssUtilities
+        def combine_classes(default_classes, custom_classes)
+          converted_custom_classes = case custom_classes
+                                     when Array
+                                       custom_classes
+                                     when String
+                                       custom_classes.split
+                                     when NilClass
+                                       []
+                                     else
+                                       fail(ArgumentError, "custom classes must be a String, Array or NilClass")
+                                     end
+
+          default_classes.concat(converted_custom_classes).uniq
+        end
+      end
+    end
+  end
+end

data/lib/dsfr/components/version.rb

@@ -0,0 +1,5 @@
+module Dsfr
+  module Components
+    VERSION = '0.0.1'.freeze
+  end
+end

data/lib/dsfr/components.rb

@@ -0,0 +1,6 @@
+require "rails/engine"
+require "view_component"
+require "dsfr/components/helpers/css_utilities"
+require "dsfr/components/engine"
+require "html_attributes_utils"
+require "pagy"

data/lib/tasks/dsfr/components_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :govuk_components do
+#   # Task goes here
+# end