feat(champ_component): add errors banner

app/assets/stylesheets/procedure_champs_editor.scss

@@ -5,6 +5,11 @@
 .types-de-champ-editor {
   > .types-de-champ-block {
     padding-bottom: 50px;
+
+    .types-de-champ-errors {
+      background-color: $background-red;
+      padding: $default-padding;
+    }
   }
 
   .type-de-champ {

app/components/types_de_champ_editor/champ_component.rb

@@ -1,10 +1,11 @@
 class TypesDeChampEditor::ChampComponent < ApplicationComponent
   attr_reader :coordinate, :upper_coordinates
 
-  def initialize(coordinate:, upper_coordinates:, focused: false)
+  def initialize(coordinate:, upper_coordinates:, focused: false, errors: '')
     @coordinate = coordinate
     @focused = focused
     @upper_coordinates = upper_coordinates
+    @errors = errors
   end
 
   private

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -6,6 +6,10 @@
         .icon.delete
         %span.sr-only Supprimer
 
+  - if @errors.present?
+    .types-de-champ-errors
+      = @errors
+
   .flex.justify-start.section.ml-1
     = form_for(type_de_champ, form_options) do |form|
       .flex.justify-start

spec/components/previews/types_de_champ_editor/champ_component_preview.rb

@@ -6,10 +6,12 @@ class TypesDeChampEditor::ChampComponentPreview < ViewComponent::Preview
     procedure = Procedure.new(id: 123)
     coordinate = ProcedureRevisionTypeDeChamp.new(type_de_champ: tdc, procedure:)
     upper_coordinates = []
+    errors = 'une grosse erreur'
 
     render_with_template(locals: {
       coordinate:,
-      upper_coordinates:
+      upper_coordinates:,
+      errors:
     })
   end
 end

spec/components/previews/types_de_champ_editor/champ_component_preview/nominal.html.haml

@@ -4,4 +4,5 @@
       %ul.types-de-champ-block
         = render TypesDeChampEditor::ChampComponent.new(coordinate:,
           upper_coordinates:,
-          focused: false)
+          focused: false,
+          errors:)