Updates from code review 5

US-CBP · Dec 9, 2024 · 4c89b31 · 4c89b31
1 parent fb6af22
commit 4c89b31
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/web-components/src/components/cbp-app-header/cbp-app-header.tsx b/packages/web-components/src/components/cbp-app-header/cbp-app-header.tsx
@@ -14,9 +14,8 @@ export class CbpAppHeader {
   initNavItemset() {
     // check for a default navItem, otherwise set the first one active
     let activeNavItem;
-    this.navItems.forEach(navItem => {
-      if (navItem.selected === true) activeNavItem = navItem;
-    });
+    activeNavItem =  this.host.querySelector('cbp-nav-item[selected]');
+
     this.setActiveNav(activeNavItem);
   }
 
@@ -40,8 +39,13 @@ export class CbpAppHeader {
     // Attach event listeners to the child navItem
     this.navItems.forEach(navItem => {
       navItem.addEventListener('navClicked', e => this.setActiveNav(e.detail.host));
-    });
+    }); 
   }
+
+  componentDidLoad() {
+    this.initNavItemset();
+  }
+
   render() {
     return (
       <Host>

diff --git a/packages/web-components/src/components/cbp-nav-item/cbp-nav-item.scss b/packages/web-components/src/components/cbp-nav-item/cbp-nav-item.scss
@@ -105,8 +105,8 @@ cbp-button[fill=ghost][color=secondary] {
   --cbp-button-color: var(--cbp-nav-item-color-selected);
   --cbp-button-color-bg: var(--cbp-nav-item-color-bg-selected);
   --cbp-button-color-border: var(--cbp-nav-item-border-bottom-selected);
-
-
+  //TODO: need to set text to italics (confirm with Jer)
+  font-style: italic;
   //tech debt: cbp-button dark overrides causing issues due to specificity, same issue as with hover & active above
   --cbp-button-color-dark: var(--cbp-nav-item-color-selected-dark);
   --cbp-button-color-bg-dark: var(--cbp-nav-item-color-bg-selected-dark);