dsfr-view-components 2.1.1 → 2.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fd43d49e7920aa1ae37d143b9503c68b1d44aad46e5a3acde610b7a0ae9da96
-  data.tar.gz: b3a7d11b90ff73cad4023f517bd3d567141648e25cdf200b1204daf2dcde8db7
+  metadata.gz: f229c00b1559088e4682d9db544e8dca6580e14880b1b0d19ed273672212516b
+  data.tar.gz: b8210536354caa679404e52a8d03d5b61ed54457741781e35b09fa17141f18c8
 SHA512:
-  metadata.gz: 4508aef35cb1afd72ca39df0e89c74290f8a4f9ebfe47c8ff2b7ce8fbcb4fba3ff2d647ecfcc41eb585b515ef378716496c1355e917d2a7b59fc38ba3faa93a5
-  data.tar.gz: f9391b2ef8ddfcdd985305d823ded7fb73add4d05eb05c8be8d30cec1a7cdf2d07b6d1df44bbd5ae18a609b5fb7d9934b54c192715449321ff2493638919f570
+  metadata.gz: 6a740ab446fbb8b0ecfe73815adf0b4d5435b22dd8e1616b70ac6ce3301b85ae4e055d86979069d24de106c7ad0278ba9d61a356b9d6a30dad258ea6210f31ee
+  data.tar.gz: dd564f73407b19af98a2628df2a8736335a656a4ce902c4b3117490a427c962b89da5e992c33ceff70d36bbda21f97009e04b7ba520e183c5b3517a8fb99b87a

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

data/app/components/dsfr_component/accordion_component.rb

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

data/app/components/dsfr_component/alert_component.rb

@@ -7,11 +7,12 @@ 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, classes: [], html_attributes: {})
     @title = title
     @type = type
     @size = size
     @close_button = close_button
+    @icon_name = icon_name
 
     super(classes: classes, html_attributes: html_attributes)
   end
@@ -19,6 +20,7 @@ class DsfrComponent::AlertComponent < DsfrComponent::Base
   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?
+    raise ArgumentError, "icon_name should be set only on default alert" if @type && @icon_name
 
     tag.div(**html_attributes) do
       safe_join([title_tag, content_tag, close_button_tag])
@@ -27,10 +29,10 @@ 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 title_tag
@@ -57,7 +59,14 @@ private
     end
   end
 
+  def icon_class
+    return nil if icon_name.blank?
+
+    "fr-icon-#{icon_name}"
+  end
+
   def type_class
+    return nil if type.blank?
     fail(ArgumentError, type_error_message) unless valid_type?
 
     "fr-alert--#{type}"

data/app/components/dsfr_component/callout_component.rb

@@ -0,0 +1,42 @@
+# 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,
+      classes: [],
+      html_attributes: {}
+    )
+      @title = title
+      @icon_name = icon_name
+      @starting_header_level = starting_header_level
+
+      super(classes: classes, 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/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,
+                   classes: [], 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(classes: classes, 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_bar_component.html.erb

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

data/app/components/dsfr_component/search_bar_component.rb

@@ -0,0 +1,42 @@
+module DsfrComponent
+  class SearchBarComponent < 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"
+    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
+      @html_attributes = html_attributes
+
+      validate_size!
+
+      super(classes: nil, html_attributes: html_attributes)
+    end
+
+  private
+
+    attr_reader :url, :size, :name, :label_text, :button_text, :html_attributes
+
+    def id
+      "#{name}_#{object_id}"
+    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/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/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_bar: 'DsfrComponent::SearchBarComponent',
     # 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.1.2'.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,14 @@
 --- !ruby/object:Gem::Specification
 name: dsfr-view-components
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.1.2
 platform: ruby
 authors:
 - BetaGouv developers
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-03 00:00:00.000000000 Z
+date: 2025-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -66,7 +67,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: guard
+  name: debug
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -80,7 +81,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 +95,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 +304,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 +341,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 +351,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_bar_component.html.erb
+- app/components/dsfr_component/search_bar_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 +367,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,7 +387,13 @@ 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'
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -424,7 +408,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.5.13
+signing_key:
 specification_version: 4
 summary: Composants ViewComponent pour le Système de Design de l'État (DSFR)
 test_files: []

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 }