[Demo] Add banner to visual vocabulary dashboard

vizro-ai/examples/dashboard_ui/app.py

@@ -308,7 +308,7 @@ def update_model_dropdown(value):
                 [
                     "Made using ",
                     html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"),
-                    dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank", external_link=True),
+                    dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank"),
                 ],
                 style={"display": "flex", "flexDirection": "row"},
             ),

vizro-core/changelog.d/20241112_123240_nadija_ratkusic_graca_add_banner_to_demo_dashboards.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))
+
+-->

vizro-core/examples/visual-vocabulary/app.py

@@ -2,9 +2,11 @@
 
 from typing import Union
 
+import dash_bootstrap_components as dbc
 import vizro.models as vm
 from chart_groups import ALL_CHART_GROUP, CHART_GROUPS, ChartGroup, IncompletePage
 from custom_components import FlexContainer, Markdown
+from dash import get_asset_url, html
 from vizro import Vizro
 
 
@@ -108,6 +110,14 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
 )
 
 app = Vizro().build(dashboard)
+app.dash.layout.children.append(
+    dbc.NavLink(
+        ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+        href="https://github.com/mckinsey/vizro",
+        target="_blank",
+        className="anchor-container",
+    )
+)
 server = app.dash.server
 
 if __name__ == "__main__":

vizro-core/examples/visual-vocabulary/assets/css/custom.css

@@ -90,3 +90,28 @@ img[src*="#chart-icon"] {
 .intro-text ul:last-of-type {
   margin-bottom: 0;
 }
+
+.anchor-container {
+  align-items: center;
+  background: var(--text-primary);
+  border-top-left-radius: 8px;
+  bottom: 0;
+  color: var(--text-contrast-primary);
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 12px;
+  position: fixed;
+  right: 0;
+}
+
+.anchor-container:focus,
+.anchor-container:hover {
+  background: var(--text-secondary);
+  color: var(--text-contrast-primary);
+}
+
+img#banner {
+  height: 16px;
+}