@gsa-tts/graymatter-ui 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/DesktopSideNav.svelte

@@ -20,7 +20,7 @@
   import MenuIcon from './icons/MenuIcon.svelte';
   import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
-  import HelpIcon from './icons/HelpIcon.svelte';
+  // import HelpIcon from './icons/HelpIcon.svelte';
   const urls = getAppUrls();
 
   const {
@@ -41,7 +41,7 @@
   let hoveredItem = $state<string | null>(null);
   let menuButtonHovered = $state(false);
   let canHover = $state(false);
-  let helpIconHovered = $state(false);
+  // let helpIconHovered = $state(false);
   let discoverNavRef = $state<HTMLAnchorElement | null>(null);
   let chatNavRef = $state<HTMLAnchorElement | null>(null);
   let consoleNavRef = $state<HTMLAnchorElement | null>(null);
@@ -349,7 +349,8 @@
 
     {#if profileMenuData}
     <div class="nav-footer" part="nav-footer">
-      <div class="nav-footer-icon-container">
+      <!-- TODO: Add help icon back in when we have decided on full functionality-->
+      <!-- <div class="nav-footer-icon-container">
         <button
           type="button"
           class="nav-footer-icon-inner"
@@ -364,14 +365,14 @@
             <HelpIcon isHovered={helpIconHovered} />
           </div>
         </button>
-      </div>
+      </div> -->
       <div class="nav-footer-profile-container">
-
-      <ProfileMenu
-        userMeta={profileMenuData?.userMeta}
-        menuItems={profileMenuData?.menuItems}
-        ariaLabel="Open profile menu"
-      />
+        <ProfileMenu
+          userMeta={profileMenuData?.userMeta}
+          menuItems={profileMenuData?.menuItems}
+          ariaLabel="Open profile menu"
+          menuAlign="desktop"
+        />
       </div>
     </div>
     {/if}
@@ -380,7 +381,6 @@
   <div class="expanded-content drawer-anim" class:open={sideNavExpanded()} part="expanded-content">
     {#if sideNavExpanded()}
       <div class="drawer-content" part="drawer-content">
-        <div class="logo-placeholder" part="logo-placeholder"></div>
         <nav aria-label="Sub navigation" part="sub-navigation">
           {@render children?.()}
         </nav>
@@ -406,10 +406,15 @@
   .drawer-content {
     width: 12.5rem;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--ai-size-72);
   }
 
-  .logo-placeholder {
-    height: var(--ai-size-72);
+  .drawer-content nav {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .menu-button {
@@ -460,7 +465,7 @@
   .side-nav-container.expanded .expanded-content {
     width: 12.5rem;
     opacity: 1;
-    overflow-y: auto;
+    overflow: hidden;
   }
 
   .side-nav-container:not(.expanded) .expanded-content {
@@ -657,7 +662,7 @@
     color: var(--ai-color-neutral-700);
   }
 
-  .nav-footer-icon-container {
+  /* .nav-footer-icon-container {
     display: flex;
     padding: 0 var(--ai-size-4);
     flex-direction: column;
@@ -665,7 +670,7 @@
     align-items: center;
     gap: var(--ai-size-4);
     align-self: stretch;
-  }
+  } */
 
   .nav-footer-profile-container {
     display: flex;
@@ -676,7 +681,7 @@
     gap: var(--ai-size-4);
     align-self: stretch;
   }
-  .nav-footer-icon-inner {
+  /* .nav-footer-icon-inner {
     display: flex;
     width: var(--ai-size-40);
     height: var(--ai-size-40);
@@ -688,8 +693,8 @@
     border: none;
     cursor: pointer;
     transition: background-color 0.3s ease, border-radius 0.3s ease;
-  }
-  .nav-footer-icon-inner:hover,
+  } */
+  /* .nav-footer-icon-inner:hover,
   .nav-footer-icon-inner:focus {
     background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-4);
@@ -709,5 +714,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-  }
+  } */
 </style>

package/src/components/Logo.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  export let isInverted: boolean = false;
-  export let width: number | undefined;
-  export let height: number | undefined;
-  const defaultWidth = 102;
-  const defaultHeight = 30;
-  width = width || defaultWidth;
-  height = height || defaultHeight;
+  const {
+    isInverted = false,
+    width = 102,
+    height = 30,
+    showServiceMark = false,
+    // eslint-disable-next-line svelte/valid-compile
+    ...restProps
+  } = $props();
 
-  $: logoColor = isInverted ? 'var(--ai-color-white)' : 'var(--ai-color-black)';
+  const logoColor = isInverted ? 'var(--ai-color-white)' : 'var(--ai-color-black)';
 </script>
 
+{#if !showServiceMark}
 <svg
   {width}
   {height}
@@ -17,7 +19,7 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   style="fill: {logoColor};"
-  {...$$restProps}
+  {...restProps}
 >
   <g>
     <path
@@ -33,3 +35,33 @@
     <path d="M101.823 0H93.8662V5.98227H101.823V0Z" />
   </g>
 </svg>
+{:else}
+<svg 
+  {width}
+  {height}
+  viewBox="0 0 75 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  style="fill: {logoColor};"
+  {...restProps}
+>
+  <path
+    d="M38.1538 13.6118C38.1538 10.3764 35.6038 7.74581 32.4682 7.74581H26.6298C25.6231 7.74581 24.8025 6.90443 24.8025 5.86798C24.8025 4.83153 25.6211 3.99015 26.6298 3.99015H37.2646V0H25.7602C22.6266 0 20.0765 2.63251 20.0765 5.86798C20.0765 9.10345 22.6266 11.736 25.7602 11.736H31.5986C32.6053 11.736 33.4259 12.5773 33.4259 13.6138C33.4259 14.6502 32.6072 15.4916 31.5986 15.4916H20.5603V19.4798H32.4682C35.6038 19.4798 38.1538 16.8473 38.1538 13.6138V13.6118Z"/>
+  <path
+    d="M54.4317 16.4768L54.4591 16.5123L55.4442 19.4798H60.0938L53.6169 0H45.2912L38.8143 19.4778H43.4639L44.4608 16.4768H54.4317ZM48.6129 3.99015H50.2933L50.305 4.02365L53.0861 12.3862H45.822L48.6129 3.99015Z"/>
+  <path
+    d="M18.0224 0H13.6255V10.5438C13.6255 14.2897 11.24 15.6236 9.00924 15.6236C5.98918 15.6236 4.39298 13.866 4.39298 10.5438V0H0V11.3379C0 13.799 0.969472 16.0355 2.72823 17.6355C4.40473 19.1606 6.6355 20 9.01119 20C13.4903 20 18.0224 17.0246 18.0224 11.336V0Z"/>
+  <path d="M67.3965 6.52612H62.2005V19.4798H67.3965V6.52612Z"/>
+  <path
+    d="M70.6978 2.72727C70.5495 2.72727 70.4078 2.71191 70.2726 2.68118C70.1374 2.64789 70.0178 2.59795 69.9138 2.53137C69.8097 2.46223 69.7278 2.37772 69.668 2.27785C69.6082 2.17542 69.5783 2.05506 69.5783 1.91677C69.5783 1.90141 69.5783 1.88604 69.5783 1.87068C69.5809 1.85531 69.5822 1.84379 69.5822 1.83611H70.0932C70.0932 1.84123 70.0919 1.85147 70.0893 1.86684C70.0893 1.87964 70.0893 1.89117 70.0893 1.90141C70.0893 1.98592 70.114 2.0589 70.1634 2.12036C70.2128 2.17926 70.2843 2.22535 70.3779 2.25864C70.4715 2.28937 70.582 2.30474 70.7095 2.30474C70.7953 2.30474 70.8707 2.29962 70.9357 2.28937C71.0033 2.27913 71.0605 2.26504 71.1073 2.24712C71.1567 2.22663 71.197 2.20359 71.2282 2.17798C71.2594 2.14981 71.2815 2.11908 71.2945 2.08579C71.3101 2.0525 71.3179 2.01665 71.3179 1.97823C71.3179 1.90397 71.2945 1.84251 71.2477 1.79385C71.2009 1.7452 71.1372 1.70423 71.0566 1.67093C70.9786 1.63764 70.8889 1.60819 70.7875 1.58259C70.6887 1.55442 70.586 1.52625 70.4793 1.49808C70.3753 1.46991 70.2726 1.43662 70.1712 1.39821C70.0724 1.35723 69.9827 1.30858 69.9021 1.25224C69.824 1.1959 69.7616 1.12548 69.7148 1.04097C69.668 0.953905 69.6446 0.850192 69.6446 0.729833C69.6446 0.606914 69.6706 0.49936 69.7226 0.40717C69.7772 0.314981 69.8526 0.239437 69.9489 0.180538C70.0477 0.119078 70.1621 0.0742637 70.2921 0.0460946C70.4221 0.0153649 70.5638 0 70.7173 0C70.8603 0 70.9942 0.0153649 71.119 0.0460946C71.2464 0.0742637 71.3582 0.120358 71.4545 0.184379C71.5507 0.245839 71.6261 0.325224 71.6807 0.422535C71.7353 0.517286 71.7626 0.631242 71.7626 0.764405V0.810499H71.2594V0.772087C71.2594 0.697823 71.236 0.635083 71.1892 0.583867C71.145 0.53265 71.0813 0.492958 70.9981 0.464789C70.9175 0.43662 70.8226 0.422535 70.7134 0.422535C70.5963 0.422535 70.4962 0.434059 70.413 0.457106C70.3298 0.477593 70.2661 0.509603 70.2219 0.553137C70.1777 0.59411 70.1556 0.645326 70.1556 0.706786C70.1556 0.770807 70.179 0.824584 70.2258 0.868118C70.2726 0.911652 70.335 0.948784 70.413 0.979513C70.4936 1.01024 70.5833 1.03841 70.6822 1.06402C70.7836 1.08963 70.8863 1.1178 70.9903 1.14853C71.0969 1.1767 71.1996 1.20999 71.2984 1.2484C71.3999 1.28681 71.4896 1.33547 71.5676 1.39437C71.6482 1.4507 71.7119 1.52113 71.7587 1.60563C71.8055 1.69014 71.8289 1.79129 71.8289 1.90909C71.8289 2.10627 71.7795 2.26504 71.6807 2.3854C71.5845 2.50576 71.4506 2.59283 71.2789 2.64661C71.1099 2.70038 70.9162 2.72727 70.6978 2.72727Z"/>
+  <path
+    d="M72.3008 2.68118V0.0460946H73.1004L73.5217 1.51344C73.5373 1.56466 73.5529 1.62228 73.5685 1.6863C73.5841 1.75032 73.5984 1.81178 73.6114 1.87068C73.627 1.92958 73.6387 1.98079 73.6465 2.02433H73.6777C73.6829 1.98592 73.6907 1.93854 73.7011 1.8822C73.7115 1.82586 73.7232 1.76568 73.7362 1.70166C73.7518 1.63508 73.7687 1.57106 73.7869 1.5096L74.2082 0.0460946H75V2.68118H74.4929V1.34827C74.4929 1.23047 74.4942 1.11268 74.4968 0.994878C74.4994 0.877081 74.502 0.775928 74.5046 0.691421C74.5098 0.606914 74.5124 0.556978 74.5124 0.541613H74.4812C74.476 0.564661 74.463 0.614597 74.4422 0.691421C74.4214 0.768246 74.3993 0.851472 74.3759 0.941101C74.3525 1.03073 74.3317 1.10755 74.3135 1.17157L73.8727 2.68118H73.4047L72.9639 1.17542C72.9483 1.12164 72.9301 1.05762 72.9093 0.983355C72.8911 0.90653 72.8716 0.828425 72.8508 0.74904C72.8326 0.669654 72.8157 0.600512 72.8001 0.541613H72.7689C72.7715 0.610755 72.7741 0.693982 72.7767 0.791293C72.7793 0.886043 72.7819 0.983355 72.7845 1.08323C72.7871 1.18054 72.7884 1.26889 72.7884 1.34827V2.68118H72.3008Z"/>
+  <path d="M67.4728 0H62.2005V3.98818H67.4728V0Z"/>
+</svg>
+{/if}
+
+<style>
+  svg {
+    display: block;
+  }
+</style>

package/src/components/Logo.webcomponent.svelte

@@ -3,7 +3,8 @@
   props: {
     isInverted: { reflect: true, type: 'Boolean', attribute: 'is-inverted' },
     width: { reflect: true, type: 'Number', attribute: 'width' },
-    height: { reflect: true, type: 'Number', attribute: 'height' }
+    height: { reflect: true, type: 'Number', attribute: 'height' },
+    showServiceMark: { reflect: true, type: 'Boolean', attribute: 'show-service-mark' },
   }
 }} />
 
@@ -14,6 +15,7 @@
     isInverted = false,
     width = undefined,
     height = undefined,
+    showServiceMark = false,
     ...props
   } = $props();
 </script>
@@ -22,5 +24,6 @@
   {isInverted}
   {width}
   {height}
+  {showServiceMark}
   {...props}
 />

package/src/styles/base/global.css

@@ -10,5 +10,11 @@
 
 /* Ensure anchor targets are not hidden behind fixed header */
 [id] {
-  scroll-margin-top: 56px;
+  scroll-margin-top: var(--ai-size-56);
+}
+
+/* Custom scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #848fa4 transparent;
 }