dsfr-view-components 0.0.1

data/app/components/dsfr_component/footer_component.rb

@@ -0,0 +1,87 @@
+class DsfrComponent::FooterComponent < DsfrComponent::Base
+  using HTMLAttributesUtils
+
+  renders_one :meta_html
+  renders_one :meta
+  renders_one :navigation
+
+  attr_reader :meta_items, :meta_text, :meta_items_title, :meta_licence, :copyright, :custom_container_classes
+
+  def initialize(
+    classes: [],
+    container_classes: [],
+    container_html_attributes: {},
+    copyright_text: config.default_footer_copyright_text,
+    copyright_url: config.default_footer_copyright_url,
+    html_attributes: {},
+    meta_items: {},
+    meta_items_title: "Support links",
+    meta_licence: nil,
+    meta_text: config.default_footer_component_meta_text,
+    meta_classes: [],
+    meta_html_attributes: {}
+  )
+    @meta_text                        = meta_text
+    @meta_items                       = build_meta_links(meta_items)
+    @meta_items_title                 = meta_items_title
+    @meta_licence                     = meta_licence
+    @custom_meta_classes              = meta_classes
+    @custom_meta_html_attributes      = meta_html_attributes
+    @copyright                        = build_copyright(copyright_text, copyright_url)
+    @custom_container_classes         = container_classes
+    @custom_container_html_attributes = container_html_attributes
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-footer) }
+  end
+
+  def meta_content
+    meta_html || meta_text
+  end
+
+  def meta_classes
+    %w(govuk-footer__meta).append(@custom_meta_classes)
+  end
+
+  def meta_html_attributes
+    @custom_meta_html_attributes
+  end
+
+  def container_html_attributes
+    # FIXME: remove when we deprecate classes
+    #
+    # Once we drop classes this extra merging can be dropped along with the
+    # container_classes and meta_classes args
+    { class: %w(govuk-width-container) }.deep_merge_html_attributes(
+      @custom_container_html_attributes.merge(class: custom_container_classes)
+    )
+  end
+
+  def build_meta_links(links)
+    return [] if links.blank?
+
+    case links
+    when Array
+      links.map { |link| raw(link_to(link[:text], link[:href], class: %w(govuk-footer__link), **link.fetch(:attr, {}))) }
+    when Hash
+      links.map { |text, href| raw(link_to(text, href, class: %w(govuk-footer__link))) }
+    else
+      fail(ArgumentError, 'meta links must be a hash or array of hashes') unless links.is_a?(Hash)
+    end
+  end
+
+  def default_licence
+    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", class: %w(govuk-footer__link))
+
+    raw(%(All content is available under the #{link}, except where otherwise stated))
+  end
+
+  def build_copyright(text, url)
+    link_to(text, url, class: %w(govuk-footer__link govuk-footer__copyright-logo))
+  end
+end

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

@@ -0,0 +1,51 @@
+<%= tag.header(role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
+  <%= tag.div(**container_html_attributes) do %>
+    <div class="govuk-header__logo">
+      <%= link_to(homepage_url, class: %w(govuk-header__link govuk-header__link--homepage)) do %>
+        <span class="govuk-header__logotype">
+          <% if custom_logo.present? %>
+            <%= custom_logo %>
+          <% else %>
+            <% if crown %>
+              <!--[if gt IE 8]><!-->
+              <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
+                <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+              </svg>
+              <!--<![endif]-->
+            <% end %>
+
+            <% if crown_fallback_image_path.present? %>
+              <!--[if IE 8]>
+                <%= image_tag(crown_fallback_image_path, **crown_fallback_image_attributes) %>
+              <![endif]-->
+            <% end %>
+
+            <%= tag.span(logotype, class: "govuk-header__logotype-text") %>
+          <% end %>
+        </span>
+        <% if product_name.present? %>
+          <%= product_name %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <% if service_name.present? || navigation_items.present? %>
+      <div class="govuk-header__content">
+        <% if service_name.present? %>
+          <%= link_to(service_name, service_url, class: %w(govuk-header__link govuk-header__service-name)) %>
+        <% end %>
+
+        <% if navigation_items.any? %>
+          <%= tag.nav(**navigation_html_attributes) do %>
+            <%= tag.button("Menu", type: "button", class: %w(govuk-header__menu-button govuk-js-header-toggle), hidden: true, aria: { controls: "navigation", label: menu_button_label }) %>
+            <ul id="navigation" class="govuk-header__navigation-list">
+              <% navigation_items.each do |item| %>
+                <%= item %>
+              <% end %>
+            </ul>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/header_component.rb

@@ -0,0 +1,145 @@
+class DsfrComponent::HeaderComponent < DsfrComponent::Base
+  renders_many :navigation_items, "NavigationItem"
+  renders_one :custom_logo
+  renders_one :product_name, "ProductName"
+
+  attr_reader :logotype,
+              :crown,
+              :crown_fallback_image_path,
+              :homepage_url,
+              :service_name,
+              :service_url,
+              :menu_button_label,
+              :navigation_label,
+              :custom_navigation_classes,
+              :custom_container_classes
+
+  def initialize(classes: [],
+                 html_attributes: {},
+                 logotype: config.default_header_logotype,
+                 crown: true,
+                 crown_fallback_image_path: nil,
+                 homepage_url: config.default_header_homepage_url,
+                 menu_button_label: config.default_header_menu_button_label,
+                 navigation_classes: [],
+                 navigation_label: config.default_header_navigation_label,
+                 service_name: config.default_header_service_name,
+                 service_url: config.default_header_service_url,
+                 container_classes: nil)
+
+    @logotype                  = logotype
+    @crown                     = crown
+    @crown_fallback_image_path = crown_fallback_image_path
+    @homepage_url              = homepage_url
+    @service_name              = service_name
+    @service_url               = service_url
+    @menu_button_label         = menu_button_label
+    @custom_navigation_classes = navigation_classes
+    @navigation_label          = navigation_label
+    @custom_container_classes  = container_classes
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-header) }
+  end
+
+  def navigation_html_attributes
+    nc = %w(govuk-header__navigation).append(custom_navigation_classes).compact
+
+    { class: nc, aria: { label: navigation_label } }
+  end
+
+  def container_html_attributes
+    { class: %w(govuk-header__container govuk-width-container).append(custom_container_classes).compact }
+  end
+
+  def crown_fallback_image_attributes
+    {
+      class: "govuk-header__logotype-crown-fallback-image",
+      width: "36",
+      height: "32",
+    }
+  end
+
+  class NavigationItem < DsfrComponent::Base
+    attr_reader :text, :href, :options, :active
+
+    def initialize(text:, href: nil, options: {}, active: nil, classes: [], html_attributes: {})
+      @text            = text
+      @href            = href
+      @options         = options
+      @active_override = active
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def before_render
+      if active?
+        html_attributes[:class] << active_class
+      end
+    end
+
+    def active_class
+      %w(govuk-header__navigation-item--active) if active?
+    end
+
+    def link?
+      href.present?
+    end
+
+    def call
+      tag.li(**html_attributes) do
+        if link?
+          link_to(text, href, class: "govuk-header__link", **options)
+        else
+          text
+        end
+      end
+    end
+
+  private
+
+    def active?
+      return @active_override unless @active_override.nil?
+      return false if href.blank?
+
+      current_page?(href)
+    end
+
+    def default_attributes
+      { class: %w(govuk-header__navigation-item) }
+    end
+  end
+
+  class ProductName < DsfrComponent::Base
+    attr_reader :name
+
+    def initialize(name: nil, html_attributes: {}, classes: [])
+      @name = name
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def render?
+      name.present? || content.present?
+    end
+
+    def call
+      if content.present?
+        tag.div(content, **html_attributes)
+      else
+        tag.span(name, **html_attributes)
+      end
+    end
+
+  private
+
+    def default_attributes
+      { class: %w(govuk-header__product-name) }
+    end
+  end
+end

data/app/components/dsfr_component/inset_text_component.rb

@@ -0,0 +1,28 @@
+class DsfrComponent::InsetTextComponent < DsfrComponent::Base
+  attr_reader :text, :id
+
+  def initialize(text: nil, id: nil, classes: [], html_attributes: {})
+    @text = text
+    @id   = id
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(id: id, **html_attributes) { inset_text_content }
+  end
+
+  def render?
+    inset_text_content.present?
+  end
+
+private
+
+  def inset_text_content
+    content.presence || text
+  end
+
+  def default_attributes
+    { class: %w(govuk-inset-text) }
+  end
+end

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

@@ -0,0 +1,14 @@
+<%= tag.div(**html_attributes) do %>
+  <div class="govuk-notification-banner__header">
+    <%= content_tag(title_tag, class: "govuk-notification-banner__title", id: title_id) do %>
+      <%= title_content %>
+    <% end %>
+  </div>
+  <div class="govuk-notification-banner__content">
+    <% headings.each do |heading| %>
+      <%= heading %>
+    <% end %>
+
+    <%= content || text %>
+  </div>
+<% end %>

data/app/components/dsfr_component/notification_banner_component.rb

@@ -0,0 +1,93 @@
+class DsfrComponent::NotificationBannerComponent < DsfrComponent::Base
+  attr_reader :title_text, :title_id, :text, :success, :title_heading_level, :disable_auto_focus, :role
+
+  renders_one :title_html
+  renders_many :headings, "Heading"
+
+  def initialize(
+    title_text: nil,
+    text: nil,
+    role: nil,
+    success: config.default_notification_title_success,
+    title_heading_level: config.default_notification_title_heading_level,
+    title_id: config.default_notification_banner_title_id,
+    disable_auto_focus: config.default_notification_disable_auto_focus,
+    classes: [],
+    html_attributes: {}
+  )
+    @title_text          = title_text
+    @title_id            = title_id
+    @text                = text
+    @success             = success
+    @role                = role || default_role
+    @title_heading_level = title_heading_level
+    @disable_auto_focus  = disable_auto_focus
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def render?
+    headings.any? || text.present? || content.present?
+  end
+
+  class Heading < DsfrComponent::Base
+    attr_reader :text, :link_href, :link_text
+
+    def initialize(text: nil, link_text: nil, link_href: nil, classes: [], html_attributes: {})
+      @text      = text
+      @link_text = link_text
+      @link_href = link_href
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        if text.present?
+          safe_join([text, link].compact, " ")
+        else
+          content
+        end
+      end
+    end
+
+    def link
+      link_to(link_text, link_href, class: 'govuk-notification-banner__link') if link_text.present? && link_href.present?
+    end
+
+    def default_attributes
+      { class: %w(govuk-notification-banner__heading) }
+    end
+  end
+
+private
+
+  def default_attributes
+    {
+      class: class_names(
+        "govuk-notification-banner",
+        "govuk-notification-banner--success" => success
+      ),
+      data: {
+        "module" => "govuk-notification-banner",
+        "disable-auto-focus" => disable_auto_focus
+      },
+      role: role,
+      aria: { labelledby: title_id },
+    }
+  end
+
+  def title_content
+    title_html || title_text
+  end
+
+  def title_tag
+    fail "title_heading_level must be a number between 1 and 6" unless title_heading_level.is_a?(Integer) && title_heading_level.in?(1..6)
+
+    "h#{title_heading_level}"
+  end
+
+  def default_role
+    success ? "alert" : "region"
+  end
+end

data/app/components/dsfr_component/pagination_component/adjacent_page.rb

@@ -0,0 +1,59 @@
+class DsfrComponent::PaginationComponent::AdjacentPage < DsfrComponent::Base
+  attr_reader :href, :label_text, :text, :suffix, :block_mode, :visually_hidden_text
+  alias_method :block_mode?, :block_mode
+
+  def initialize(href:, suffix:, text:, block_mode: true, label_text: nil, classes: [], html_attributes: {})
+    @href                 = href
+    @label_text           = label_text
+    @text                 = text
+    @block_mode           = block_mode
+    @suffix               = suffix
+
+    super(html_attributes: html_attributes, classes: classes)
+  end
+
+  def call
+    tag.div(**html_attributes) do
+      tag.a(href: href, class: %w(fr-link govuk-pagination__link), rel: suffix) do
+        safe_join([body, divider, label_content])
+      end
+    end
+  end
+
+private
+
+  def default_attributes
+    { class: ["govuk-pagination__#{suffix}"] }
+  end
+
+  def body
+    [arrow, title_span]
+  end
+
+  def title_span
+    tag.span(text, class: title_classes)
+  end
+
+  def divider
+    return if label_text.blank?
+
+    tag.span(":", class: %w(govuk-visually-hidden))
+  end
+
+  def label_content
+    return if label_text.blank?
+
+    tag.span(label_text, class: label_classes)
+  end
+
+  def title_classes
+    class_names(
+      %(govuk-pagination__link-title),
+      %(govuk-pagination__link-title--decorated) => label_text.blank?
+    )
+  end
+
+  def label_classes
+    %w(govuk-pagination__link-label)
+  end
+end

data/app/components/dsfr_component/pagination_component/item.rb

@@ -0,0 +1,77 @@
+class DsfrComponent::PaginationComponent::Item < DsfrComponent::Base
+  attr_reader :number, :href, :visually_hidden_text, :mode
+
+  def initialize(number: nil, href: nil, current: false, ellipsis: false, from_pagy: false, visually_hidden_text: nil, classes: [], html_attributes: {})
+    @number               = number
+    @href                 = href
+    @visually_hidden_text = visually_hidden_text
+
+    # We have three modes for rendering links:
+    #
+    #  * link    (a link to another page)
+    #  * current (a link to the current page)
+    #  * gap     (an ellipsis symbol)
+    #
+    # Pagy sets these by object type:
+    # Integer = link
+    # String  = current
+    # :gap    = gap
+    #
+    # The original Nunjucks component has two boolean settings instead,
+    # ellipsis and current. When ellipsis is true all other arguments are
+    # ignored
+    @mode = from_pagy ? pagy_mode(number) : manual_mode(ellipsis, current)
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    case mode
+    when :link
+      link(current: false)
+    when :current
+      link(current: true)
+    when :gap
+      ellipsis_item
+    end
+  end
+
+private
+
+  def pagy_mode(number)
+    return :link    if number.is_a?(Integer)
+    return :current if number.is_a?(String)
+
+    :gap
+  end
+
+  def manual_mode(ellipsis, current)
+    return :gap     if ellipsis
+    return :current if current
+
+    :link
+  end
+
+  def link(current: false)
+    attributes = html_attributes.tap { |ha| ha[:class] << "govuk-pagination__item--current" if current }
+
+    tag.li(**attributes) do
+      tag.a(href: href, class: %w(fr-link govuk-pagination__link)) { number.to_s }
+    end
+  end
+
+  def ellipsis_item
+    tag.li("⋯", class: %w(govuk-pagination__item govuk-pagination__item--ellipses))
+  end
+
+  def default_attributes
+    {
+      class: %w(govuk-pagination__item),
+      aria: { label: aria_label }
+    }
+  end
+
+  def aria_label
+    visually_hidden_text || "Page #{number}"
+  end
+end

data/app/components/dsfr_component/pagination_component/next_page.rb

@@ -0,0 +1,27 @@
+class DsfrComponent::PaginationComponent::NextPage < DsfrComponent::PaginationComponent::AdjacentPage
+  def initialize(href:, text:, label_text: nil, block_mode: true, classes: [], html_attributes: {})
+    super(
+      suffix: "next",
+      text: text,
+      href: href,
+      label_text: label_text,
+      block_mode: block_mode,
+      classes: classes,
+      html_attributes: html_attributes
+    )
+  end
+
+  def body
+    return [arrow, title_span] if block_mode?
+
+    [title_span, arrow]
+  end
+
+private
+
+  def arrow
+    tag.svg(class: "govuk-pagination__icon govuk-pagination__icon--next", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
+      tag.path(d: "m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z")
+    end
+  end
+end

data/app/components/dsfr_component/pagination_component/previous_page.rb

@@ -0,0 +1,21 @@
+class DsfrComponent::PaginationComponent::PreviousPage < DsfrComponent::PaginationComponent::AdjacentPage
+  def initialize(href:, text:, label_text: nil, block_mode: true, classes: [], html_attributes: {})
+    super(
+      suffix: "prev",
+      text: text,
+      href: href,
+      label_text: label_text,
+      block_mode: block_mode,
+      classes: classes,
+      html_attributes: html_attributes
+    )
+  end
+
+private
+
+  def arrow
+    tag.svg(class: "govuk-pagination__icon govuk-pagination__icon--prev", xmlns: "http://www.w3.org/2000/svg", height: "13", width: "15", focusable: "false", viewBox: "0 0 15 13", aria: { hidden: "true" }) do
+      tag.path(d: "m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z")
+    end
+  end
+end