feat(app-bar): refactor to use tokens and new patterns

package.json

@@ -54,7 +54,6 @@
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.3.0",

src/dev/pages/app-bar/app-bar.ejs

@@ -1,19 +1,22 @@
-<forge-app-bar id="forge-app-bar-example" title-text="App bar">
+<forge-app-bar id="forge-app-bar-example" title-text="App Bar" href="javascript: void(0);">
   <forge-icon slot="logo" external external-type="custom" name="forge_logo"></forge-icon>
 
   <forge-app-bar-menu-button slot="start" id="forge-app-bar-example-menu-button"></forge-app-bar-menu-button>
 
   <forge-app-bar-search id="app-bar-search" slot="center">
     <input type="text" placeholder="Search" aria-label="Search" />
-    <forge-icon-button id="app-bar-search-action" slot="action">
+    <forge-icon-button id="app-bar-search-action" slot="action" aria-label="Search by voice">
       <forge-icon name="keyboard_voice"></forge-icon>
     </forge-icon-button>
   </forge-app-bar-search>
 
+
   <forge-app-bar-help-button slot="end"></forge-app-bar-help-button>
   <forge-app-bar-notification-button slot="end"></forge-app-bar-notification-button>
   <forge-app-bar-app-launcher-button slot="end"></forge-app-bar-app-launcher-button>
-
+
+  <forge-button slot="end">Sign in</forge-button>
+
   <forge-app-bar-profile-button
     slot="end"
     avatar-text="First Last"

src/dev/pages/app-bar/app-bar.html

@@ -7,17 +7,27 @@
       {
         type: 'select',
         label: 'Theme',
-        id: 'app-bar-theme-select',
+        id: 'opt-theme',
         defaultValue: '',
         options: [
           { label: 'Default', value: '' },
           { label: 'White', value: 'white' }
         ]
       },
-      { type: 'text-field', label: 'Title text', id: 'app-bar-title-input', defaultValue: 'App bar' },
-      { type: 'switch', label: 'Raised', id: 'app-bar-raised-toggle', defaultValue: true },
-      { type: 'switch', label: 'Show tabs', id: 'app-bar-show-tabs-toggle', defaultValue: true },
-      { type: 'switch', label: 'Use profile card builder', id: 'app-bar-profile-card-builder-toggle' }
+      {
+        type: 'select',
+        label: 'Elevation',
+        id: 'opt-elevation',
+        defaultValue: 'raised',
+        options: [
+          { label: 'Raised (default)', value: 'raised' },
+          { label: 'None ', value: '' }
+        ]
+      },
+      { type: 'text-field', label: 'Title text', id: 'opt-title-text', defaultValue: 'App bar' },
+      { type: 'switch', label: 'Href', id: 'opt-href', defaultValue: true },
+      { type: 'switch', label: 'Show tabs', id: 'opt-show-tabs', defaultValue: true },
+      { type: 'switch', label: 'Use profile card builder', id: 'opt-profile-card-builder' }
     ]
   }
 })

src/dev/pages/app-bar/app-bar.ts

@@ -8,6 +8,7 @@ import '@tylertech/forge/tabs';
 
 // Icons
 import type {
+  AppBarElevation,
   IAppBarComponent,
   IAppBarHelpButtonComponent,
   IAppBarMenuButtonComponent,
@@ -45,7 +46,6 @@ IconRegistry.define([
   tylIconKeyboardVoice
 ]);
 
-const pageAppBar = document.querySelector('forge-app-bar#page-app-bar') as IAppBarComponent;
 const appBar = document.querySelector('forge-app-bar#forge-app-bar-example') as IAppBarComponent;
 const appBarSearch = appBar.querySelector('forge-app-bar-search#app-bar-search') as IAppBarSearchComponent;
 const appBarProfileButton = appBar.querySelector('forge-app-bar-profile-button') as IAppBarProfileButtonComponent;
@@ -79,7 +79,36 @@ appBarSearch.addEventListener('forge-app-bar-search-input', ({ detail }) => {
   document.body.appendChild(toast);
 });
 
-const useProfileCardBuilderToggle = document.querySelector('#app-bar-profile-card-builder-toggle') as ISwitchComponent;
+const themeSelect = document.querySelector('#opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', () => {
+  appBar.theme = themeSelect.value || '';
+});
+
+const elevationSelect = document.querySelector('#opt-elevation') as ISelectComponent;
+elevationSelect.addEventListener('change', ({ detail }) => {
+  appBar.elevation = detail as AppBarElevation;
+});
+
+const titleInput = document.querySelector('#opt-title-text') as HTMLInputElement;
+titleInput.addEventListener('input', () => {
+  appBar.titleText = titleInput.value;
+});
+
+const hrefToggle = document.querySelector('#opt-href') as ISwitchComponent;
+hrefToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  appBar.href = selected ? 'javascript: void(0);' : undefined;
+});
+
+const showTabsToggle = document.querySelector('#opt-show-tabs') as ISwitchComponent;
+showTabsToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  if (selected) {
+    appBar.appendChild(appBarTabs);
+  } else {
+    appBarTabs.remove();
+  }
+});
+
+const useProfileCardBuilderToggle = document.querySelector('#opt-profile-card-builder') as ISwitchComponent;
 useProfileCardBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   appBarProfileButton.profileCardBuilder = selected ? profileCardBuilder : undefined;
 });
@@ -113,35 +142,3 @@ function profileCardBuilder(): HTMLElement {
   listElement.appendChild(buildListItemElement('My Preferences', 'settings', 'preferences'));
   return listElement;
 }
-
-const appBarRaisedToggle = document.querySelector('#app-bar-raised-toggle') as ISwitchComponent;
-appBarRaisedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  appBar.raised = selected;
-  pageAppBar.raised = selected;
-});
-
-const appBarTitleInput = document.querySelector('#app-bar-title-input') as HTMLInputElement;
-appBarTitleInput.addEventListener('input', () => {
-  appBar.titleText = appBarTitleInput.value;
-});
-
-const appBarThemeSelect = document.querySelector('#app-bar-theme-select') as ISelectComponent;
-appBarThemeSelect.addEventListener('change', () => {
-  if (appBarThemeSelect.value) {
-    appBar.setAttribute('theme', appBarThemeSelect.value);
-    pageAppBar.setAttribute('theme', appBarThemeSelect.value);
-  } else {
-    appBar.removeAttribute('theme');
-    pageAppBar.removeAttribute('theme');
-  }
-});
-
-const showAppBarTabsToggle = document.querySelector('#app-bar-show-tabs-toggle') as ISwitchComponent;
-showAppBarTabsToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  if (selected) {
-    appBarTabs.style.removeProperty('display');
-  } else {
-    appBarTabs.style.display = 'none';
-  }
-});
-

src/dev/pages/menu/menu.ejs

@@ -1,5 +1,4 @@
 <forge-menu id="forge-menu-example">
-  <!-- <button type="button">Show menu</button> -->
   <forge-button variant="raised">Show menu</forge-button>
 </forge-menu>
 

src/dev/src/partials/header.ejs

@@ -1,8 +1,4 @@
-<forge-app-bar slot="header" id="page-app-bar">
-  <a slot="title" href="/">
-    <h1 class="forge-typography--heading4"><%= site.title %><%= title ? ` - ${title}` : null %></h1>
-    <forge-ripple></forge-ripple>
-  </a>
+<forge-app-bar slot="header" id="page-app-bar" title-text="<%= site.title %><%= title ? ` - ${title}` : null %>" href="/">
   <forge-icon name="forge_logo" slot="logo"></forge-icon>
   <forge-icon-button slot="end" id="dark-theme-button" aria-label="Toggle theme">
     <forge-icon name="brightness_3"></forge-icon>

src/dev/src/styles/_header.scss

@@ -1,6 +1,6 @@
 #page-app-bar {
-  --forge-app-bar-theme-background: var(--forge-theme-secondary);
-  --forge-app-bar-theme-on-background: var(--forge-theme-on-secondary);
+  --forge-app-bar-background: var(--forge-theme-secondary);
+  --forge-app-bar-foreground: var(--forge-theme-on-secondary);
 
   a[slot=title] {
     text-decoration: none;