Merge pull request #205 from betagouv/feat/highlight-component

Feat/highlight component

Guardfile

@@ -2,8 +2,8 @@
 # More info at https://github.com/guard/guard#readme
 
 ## Uncomment and set this to only include directories you want to watch
-# directories %w(app lib config test spec features) \
-#  .select{|d| Dir.exist?(d) ? d : UI.warning("Directory #{d} does not exist")}
+directories %w(app lib config spec) \
+ .select{|d| Dir.exist?(d) ? d : UI.warning("Directory #{d} does not exist")}
 
 ## Note: if you are using the `directories` clause above and you are not
 ## watching the project directory ('.'), then you will want to move

app/components/dsfr_component/base.rb

@@ -7,6 +7,8 @@ class DsfrComponent::Base < ViewComponent::Base
 
   HEADING_LEVELS = [1, 2, 3, 4, 5, 6].freeze
 
+  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")

app/components/dsfr_component/highlight_component.rb

@@ -0,0 +1,30 @@
+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: {})
+      @text = text
+      @size = size
+
+      raise ArgumentError if not SIZES.include?(size)
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        tag.p(class: "fr-text--#{@size}") do
+          @text
+        end
+      end
+    end
+
+  private
+
+    attr_reader :text, :size
+
+    def default_attributes
+      { class: 'fr-highlight' }
+    end
+  end
+end

app/helpers/dsfr_components_helper.rb

@@ -16,6 +16,7 @@ module DsfrComponentsHelper
     dsfr_header_direct_link: 'DsfrComponent::HeaderComponent::DirectLinkComponent',
     dsfr_header_direct_dropdown_link: 'DsfrComponent::HeaderComponent::DirectLinkDropdownComponent',
     dsfr_tabs: 'DsfrComponent::TabsComponent',
+    dsfr_highlight: 'DsfrComponent::HighlightComponent',
     # DO NOT REMOVE: new component mapping here
   }.freeze
   HELPER_NAME_TO_CLASS_NAME.each do |name, klass|

guide/content/components/highlight.haml

@@ -0,0 +1,22 @@
+---
+title: Mise en exergue - Highlight
+---
+
+.fr-text-wrap
+  :markdown
+
+    La mise en exergue permet à l'utilisateur de distinguer et repérer une information facilement. Elle met en évidence **une information déjà présente** dans le reste du contenu : soit une reformulation, soit une reprise du texte.
+
+    Pour mettre en évidence une information complémentaire, utilisez le composant "Mise en avant".
+
+    La taille du texte peut être adaptée avec le paramètre `size: :sm[/md/lg]`.
+
+= render('/partials/example.haml', caption: "Vue d'ensemble", code: highlight_default) do
+  :markdown
+    Le rendu de base de la mise en exergue
+
+= render('/partials/example.haml', caption: "Avec du texte élargi", code: highlight_larger) do
+  :markdown
+    Rendu avec une taille de texte élargie
+
+= render('/partials/related-info.haml', links: dsfr_component_doc_link("Le composant Mise en exergue/Highlight", "mise-en-exergue"))

guide/lib/examples/highlight_helpers.rb

@@ -0,0 +1,15 @@
+module Examples
+  module HighlightHelpers
+    def highlight_default
+      <<~RAW
+        = dsfr_highlight(text: "Ceci est une information mise en avant")
+      RAW
+    end
+
+    def highlight_larger
+      <<~RAW
+        = dsfr_highlight(text: "Ceci est une information mise en avant, avec un texte plus large", size: :lg)
+      RAW
+    end
+  end
+end

guide/lib/helpers.rb

@@ -49,3 +49,4 @@
 use_helper Examples::ModalHelpers
 use_helper Examples::HeaderHelpers
 use_helper Examples::TabsHelpers
+use_helper Examples::HighlightHelpers

spec/components/dsfr_component/highlight_component_spec.rb

@@ -0,0 +1,27 @@
+require 'spec_helper'
+
+RSpec.describe(DsfrComponent::HighlightComponent, type: :component) do
+  context "when an unknown size is passed" do
+    it "raises an error" do
+      expect { render_inline(described_class.new(text: "foo", size: :xz)) }.to raise_error ArgumentError
+    end
+  end
+
+  it "generates the right markup" do
+    render_inline(described_class.new(text: "foo"))
+
+    expect(rendered_content).to have_tag(:div, with: { class: "fr-highlight" }) do
+      with_tag(:p, with: { class: "fr-text--md" }) do
+        "foo"
+      end
+    end
+  end
+
+  context "when a different size is specified" do
+    it "produces the corresponding markup" do
+      render_inline(described_class.new(text: "foo", size: :lg))
+
+      expect(rendered_content).to have_tag(:p, with: { class: "fr-text--lg" })
+    end
+  end
+end