dsfr-view-components 0.0.1 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13a375b911fee2a88bc620482b766be2d3348d0138d56f9f2cb2641f649e8d50
-  data.tar.gz: 85f677a71346315a8c128f156b32c74b6436528bfa5ed98fcaf490d352fdeb71
+  metadata.gz: 35d3263e9f55cf1b2f6e8ed013475acb11322715f8982ae24d43d121a5268e30
+  data.tar.gz: 6eb24fccd1294b6096bef1cf43714654a4d9a89174ac7d74c3e4a3c5845487d3
 SHA512:
-  metadata.gz: 6b10dd868701e33699626fa4753fd7a017128f87b91394c72100d24b014c16206e5285ca81778d045c025241c56a6a97805859b6af75d1c946ba917677818dc7
-  data.tar.gz: e81ae1788e01bc3e24ec2cc07a4ccfd2cf8fef13fd6d6a5a865423cdf584d65a5303c0965681ff2a922e2cb50bc61bbffb3eca87f20c7cf4224bbd51a355ee06
+  metadata.gz: f158d2adc525722af4ff7b3d8819411f0821edba991fb68885ec9142ad819c8d12f380817807c810b48298f09ee5f0c204c611fa35ba6944f69605849f490bca
+  data.tar.gz: 0303b1cded5664bf372c160c27acb619bbbdfb196b276e1ea45596d9c6657bda599e6230b0cecf9ef9be991f2b008ff6b822c901945e7f02b2dc230fe9bfa31d

data/README.md

@@ -1,37 +1,35 @@
 # 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.
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/d40a5a0a-b086-4c35-b046-97fbcbf9f219/deploy-status)](https://app.netlify.com/sites/govuk-components/deploys)
+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.
 
--->
 
 ## Composants disponibles
 
@@ -39,10 +37,10 @@ Cette gem a pour but de supporter tous les composants proposés par le Design Sy
 
 Les composants disponibles sont :
 
-- [ ] Accordéon - Accordion
+- [x] Accordéon - Accordion
 - [ ] Ajout de fichier - File upload
-- [ ] Alertes - Alert
-- [ ] Badge
+- [x] Alertes - Alert
+- [x] Badge
 - [ ] Bandeau d'information importante
 - [ ] Barre de recherche - Search bar
 - [ ] Boutons - Buttons
@@ -59,10 +57,10 @@ Les composants disponibles sont :
 - [ ] 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
@@ -80,7 +78,7 @@ Les composants disponibles sont :
 - [ ] Tableau - Table
 - [ ] 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),
@@ -191,7 +189,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 +210,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/stepper_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(**html_attributes) do %>
+  <h2 class="fr-stepper__title">
+    <span class="fr-stepper__state">
+      Étape <%= value %> sur <%= max %>
+    </span>
+    <%= title %>
+  </h2>
+  <div
+    class="fr-stepper__steps"
+    data-fr-current-step="<%= value %>"
+    data-fr-steps="<%= max %>"></div>
+  <% if next_title %>
+    <p class="fr-stepper__details">
+      <span class="fr-text--bold">Étape suivante :</span>
+      <%= next_title %>
+    </p>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/stepper_component.rb

@@ -0,0 +1,26 @@
+module DsfrComponent
+  class StepperComponent < DsfrComponent::Base
+    # @param title [String] Titre de l’étape en cours
+    # @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: {})
+      @title = title
+      @value = value
+      @max = max
+      @next_title = next_title
+
+      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)
+    end
+
+  private
+
+    attr_reader :title, :value, :max, :next_title
+
+    def default_attributes
+      { class: 'fr-stepper' }
+    end
+  end
+end

data/app/components/dsfr_component/tag_component.rb

@@ -1,44 +1,73 @@
-class DsfrComponent::TagComponent < DsfrComponent::Base
-  attr_reader :text, :colour
+module DsfrComponent
+  class TagComponent < DsfrComponent::Base
+    SIZES = %i[sm md].freeze
 
-  COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
+    # @param title [String] tag title
+    # @param icon [String] icon name (optional)
+    # @param size [Symbol] tag size : `:md` (default) or `:sm` (optional)
+    # @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: {})
+      @title = title
+      @icon = icon
+      @size = size
+      @url = url
+      @selected = selected
+      @dismissable = dismissable
 
-  def initialize(text: nil, colour: config.default_tag_colour, classes: [], html_attributes: {})
-    @text   = text
-    @colour = colour
+      super(classes: classes, html_attributes: html_attributes)
+    end
 
-    super(classes: classes, html_attributes: html_attributes)
-  end
+    def call
+      validate_size && validate_selected && validate_dismissable
+      tag.send(tag_name, **html_attributes) { title }
+    end
 
-  def call
-    tag.strong(tag_content, **html_attributes)
-  end
+  private
 
-private
+    attr_reader :title, :icon, :size, :url, :selected, :dismissable
 
-  def tag_content
-    @text || content || fail(ArgumentError, "no text or content")
-  end
+    def validate_size
+      raise(ArgumentError, "`size` should be one of #{SIZES}") if size.present? && SIZES.exclude?(size)
+    end
 
-  def default_attributes
-    {
-      class: ["govuk-tag", colour_class]
-    }
-  end
+    def validate_selected
+      raise ArgumentError, "selected cannot be used together with an URL" if !selected.nil? && url.present?
+    end
 
-  def colour_class
-    return nil if colour.blank?
+    def validate_dismissable
+      raise ArgumentError, "dismissable cannot be used together with url or icon" if \
+        dismissable && (url.present? || icon.present?)
+    end
 
-    fail(ArgumentError, colour_error_message) unless valid_colour?
+    def default_attributes
+      attrs = { class: css_classes }
+      attrs.merge!(href: url, target: "_self") if url.present?
+      unless selected.nil? # meaningful when false
+        aria_pressed = selected ? "true" : "false"
+        attrs.merge!("aria-pressed": aria_pressed)
+      end
+      attrs.merge!("aria-label": "Retirer #{title}") if dismissable
+      attrs
+    end
 
-    %(govuk-tag--#{colour})
-  end
-
-  def valid_colour?
-    @colour.in?(COLOURS)
-  end
+    def css_classes
+      classes = %w[fr-tag]
+      classes += %W[fr-fi-#{icon} fr-tag--icon-left] if icon.present?
+      classes << "fr-tag--sm" if size == :sm
+      classes << "fr-tag--dismiss" if dismissable
+      classes
+    end
 
-  def colour_error_message
-    "invalid tag colour #{colour}, supported colours are #{COLOURS.to_sentence}"
+    def tag_name
+      if url.present?
+        :a
+      elsif !selected.nil? || dismissable
+        :button
+      else
+        :p
+      end
+    end
   end
 end

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

@@ -0,0 +1,19 @@
+<%= tag.div(**html_attributes) do %>
+  <div class="fr-tile__body">
+    <h4 class="fr-tile__title">
+      <a class="fr-tile__link" href="<%= url %>">
+      <%= title %>
+      </a>
+    </h4>
+    <% if description.present? %>
+      <p class="fr-tile__desc">
+        <%= description %>
+      </p>
+    <% end %>
+  </div>
+  <% if image_src.present? %>
+    <div class="fr-tile__img">
+      <img src="<%= image_src %>" class="fr-responsive-img" alt="<%= image_alt %>">
+    </div>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/tile_component.rb

@@ -0,0 +1,31 @@
+module DsfrComponent
+  class TileComponent < DsfrComponent::Base
+    # @param title [String] title (required)
+    # @param url [String] url (required)
+    # @param image_src [String] chemin vers l'image (optional)
+    # @param image_alt [String] L'alternative de l'image. Doit a priori être vide si l'image est illustrative et n'apporte pas de valeur sémantique.
+    # @param description [String] description (optional)
+    # @param orientation [String] :horizontal or :vertical
+    def initialize(title:, url:, image_src: nil, image_alt: "", description: nil, orientation: :vertical, classes: [], html_attributes: {})
+      @title = title
+      @url = url
+      @image_src = image_src
+      @image_alt = image_alt
+      @description = description
+      @orientation = orientation
+      @background = background
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+  private
+
+    attr_reader :title, :url, :image_src, :image_alt, :description, :orientation, :background
+
+    def default_attributes
+      k = %w[fr-tile fr-enlarge-link]
+      k << "fr-tile--horizontal" if orientation.to_sym == :horizontal
+      { class: k.join(" ") }
+    end
+  end
+end

data/app/helpers/dsfr_components_helper.rb

@@ -1,25 +1,16 @@
+# rubocop:disable Style/TrailingCommaInHashLiteral
 module DsfrComponentsHelper
-  {
+  HELPER_NAME_TO_CLASS_NAME = {
+    dsfr_alert: 'DsfrComponent::AlertComponent',
     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_accordion_section: 'DsfrComponent::AccordionComponent::SectionComponent',
+    dsfr_tile: 'DsfrComponent::TileComponent',
+    dsfr_badge: 'DsfrComponent::BadgeComponent',
     dsfr_tag: 'DsfrComponent::TagComponent',
-    dsfr_warning_text: 'DsfrComponent::WarningTextComponent',
-  }.each do |name, klass|
+    dsfr_stepper: 'DsfrComponent::StepperComponent',
+    # DO NOT REMOVE: new component mapping here
+  }.freeze
+  HELPER_NAME_TO_CLASS_NAME.each do |name, klass|
     define_method(name) do |*args, **kwargs, &block|
       capture do
         render(klass.constantize.new(*args, **kwargs)) do |com|
@@ -29,5 +20,6 @@ module DsfrComponentsHelper
     end
   end
 end
+# rubocop:enable Style/TrailingCommaInHashLiteral
 
 ActiveSupport.on_load(:action_view) { include DsfrComponentsHelper }