dsfr-view-components 0.0.1 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13a375b911fee2a88bc620482b766be2d3348d0138d56f9f2cb2641f649e8d50
-  data.tar.gz: 85f677a71346315a8c128f156b32c74b6436528bfa5ed98fcaf490d352fdeb71
+  metadata.gz: 26127e695550fca9861568104cb2e15f13f81c77d8ab97788db823215bdcd43e
+  data.tar.gz: 90059e2796a0b0e63f6fed13bb9183866dd01ec796d190e342fd9f458d5a1bdf
 SHA512:
-  metadata.gz: 6b10dd868701e33699626fa4753fd7a017128f87b91394c72100d24b014c16206e5285ca81778d045c025241c56a6a97805859b6af75d1c946ba917677818dc7
-  data.tar.gz: e81ae1788e01bc3e24ec2cc07a4ccfd2cf8fef13fd6d6a5a865423cdf584d65a5303c0965681ff2a922e2cb50bc61bbffb3eca87f20c7cf4224bbd51a355ee06
+  metadata.gz: f14bbd9482cf8dfa9473d024c388a30db71225c31fcee52bf69d2dfed43802892dc3cfb56e21f1273d187378cf0e905e801ed9092958839ed3ec9329fc58ece9
+  data.tar.gz: 30e838fb64e6e0fb1fb11adea4967aaf4cdeed2fc8763d8e46ffe4823f1e3a98c4512e974a001e86fcefe47b113dec303e49e3e7e4517727098edda9439c498f

data/README.md

@@ -1,74 +1,73 @@
 # Composants du DSFR
 
+[![Tests](https://github.com/betagouv/dsfr-view-components/workflows/Tests/badge.svg)](https://github.com/betagouv/dsfr-view-components/actions?query=workflow%3ATests)
+[![Gem Version](https://badge.fury.io/rb/dsfr-view-components.svg)](https://badge.fury.io/rb/dsfr-view-components)
+[![Gem](https://img.shields.io/gem/dt/dsfr-view-components?logo=rubygems)](https://rubygems.org/gems/dsfr-view-components)
+[![GitHub license](https://img.shields.io/github/license/betagouv/dsfr-view-components)](https://github.com/betagouv/dsfr-view-components/blob/main/LICENSE)
+[![Rails](https://img.shields.io/badge/Rails-6.1.5%20%E2%95%B1%207.0.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
+[![Ruby](https://img.shields.io/badge/Ruby-2.7.6%20%20%E2%95%B1%203.0.3%20%20%E2%95%B1%203.1.2-E16D6D)](https://www.ruby-lang.org/en/downloads/)
+
+[![Design Système de lʼÉtat](https://img.shields.io/badge/Design%20Système%20de%20lʼÉtat-1.8.4-brightgreen)](https://www.systeme-de-design.gouv.fr/)
+
 Cette gem fournit des composants pour le Design Système de l'État (DSFR) en s'appuyant sur le [framework ViewComponent](https://github.com/ViewComponent/view_component).
 
 C'est un fork de [govuk-components](https://github.com/DFE-Digital/govuk-components) qui propose l'équivalent pour le GOV.UK Design System.
 
-⚠️ Cette gem est en cours de développement et n'est pas adaptée à un usage en production. N'hésitez pas à contribuer pour nous aider à avancer !
 
-[![Tests](https://github.com/betagouv/dsfr-view-components/workflows/Tests/badge.svg)](https://github.com/betagouv/dsfr-view-components/actions?query=workflow%3ATests)
+## Développement en cours ⚠️
 
-<!--
-[![Maintainability](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/maintainability)](https://codeclimate.com/github/DFE-Digital/govuk-components/maintainability)
-[![Gem Version](https://badge.fury.io/rb/govuk-components.svg)](https://badge.fury.io/rb/govuk-components)
-[![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/DFE-Digital/govuk-components/test_coverage)
-[![GitHub license](https://img.shields.io/github/license/DFE-Digital/govuk-components)](https://github.com/DFE-Digital/govuk-components/blob/main/LICENSE)
-[![GOV.UK Design System Version](https://img.shields.io/badge/GOV.UK%20Design%20System-4.3.0-brightgreen)](https://design-system.service.gov.uk)
-[![Rails](https://img.shields.io/badge/Rails-6.1.5%20%E2%95%B1%207.0.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
-[![Ruby](https://img.shields.io/badge/Ruby-2.7.6%20%20%E2%95%B1%203.0.3%20%20%E2%95%B1%203.1.2-E16D6D)](https://www.ruby-lang.org/en/downloads/)
+Cette gem est en cours de développement et n'est pas encore
+recommandée pour un usage en production.
 
-This gem provides a suite of reusable components for the [GOV.UK Design System](https://design-system.service.gov.uk/). It is intended to provide a lightweight alternative to the [GOV.UK Publishing Components](https://github.com/alphagov/dsfr_publishing_components) library and is built with GitHub’s [ViewComponent](https://github.com/github/view_component) framework.
+N'hésitez pas à contribuer pour nous aider à avancer, un générateur de
+composant est même fourni pour vous faciliter la tâche :
 
-It aims to implement the functionality from the original Nunjucks macros in a way that will feel more familiar to Rails developers. Blocks are preferred over strings of HTML, beneath the surface each component is just a Ruby object, everything is inheritable and overrideable.
+```sh
+bin/rails g dsfr_component FancyButton --params title:String count:Integer
+```
 
 ## Documentation
 
-The gem comes with [a full guide](https://govuk-components.netlify.app/) that
-covers most aspects of day-to-day use, along with code and output examples. The
-examples in the guide (and the guide itself) are built using the components,
-so it will always be up to date.
+Un [guide complet est disponible](https://betagouv.github.io/dsfr-view-components/). Il contient des instructions pour l'installation et l'usage de cette gem. Les exemples présents éxecutent le code et seront donc toujours à jour.
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/d40a5a0a-b086-4c35-b046-97fbcbf9f219/deploy-status)](https://app.netlify.com/sites/govuk-components/deploys)
+## Installation
 
--->
+Pour utiliser cette gem dans votre application Rails, il faut ajouter cette ligne dans `config/application.rb`:
+
+```ruby
+require "dsfr/components"
+```
 
 ## Composants disponibles
 
 Cette gem a pour but de supporter tous les composants proposés par le Design Système de l'État hormis ceux concernant les formulaires. Ceux-ci seront fournis dans une gem indépendante dans le futur.
 
-Les composants disponibles sont :
+10/36 composants sont disponibles :
 
-- [ ] Accordéon - Accordion
-- [ ] Ajout de fichier - File upload
-- [ ] Alertes - Alert
-- [ ] Badge
+- [x] Accordéon - Accordion
+- [x] Alertes - Alert
+- [x] Badge
 - [ ] Bandeau d'information importante
 - [ ] Barre de recherche - Search bar
-- [ ] Boutons - Buttons
+- [x] Boutons - Buttons
 - [ ] Groupe de bouton
 - [ ] Bouton FranceConnect
-- [ ] Boutons radio
-- [ ] Boutons radio 'riches'
-- [ ] Case à cocher - Checkbox
 - [ ] Cartes - Cards
-- [ ] Champ de saisie - Input
 - [ ] Citation - Quote
 - [ ] Contenu médias - Responsive médias
-- [ ] En-tête - Header
+- [x] En-tête - Header
 - [ ] Fil d'Ariane - Breadcrumb
 - [ ] Gestionnaire de consentement - Consent banner
 - [ ] Icônes de favoris - Favicons
-- [ ] Indicateur d'étape
+- [x] Indicateur d'étape - Stepper
 - [ ] Interrupteur - Toggle switch
 - [ ] Lettre d'information et réseaux sociaux - Newsletter &amp; Follow us
-- [ ] Liens - Links
+- [x] Liens - Links
 - [ ] Liens d'évitement - Skiplinks
-- [ ] Liste déroulante - Select
 - [ ] Menu latéral - Side menu
 - [ ] Mise en avant - Call out
 - [ ] Mise en exergue - Highlight
-- [ ] Modale - Modal
+- [x] Modale - Modal
 - [ ] Navigation principale - Main navigation
 - [ ] Onglets - Tabs
 - [ ] Pagination
@@ -78,9 +77,9 @@ Les composants disponibles sont :
 - [ ] Sélecteur de langue
 - [ ] Sommaire - Summary
 - [ ] Tableau - Table
-- [ ] Tag
+- [x] Tag
 - [ ] Téléchargement de fichier
-- [ ] Tuile - Tile
+- [x] Tuile - Tile
 
 <!--
 This library also provides helpers for creating [links](https://govuk-components.netlify.app/helpers/link),
@@ -88,92 +87,9 @@ This library also provides helpers for creating [links](https://govuk-components
 and [back to top links](https://govuk-components.netlify.app/helpers/back-to-top-link).
 -->
 
-<!--
-## Alternative syntax
-
-All of the components can be rendered in two ways:
-
-* directly using Rails’ `#render` method:
-
-  ```erb
-    <%= render DsfrComponent::WarningTextComponent.new do %>
-      A serious warning
-    <% end %>
-  ```
-
-* via the helper wrapper:
-
-  ```erb
-    <%= dsfr_warning_text do %>
-      A serious warning
-    <% end %>
-  ```
-
-  The naming convention for helpers is `dsfr_` followed by the component’s name in snake case. You can see the full list in [DsfrComponentsHelper](app/helpers/dsfr_components_helper.rb).
-
-## Example use
-
-This library allows components to be rendered with Rails’ `render` method or via the provided helpers. Here we’ll use the `dsfr_tabs` to render three tabbed sections:
-
-```erb
-<%= dsfr_tabs(title: 'Days of the week') do |component| %>
-  <% component.tab(label: 'Monday') do %>
-    <p>Monday’s child is fair of face</p>
-  <% end %>
-
-  <% component.tab(label: 'Tuesday') do %>
-    <p>Tuesday’s child is full of grace</p>
-  <% end %>
-
-  <% component.tab(label: 'Wednesday') do %>
-    <p>Wednesday’s child is full of woe</p>
-  <% end %>
-<% end %>
-```
-
-Here are the rendered tabs:
+## Services utilisant cette gem
 
-![Tabs preview](docs/images/tabs.png)
-
-For examples on usage see the [guide page](https://govuk-components.netlify.app/).
-
-## Setup
-
-Add this line to your `config/application.rb`:
-
-```ruby
-require "govuk/components"
-```
-
-## Services using this library
-
-* [Apply for teacher training](https://github.com/DFE-Digital/apply-for-teacher-training)
-* [Find postgraduate teacher training](https://github.com/DFE-Digital/find-teacher-training)
-* [Get help with technology](https://github.com/DFE-Digital/get-help-with-tech)
-* [Publish teacher training courses](https://github.com/DFE-Digital/publish-teacher-training)
-* [Register trainee teachers](https://github.com/DFE-Digital/register-trainee-teachers)
-* [Teaching Vacancies](https://github.com/DFE-Digital/teaching-vacancies)
-
-## Installation
-
-Ajouter cette ligne à votre Gemfile:
-
-```ruby
-gem 'dsfr-components'
-```
-
-And then execute:
-
-```sh
-bundle
-```
-
-Or install it yourself as:
-
-```sh
-gem install govuk-components
-```
--->
+- [Collectif Objets](https://collectif-objets.beta.gouv.fr/) - [code source](https://github.com/betagouv/collectif-objets)
 
 ## Contribuer
 
@@ -191,7 +107,12 @@ bundle install
 bundle exec rspec spec
 ```
 
-Lancer le guide de documentation : 
+Pour développer avec les tests en continu :
+```sh
+bundle exec guard
+```
+
+Lancer le guide de documentation :
 
 ```sh
 make watch-guide
@@ -207,7 +128,10 @@ bundle exec rails server
 
 Déployer une nouvelle version de la gem :
 
-TODO
+```sh
+VERSION=1.3.2 make deploy_gem
+```
+
 
 ## Licence
 

data/app/components/dsfr_component/accordion_component/section_component.html.erb

@@ -1,11 +1,17 @@
-<%= tag.div(id: id(suffix: 'section'), **html_attributes) do %>
-  <div class="govuk-accordion__section-header">
-    <%= content_tag(heading_level, class: "govuk-accordion__section-heading") do %>
-      <%= tag.span(heading_content, id: id, class: "govuk-accordion__section-button", aria: { expanded: expanded?, controls: id(suffix: 'content') }) %>
-    <% end %>
-    <% if summary_content.present? %>
-      <%= tag.div(summary_content, id: id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %>
-    <% end %>
+<%= tag.section(**html_attributes) do %>
+  <h3 class="fr-accordion__title">
+    <button
+      class="fr-accordion__btn"
+      aria-expanded="<%= expanded? ? "true" : "false" %>"
+      aria-controls="<%= id %>"
+    >
+      <%= title %>
+    </button>
+  </h3>
+  <div
+    id="<%= id %>"
+    class="fr-collapse <%= "fr-collapse--expanded" if expanded? %>"
+  >
+    <%= content %>
   </div>
-  <%= tag.div(content, id: id(suffix: 'content'), class: %w(govuk-accordion__section-content), aria: { labelledby: id }) %>
 <% end %>

data/app/components/dsfr_component/accordion_component/section_component.rb

@@ -1,39 +1,26 @@
 class DsfrComponent::AccordionComponent::SectionComponent < DsfrComponent::Base
-  attr_reader :heading_text, :summary_text, :expanded, :heading_level
-
-  renders_one :heading_html
-  renders_one :summary_html
+  attr_reader :title, :expanded
 
   alias_method :expanded?, :expanded
 
-  def initialize(heading_text:, summary_text:, expanded:, heading_level:, classes: [], html_attributes: {})
-    @heading_text  = heading_text
-    @summary_text  = summary_text
-    @expanded      = expanded
-    @heading_level = heading_level
+  # @param title [String] section title
+  # @param expanded [Boolean] toggles section folding
+  # @param id [String] the HTML id, optional if you want to reuse the anchor
+  def initialize(title:, expanded: false, id: nil, classes: [], html_attributes: {})
+    @title = title
+    @expanded = expanded
+    @id = id
 
     super(classes: classes, html_attributes: html_attributes)
   end
 
-  def id(suffix: nil)
-    # generate a random number if we don't have heading_text to avoid attempting
-    # to parameterize a potentially-huge chunk of HTML
-    @prefix ||= heading_text&.parameterize || SecureRandom.hex(4)
-
-    [@prefix, suffix].compact.join('-')
-  end
-
-  def heading_content
-    heading_html || heading_text || fail(ArgumentError, "no heading_text or heading_html")
-  end
-
-  def summary_content
-    summary_html || summary_text
+  def id
+    @id ||= "accordion-section-#{SecureRandom.hex(4)}"
   end
 
 private
 
   def default_attributes
-    { class: class_names("govuk-accordion__section", "govuk-accordion__section--expanded" => expanded?).split }
+    { class: class_names("fr-accordion").split }
   end
 end

data/app/components/dsfr_component/accordion_component.rb

@@ -1,33 +1,22 @@
 class DsfrComponent::AccordionComponent < DsfrComponent::Base
-  renders_many :sections, ->(heading_text: nil, summary_text: nil, expanded: false, classes: [], html_attributes: {}, &block) do
+  renders_many :sections, ->(title: nil, expanded: false, id: nil, classes: [], html_attributes: {}, &block) do
     DsfrComponent::AccordionComponent::SectionComponent.new(
       classes: classes,
       expanded: expanded,
-      heading_level: heading_level,      # set once at parent level, passed to all children
       html_attributes: html_attributes,
-      summary_text: summary_text,
-      heading_text: heading_text,
+      title: title,
+      id: id,
       &block
     )
   end
 
-  attr_reader :id, :heading_level
-
-  def initialize(heading_level: 2, classes: [], html_attributes: {})
-    @heading_level = heading_tag(heading_level)
-
+  def initialize(classes: [], html_attributes: {})
     super(classes: classes, html_attributes: html_attributes)
   end
 
 private
 
   def default_attributes
-    { class: %w(govuk-accordion), data: { module: 'govuk-accordion' } }
-  end
-
-  def heading_tag(level)
-    fail(ArgumentError, "heading_level must be 1-6") unless level.in?(1..6)
-
-    %(h#{level})
+    { class: %w(fr-accordions-group) }
   end
 end

data/app/components/dsfr_component/alert_component.rb

@@ -1,22 +1,89 @@
 class DsfrComponent::AlertComponent < DsfrComponent::Base
-  attr_reader :title
+  TYPES = %i[error success info warning].freeze
+  SIZES = %i[sm md].freeze
 
-  def initialize(title:, classes: [], html_attributes: {})
+  # @param type [Symbol] alert type (and matching color) `:success`, `:info`, `:warning` ou `:error`
+  # @param title [String] alert title. cannot be set in size `:sm`
+  # @param size [Symbol] alert size : `:md` (default) or `:sm`
+  # @param close_button [Boolean] display a close button to remove the alert
+  # @note in size MD the title is required but the content is optional. In size SM there should be not title but the content is required
+  def initialize(type:, title: nil, size: :md, close_button: false, classes: [], html_attributes: {})
     @title = title
+    @type = type
+    @size = size
+    @close_button = close_button
 
     super(classes: classes, html_attributes: html_attributes)
   end
 
   def call
+    raise ArgumentError, "SM alerts cannot have titles but must have a content" if @size == :sm && (@title.present? || content.blank?)
+    raise ArgumentError, "MD Alerts must have a title" if @size == :md && @title.blank?
+
     tag.div(**html_attributes) do
-      tag.h3(class: "fr-alert__title") { title }
-      tag.p { content }
+      safe_join([title_tag, content_tag, close_button_tag])
     end
   end
 
 private
 
+  attr_reader :title, :type, :size, :close_button
+
   def default_attributes
-    { class: %w(fr-alert) }
+    { class: %w(fr-alert) + [type_class, size_class].compact }
+  end
+
+  def title_tag
+    return nil if title.blank?
+
+    tag.h3(class: "fr-alert__title") { title }
+  end
+
+  def content_tag
+    return nil if content.blank?
+
+    tag.p { content }
+  end
+
+  def close_button_tag
+    return nil unless close_button
+
+    tag.button(
+      class: "fr-btn--close fr-btn",
+      title: "Masquer le message",
+      onclick: "const alert = this.parentNode; alert.parentNode.removeChild(alert)"
+    ) do
+      "Masquer le message"
+    end
+  end
+
+  def type_class
+    fail(ArgumentError, type_error_message) unless valid_type?
+
+    "fr-alert--#{type}"
+  end
+
+  def valid_type?
+    type.in?(TYPES)
+  end
+
+  def type_error_message
+    "invalid alert type #{type}, supported types are #{TYPES.to_sentence}"
+  end
+
+  def size_class
+    return nil if size == :md
+
+    fail(ArgumentError, size_error_message) unless valid_size?
+
+    "fr-alert--#{size}"
+  end
+
+  def valid_size?
+    size.in?(SIZES)
+  end
+
+  def size_error_message
+    "invalid alert size #{size}, supported sizes are #{SIZES.to_sentence}"
   end
 end

data/app/components/dsfr_component/badge_component.rb

@@ -0,0 +1,30 @@
+module DsfrComponent
+  class BadgeComponent < DsfrComponent::Base
+    STATUSES = %i[success error info warning new].freeze
+
+    # @param status [BadgeComponent::STATUSES]
+    def initialize(status:, classes: [], html_attributes: {})
+      raise(ArgumentError, "`status` should be one of #{STATUSES}") unless STATUSES.include?(status)
+
+      @status = status
+
+      classes.push("fr-badge--#{@status}")
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        content
+      end
+    end
+
+  private
+
+    attr_reader :status
+
+    def default_attributes
+      { class: 'fr-badge' }
+    end
+  end
+end

data/app/components/dsfr_component/base.rb

@@ -5,6 +5,8 @@ class DsfrComponent::Base < ViewComponent::Base
 
   delegate :config, to: Dsfr::Components
 
+  HEADING_LEVELS = [1, 2, 3, 4, 5, 6].freeze
+
   def initialize(classes:, html_attributes:)
     if classes.nil?
       Rails.logger.warn("classes is nil, if no custom classes are needed omit the param")

data/app/components/dsfr_component/button_component.rb

@@ -0,0 +1,63 @@
+module DsfrComponent
+  class ButtonComponent < DsfrComponent::Base
+    SIZES = %i[sm md lg].freeze
+    ICON_POSITIONS = %i[left right].freeze
+    ICON_LEVELS = %i[primary secondary tertiary].freeze
+
+    # @param label [String] Le label du bouton (optionnel si un icône présent)
+    # @param icon [String] Le nom de l’icône à afficher (exemple `arrow-right-line`) (optionnel)
+    # @param icon_position [String] Position de l’icône : :left (défaut) ou :right (optionnel)
+    # @param title [String] Le titre du bouton permettant d’afficher une infobulle (optionnel)
+    # @param level [String] Le niveau du bouton : :primary (défaut), :secondary ou :tertiary (optionnel)
+    # @param size [String] La taille du bouton : :sm, :md (défaut), :lg (optionnel)
+    def initialize(label: nil, title: nil, icon: nil, icon_position: :left, level: nil, size: nil, classes: [], html_attributes: {})
+      @label = label
+      @title = title
+      @icon = icon
+      @icon_position = icon_position
+      @level = level
+      @outline = outline
+      @size = size
+
+      validate_size
+      validate_icon_position
+      validate_level
+      validate_label
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.button(**html_attributes) { label }
+    end
+
+  private
+
+    attr_reader :label, :icon, :icon_position, :level, :outline, :size
+
+    def default_attributes
+      classes = ["fr-btn"]
+      classes << "fr-btn--#{level}" if level.present?
+      classes << "fr-btn--#{size}" if size.present?
+      classes << "fr-icon-#{icon}" if icon.present?
+      classes << "fr-btn--icon-#{icon_position}" if icon.present? && label.present?
+      { class: classes }
+    end
+
+    def validate_size
+      raise(ArgumentError, "`size` should be one of #{SIZES}") if size.present? && SIZES.exclude?(size)
+    end
+
+    def validate_icon_position
+      raise(ArgumentError, "`icon_position` should be one of #{ICON_POSITIONS}") if icon_position.present? && ICON_POSITIONS.exclude?(icon_position)
+    end
+
+    def validate_level
+      raise(ArgumentError, "`level` should be one of #{ICON_LEVELS}") if level.present? && ICON_LEVELS.exclude?(level)
+    end
+
+    def validate_label
+      raise(ArgumentError, "`label` is required unless an icon is specified") if label.blank? && icon.blank?
+    end
+  end
+end

data/app/components/dsfr_component/header_component/direct_link_component.rb

@@ -0,0 +1,22 @@
+class DsfrComponent::HeaderComponent::DirectLinkComponent < DsfrComponent::Base
+  def initialize(title:, path:, active: false, classes: [], html_attributes: {})
+    @title = title
+    @path = path
+    @active = active
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.a(title, **html_attributes)
+  end
+
+private
+
+  attr_reader :title, :path, :active
+
+  def default_attributes
+    { href: path, class: 'fr-nav__link', target: "_self" } \
+      .merge(active ? { "aria-current": 'page' } : {})
+  end
+end

data/app/components/dsfr_component/header_component/direct_link_dropdown_component.rb

@@ -0,0 +1,34 @@
+class DsfrComponent::HeaderComponent::DirectLinkDropdownComponent < DsfrComponent::Base
+  renders_many :links, DsfrComponent::HeaderComponent::DirectLinkComponent
+
+  def initialize(title:, active: false, classes: [], html_attributes: {})
+    @title = title
+    @active = active
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.button(title, **html_attributes) +
+      tag.div(class: 'fr-collapse fr-menu', id: menu_id) do
+        tag.ul(class: 'fr-menu__list') do
+          links.map do |link|
+            tag.li link.call
+          end.join.html_safe
+        end
+      end
+  end
+
+private
+
+  attr_reader :title, :active
+
+  def default_attributes
+    { class: 'fr-nav__btn', "aria-expanded": "false", "aria-controls": menu_id } \
+      .merge(active ? { "aria-current": 'true' } : {})
+  end
+
+  def menu_id
+    @menu_id ||= "menu-#{title.parameterize}"
+  end
+end

data/app/components/dsfr_component/header_component/tool_link_component.rb

@@ -0,0 +1,20 @@
+class DsfrComponent::HeaderComponent::ToolLinkComponent < DsfrComponent::Base
+  def initialize(title:, path:, classes: [], html_attributes: {})
+    @title = title
+    @path = path
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.a title, href: path, **html_attributes
+  end
+
+private
+
+  attr_reader :title, :path
+
+  def default_attributes
+    { class: 'fr-btn' }
+  end
+end