style(header): remove fr-header__with-notice-info when notice is closed

app/assets/stylesheets/new_header.scss

@@ -12,8 +12,12 @@ $header-mobile-breakpoint: 550px;
   background-color: #FFFFFF;
 }
 
-.new-header-with-border {
-  border-bottom: 1px solid $border-grey;
+// No drop shadow when a notice is shown.
+.fr-header.fr-header__with-notice-info {
+  &,
+  .fr-header__brand {
+    filter: none;
+  }
 }
 
 .header-inner-content {

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

@@ -5,5 +5,5 @@
         = title
 
       - if closable?
-        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild' }
+        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'javascript:DS.closeNoticeInfo(event)' }
           = t('.close_notice')

app/javascript/entrypoints/application.js

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

app/javascript/new_design/header.js

@@ -0,0 +1,16 @@
+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: current_page?(root_path) ? "fr-header" : "fr-header new-header-with-border", role: "banner" }
+%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner" }
   .fr-header__body
     .fr-container
       .fr-header__body-row