From 9fecf3ca386c011f941d90c0bf5454fdeabe861a Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Mon, 2 Oct 2023 13:23:59 +0200
Subject: [PATCH] Replace active class with active param

---
 ...ratkusic_graca_highlight_active_accordion_item.md |  2 +-
 .../src/vizro/models/_navigation/_accordion.py       |  3 ++-
 vizro-core/src/vizro/static/css/accordion.css        |  5 ++---
 .../tests/unit/vizro/models/_navigation/conftest.py  | 12 +++++++++---
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
index b598a9e40..dc417ce13 100644
--- a/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
+++ b/vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -31,7 +31,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Fixed highlighting for active accordion item and arranged a setup to maintain the expanded state of the parent accordion item when page is active. ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add highlighting to selected page accordion button and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Security
diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
index 6eb945325..7be3d03e6 100644
--- a/vizro-core/src/vizro/models/_navigation/_accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -38,7 +38,8 @@ def _create_accordion_buttons(self, pages, page_id):
             dbc.Button(
                 children=[page["name"]],
                 key=page["relative_path"],
-                className="accordion-item-button-active" if page_id == page["name"] else "accordion-item-button",
+                className="accordion-item-button",
+                active=True if page_id == page["name"] else False,
                 href=page["relative_path"],
             )
             for page in dash.page_registry.values()
diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
index cb7f117c5..5aa55f306 100644
--- a/vizro-core/src/vizro/static/css/accordion.css
+++ b/vizro-core/src/vizro/static/css/accordion.css
@@ -101,8 +101,7 @@
   gap: var(--spacing-01);
 }
 
-div.page_container .accordion-item-button,
-.accordion-item-button-active {
+div.page_container .accordion-item-button {
   background-color: inherit;
   width: 100%;
   display: flex;
@@ -113,7 +112,7 @@ div.page_container .accordion-item-button,
   line-height: var(--text-size-03);
 }
 
-.accordion-item-button-active {
+.accordion-item-button.btn.btn-primary.active {
   background-color: var(--state-overlays-selected);
   color: var(--text-primary);
 }
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
index a08cdcc72..860d16ed7 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
@@ -22,13 +22,15 @@ def accordion_from_page_as_list():
     accordion_buttons = [
         dbc.Button(
             children=["Page 1"],
-            className="accordion-item-button-active",
+            className="accordion-item-button",
+            active=True,
             key="/",
             href="/",
         ),
         dbc.Button(
             children=["Page 2"],
             className="accordion-item-button",
+            active=False,
             key="/page-2",
             href="/page-2",
         ),
@@ -62,13 +64,17 @@ def accordion_from_page_as_list():
 def accordion_from_pages_as_dict():
     accordion_items = [
         dbc.AccordionItem(
-            children=[dbc.Button(children=["Page 1"], className="accordion-item-button-active", key="/", href="/")],
+            children=[
+                dbc.Button(children=["Page 1"], className="accordion-item-button", active=True, key="/", href="/")
+            ],
             title="PAGE 1",
             class_name="accordion_item",
         ),
         dbc.AccordionItem(
             children=[
-                dbc.Button(children=["Page 2"], className="accordion-item-button", key="/page-2", href="/page-2")
+                dbc.Button(
+                    children=["Page 2"], className="accordion-item-button", active=False, key="/page-2", href="/page-2"
+                )
             ],
             title="PAGE 2",
             class_name="accordion_item",