Merge pull request #7747 from betagouv/feat/7718

ETQ Usager, je souhaite voir le footer au design DSFR
2022-09-19 13:56:57 +02:00 · 2022-09-19 13:56:57 +02:00 · dd85b5c35c
commit dd85b5c35c
parent f80132377a ba58558146
17 changed files with 144 additions and 120 deletions
--- a/app/assets/stylesheets/admin-procedures-list.scss
+++ b/app/assets/stylesheets/admin-procedures-list.scss
@ -1,4 +1,6 @@
 // Push the timestamps column to the right of the row
+@import "colors";
+
 .admin-procedures-list-timestamps {
  margin-left: auto;
 }
@ -8,4 +10,8 @@
 // See https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari
 .admin-procedures-list-row.infos {
  align-items: flex-start;
+
+  a {
+    color: $blue-france-500;
+  }
 }
--- a/app/assets/stylesheets/commencer.scss
+++ b/app/assets/stylesheets/commencer.scss
@ -11,6 +11,10 @@
    margin-bottom: 2 * $default-spacer;
  }

+  .optional-on-small-screens {
+    color: #FFFFFF;
+  }
+
  @media (max-width: 450px) {
    .optional-on-small-screens {
      display: none;
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@ -45,15 +45,15 @@ strong {
  font-weight: bold;
 }

-a {
-  color: $blue-france-500;
-}
-
 a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
 }

+a {
+  color: $blue-france-500;
+}
+
 em {
  font-style: italic;
 }
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@ -1,6 +1,6 @@
@import "colors";
 // override default text underline of dsfr
-body [href] {
+body [href]:not([class^="fr-"]):not(.fr-footer__bottom-copy *) {
  background-image: none;
 }

@ -11,6 +11,9 @@ select {
  background: $white;
 }

+#footer a {
+  color: #333333;
+}
 // with Marianne font, weight of font is less bolder, so bold it up
 .button.primary {
  font-weight: bold;
--- a/app/assets/stylesheets/new_footer.scss
+++ b/app/assets/stylesheets/new_footer.scss
@ -3,13 +3,6 @@
@import "mixins";
@import "placeholders";

-footer {
-  background-color: $light-grey;
-  border-top: 1px solid $border-grey;
-  bottom: 0;
-  width: 100%;
-}
-
 .landing-footer {
  @include vertical-padding(72px);
 }
--- a/app/javascript/entrypoints/main.css
+++ b/app/javascript/entrypoints/main.css
@ -16,3 +16,4 @@
@import '@gouvfr/dsfr/dist/component/search/search.css';
@import '@gouvfr/dsfr/dist/component/translate/translate.css';
@import '@gouvfr/dsfr/dist/component/header/header.css';
+@import '@gouvfr/dsfr/dist/component/footer/footer.css';
--- a/app/views/users/_general_footer_row.html.haml
+++ b/app/views/users/_general_footer_row.html.haml
@ -1,19 +1,7 @@
-
-%nav{ 'aria-label': t('links.footer.nav_aria', application_name: APPLICATION_NAME) }
-  %ul.footer-row.footer-bottom-line.footer-site-links
-    %li.footer-link-accessibilite>
-      = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-cgu>
-      = link_to t("links.footer.cgu.label"), t("links.footer.cgu.url"), title: t("links.footer.cgu.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-mentions-legales>
-      = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-doc>
-      = link_to t("links.footer.doc.label"), t("links.footer.doc.url"), title: t("links.footer.doc.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-code>
-      = link_to t("links.footer.code.label"), t("links.footer.code.url"), title: t("links.footer.code.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-contact>
-      = contact_link t("links.footer.contact_technique.label"), dossier_id: dossier&.id, title: t("links.footer.contact_technique.title"), class: "footer-link"
-    %li.footer-link-aide>
-      = link_to t("links.footer.aide.label"), t("links.footer.aide.url"), title: t("links.footer.aide.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
-    %li.footer-link-solidarite-numerique>
-      = link_to t("links.footer.solidarite_numerique.label"), t("links.footer.solidarite_numerique.url"), title: t("links.footer.solidarite_numerique.title"), class: "footer-link", target: "_blank", rel: "noopener noreferrer"
+%ul.fr-footer__bottom-list
+  %li.fr-footer__bottom-item
+    = link_to t("links.footer.accessibilite.label"), t("links.footer.accessibilite.url"), title: t("links.footer.accessibilite.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer"
+  %li.fr-footer__bottom-item
+    = link_to t("links.footer.mentions_legales.label"), t("links.footer.mentions_legales.url"), title: t("links.footer.mentions_legales.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer"
+  %li.fr-footer__bottom-item
+    = link_to t("links.footer.cookies.title"), suivi_path, title: t("links.footer.aide.title"), class: "fr-footer__bottom-link"
--- a/app/views/users/_procedure_footer.html.haml
+++ b/app/views/users/_procedure_footer.html.haml
@ -1,63 +1,88 @@
-%footer.procedure-footer
-  .container
+%footer.fr-footer#footer{ role: "contentinfo" }
  - service = procedure.service
-    - if service.present?
-      %nav{ 'aria-label': t('users.procedure_footer.aria_label', procedure_name: dossier.present? ? dossier.procedure.libelle : 'la procédure en ligne') }
-        .footer-row.footer-columns
-          .footer-column
-            %p.footer-header= I18n.t('users.procedure_footer.managed_by.header')
-            %ul
-              %li
-                = service.nom
-                %br
-                = service.organisme
-                %br
-                = string_to_html(service.adresse, wrapper_tag = 'span')
-
-          .footer-column
-            %p.footer-header= I18n.t('users.procedure_footer.contact.header')
-            %ul
-              %li
+  .fr-footer__top
+    .fr-container
+      .fr-grid-row.fr-grid-row--start.fr-grid-row--gutters
+        .fr-col-12.fr-col-sm-4.fr-col-md-4
+          %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.contact.header')
+          %ul.fr-footer__top-list
            - if dossier.present? && dossier.messagerie_available?
-                  = I18n.t('users.procedure_footer.contact.in_app_mail.prefix')
-                  = link_to I18n.t('users.procedure_footer.contact.in_app_mail.link'), messagerie_dossier_path(dossier)
-                - else
-                  = I18n.t('users.procedure_footer.contact.email.prefix')
-                  = link_to service.email, "mailto:#{service.email}"
-
-              - if service.telephone.present?
              %li
-                  = I18n.t('users.procedure_footer.contact.phone.prefix')
-                  = link_to service.telephone, service.telephone_url
-
+                = link_to I18n.t('users.procedure_footer.contact.in_app_mail.link'), messagerie_dossier_path(dossier), class: 'fr-footer__top-link'
+            - elsif service.present?
+              %li
+                = link_to I18n.t('users.procedure_footer.contact.email.link', service_email: service.email), "mailto:#{service.email}", class: 'fr-footer__top-link'
              %li
                - horaires = "#{I18n.t('users.procedure_footer.contact.schedule.prefix')}#{formatted_horaires(service.horaires)}"
-                  = simple_format(horaires, {}, wrapper_tag: 'span')
-
+                = link_to service.telephone_url, class: 'fr-footer__top-link' do
+                  = I18n.t('users.procedure_footer.contact.phone.link', service_telephone: service.telephone)
+                  %br
+                  = horaires
              %li
-                  = I18n.t('users.procedure_footer.contact.stats.prefix')
-                  = link_to I18n.t('users.procedure_footer.contact.stats.cta'), statistiques_path(procedure.path)
+                = link_to I18n.t('users.procedure_footer.contact.stats.link'), statistiques_path(procedure.path), class: 'fr-footer__top-link', rel: 'noopener'


        - politiques = politiques_conservation_de_donnees(procedure)
        - if politiques.present?
-            .footer-column
-              %p.footer-header= I18n.t('users.procedure_footer.legals.header')
-              %ul
+          .fr-col-12.fr-col-sm-4.fr-col-md-4
+            %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.legals.header')
+            %ul.fr-footer__top-list
              - politiques.each do |politique|
-                  %li= politique
+                %li
+                  = link_to t("users.procedure_footer.legals.data_retention_url"), class: "fr-footer__top-link" do
+                    = politique
              - if procedure.deliberation.attached?
                %li
-                    = link_to url_for(procedure.deliberation), target: '_blank', rel: 'noopener' do
+                  = link_to url_for(procedure.deliberation), rel: 'noopener', class: 'fr-footer__top-link' do
                    = I18n.t("users.procedure_footer.legals.terms")
              - else
                %li
-                    = link_to I18n.t("users.procedure_footer.legals.terms"), procedure.cadre_juridique, target: '_blank', rel: 'noopener'
+                  = link_to I18n.t("users.procedure_footer.legals.terms"), procedure.cadre_juridique, rel: 'noopener', class: 'fr-footer__top-link'

              - if procedure.lien_dpo.present?
                %li
-                    = link_to url_or_email_to_lien_dpo(procedure), target: '_blank', rel: 'noopener' do
+                  = link_to url_or_email_to_lien_dpo(procedure), rel: 'noopener', class: 'fr-footer__top-link' do
                    = I18n.t("users.procedure_footer.legals.dpo")

-    = render partial: 'users/general_footer_row', locals: { dossier: dossier }

+        .fr-col-12.fr-col-sm-4.fr-col-md-4
+          %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.dematerialisation.header')
+          %ul.fr-footer__top-list
+            %li
+              = link_to t('users.procedure_footer.dematerialisation.title_1'), commencer_dossier_vide_path(path: procedure.path), rel: 'noopener', class: 'fr-footer__top-link'
+            %li
+              = link_to t('users.procedure_footer.dematerialisation.title_2'),t('users.procedure_footer.dematerialisation.link'), rel: 'noopener', class: 'fr-footer__top-link'
+
+  .fr-container
+    .fr-footer__body
+      .fr-footer__brand.fr-enlarge-link
+        = link_to t("links.provider.url"), title: t("links.provider.title"), 'aria-label': t("links.provider.name") do
+          %p.fr-logo
+            premier
+            %br
+            ministre
+
+      - if service.present?
+        .fr-footer__content
+          %p.fr-footer__content-desc
+            = I18n.t('users.procedure_footer.managed_by.header')
+            = "#{service.nom},"
+            = "#{service.organisme},"
+            = string_to_html(service.adresse, wrapper_tag = 'span')
+          %ul.fr-footer__content-list
+            %li.fr-footer__content-item
+              = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), class: 'fr-footer__content-link', target: '_blank'
+            %li.fr-footer__content-item
+              = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), class: 'fr-footer__content-link', target: '_blank'
+            %li.fr-footer__content-item
+              = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), class: 'fr-footer__content-link', target: '_blank'
+            %li.fr-footer__content-item
+              = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), class: 'fr-footer__content-link', target: '_blank'
+
+    .fr-footer__bottom
+      = render partial: 'users/general_footer_row', locals: { dossier: dossier }
+      .fr-footer__bottom-copy
+        %p
+          Sauf mention contraire, tous les contenus de ce site sont sous
+          %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank" } licence etalab-2.0
+        %br
--- a/app/views/users/dossiers/_merci.html.haml
+++ b/app/views/users/dossiers/_merci.html.haml
@ -2,7 +2,7 @@
  .container
    = image_tag('user/envoi-dossier.svg', alt: '', class: 'mt-8')
    %h1.mt-4.mb-3.mx-0= t('views.users.dossiers.merci.thanks')
-    %p.send.m-2.text-lg
+    %h2.send.m-2.text-lg
      = t('views.users.dossiers.merci.dossier_send_l1')
      %strong= procedure.libelle
      = t('views.users.dossiers.merci.dossier_send_l2')
--- a/app/views/users/dossiers/identite.html.haml
+++ b/app/views/users/dossiers/identite.html.haml
@ -4,7 +4,7 @@

 - if !dossier_submission_is_closed?(@dossier)
  = form_for @dossier.individual, url: update_identite_dossier_path(@dossier), html: { class: "form" } do |f|
-    %h1= t('views.users.dossiers.identite.identity_data')
+    %h2.huge-title= t('views.users.dossiers.identite.identity_data')

    %p.mb-1= t('views.users.dossiers.identite.complete_data')

--- a/app/views/users/dossiers/siret.html.haml
+++ b/app/views/users/dossiers/siret.html.haml
@ -2,7 +2,7 @@

 - if !dossier_submission_is_closed?(@dossier)
  = form_for current_user, url: siret_dossier_path(@dossier), html: { class: 'form', method: 'post' } do |f|
-    %h1 Identifier votre établissement
+    %h2.huge-title Identifier votre établissement

    %p.mb-1 Merci de remplir le numéro de SIRET de votre entreprise, administration ou association pour commencer la démarche.

--- a/config/locales/links.en.yml
+++ b/config/locales/links.en.yml
@ -17,9 +17,7 @@ en:
        title: "Accessibility declaration"
        url: "https://doc.demarches-simplifiees.fr/declaration-daccessibilite"
      aide:
-        label: "Help"
        title: "Frequently Asked Questions"
-        url: "https://faq.demarches-simplifiees.fr"
      api_doc:
        label: "API Documentation"
        title: "API Documentation"
@ -39,9 +37,6 @@ en:
      contact:
        label: "Contact"
        title: "Contact us"
-      contact_technique:
-        label: "Technical contact"
-        title: "Technical contact for bug report or security feedback"
      doc:
        label: "Documentation"
        title: "Our Documentation"
@ -74,9 +69,6 @@ en:
        label: "Security"
        title: "Security policy"
        url: "https://github.com/betagouv/demarches-simplifiees.fr/blob/main/SECURITY.md"
-      stats:
-        label: "Statistics"
-        title: "Statistics about demarches-simplifiees"
      status_page:
        label: "Disponibility"
        title: "Disponibility and availability"
@ -88,7 +80,3 @@ en:
        label: "Online workshop registration"
        title: "Registration for our online workshop"
        url: "https://app.livestorm.co/demarches-simplifiees"
-      solidarite_numerique:
-        label: "Do you need assistance with your digital file?"
-        title: "Do you need assistance with your online process ?"
-        url: "https://www.solidarite-numerique.fr/cartographie/"
--- a/config/locales/links.fr.yml
+++ b/config/locales/links.fr.yml
@ -92,3 +92,7 @@ fr:
        label: "Besoin d'aide avec vos démarches en ligne ?"
        title: "Avez-vous besoin d'aide concernant vos démarchez informatisées, essayez solidarite-numerique.fr"
        url: "https://www.solidarite-numerique.fr/cartographie/"
+      cookies:
+        label: Gestion des cookies
+        title: Gestion des cookies
+        
--- a/config/locales/views/users/procedure_footer/en.yml
+++ b/config/locales/views/users/procedure_footer/en.yml
@ -1,25 +1,22 @@
 en:
  users:
    procedure_footer:
-      aria_label: "Know more about %{procedure_name}"
      managed_by:
        header: 'This procedure is managed by :'
      contact:
        header: 'Ask a question about your file :'
        in_app_mail:
-          prefix: 'Directly :'
-          link: "via the chat"
+          link: "Direclty via the chat"
        email:
-          prefix: 'By mail :'
+          link: "Direcly by email %{service_email}"
        phone:
-          prefix: 'By phone :'
+          link: 'By phone %{service_telephone}'
        schedule:
          prefix: 'Hours : '
        stats:
-          prefix: 'Stats :'
-          cta: "see the procedure's stats"
+          link: "See the procedure's stats"
      legals:
        header: "Legals :"
-        data_retention: "Within %{application_name} : %{duree_conservation_dossiers_dans_ds} months"
+        data_retention: "%{application_name} : %{duree_conservation_dossiers_dans_ds} months"
        terms: "Laws regarding this data collection"
        dpo: "Contact the Data Protection Officer"
--- a/config/locales/views/users/procedure_footer/fr.yml
+++ b/config/locales/views/users/procedure_footer/fr.yml
@ -1,25 +1,41 @@
 fr:
  users:
    procedure_footer:
-      aria_label: "En savoir plus sur %{procedure_name}"
      managed_by:
-        header: 'Cette démarche est gérée par :'
+        header: 'Cette démarche est gérée par'
      contact:
-        header: 'Poser une question sur votre dossier :'
+        header: 'Poser une question sur votre dossier'
        in_app_mail:
-          prefix: 'Directement :'
-          link: "par la messagerie"
+          link: "Directement par la messagerie"
        email:
-          prefix: 'Par email :'
+          link: "Directement par courriel : %{service_email}"
        phone:
-          prefix: 'Par téléphone :'
+          link: 'Par téléphone au %{service_telephone}'
        schedule:
-          prefix: 'Horaires : '
+          prefix: "Horaires d'ouverture : "
        stats:
-          prefix: 'Statistiques :'
-          cta: "voir les statistiques de la démarche"
+          link: "Voir les statistiques de la démarche"
      legals:
-        header: "Cadre juridique :"
-        data_retention: "Dans %{application_name} : %{duree_conservation_dossiers_dans_ds} mois"
+        header: "Cadre juridique"
+        data_retention: "%{application_name} : %{duree_conservation_dossiers_dans_ds} mois"
+        data_retention_url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/archivage-longue-duree-des-demarches"
        terms: "Texte cadrant la demande d'information"
        dpo: "Contacter le Délégué à la Protection des Données"
+      official_links:
+        legifrance:
+          title: legifrance.gouv.fr
+          url: "https://legifrance.gouv.fr"
+        gouvernement:
+          title: gouvernement.fr
+          url: "https://gouvernement.fr"
+        service_public:
+          title: service-public.fr
+          url: "https://service-public.fr"
+        data_gouv:
+          title: data.gouv.fr
+          url: "https://data.gouv.fr"
+      dematerialisation: 
+        header: Dematérialisation
+        title_1: Accès au formulaire PDF à imprimer
+        title_2: Les démarches administratives en ligne
+        link: "https://www.solidarite-numerique.fr/cartographie/"
--- a/spec/helpers/conservation_de_donnees_helper_spec.rb
+++ b/spec/helpers/conservation_de_donnees_helper_spec.rb
@ -8,7 +8,7 @@ RSpec.describe ConservationDeDonneesHelper, type: :helper do
      let(:dans_ds) { 3 }
      let(:hors_ds) { 6 }

-      it { is_expected.to eq(["Dans #{APPLICATION_NAME} : 3 mois"]) }
+      it { is_expected.to eq(["#{APPLICATION_NAME} : 3 mois"]) }
    end

    context "when the retention time is not set" do
--- a/spec/views/users/_procedure_footer.html.haml_spec.rb
+++ b/spec/views/users/_procedure_footer.html.haml_spec.rb
@ -16,7 +16,6 @@ describe 'users/procedure_footer.html.haml', type: :view do

  it "affiche les liens usuels requis" do
    expect(subject).to have_link("Accessibilité")
-    expect(subject).to have_link("CGU")
    expect(subject).to have_link("Mentions légales")
  end