diff --git a/app/assets/stylesheets/sections.scss b/app/assets/stylesheets/sections.scss index 5a8a02673..107091ff8 100644 --- a/app/assets/stylesheets/sections.scss +++ b/app/assets/stylesheets/sections.scss @@ -51,4 +51,13 @@ counter-increment: h6; content: counter(h1) "."counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; } + + .repetition { + counter-reset: repetition; + + .block-id::after { + counter-increment: repetition; + content: counter(repetition); + } + } } diff --git a/app/components/editable_champ/editable_champ_component.rb b/app/components/editable_champ/editable_champ_component.rb index 1b1e78132..d0cde5461 100644 --- a/app/components/editable_champ/editable_champ_component.rb +++ b/app/components/editable_champ/editable_champ_component.rb @@ -6,7 +6,11 @@ class EditableChamp::EditableChampComponent < ApplicationComponent private def has_label?(champ) - types_without_label = [TypeDeChamp.type_champs.fetch(:header_section), TypeDeChamp.type_champs.fetch(:explication)] + types_without_label = [ + TypeDeChamp.type_champs.fetch(:header_section), + TypeDeChamp.type_champs.fetch(:explication), + TypeDeChamp.type_champs.fetch(:repetition) + ] !types_without_label.include?(@champ.type_champ) end diff --git a/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml b/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml index 165fa6b24..c73824c81 100644 --- a/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml +++ b/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml @@ -1,10 +1,5 @@ .editable-champ{ html_options } - - if @champ.block? - %h3.header-subsection= @champ.libelle - - if @champ.description.present? - .notice= render SimpleFormatComponent.new(@champ.description, allow_a: true) - - - elsif has_label?(@champ) + - if has_label?(@champ) = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at - if @champ.titre_identite? %p.notice= t('.titre_identite_notice') diff --git a/app/components/editable_champ/repetition_component.rb b/app/components/editable_champ/repetition_component.rb index 03fba3de5..bd077dd9b 100644 --- a/app/components/editable_champ/repetition_component.rb +++ b/app/components/editable_champ/repetition_component.rb @@ -1,2 +1,9 @@ class EditableChamp::RepetitionComponent < EditableChamp::EditableChampBaseComponent + def legend_params + @champ.description.present? ? { describedby: dom_id(@champ, :repetition) } : {} + end + + def notice_params + @champ.description.present? ? { id: dom_id(@champ, :repetition) } : {} + end end diff --git a/app/components/editable_champ/repetition_component/repetition_component.html.haml b/app/components/editable_champ/repetition_component/repetition_component.html.haml index 1bcbe91a3..1a434b96b 100644 --- a/app/components/editable_champ/repetition_component/repetition_component.html.haml +++ b/app/components/editable_champ/repetition_component/repetition_component.html.haml @@ -1,7 +1,13 @@ -.repetition{ id: dom_id(@champ, :rows) } - - @champ.rows.each do |champs| - = render EditableChamp::RepetitionRowComponent.new(form: @form, champ: @champ, row: champs, seen_at: @seen_at) +%fieldset + %legend.header-subsection{ legend_params }= @champ.libelle + - if @champ.description.present? + .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true) -.actions{ 'data-turbo': 'true' } - = render NestedForms::OwnedButtonComponent.new(formaction: champs_repetition_path(@champ.id), http_method: :create, opt: { class: "fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line fr-mb-3w", title: t(".add_title", libelle: @champ.libelle), id: dom_id(@champ, :create_repetition)}) do - = t(".add", libelle: @champ.libelle) + + .repetition{ id: dom_id(@champ, :rows) } + - @champ.rows.each do |champs| + = render EditableChamp::RepetitionRowComponent.new(form: @form, champ: @champ, row: champs, seen_at: @seen_at) + + .actions{ 'data-turbo': 'true' } + = render NestedForms::OwnedButtonComponent.new(formaction: champs_repetition_path(@champ.id), http_method: :create, opt: { class: "fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line fr-mb-3w", title: t(".add_title", libelle: @champ.libelle), id: dom_id(@champ, :create_repetition)}) do + = t(".add", libelle: @champ.libelle) diff --git a/app/components/editable_champ/repetition_row_component/repetition_row_component.html.haml b/app/components/editable_champ/repetition_row_component/repetition_row_component.html.haml index f97957219..24068e02f 100644 --- a/app/components/editable_champ/repetition_row_component/repetition_row_component.html.haml +++ b/app/components/editable_champ/repetition_row_component/repetition_row_component.html.haml @@ -1,6 +1,11 @@ - row_id = "safe-row-selector-#{@row.first.row_id}" .row{ id: row_id } - = render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level) + - if @row.size > 1 + %fieldset + %legend.block-id= "#{@champ.libelle} " + = render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level) + - else + = render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level) .flex.row-reverse{ 'data-turbo': 'true' } = render NestedForms::OwnedButtonComponent.new(formaction: champs_repetition_path(@champ.id, row_id: @row.first.row_id), http_method: :delete, opt: { class: "fr-btn fr-btn--sm fr-btn--tertiary fr-text-action-high--red-marianne", title: t(".delete_title", row_number: @champ.rows.find_index(@row))}) do diff --git a/spec/support/shared_examples_for_prefilled_dossier.rb b/spec/support/shared_examples_for_prefilled_dossier.rb index 2657b0a89..1b3f1607c 100644 --- a/spec/support/shared_examples_for_prefilled_dossier.rb +++ b/spec/support/shared_examples_for_prefilled_dossier.rb @@ -16,7 +16,7 @@ shared_examples "the user has got a prefilled dossier, owned by themselves" do expect(page).to have_css('label', text: type_de_champ_phone.libelle) expect(page).to have_field(type_de_champ_rna.libelle, with: rna_value) expect(page).to have_field(type_de_champ_siret.libelle, with: siret_value) - expect(page).to have_css('h3', text: type_de_champ_repetition.libelle) + expect(page).to have_css('legend', text: type_de_champ_repetition.libelle) expect(page).to have_field(text_repetition_libelle, with: text_repetition_value) expect(page).to have_field(integer_repetition_libelle, with: integer_repetition_value) expect(page).to have_field(type_de_champ_datetime.libelle, with: datetime_value)