fix(truncate-notifications): Replace <div> series with <ul>

Author: inseo

app/assets/stylesheets/notifications.scss

@@ -27,3 +27,42 @@ span.notifications {
     right: -0.25rem;
   }
 }
+
+// Notifications details
+.notification-container-type {
+  position: relative;
+}
+
+.notification-dossiers {
+  margin: 0;
+  padding-left: 0;
+}
+
+.notification-dossier {
+  margin-top: 0.25rem;
+  padding: 0;
+}
+
+.notification-dossier:not(:last-child)::after {
+  content: '';
+  margin: 0 1rem;
+  width: 1px;
+  height: 0.875rem;
+  background-color: var(--text-default-grey);
+}
+
+.notification-dossier-contenu {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.notification-indicator {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-left: 1rem;
+  list-style: none;
+  background-image: linear-gradient(to right,
+  transparent 5%,
+  var(--background-alt-grey) 60%);
+}

app/javascript/controllers/truncate_notifications_controller.ts

@@ -6,7 +6,7 @@ export class TruncateNotificationsController extends ApplicationController {
       this.calculateNotificationContainerWidth();
 
     const notifications = document.querySelectorAll<HTMLElement>(
-      '.notification-dossiers'
+      '.notification-container-type'
     );
     notifications.forEach((notificationType) => {
       const notificationDossiers = Array.from(
@@ -55,7 +55,7 @@ export class TruncateNotificationsController extends ApplicationController {
   ) {
     if (truncateContainer == false) {
       if (hiddenCount > 0) {
-        indicator!.textContent = `... +${hiddenCount}`;
+        indicator!.innerHTML = `<span aria-hidden="true">…</span> +${hiddenCount}`;
       }
       notification.style.overflow = 'hidden';
     } else {

app/views/instructeurs/procedures/_notifications_list_body.html.erb

@@ -12,38 +12,28 @@
     </h4>
 
     <% dossiers_by_notification_type.each do |notification_type, dossiers| %>
-      <div class="flex align-center fr-mt-1w notification-container-type">
+      <div class="flex align-start fr-mt-1w notification-container-type">
         <div class="fr-col-3 fr-pr-1w notification-badge">
           <%= tag_notification(notification_type, generic: true) %>
         </div>
 
-        <div class="fr-col-9 flex align-center notification-dossiers">
+        <ul class="fr-col-9 flex wrap notification-dossiers">
           <% dossiers.each_with_index do |dossier, dossier_index| %>
-            <div class="flex align-center notification-dossier">
+            <li class="flex align-center notification-dossier">
               <% if statut != 'supprimes' %>
-                <div class="fr-link fr-link--sm fr-mr-1w">
-                  <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id) %>
-                </div>
+                <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id), class: "notification-dossier-contenu fr-link" %>
               <% else %>
-                <span class="fr-mr-1w fr-text--sm fr-mb-0">
+                <span class="notification-dossier-contenu">
                   <%= dossier.id %>
                 </span>
               <% end %>
-
-              <div class="fr-mb-0">
-                <span class="no-wrap fr-text--sm">
-                  <%= dossier.owner_name %>
-                </span>
-              </div>
-
-              <% if dossier_index != (dossiers.size - 1) %>
-                <div class="fr-mx-2w">|</div>
-              <% end %>
-            </div>
+              <span class="notification-dossier-contenu fr-ml-1w">
+                <%= dossier.owner_name %>
+              </span>
+            </li>
           <% end %>
-
-          <span class="no-wrap fr-text--sm fr-text--bold fr-mb-0 notification-indicator"></span>
-        </div>
+        </ul>
+        <span class="fr-text--sm fr-text--bold notification-indicator"></span>
       </div>
     <% end %>
   <% end %>