@genesislcap/foundation-header 14.139.2 → 14.141.0

package/dist/esm/main/main.styles.js

@@ -1,7 +1,6 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
-import { neutralLayer2 } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
-import { backgroundNavOption, ColorHEX, defaultBackgroundHover, defaultBackgroundItem, PrimaryRapidColorHEX, } from '../styles/colors';
+import { optionTag, iconTag, flyoutTag } from '../tags';
 /**
  * Base styles for the foundation-header
  *
@@ -15,16 +14,14 @@ export const MainStyles = css `
     flex-direction: row;
 
     --primary-gradient-angle: -113.5deg;
-    --design-unit: 2.5;
   }
 
-  zero-design-system-provider,
   .dynamic-template {
     width: 100%;
   }
 
   .nav-listbox {
-    background: ${neutralLayer2};
+    background: var(--neutral-layer-2);
     display: flex;
     flex: 1;
     flex-direction: row;
@@ -33,94 +30,61 @@ export const MainStyles = css `
     box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);
   }
 
-  fast-listbox {
-    border-color: var(--rapid-ag-background-color);
+  .nav-button {
+    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+    margin: 0;
   }
 
   .nav-leftside {
-    background: ${neutralLayer2};
+    background: var(--neutral-layer-2);
     flex: 1;
+    display: flex;
     flex-direction: row;
     align-items: center;
-    margin-left: calc(var(--design-unit) * 6px);
-    display: flex;
+    margin-left: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
   }
 
   .nav-leftside:focus-within {
     box-shadow: none;
   }
 
-  ::slotted(fast-option),
-  .nav-listbox fast-option {
+  ::slotted(${optionTag}),
+  .nav-listbox .nav-leftside ${optionTag} {
     margin: 0 calc(var(--design-unit) * 2px);
-    padding: 0 calc(var(--design-unit) * 6px);
-
-    --focus-stroke-width: 0;
-  }
-
-  ::slotted(fast-option.selected),
-  .nav-listbox fast-option.selected {
-    background: ${backgroundNavOption};
-    color: ${ColorHEX.white};
+    padding: 0 calc(var(--design-unit) * 2px);
+    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px + 2px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid
+      color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
   }
 
-  ::slotted(fast-option:not(.selected)),
-  .nav-listbox fast-option:not(.selected) {
-    background-color: ${defaultBackgroundItem};
-    color: #c9c9c9;
+  ::slotted(${optionTag}.selected),
+  .nav-leftside ${optionTag}.selected {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 95%);
+    color: var(--neutral-foreground-rest);
   }
 
-  ::slotted(fast-option:not(.selected):hover),
-  .nav-listbox fast-option:not(.selected):hover {
-    background-color: ${defaultBackgroundHover};
-    color: ${ColorHEX.white};
+  ::slotted(${optionTag}:not(.selected)),
+  .nav-leftside ${optionTag}:not(.selected) {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
+    color: var(--neutral-foreground-rest);
   }
 
-  .top-layout zero-icon {
-    position: absolute;
-    right: calc(var(--design-unit) * 6px);
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 25px;
-    opacity: 80%;
-    cursor: pointer;
+  ::slotted(${optionTag}:not(.selected):hover),
+  .nav-leftside ${optionTag}:not(.selected):hover {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
+    color: var(--neutral-foreground-rest);
   }
 
-  .logout-container zero-icon {
+  .logout-container ${iconTag} {
     padding: 0 calc(var(--design-unit) * 3px);
   }
 
-  .nav-listbox .bars-container {
-    margin-right: calc(var(--design-unit) * 3px);
-  }
-
-  .user-container zero-icon {
-    font-size: 20px;
-    margin-right: calc(var(--design-unit) * 2px);
-    color: #879ba6;
-  }
-
-  .group-container zero-icon {
-    padding-right: 10px;
-    color: #879ba6;
-  }
-
-  .nav-listbox .bars-container zero-icon {
+  .nav-visibility-icon {
     cursor: pointer;
-    font-size: calc(var(--design-unit) * 8px);
-    background:
-      linear-gradient(
-          var(--primary-gradient-angle),
-          ${PrimaryRapidColorHEX.blue} 0%,
-          ${PrimaryRapidColorHEX.purple} 100%
-        )
-        top/100% 1px,
-      linear-gradient(
-          var(--primary-gradient-angle),
-          ${PrimaryRapidColorHEX.blue} 0%,
-          ${PrimaryRapidColorHEX.purple} 100%
-        )
-        bottom/100% 1px;
+    font-size: var(--type-ramp-plus-6-font-size);
+    color: var(--neutral-fill-strong-rest);
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -129,12 +93,11 @@ export const MainStyles = css `
   .logo-container {
     display: flex;
     align-items: center;
-    margin-right: calc(var(--design-unit) * 3px);
   }
 
   .logo {
-    height: calc(var(--design-unit) * 8px);
-    width: calc(var(--design-unit) * 10px);
+    height: calc(var(--design-unit) * 5px);
+    width: calc(var(--design-unit) * 6px);
   }
 
   .nav-rightside {
@@ -143,83 +106,28 @@ export const MainStyles = css `
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
-    margin-right: calc(var(--design-unit) * 6px);
-    color: #c9c9c9;
-  }
-
-  .user-container {
-    background-color: ${defaultBackgroundItem};
-    padding: calc(var(--design-unit) * 1px);
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    border-radius: calc(var(--control-corner-radius) * 1px);
-    cursor: pointer;
+    margin-right: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
   }
 
   .icon-container {
-    font-size: 20px;
+    font-size: var(--type-ramp-plus-6-font-size);
     padding: calc(var(--design-unit) * 3px);
-    margin-right: calc(var(--design-unit) * 4px);
-    color: #879ba6;
+    color: var(--neutral-fill-strong-rest);
     cursor: pointer;
-  }
-
-  .connection-indicator-container {
-    margin-right: calc(var(--design-unit) * 4px);
+    position: relative;
   }
 
   .open-nav {
     width: 300px;
   }
 
-  .top-layout {
-    background:
-      linear-gradient(
-          var(--primary-gradient-angle),
-          ${PrimaryRapidColorHEX.blue} 0%,
-          ${PrimaryRapidColorHEX.purple} 100%
-        )
-        top/100% 1px,
-      linear-gradient(
-          var(--primary-gradient-angle),
-          ${PrimaryRapidColorHEX.blue} 0%,
-          ${PrimaryRapidColorHEX.purple} 100%
-        )
-        bottom/100% 1px;
-    background-origin: border-box;
-    background-size: cover;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 15%;
-    max-height: 120px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: relative;
-  }
-
-  .top-layout img {
-    width: 50px;
-    margin-left: calc(var(--design-unit) * 6px);
-  }
-
-  .top-layout zero-icon:hover {
-    opacity: 100%;
-  }
-
-  .group-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
   ::slotted(zero-tree-view) {
     --type-ramp-base-font-size: 12px;
   }
 
   ::slotted(div) {
-    color: ${PrimaryRapidColorHEX.blue};
+    color: var(--accent-fill-rest);
     font-size: var(--type-ramp-minus-1-font-size);
     margin-bottom: calc(var(--design-unit) * 4px);
     padding-left: calc(var(--design-unit) * 4px);
@@ -238,7 +146,8 @@ export const MainStyles = css `
   .logout-container {
     align-items: center;
     background-color: var(--neutral-fill-rest);
-    border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};
+    border: calc(var(--stroke-width) * 1px) solid
+      color-mix(in srgb, var(--neutral-foreground-rest), transparent 90%);
     cursor: pointer;
     display: flex;
     flex-direction: row;
@@ -262,4 +171,18 @@ export const MainStyles = css `
   .language-selector:focus-within {
     border-color: #333;
   }
+
+  ${flyoutTag}::part(flyout), 
+  ${flyoutTag}::part(footer) {
+    padding: 0;
+  }
+
+  ${flyoutTag}::part(header),
+  ${flyoutTag}::part(content) {
+    padding: calc(var(--design-unit) * 2px);
+  }
+
+  .notifications-button {
+    padding-right: calc((var(--design-unit) - 1) * 2px);
+  }
 `.withBehaviors(getApp().registerStylesTarget('header'));

package/dist/esm/main/main.template.js

@@ -1,8 +1,9 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { html, repeat, when } from '@microsoft/fast-element';
+import { buttonTag, iconTag, flyoutTag, optionTag, connectionIndicatorTag, selectTag, } from '../tags';
 const app = getApp();
 const sideNavTemplate = html `
-  <zero-flyout
+  <${flyoutTag}
     position="left"
     ?closed=${(x) => !x.sideNavOpen}
     @closed=${(x) => x.toggleNavVisibility()}
@@ -22,40 +23,43 @@ const sideNavTemplate = html `
       data-test-id="logout-button"
       @click=${(x) => x.logout()}
     >
-      <zero-icon name="sign-out-alt"></zero-icon>
+      <${iconTag} name="sign-out-alt"></${iconTag}>
       Sign out
     </div>
-  </zero-flyout>
+  </${flyoutTag}>
 `;
 const defaultRouteNavItemsTemplate = html `
-  <zero-button
+  <${buttonTag}
     appearance="neutral-grey"
+    class="nav-button"
+    value="1"
     @click=${(x) => x.navigateTo('protected')}
     data-test-id="home-button"
   >
-    <zero-icon name="home"></zero-icon>
+    <${iconTag} name="home"></${iconTag}>
     Home
-  </zero-button>
-  <zero-button @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
-    <zero-icon name="users"></zero-icon>
+  </${buttonTag}>
+  <${optionTag} @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
+    <${iconTag} name="users"></${iconTag}>
     Profiles
-  </zero-button>
+</${optionTag}>
 `;
 const routeNavItemsTemplate = html `
   <template>
     ${repeat((x) => x.routeNavItems, html `
-        <zero-button
+        <${buttonTag}
           appearance="neutral-grey"
+          class="nav-button"
           slot="routes"
           @click=${(x, c) => c.parent.navigateTo(x.routePath)}
           data-test-id="${(x) => `${x.routePath}-button`}"
         >
           ${when((x) => x.icon, html `
-              <zero-icon
+              <${iconTag}
                 name="${(x) => x.icon.name}"
                 variant="${(x) => x.icon.variant}"
                 size="${(x) => x.icon.size}"
-              ></zero-icon>
+              ></${iconTag}>
             `)}
           ${(x, c) => c.parent.toLocalisedText(x.title)}
         </zero-button>
@@ -87,7 +91,7 @@ export const NavTemplate = html `
             @click=${(x) => x.toggleNavVisibility()}
             data-test-id="hamburger-menu"
           >
-            <zero-icon name="bars" part="nav-visibility-icon"></zero-icon>
+            <${iconTag} name="bars" part="nav-visibility-icon" class="nav-visibility-icon"></${iconTag}>
           </div>
         `)}
       <div class="logo-container" data-test-id="nav-bar-logo">
@@ -106,41 +110,41 @@ export const NavTemplate = html `
             data-test-id="luminance-toggle-button"
             part="luminance-button"
           >
-            <zero-icon
+            <${iconTag}
               @click=${(x) => x.luminanceIconEvent()}
               variant="regular"
               name="moon"
               part="luminance-icon"
-            ></zero-icon>
+            ></${iconTag}>
           </div>
         `)}
       ${when((x) => x.showMiscToggleButton, html `
           <div class="icon-container" data-test-id="misc-toggle-button" part="misc-button">
-            <zero-icon @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon"></zero-icon>
+            <${iconTag} @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon"></${iconTag}>
           </div>
         `)}
-      ${when((x) => x.showNotificationsButton, html `
+      <!-- ${when((x) => x.showNotificationsButton, html `
           <div
             class="icon-container"
             data-test-id="notifications-button"
             part="notifications-button"
           >
-            <zero-icon
+            <${iconTag}
               variant="regular"
               @click=${(x) => x.notificationIconEvent()}
               name="bell"
               part="notifications-icon"
-            ></zero-icon>
+            ></${iconTag}>
             <slot name="notifications-icon-end"></slot>
           </div>
-        `)}
+        `)} -->
       ${when((x) => x.showConnectionIndicator, html `
           <div class="connection-indicator-container" data-test-id="connection-indicator">
-            <zero-connection-indicator show-label="false"></zero-connection-indicator>
+            <${connectionIndicatorTag} show-label="false"></${connectionIndicatorTag}>
           </div>
         `)}
       ${when((x) => x.showLanguageSelector && x.languageOptions, html `
-          <zero-select
+          <${selectTag}
             class="language-selector"
             position="below"
             data-test-id="language-selector"
@@ -148,20 +152,20 @@ export const NavTemplate = html `
             @change="${(x, c) => x.changeLanguage(c.event)}"
           >
             ${repeat((x) => x.languageOptions.availableLanguages, html `
-                <zero-option
+                <${optionTag}
                   value="${(x) => x}"
                   ?selected="${(x, c) => x === c.parent.languageOptions.selectedLanguage}"
                 >
                   ${(x) => x.toUpperCase()}
-                </zero-option>
+                </${optionTag}>
               `)}
-          </zero-select>
+          </${selectTag}>
         `)}
 
-      <zero-button appearance="neutral-grey" data-test-id="user-button">
-        <zero-icon name="user-circle"></zero-icon>
+      <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button">
+        <${iconTag} name="user-circle"></${iconTag}>
         ${(x) => x.userName}
-      </zero-button>
+      </${buttonTag}>
     </div>
     ${app.registerElementsTarget(['header', 'header-end'])}
   </div>

package/dist/esm/tags/index.js

@@ -0,0 +1 @@
+export * from './tags';

package/dist/esm/tags/tags.js

@@ -0,0 +1,39 @@
+import { tagFor } from '@genesislcap/foundation-ui';
+import { DI } from '@microsoft/fast-foundation';
+import { HeaderConfig } from '../config/config';
+import { defaultTemplateOptions } from '../config/templates';
+/**
+ * It's important this file isn't referenced ahead of a `configure` call, otherwise these values may remain fixed at
+ * their defaults. Consumers must use the `/config` subpath to help avoid this. Files with references to tags should be
+ * lazily loaded. There is an alternative `getTags` utility at the end which could offer another approach, but direct
+ * tag exports and inline template references feel cleaner than having to convert all component `template` and `styles`
+ * exports to functions to call `getTags` on execution.
+ */
+/**
+ * @internal
+ */
+export const { templateOptions = defaultTemplateOptions } = DI.getOrCreateDOMContainer().get(HeaderConfig);
+/**
+ * @internal
+ */
+export const iconTag = tagFor(templateOptions.icon);
+/**
+ * @internal
+ */
+export const buttonTag = tagFor(templateOptions.button);
+/**
+ * @internal
+ */
+export const connectionIndicatorTag = tagFor(templateOptions.connectionIndicator);
+/**
+ * @internal
+ */
+export const selectTag = tagFor(templateOptions.select);
+/**
+ * @internal
+ */
+export const optionTag = tagFor(templateOptions.option);
+/**
+ * @internal
+ */
+export const flyoutTag = tagFor(templateOptions.flyout);