Enable NavBar as selector for Navigation (mckinsey#70)

DoTanTai · Nov 29, 2023 · 5769f74 · 5769f74
1 parent 8a188aa
commit 5769f74
Show file tree

Hide file tree

Showing 47 changed files with 1,576 additions and 385 deletions.
diff --git a/vizro-ai/changelog.d/20231128_173055_antony.milne_models_navigation_navbar.md b/vizro-ai/changelog.d/20231128_173055_antony.milne_models_navigation_navbar.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-ai/hatch.toml b/vizro-ai/hatch.toml
@@ -40,7 +40,7 @@ prep-release = [
 pypath = "hatch run python -c 'import sys; print(sys.executable)'"
 secrets = "pre-commit run gitleaks --all-files"
 test = [
-  "test-unit",
+  "- test-unit",
   "test-integration"
 ]
 test-cov = "coverage run -m pytest tests/unit {args}"

diff --git a/vizro-core/changelog.d/20231128_173127_antony.milne_models_navigation_navbar.md b/vizro-core/changelog.d/20231128_173127_antony.milne_models_navigation_navbar.md
@@ -0,0 +1,46 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+### Highlights ✨
+
+- Add `NavBar` and `NavLink` models to enable a hierarchical navigation bar with icons. Visit the [user guide on navigation](https://vizro.readthedocs.io/en/stable/pages/user_guides/navigation/) to learn more. ([#70](https://github.com/mckinsey/vizro/pull/70))
+
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/docs/assets/user_guides/navigation/accordion_inside_nav_bar.png b/vizro-core/docs/assets/user_guides/navigation/accordion_inside_nav_bar.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/custom_icons.png b/vizro-core/docs/assets/user_guides/navigation/custom_icons.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/custom_navigation.png b/vizro-core/docs/assets/user_guides/navigation/custom_navigation.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/default_navigation.png b/vizro-core/docs/assets/user_guides/navigation/default_navigation.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/grouped_navigation.png b/vizro-core/docs/assets/user_guides/navigation/grouped_navigation.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/nav_bar.png b/vizro-core/docs/assets/user_guides/navigation/nav_bar.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/only_some_pages.png b/vizro-core/docs/assets/user_guides/navigation/only_some_pages.png
diff --git a/vizro-core/docs/pages/tutorials/explore_components.md b/vizro-core/docs/pages/tutorials/explore_components.md
@@ -710,8 +710,8 @@ and how to bring them together.
 For future dashboard creations, you can explore more about the available dashboard `components` by going through the
 [user guide](../user_guides/components.md). To gain more in-depth knowledge about the usage and configuration
 details of `controls`, check out the user guides dedicated to [Filters](../user_guides/filters.md), [Parameters](../user_guides/parameters.md)
-and [Selectors](../user_guides/selectors.md). This guide will provide you with valuable insights on utilizing and
-customizing controls for interactive functionality in your dashboards.
+and [Selectors](../user_guides/selectors.md). If you'd like to understand more about different ways to configure the navigation of your dashboard, head
+to [Navigation](../user_guides/navigation.md).
 
 Vizro doesn't end here, and we only covered the key features, but there is still much more to explore! You can learn:
 

diff --git a/vizro-core/docs/pages/user_guides/components.md b/vizro-core/docs/pages/user_guides/components.md
@@ -400,6 +400,13 @@ and provide an attribute selector to select images with that matching URL hash.
 
 ### Creating navigation
 
+!!! note
+
+    This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation
+    card. To configure the navigation panel on the left hand side of the screen, refer to the
+    [guide on navigation](navigation.md).
+
+
 A navigation card allows you to navigate to a different page via a click on the card area.
 To create a navigation card, do the following: