style(link): use DSFR underline style everywhere possible.

Par conséquent on commence à remplacer d'anciens "liens-boutons" (qui auraient récupéré un souligné indésirable), par un vrai boutton dsfr. Le hack fr-underlined n'est aussi plus nécessaire.
2022-10-06 13:02:25 +02:00 · 2022-10-06 13:02:25 +02:00 · 2ab5fbbb24
commit 2ab5fbbb24
parent 555c796d19
16 changed files with 33 additions and 27 deletions
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@ -183,6 +183,11 @@
  top: 5 * $default-spacer;
  cursor: default;
  z-index: 10;
+  list-style: none;
+
+  a {
+    background-image: none; // remove DSFR underline
+  }

  &.left-aligned {
    left: 0;
@ -256,6 +261,7 @@

    a {
      color: $dark-grey;
+      background-image: none; // remove DSFR underline
    }

    // Make child links fill the whole clickable area
@ -311,6 +317,10 @@
  [disabled] {
    display: none;
  }
+
+  ul {
+    list-style: none;
+  }
 }

 .link {
--- a/app/assets/stylesheets/dossiers_table.scss
+++ b/app/assets/stylesheets/dossiers_table.scss
@ -17,6 +17,10 @@
    color: #000000;
  }

+  a {
+    background-image: none; // remove DSFR underline
+  }
+
  .caret-icon {
    vertical-align: top;
    margin-top: 9px;
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@ -1,22 +1,10 @@
@import "colors";

-// Hacky override default text underline of DSFR because we don't want to underline links in our legacy UI.
-// We don't match links having a dsfr class (prefixed by fr-).
-// However DSFR components may contain links without fr- class on them,
-// so these links can be artificially matched by adding any fr-class on them, (like fr-underlined)
-body [href]:not([class^="fr-"]) {
-  background-image: none;
-}
-
 // override default transparent background on inputs & font-size to 16px by default
 input,
 textarea,
 select {
  background: $white;
-
-.fr-footer__bottom-link {
-  // re-apply color unsetted by our common "a" rule setting a blue
-  // color: var(--text-mention-grey);
  font-size: 1em;
 }

--- a/app/assets/stylesheets/procedure_list.scss
+++ b/app/assets/stylesheets/procedure_list.scss
@ -11,6 +11,7 @@
    }

    a {
+      background-image: none; // remove DSFR underline
      @include vertical-padding(24px);
      color: $black;
      width: 100%;
@ -45,6 +46,8 @@
  }

  .procedure-stats {
+    list-style-type: none;
+
    li {
      min-height: 36px;
      border-left: 1px solid $border-grey;
--- a/app/assets/stylesheets/tabs.scss
+++ b/app/assets/stylesheets/tabs.scss
@ -20,6 +20,7 @@
      padding-left: 20px;
      padding-right: 20px;
      color: $black;
+      background-image: none;
    }

    &.active {
--- a/app/components/attachment/edit_component/edit_component.html.haml
+++ b/app/components/attachment/edit_component/edit_component.html.haml
@ -2,7 +2,7 @@
  - if template&.attached?
    %p.mb-1
      Veuillez télécharger, remplir et joindre
-      = link_to(url_for(template), download: true, class: "fr-link fr-link--icon-right fr-icon-download-line mr-2") do
+      = link_to(url_for(template), download: true, class: "fr-link fr-link--icon-right fr-icon-download-line") do
        le modèle suivant

      - if helpers.administrateur_signed_in?
--- a/app/views/agent_connect/agent/index.html.haml
+++ b/app/views/agent_connect/agent/index.html.haml
@ -23,7 +23,7 @@
              = t('.signin_with')
            %span.fr-connect__brand AgentConnect
          %p
-            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener", class: "fr-underlined"
+            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener"


        .france-connect-login-separator
--- a/app/views/commencer/show.html.haml
+++ b/app/views/commencer/show.html.haml
@ -37,8 +37,8 @@

    - else
      %h2.huge-title= t('views.commencer.show.existing_dossiers')
-      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: ['button large expand primary']
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: ['button large expand']
+      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-btn--lg fr-my-2w"
+      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"

  - if @procedure.feature_enabled?(:dossier_pdf_vide)
    - pdf_link = @revision.draft? ? commencer_dossier_vide_test_path(path: @procedure.path) : commencer_dossier_vide_path(path: @procedure.path)
@ -46,4 +46,4 @@
    %p= t('views.commencer.show.want_empty_pdf', service: @procedure&.service&.nom, adresse: @procedure&.service&.adresse)

    %br
-    = link_to t('views.commencer.show.download_empty_pdf'), pdf_link, class: ['button large expand']
+    = link_to t('views.commencer.show.download_empty_pdf'), pdf_link, class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
--- a/app/views/invites/_form.html.haml
+++ b/app/views/invites/_form.html.haml
@ -26,4 +26,4 @@
          = label_tag :invite_message, t('views.invites.form.invite_message')
        = text_area_tag :invite_message, '', class: 'small', placeholder: t('views.invites.form.invite_message')
      .col
-        = submit_tag t('views.invites.form.send_invitation'), class: 'button accepted'
+        = submit_tag t('views.invites.form.send_invitation'), class: 'fr-btn fr-btn--secondary'
--- a/app/views/root/_footer.html.haml
+++ b/app/views/root/_footer.html.haml
@ -50,9 +50,9 @@
      .fr-footer__content
        %p.fr-footer__content-desc
          = t('links.footer.description_1')
-          = link_to t('links.footer.link_1_label'), t('links.footer.link_1_url'), target: '_blank', class: "fr-underlined"
+          = link_to t('links.footer.link_1_label'), t('links.footer.link_1_url'), target: '_blank'
        %p.fr-footer__content-desc
-          = link_to t('links.footer.link_2_label'), t("links.footer.code.url"), target: '_blank', class: "fr-underlined"
+          = link_to t('links.footer.link_2_label'), t("links.footer.code.url"), target: '_blank'
          = t('links.footer.description_2')
        %ul.fr-footer__content-list
          %li.fr-footer__content-item
--- a/app/views/shared/_footer_copy.html.haml
+++ b/app/views/shared/_footer_copy.html.haml
@ -1,4 +1,4 @@
 .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", class: "fr-underlined", title: "licence etalab-2.0 - nouvelle fenêtre" } licence etalab-2.0
+    %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank", title: "licence etalab-2.0 - nouvelle fenêtre" } licence etalab-2.0
--- a/app/views/shared/_france_connect_login.html.haml
+++ b/app/views/shared/_france_connect_login.html.haml
@ -11,7 +11,7 @@
          = t('views.shared.france_connect_login.login_button')
        %span.fr-connect__brand FranceConnect
      %p
-        = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "fr-underlined"
+        = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener"

    .france-connect-login-separator
      = t('views.shared.france_connect_login.separator')
--- a/app/views/shared/dossiers/_edit.html.haml
+++ b/app/views/shared/dossiers/_edit.html.haml
@ -56,7 +56,7 @@
            = f.button t('views.shared.dossiers.edit.submit_dossier'),
              name: :submit_draft,
              value: true,
-              class: 'button send primary',
+              class: 'fr-btn fr-btn--sm',
              disabled: !current_user.owns?(dossier),
              data: { 'disable-with': "Envoi en cours…" }

--- a/app/views/users/dossiers/_identity_dropdown.html.haml
+++ b/app/views/users/dossiers/_identity_dropdown.html.haml
@ -7,7 +7,7 @@
      = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }

      .center
-        = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'button'
+        = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-btn fr-btn--secondary'

    - elsif dossier.etablissement
      = render partial: "shared/dossiers/identite_entreprise", locals: { etablissement: dossier.etablissement, short_identity: true, profile: "usager" }
--- a/app/views/users/dossiers/etablissement.html.haml
+++ b/app/views/users/dossiers/etablissement.html.haml
@ -41,5 +41,5 @@
        = render partial: 'users/dossiers/etablissement/infos_entreprise', locals: { etablissement: etablissement }

    .actions
-      = link_to 'Utiliser un autre numéro SIRET', siret_dossier_path(@dossier), class: 'button'
-      = link_to 'Continuer avec ces informations', brouillon_dossier_path(@dossier), class: 'button primary'
+      = link_to 'Utiliser un autre numéro SIRET', siret_dossier_path(@dossier), class: 'fr-btn fr-btn--secondary'
+      = link_to 'Continuer avec ces informations', brouillon_dossier_path(@dossier), class: 'fr-btn'
--- a/app/views/users/dossiers/identite.html.haml
+++ b/app/views/users/dossiers/identite.html.haml
@ -32,4 +32,4 @@
      = f.label :birthdate
      = f.date_field :birthdate, value: @dossier.individual.birthdate, placeholder: 'format : AAAA-MM-JJ', required: true, class: "small"

-    = f.submit t('views.users.dossiers.identite.continue'), class: "button large primary expand"
+    = f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn fr-btn--lg"