refactor(header/notice): convert JS to stimulus

app/components/dsfr/notice_component/notice_component.html.haml

@@ -1,9 +1,9 @@
-.fr-notice.fr-notice--info
+.fr-notice.fr-notice--info{ "data-dsfr-header-target": "notice" }
   .fr-container
     .fr-notice__body
       %p.fr-notice__title
         = title
 
       - if closable?
-        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'javascript:DS.closeNoticeInfo(event)' }
+        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), data: { action: "dsfr-header#closeNotice" } }
           = t('.close_notice')

app/javascript/controllers/dsfr_header_controller.ts

@@ -0,0 +1,13 @@
+import { ApplicationController } from './application_controller';
+
+export class DSFRHeaderController extends ApplicationController {
+  static targets = ['notice'];
+
+  declare readonly noticeTarget: HTMLElement;
+
+  closeNotice() {
+    this.noticeTarget.parentNode?.removeChild(this.noticeTarget);
+
+    this.element.classList.remove('fr-header__with-notice-info');
+  }
+}

app/javascript/entrypoints/application.js

@@ -37,8 +37,6 @@ import {
   showNewAccountPasswordConfirmation
 } from '../new_design/fc-fusion';
 
-import { closeNoticeInfo } from '../new_design/header';
-
 const application = Application.start();
 registerControllers(application);
 
@@ -54,8 +52,7 @@ const DS = {
   showNewAccountPasswordConfirmation,
   replaceSemicolonByComma,
   acceptEmailSuggestion,
-  discardEmailSuggestionBox,
-  closeNoticeInfo
+  discardEmailSuggestionBox
 };
 
 // Start Rails helpers

app/javascript/new_design/header.js

@@ -1,16 +0,0 @@
-export function closeNoticeInfo(event) {
-  // DSFR usptream code
-  const notice = event.target.parentNode.parentNode.parentNode;
-  notice.parentNode.removeChild(notice);
-
-  // Update class accordingly because
-  // header style is slightly different with or without notice
-  if (document.querySelector) {
-    const klass = 'fr-header__with-notice-info';
-    const header = document.querySelector('.' + klass);
-
-    if (header) {
-      header.classList.remove(klass);
-    }
-  }
-}

app/views/layouts/_header.haml

@@ -6,7 +6,7 @@
 - is_expert_context = nav_bar_profile == :expert && expert_signed_in?
 - is_user_context = nav_bar_profile == :user
 - is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any?
-%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner" }
+%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner", "data-controller": "dsfr-header" }
   .fr-header__body
     .fr-container
       .fr-header__body-row
@@ -101,5 +101,5 @@
             - if current_user.expert && current_expert.avis_summary[:total] > 0
               = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-= yield(:notice_info)
+  = yield(:notice_info)