Merge pull request #2229 from betagouv/new-invites

Ajout d'un bouton vers la notice dans le formulaire
This commit is contained in:
Pierre de La Morinerie 2018-07-11 17:38:20 +02:00 committed by GitHub
commit 67ecc5cc2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 101 additions and 25 deletions

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0-2h24v24H0z"/><path d="M9 8.011h3M9.011 16.99h5.978M12 8v9" stroke="#0069cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" fill="#0069cc"/></g></svg>

After

Width:  |  Height:  |  Size: 351 B

View file

@ -12,10 +12,27 @@
h1 { h1 {
font-size: 22px; font-size: 22px;
.icon.folder {
vertical-align: -3px;
}
} }
} }
.thanks { .prologue {
padding: (1.5 * $default-padding) 0; margin: (1.5 * $default-padding) 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
.mandatory-explanation {
flex-grow: 1; // Push the "notice" button to the right
flex-shrink: 1; // Allow the text to shrink
margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
}
.button.notice {
flex-shrink: 0; // Display the button label on a single line
}
} }
} }

View file

@ -7,6 +7,15 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
hr {
width: 100%;
height: 0;
margin-top: $default-padding;
margin-bottom: 2 * $default-padding;
border: none;
border-bottom: 1px solid $border-grey;
}
@mixin notice-text-style { @mixin notice-text-style {
font-size: 14px; font-size: 14px;
color: $grey; color: $grey;

View file

@ -60,4 +60,33 @@
&.printer { &.printer {
background-image: image-url("icons/printer.svg"); background-image: image-url("icons/printer.svg");
} }
&.account {
background-image: image-url("icons/account-circle.svg");
}
&.person {
background-image: image-url("icons/blue-person.svg");
}
&.super-admin {
background-image: image-url("icons/super-admin.svg");
}
&.mail {
background-image: image-url("icons/mail.svg");
}
&.search {
background-image: image-url("icons/search-blue.svg");
}
&.sign-out {
background-image: image-url("icons/sign-out.svg");
}
&.info {
background-image: image-url("icons/info-blue.svg");
object-fit: contain;
}
} }

View file

@ -4,6 +4,8 @@
.dossier-edit .dossier-edit
.dossier-header .dossier-header
.container .container
%h1= @dossier.procedure.libelle %h1
%span.icon.folder
= @dossier.procedure.libelle
= render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false } = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false }

View file

@ -16,6 +16,13 @@
%span.icon.attachment %span.icon.attachment
%span.icon.lock %span.icon.lock
%span.icon.printer %span.icon.printer
%span.icon.account
%span.icon.person
%span.icon.super-admin
%span.icon.mail
%span.icon.search
%span.icon.sign-out
%span.icon.info
%h1 Formulaires %h1 Formulaires
@ -31,6 +38,8 @@
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send' = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
= f.submit 'Envoyer', class: 'button send' = f.submit 'Envoyer', class: 'button send'
%hr
%h1 Boutons %h1 Boutons
%p %p

View file

@ -8,15 +8,18 @@
= form_for dossier, form_options do |f| = form_for dossier, form_options do |f|
- if notice_url(dossier.procedure).present? .prologue
%p .mandatory-explanation
Pour vous aider à remplir votre dossier, vous pouvez consulter Les champs avec une astérisque (
= link_to 'le guide de cette démarche', notice_url(dossier.procedure), { target: '_blank' } %span.mandatory> *
) sont obligatoires.
%p.thanks - if notice_url(dossier.procedure).present?
Les champs avec une astérisque ( = link_to notice_url(dossier.procedure), class: 'button notice', title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche." do
%span.mandatory> * %span.icon.info>
) sont obligatoires. Guide de la démarche
%hr
= f.fields_for :champs, dossier.champs do |champ_form| = f.fields_for :champs, dossier.champs do |champ_form|
- champ = champ_form.object - champ = champ_form.object

View file

@ -1,7 +1,8 @@
require 'spec_helper' require 'spec_helper'
describe 'new_user/dossiers/modifier.html.haml', type: :view do describe 'new_user/dossiers/modifier.html.haml', type: :view do
let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, for_individual: true)) } let(:procedure) { create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, :with_notice, for_individual: true) }
let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: procedure) }
let(:footer) { view.content_for(:footer) } let(:footer) { view.content_for(:footer) }
before do before do
@ -9,21 +10,26 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do
assign(:dossier, dossier) assign(:dossier, dossier)
end end
context 'test de composition de la page' do subject! { render }
before do
render
end
it 'affiche le libellé de la procédure' do it 'affiche le libellé de la procédure' do
expect(rendered).to have_text(dossier.procedure.libelle) expect(rendered).to have_text(dossier.procedure.libelle)
end end
it 'affiche les boutons de validation' do it 'affiche un lien vers la notice' do
expect(rendered).to have_selector('.send-wrapper') expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice))
end end
it 'prépare le footer' do it 'affiche les boutons de validation' do
expect(footer).to have_selector('footer') expect(rendered).to have_selector('.send-wrapper')
end end
it 'prépare le footer' do
expect(footer).to have_selector('footer')
end
context 'quand la procédure ne comporte pas de notice' do
let(:procedure) { create(:procedure) }
it { is_expected.not_to have_link("Guide de la démarche") }
end end
end end