dsfr-view-components 2.1.1 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fd43d49e7920aa1ae37d143b9503c68b1d44aad46e5a3acde610b7a0ae9da96
-  data.tar.gz: b3a7d11b90ff73cad4023f517bd3d567141648e25cdf200b1204daf2dcde8db7
+  metadata.gz: c3abead9a7b02e13cbbe5cfa9e1d9efa24db78ff92e6560920823e232da2686a
+  data.tar.gz: 1257756ffd30ee9e631a095967f7c430b7902516952b4f328e8ba9f54825c994
 SHA512:
-  metadata.gz: 4508aef35cb1afd72ca39df0e89c74290f8a4f9ebfe47c8ff2b7ce8fbcb4fba3ff2d647ecfcc41eb585b515ef378716496c1355e917d2a7b59fc38ba3faa93a5
-  data.tar.gz: f9391b2ef8ddfcdd985305d823ded7fb73add4d05eb05c8be8d30cec1a7cdf2d07b6d1df44bbd5ae18a609b5fb7d9934b54c192715449321ff2493638919f570
+  metadata.gz: 93de62ccadb3a81c1991ff9f85c42e4f52e0dad62513b958656b20eac58b6a376f67b5394ea395def361bb7cc22e08a26a16681783eec5d2c3889ae5bc3128da
+  data.tar.gz: 79b0c4176685a04c0875ccd70a015ba70aeae6ff948fcf907538211e98880cde86dae51097edd14e0a45f69f8f4866c6a2c6cfe7b60aa361b609a463e14aa67a

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

@@ -1,5 +1,5 @@
 <%= tag.section(**html_attributes) do %>
-  <%= tag.send("h#{starting_header_level}", class: "fr-accordion__title") do %>
+  <%= tag.send(starting_header_tag, class: "fr-accordion__title") do %>
     <button
         class="fr-accordion__btn"
         aria-expanded="<%= expanded? ? "true" : "false" %>"

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

@@ -1,4 +1,6 @@
 class DsfrComponent::AccordionComponent::SectionComponent < DsfrComponent::Base
+  include DsfrComponent::Traits::HeaderSizeable
+
   attr_reader :title, :expanded, :starting_header_level
 
   alias_method :expanded?, :expanded
@@ -11,7 +13,6 @@ class DsfrComponent::AccordionComponent::SectionComponent < DsfrComponent::Base
     starting_header_level:,
     expanded: false,
     id: nil,
-    classes: [],
     html_attributes: {}
   )
     @title = title
@@ -19,7 +20,7 @@ class DsfrComponent::AccordionComponent::SectionComponent < DsfrComponent::Base
     @id = id
     @starting_header_level = starting_header_level
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def id

data/app/components/dsfr_component/accordion_component.rb

@@ -1,11 +1,8 @@
 class DsfrComponent::AccordionComponent < DsfrComponent::Base
-  DEFAULT_HEADER_LEVEL = 3
+  include DsfrComponent::Traits::HeaderSizeable
 
-  attr_reader :starting_header_level
-
-  renders_many :sections, ->(title: nil, expanded: false, id: nil, classes: [], html_attributes: {}, &block) do
+  renders_many :sections, ->(title: nil, expanded: false, id: nil, html_attributes: {}, &block) do
     DsfrComponent::AccordionComponent::SectionComponent.new(
-      classes: classes,
       expanded: expanded,
       html_attributes: html_attributes,
       title: title,
@@ -15,10 +12,10 @@ class DsfrComponent::AccordionComponent < DsfrComponent::Base
     )
   end
 
-  def initialize(classes: [], html_attributes: {}, starting_header_level: DEFAULT_HEADER_LEVEL)
+  def initialize(html_attributes: {}, starting_header_level: nil)
     @starting_header_level = starting_header_level
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
 private

data/app/components/dsfr_component/alert_component.rb

@@ -7,18 +7,19 @@ class DsfrComponent::AlertComponent < DsfrComponent::Base
   # @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: {})
+  def initialize(type: nil, title: nil, size: :md, close_button: false, icon_name: nil, html_attributes: {})
     @title = title
     @type = type
     @size = size
     @close_button = close_button
+    @icon_name = icon_name
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(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?
+    check_main_content!
+    check_icon_allowed!
 
     tag.div(**html_attributes) do
       safe_join([title_tag, content_tag, close_button_tag])
@@ -27,10 +28,36 @@ class DsfrComponent::AlertComponent < DsfrComponent::Base
 
 private
 
-  attr_reader :title, :type, :size, :close_button
+  attr_reader :title, :type, :size, :close_button, :icon_name
 
   def default_attributes
-    { class: %w(fr-alert) + [type_class, size_class].compact }
+    { class: %w(fr-alert) + [icon_class, type_class, size_class].compact }
+  end
+
+  def default_type?
+    type.nil?
+  end
+
+  def check_icon_allowed!
+    raise ArgumentError, "a custom icon can only be used on default alert types" if icon_name && !default_type?
+  end
+
+  def main_content?
+    case size
+    when :sm
+      content.present? && title.blank?
+    when :md
+      content.present? || title.present?
+    else
+      raise ArgumentError, "invalid alert size: '#{size}', supported sizes are #{SIZES.to_sentence}"
+    end
+  end
+
+  def check_main_content!
+    raise(
+      ArgumentError,
+      "You must provide a title for medium alerts, but you can't use it for small alerts (use content instead)"
+    ) if not main_content?
   end
 
   def title_tag
@@ -57,33 +84,31 @@ private
     end
   end
 
-  def type_class
-    fail(ArgumentError, type_error_message) unless valid_type?
+  def icon_class
+    return nil if icon_name.blank?
 
-    "fr-alert--#{type}"
+    "fr-icon-#{icon_name}"
   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
+  def type_class
+    return nil if type.blank?
 
-    fail(ArgumentError, size_error_message) unless valid_size?
+    raise ArgumentError, "invalid alert type #{type}, supported types are #{TYPES.to_sentence}" unless valid_type?
 
-    "fr-alert--#{size}"
+    "fr-alert--#{type}"
   end
 
   def valid_size?
     size.in?(SIZES)
   end
 
-  def size_error_message
-    "invalid alert size #{size}, supported sizes are #{SIZES.to_sentence}"
+  def size_class
+    return nil if size == :md
+
+    "fr-alert--#{size}"
   end
 end

data/app/components/dsfr_component/badge_component.rb

@@ -3,14 +3,12 @@ module DsfrComponent
     STATUSES = %i[success error info warning new].freeze
 
     # @param status [BadgeComponent::STATUSES]
-    def initialize(status:, classes: [], html_attributes: {})
+    def initialize(status:, 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)
+      super(html_attributes: html_attributes)
     end
 
     def call
@@ -24,7 +22,7 @@ module DsfrComponent
     attr_reader :status
 
     def default_attributes
-      { class: 'fr-badge' }
+      { class: ['fr-badge', "fr-badge--#{status}"] }
     end
   end
 end

data/app/components/dsfr_component/base.rb

@@ -9,21 +9,8 @@ class DsfrComponent::Base < ViewComponent::Base
 
   SIZES = %i[sm md lg].freeze
 
-  def initialize(classes:, html_attributes:)
-    if classes.nil?
-      Rails.logger.warn("classes is nil, if no custom classes are needed omit the param")
-
-      classes = []
-    end
-    # FIXME: remove first merge when we deprecate classes
-    #
-    # This step only needs to be here while we still accept classes:, now
-    # we're using html_attributes_utils we can start to move towards
-    # supporting html_attributes: { class: 'xyz' } over taking them
-    # separately
-
+  def initialize(html_attributes: {})
     @html_attributes = default_attributes
-      .deep_merge_html_attributes({ class: classes })
       .deep_merge_html_attributes(html_attributes)
       .deep_tidy_html_attributes
 

data/app/components/dsfr_component/breadcrumbs_component.rb

@@ -9,10 +9,6 @@ class DsfrComponent::BreadcrumbsComponent < DsfrComponent::Base
     content_tag(:a, class: 'fr-breadcrumb__link', **attributes) { label }
   end
 
-  def initialize(classes: [], html_attributes: {})
-    super(classes: classes, html_attributes: html_attributes)
-  end
-
 private
 
   def default_attributes

data/app/components/dsfr_component/button_component.rb

@@ -10,7 +10,7 @@ module DsfrComponent
     # @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: {})
+    def initialize(label: nil, title: nil, icon: nil, icon_position: :left, level: nil, size: nil, html_attributes: {})
       @label = label
       @title = title
       @icon = icon
@@ -24,7 +24,7 @@ module DsfrComponent
       validate_level
       validate_label
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
     def call

data/app/components/dsfr_component/callout_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module DsfrComponent
+  class CalloutComponent < DsfrComponent::Base
+    include DsfrComponent::Traits::HeaderSizeable
+
+    renders_one :action_zone
+
+    # @param title [String] Le titre de la mise en avant
+    # @param icon_name [String] Le nom de l’icône à afficher (exemple `arrow-right-line`) (optionnel)
+    # @param starting_header_level [Integer] Le niveau de titre (optionnel)
+    def initialize(
+      title:,
+      icon_name: "information-line",
+      starting_header_level: nil,
+      html_attributes: {}
+    )
+      @title = title
+      @icon_name = icon_name
+      @starting_header_level = starting_header_level
+
+      super(html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        concat content_tag(starting_header_tag, @title, class: 'fr-callout__title')
+
+        concat content_tag(:p, content, class: 'fr-callout__text')
+
+        concat action_zone if action_zone?
+      end
+    end
+
+    private
+
+    def default_attributes
+      { class: "fr-callout fr-icon-#{@icon_name}" }
+    end
+  end
+end

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

@@ -1,10 +1,10 @@
 class DsfrComponent::HeaderComponent::DirectLinkComponent < DsfrComponent::Base
-  def initialize(title:, path:, active: false, classes: [], html_attributes: {})
+  def initialize(title:, path:, active: false, html_attributes: {})
     @title = title
     @path = path
     @active = active
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def call

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

@@ -1,11 +1,11 @@
 class DsfrComponent::HeaderComponent::DirectLinkDropdownComponent < DsfrComponent::Base
   renders_many :links, DsfrComponent::HeaderComponent::DirectLinkComponent
 
-  def initialize(title:, active: false, classes: [], html_attributes: {})
+  def initialize(title:, active: false, html_attributes: {})
     @title = title
     @active = active
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def call

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

@@ -2,12 +2,12 @@ class DsfrComponent::HeaderComponent::OperatorImageComponent < DsfrComponent::Ba
   # @param title [String] Le title du lien vers la page d'accueil du site
   # @param src [String] L'attribut src qui sera passé au tag img
   # @param alt [String] Le texte alternatif qui sera passé au tag img. Il doit impérativement contenir le texte présent dans l’image.
-  def initialize(title:, src:, alt:, classes: [], html_attributes: {})
+  def initialize(title:, src:, alt:, html_attributes: {})
     @title = title
     @src = src
     @alt = alt
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def call

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

@@ -1,9 +1,9 @@
 class DsfrComponent::HeaderComponent::ToolLinkComponent < DsfrComponent::Base
-  def initialize(title:, path:, classes: [], html_attributes: {})
+  def initialize(title:, path:, html_attributes: {})
     @title = title
     @path = path
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def call

data/app/components/dsfr_component/header_component.rb

@@ -10,12 +10,12 @@ class DsfrComponent::HeaderComponent < DsfrComponent::Base
   # @param logo_text [String] Ce texte obligatoire sera affiché en dessous de la Marianne et au dessus de la devise française. C’est généralement un nom de ministère ou d’administration.
   # @param title [String] Le nom du service numérique, titre principal du site.
   # @param tagline [String] La description du service numérique, sous-titre du site (optionnelle).
-  def initialize(logo_text:, title: nil, tagline: nil, classes: [], html_attributes: {})
+  def initialize(logo_text:, title: nil, tagline: nil, html_attributes: {})
     @logo_text = logo_text
     @title = title
     @tagline = tagline
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
 private

data/app/components/dsfr_component/highlight_component.rb

@@ -2,13 +2,13 @@ module DsfrComponent
   class HighlightComponent < DsfrComponent::Base
     # @param text [String] Le contenu textuel du composant
     # @param size [Symbol] La taille de la mise en exergue
-    def initialize(text:, size: :md, classes: [], html_attributes: {})
+    def initialize(text:, size: :md, html_attributes: {})
       @text = text
       @size = size
 
       raise ArgumentError if not SIZES.include?(size)
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
     def call

data/app/components/dsfr_component/modal_component.rb

@@ -5,12 +5,12 @@ module DsfrComponent
 
     # @param title [String] Titre de la modale
     # @param opened [Boolean] Ouvre la modale dès le chargement de la page
-    def initialize(title:, opened: false, classes: [], html_attributes: {})
+    def initialize(title:, opened: false, html_attributes: {})
       @title = title
       @opened = opened
 
       @id = html_attributes[:id]
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
   private

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

@@ -0,0 +1,14 @@
+<%= tag.div(**html_attributes) do %>
+  <div class="fr-container">
+    <div class="fr-notice__body">
+      <%= tag.send(description_tag) do %>
+        <span class="fr-notice__title <%= icon_class %>"><%= title %></span>
+        <span class="fr-notice__desc"><%= description %></span>
+        <%= link_tag %>
+      <% end %>
+      <% if dismissible %>
+        <button onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" title="<%= @dismiss_label %>" type="button" class="fr-btn--close fr-btn"><%= @dismiss_label %></button>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/dsfr_component/notice_component.rb

@@ -0,0 +1,99 @@
+module DsfrComponent
+  class NoticeComponent < DsfrComponent::Base
+    GENERIC_TYPES = %w[info waring alert].freeze
+    WEATHER_TYPES = %w[weather-orange weather-red weather-purple].freeze
+    ALERT_TYPES = %w[kidnapping cyberattack attack witness].freeze
+    TYPES = GENERIC_TYPES + WEATHER_TYPES + ALERT_TYPES
+
+    WEATHER_ICONS = %w[windy-fill thunderstorms-fill heavy-showers-fill flood-fill temp-cold-fill sun-fill avalanches-fill snowy-fill].freeze
+
+    DESCRIPTION_TAGS = %i[p h1 h2 h3 h4 h5 h6].freeze
+
+    # @param title [String] Titre du bandeau
+    # @param description [String] Description du bandeau pour apporter du contexte (optionnel)
+    # @param type [String] Type de bandeau (info, waring, alert, weather-orange, weather-red, weather-purple, kidnapping, cyberattack, attack, witness)
+    # @param description_tag [Symbol] Balise HTML à utiliser pour la description (p, h1, h2, h3, h4, h5, h6)
+    # @param use_icon [Boolean] Afficher ou non une icône, uniquement pour les bandeaux génériques
+    # @param icon_name [String] Nom de l'icône à afficher
+    # @param use_notice [Boolean] Ajout l’attribut role="notice" (si insertion du bandeau à la volée)
+    # @param dismissible [Boolean] Ajouter un bouton de fermeture
+    # @param dismiss_label [String] Libellé du bouton de fermeture (optionnel)
+    # @param link_label [String] Libellé du lien (optionnel)
+    # @param link_href [String] URL du lien (optionnel)
+    # @param link_title [String] Titre du lien (optionnel)
+    # @param link_blank [Boolean] Ouvrir le lien dans un nouvel onglet (optionnel)
+    def initialize(title:, description:, type: "info", description_tag: :p, use_icon: true, icon_name: nil, use_notice: false, dismissible: false, dismiss_label: "Masquer le message", link_label: nil, link_href: nil, link_title: nil, link_blank: true,
+                   html_attributes: {})
+      @title = title
+      @description = description
+      @type = type
+      @description_tag = description_tag
+      @icon_name = icon_name
+      @use_notice = use_notice
+      @dismissible = dismissible
+      @dismiss_label = dismiss_label
+      @link_label = link_label
+      @link_href = link_href
+      @link_title = link_title
+      @link_blank = link_blank
+
+      # D’après les règles du DSFR les types non génériques ont forcément une icône
+      @use_icon = if GENERIC_TYPES.include?(type)
+                use_icon
+              else
+                true
+              end
+
+      raise ArgumentError, "Invalid type: #{type}. Valid types: #{TYPES.join(', ')}" unless type_valid?
+
+      raise ArgumentError, "Invalid description tag: #{description_tag}" unless DESCRIPTION_TAGS.include?(description_tag)
+
+      if icon_name
+        raise ArgumentError, "L’icône n’est pas personnalisable sur les bandeaux d’alertes" if ALERT_TYPES.include?(type)
+        raise ArgumentError, "L’icône d’un bandeau de type météo doit être une icône météo (#{WEATHER_ICONS.join(', ')})" if WEATHER_TYPES.include?(type) && WEATHER_ICONS.exclude?(icon_name)
+      end
+
+      super(html_attributes: html_attributes)
+    end
+
+  private
+
+    attr_reader :type, :title, :description, :description_tag, :use_icon, :icon_name, :use_notice, :dismissible, :link_label, :link_href, :link_title, :link_blank
+
+    def notice_class
+      "fr-notice--#{type}"
+    end
+
+    def type_valid?
+      TYPES.include?(type)
+    end
+
+    def link_display?
+      link_label.present? && link_href.present?
+    end
+
+    def link_tag
+      return unless link_display?
+
+      target = @link_blank ? "_blank" : "_self"
+
+      link_to(link_label, link_href, title: link_title, target: target)
+    end
+
+    def icon_class
+      return unless icon_name
+
+      "fr-icon-#{icon_name}"
+    end
+
+    def default_attributes
+      class_attr = "fr-notice #{notice_class}"
+      class_attr += " fr-notice--no-icon" unless use_icon
+
+      attr = { class: class_attr }
+      attr[:role] = "notice" if use_notice
+
+      attr
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= form_with(url: url, method: :get, **html_attributes) do |form| %>
+  <% hidden_fields.each do |name, value| %>
+  <%= form.hidden_field(name, value: value) %>
+  <% end %>
+  <%= form.label(name, label_text, for: id, class: 'fr-label') %>
+  <%= form.search_field(name, id: id, placeholder: button_text, value: value, class: 'fr-input') %>
+  <%= form.button(type: :submit, name: nil, class: 'fr-btn') { button_text } %>
+<% end %>

data/app/components/dsfr_component/search_component.rb

@@ -0,0 +1,50 @@
+module DsfrComponent
+  class SearchComponent < DsfrComponent::Base
+    DEFAULT_LABEL_TEXT = 'Recherche'.freeze
+    DEFAULT_BUTTON_TEXT = 'Rechercher'.freeze
+
+    # @param url [String] form destination
+    # @param name [String|Symbol] input name
+    # @param size [Symbol] component size : `:md` (default) or `:sm`/`:lg`
+    # @param label_text [String] Label text, default: "Recherche"
+    # @param button_text [String] Button and placeholder text, default: "Rechercher"
+    # @param value [String] Current input value (optional, defaults to request.params[name])
+    # @param hidden_fields [Hash] Extra fields (optional)
+    def initialize(url:, name: :search, size: :md, label_text: DEFAULT_LABEL_TEXT, button_text: DEFAULT_BUTTON_TEXT, **html_attributes)
+      @url = url
+      @name = name
+      @label_text = label_text
+      @button_text = button_text
+      @size = size
+      @value = html_attributes.delete(:value)
+      @hidden_fields = html_attributes.delete(:hidden_fields) || {}
+      @html_attributes = html_attributes
+
+      validate_size!
+
+      super(html_attributes: html_attributes)
+    end
+
+  private
+
+    attr_reader :url, :size, :name, :label_text, :button_text, :hidden_fields, :html_attributes
+
+    def id
+      "#{name}_#{object_id}"
+    end
+
+    def value
+      @value || (request && request.params[name])
+    end
+
+    def default_attributes
+      classes = ['fr-search-bar']
+      classes << "fr-search-bar--#{size}" unless size == :md
+      { class: classes }
+    end
+
+    def validate_size!
+      raise(ArgumentError, "`size` should be one of #{SIZES}") if size.present? && SIZES.exclude?(size)
+    end
+  end
+end

data/app/components/dsfr_component/skiplink_component.rb

@@ -2,11 +2,11 @@ module DsfrComponent
   class SkiplinkComponent < DsfrComponent::Base
     # @param label [String] le texte utilisé pour le aria-label de la nav qui affiche les liens d’évitement (par exemple « Accès rapide »)
     # @param links [Array] liste de liens HTML
-    def initialize(label:, links:, classes: [], html_attributes: {})
+    def initialize(label:, links:, html_attributes: {})
       @label = label
       @links = links
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
   private

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

@@ -1,9 +1,9 @@
 <%= tag.div(**html_attributes) do %>
   <h2 class="fr-stepper__title">
+    <%= title %>
     <span class="fr-stepper__state">
       Étape <%= value %> sur <%= max %>
     </span>
-    <%= title %>
   </h2>
   <div
     class="fr-stepper__steps"

data/app/components/dsfr_component/stepper_component.rb

@@ -4,7 +4,7 @@ module DsfrComponent
     # @param value [Integer] Numéro de l’étape en cours (commence à 1)
     # @param max [Integer] Nombre d’étapes total
     # @param next_title [String] Titre de l’étape suivante (sauf pour la dernière étape)
-    def initialize(title:, value:, max:, next_title: nil, classes: [], html_attributes: {})
+    def initialize(title:, value:, max:, next_title: nil, html_attributes: {})
       @title = title
       @value = value
       @max = max
@@ -12,7 +12,7 @@ module DsfrComponent
 
       raise ArgumentError, "Les étapes doivent aller de 1 jusqu´à 8 au maximum" if @value < 1 || @value > @max || @max > 8
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
   private

data/app/components/dsfr_component/tabs_component/tab_component.rb

@@ -3,13 +3,13 @@ class DsfrComponent::TabsComponent::TabComponent < DsfrComponent::Base
   # @param active [Boolean] Définit si l’onglet est actif ou non
   # @param path [String] (optionnel) chemin vers lequel l’onglet pointe, utilisable avec Turbo Drive, transforme le bouton en lien, avec une turbo action `advance`
   # @param icon [String] (optionnel) icône affichée à gauche du titre de l’onglet (sans le préfixe `fr-icon-`)
-  def initialize(title:, active: false, path: nil, icon: nil, classes: [], html_attributes: {})
+  def initialize(title:, active: false, path: nil, icon: nil, html_attributes: {})
     @title = title
     @active = active
     @path = path
     @icon = icon
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
   def nav_id

data/app/components/dsfr_component/tabs_component.rb

@@ -2,11 +2,11 @@ class DsfrComponent::TabsComponent < DsfrComponent::Base
   renders_many :tabs, "DsfrComponent::TabsComponent::TabComponent"
 
   # @param label [String] Le nom du système d’onglets, sera uniquement affiché comme aria-label (optionnel)
-  def initialize(label: nil, classes: [], html_attributes: {})
+  def initialize(label: nil, html_attributes: {})
     @label = label
     @tabs = []
 
-    super(classes: classes, html_attributes: html_attributes)
+    super(html_attributes: html_attributes)
   end
 
 private

data/app/components/dsfr_component/tag_component.rb

@@ -8,7 +8,7 @@ module DsfrComponent
     # @param url [String] for clickable tags only (optional)
     # @param selected [Boolean] adds a check, useful for filters list, cannot be used with `url` (optional)
     # @param dismissable [Boolean] adds a close icon on the right, cannot be used with `url` or `icon` (optional)
-    def initialize(title:, icon: nil, size: nil, url: nil, selected: nil, dismissable: nil, classes: [], html_attributes: {})
+    def initialize(title:, icon: nil, size: nil, url: nil, selected: nil, dismissable: nil, html_attributes: {})
       @title = title
       @icon = icon
       @size = size
@@ -16,7 +16,7 @@ module DsfrComponent
       @selected = selected
       @dismissable = dismissable
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
     def call

data/app/components/dsfr_component/tile_component.rb

@@ -7,7 +7,7 @@ module DsfrComponent
     # @param description [String] description (optional)
     # @param orientation [String] :horizontal or :vertical
     # @param heading_level [Integer] 1, 2, 3, 4 (default), 5, 6
-    def initialize(title:, url:, image_src: nil, image_alt: "", description: nil, orientation: :vertical, heading_level: 4, classes: [], html_attributes: {})
+    def initialize(title:, url:, image_src: nil, image_alt: "", description: nil, orientation: :vertical, heading_level: 4, html_attributes: {})
       @title = title
       @url = url
       @image_src = image_src
@@ -18,7 +18,7 @@ module DsfrComponent
 
       raise ArgumentError if HEADING_LEVELS.exclude?(heading_level)
 
-      super(classes: classes, html_attributes: html_attributes)
+      super(html_attributes: html_attributes)
     end
 
   private

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module DsfrComponent
+  module Traits
+    # HeaderSizeable is meant for every component that exhibits a
+    # header, which level can be overriden via the
+    # `default_header_level` method. Make sure you store the attribute
+    # `@starting_header_level` in your component's constructor.
+    module HeaderSizeable
+      DEFAULT_HEADER_LEVEL = 3
+
+      def starting_header_level
+        @starting_header_level || default_header_level
+      end
+
+      def default_header_level
+        DEFAULT_HEADER_LEVEL
+      end
+
+      def starting_header_tag
+        ["h", starting_header_level].join
+      end
+    end
+  end
+end

data/app/helpers/dsfr_components_helper.rb

@@ -18,6 +18,9 @@ module DsfrComponentsHelper
     dsfr_tabs: 'DsfrComponent::TabsComponent',
     dsfr_highlight: 'DsfrComponent::HighlightComponent',
     dsfr_skiplink: 'DsfrComponent::SkiplinkComponent',
+    dsfr_callout: 'DsfrComponent::CalloutComponent',
+    dsfr_notice: 'DsfrComponent::NoticeComponent',
+    dsfr_search: 'DsfrComponent::SearchComponent',
     # DO NOT REMOVE: new component mapping here
   }.freeze
   HELPER_NAME_TO_CLASS_NAME.each do |name, klass|

data/lib/dsfr/components/version.rb

@@ -1,5 +1,5 @@
 module Dsfr
   module Components
-    VERSION = '2.1.1'.freeze
+    VERSION = '2.2.0'.freeze
   end
 end

data/lib/generators/dsfr_component/templates/component.haml.erb

@@ -10,4 +10,4 @@ title: <%= name %>
   :markdown
     Le rendu de base du <%= name %>Component
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("<%= name %>"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("doc-id", "storybook-id"))

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: dsfr-view-components
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.2.0
 platform: ruby
 authors:
 - BetaGouv developers
 bindir: bin
 cert_chain: []
-date: 2025-02-03 00:00:00.000000000 Z
+date: 2025-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -66,7 +66,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: guard
+  name: debug
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -80,7 +80,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: guard-rspec
+  name: guard
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -94,7 +94,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: pry-byebug
+  name: guard-rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -303,34 +303,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.7.0
-- !ruby/object:Gem::Dependency
-  name: slim
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.1.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 4.1.0
-- !ruby/object:Gem::Dependency
-  name: slim_lint
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.22.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.22.0
 - !ruby/object:Gem::Dependency
   name: webrick
   requirement: !ruby/object:Gem::Requirement
@@ -368,6 +340,7 @@ files:
 - app/components/dsfr_component/breadcrumbs_component.html.erb
 - app/components/dsfr_component/breadcrumbs_component.rb
 - app/components/dsfr_component/button_component.rb
+- app/components/dsfr_component/callout_component.rb
 - app/components/dsfr_component/header_component.html.erb
 - app/components/dsfr_component/header_component.rb
 - app/components/dsfr_component/header_component/direct_link_component.rb
@@ -377,6 +350,10 @@ files:
 - app/components/dsfr_component/highlight_component.rb
 - app/components/dsfr_component/modal_component.html.erb
 - app/components/dsfr_component/modal_component.rb
+- app/components/dsfr_component/notice_component.html.erb
+- app/components/dsfr_component/notice_component.rb
+- app/components/dsfr_component/search_component.html.erb
+- app/components/dsfr_component/search_component.rb
 - app/components/dsfr_component/skiplink_component.html.erb
 - app/components/dsfr_component/skiplink_component.rb
 - app/components/dsfr_component/stepper_component.html.erb
@@ -389,10 +366,10 @@ files:
 - app/components/dsfr_component/tile_component.rb
 - app/components/dsfr_component/traits.rb
 - app/components/dsfr_component/traits/custom_html_attributes.rb
+- app/components/dsfr_component/traits/header_sizeable.rb
 - app/helpers/dsfr_back_to_top_link_helper.rb
 - app/helpers/dsfr_components_helper.rb
 - app/helpers/dsfr_link_helper.rb
-- app/helpers/dsfr_skip_link_helper.rb
 - config/routes.rb
 - lib/dsfr/components.rb
 - lib/dsfr/components/engine.rb
@@ -409,6 +386,11 @@ homepage: https://github.com/betagouv/dsfr-view-components
 licenses:
 - MIT
 metadata:
+  bug_tracker_uri: https://github.com/betagouv/dsfr-view-components/issues
+  changelog_uri: https://github.com/betagouv/dsfr-view-components/releases
+  documentation_uri: https://www.rubydoc.info/gems/dsfr-view-components/
+  homepage_uri: https://github.com/betagouv/dsfr-view-components
+  source_code_uri: https://github.com/betagouv/dsfr-view-components
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths:

data/app/helpers/dsfr_skip_link_helper.rb

@@ -1,13 +0,0 @@
-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 }