@gsa-tts/graymatter-ui 0.3.21 → 0.3.23

package/package.json

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

package/src/components/PlatformFooter.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { siteName } from '@gsa-tts/graymatter-ui/constants';
+  import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
+  import Logo from '@gsa-tts/graymatter-ui/components/Logo.svelte';
+  import PlatformFooterMenu from './PlatformFooterMenu.svelte';
+  import Button from '@gsa-tts/graymatter-ui/components/Button.svelte';
+
+  /**
+   * PlatformFooter Component
+   *
+   * The main footer component for the platform, featuring:
+   * - Agency branding and logo
+   * - Call-to-action section
+   * - Footer navigation menus
+   *
+   * Props:
+   * - menus?: FooterMenu[] (optional array of footer menus)
+   * - ctaHeading?: string (optional CTA heading text)
+   * - ctaButtonText?: string (optional CTA button text)
+   * - ctaButtonHref?: string (optional CTA button URL)
+   * - showCta?: boolean (whether to show the CTA section)
+   * - class?: string (optional additional CSS classes)
+   *
+   * Example:
+   * ```svelte
+   * <PlatformFooter {menus} />
+   * ```
+   */
+  interface FooterLink {
+    title: string;
+    url: string;
+  }
+
+  interface FooterMenu {
+    title: string;
+    items: Array<FooterLink>;
+  }
+
+  interface Props {
+    menus?: FooterMenu[];
+    ctaHeading?: string;
+    ctaButtonText?: string;
+    ctaButtonHref?: string;
+    showCta?: boolean;
+    class?: string;
+  }
+
+  let {
+    menus = [],
+    ctaHeading = 'Get your team started today.',
+    ctaButtonText = 'Partnerships',
+    ctaButtonHref = getUrlFromBase('/partnerships'),
+    showCta = true,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<footer class="ai-footer {className}">
+  <div class="ai-maxw-widescreen grid-container">
+    {#if showCta}
+      <section
+        class="usa-section ai-section ai-footer-top"
+        aria-labelledby="ai-footer-cta"
+      >
+        <div
+          class="usa-identifier__identity ai-identifier__identity"
+          aria-label="Agency description"
+        >
+          <p
+            class="usa-identifier__identity-domain ai-identifier__identity-domain"
+          >
+            <a href={getUrlFromBase('/')} aria-label="Home">
+              <Logo
+                aria-label={siteName}
+                isInverted={true}
+                showServiceMark={true}
+                width={68}
+              />
+            </a>
+          </p>
+          <p class="usa-identifier__identity-disclaimer text-normal">
+            An official website of the U.S.
+            <a class="ai-footer-link" href="https://www.gsa.gov/"
+              >General Services Administration</a
+            >
+          </p>
+        </div>
+        <p class="ai-footer-cta__heading" id="ai-footer-cta">
+          {ctaHeading}
+        </p>
+        <div class="ai-footer-cta__buttons">
+          <Button href={ctaButtonHref} theme="inverted" variant="secondary">
+            {ctaButtonText}
+          </Button>
+        </div>
+      </section>
+    {/if}
+
+    {#if menus.length > 0}
+      <section class="usa-section ai-section">
+        <div class="grid-row grid-gap">
+          <div class="tablet:grid-col-12">
+            <nav aria-label="Footer navigation">
+              <div class="grid-row grid-gap">
+                {#each menus as menu}
+                  <div class="tablet:grid-col-4">
+                    <PlatformFooterMenu content={menu} />
+                  </div>
+                {/each}
+              </div>
+            </nav>
+          </div>
+        </div>
+      </section>
+    {/if}
+  </div>
+</footer>
+
+<style>
+  .ai-footer-link {
+    color: var(--ai-footer-color-link-rest);
+  }
+
+  .ai-footer-link:hover {
+    color: var(--ai-footer-color-link-hover);
+  }
+
+  .ai-footer {
+    background: var(--ai-footer-color-background);
+    color: var(--ai-footer-color-text);
+  }
+
+  .ai-footer-cta__heading {
+    margin-block: 0 var(--ai-size-24);
+  }
+
+  .ai-footer-top {
+    border-bottom: 1px solid var(--ai-footer-color-separator);
+  }
+
+  .ai-identifier__identity {
+    padding-bottom: var(--ai-layout-section-spacing-y);
+  }
+
+  .ai-identifier__identity-domain {
+    color: var(--ai-footer-color-text);
+    font-weight: 600;
+  }
+</style>

package/src/components/PlatformFooterMenu.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { v4 as uuidv4 } from 'uuid';
+
+  /**
+   * PlatformFooterMenu Component
+   *
+   * A footer menu component that displays a title and list of links.
+   * Used within the PlatformFooter component to create organized footer navigation.
+   *
+   * Props:
+   * - content: FooterMenu object containing title and items
+   * - class?: string (optional additional CSS classes)
+   *
+   * Example:
+   * ```svelte
+   * <PlatformFooterMenu content={menuData} />
+   * ```
+   */
+  interface FooterLink {
+    title: string;
+    url: string;
+  }
+
+  interface FooterMenu {
+    title: string;
+    items: Array<FooterLink>;
+  }
+
+  interface Props {
+    content: FooterMenu;
+    class?: string;
+  }
+
+  let { content, class: className = '' }: Props = $props();
+
+  // Generate unique ID for accessibility
+  const menuLabel = `platform-footer-${uuidv4()}`;
+</script>
+
+<div class={className}>
+  <p id={menuLabel}>{content.title}</p>
+  <ul class="add-list-reset" aria-labelledby={menuLabel}>
+    {#each content.items as item}
+      <li>
+        <a href={item.url}>{item.title}</a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  p {
+    color: var(--ai-footer-color-text-muted);
+    margin-top: 0;
+    margin-bottom: var(--ai-size-16);
+  }
+
+  ul {
+    margin-bottom: var(--ai-size-32);
+  }
+
+  li {
+    display: block;
+    margin-bottom: var(--ai-size-16);
+  }
+
+  a {
+    color: var(--ai-footer-color-link-rest);
+    display: block;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--ai-footer-color-link-hover);
+  }
+
+  a:is(:focus, :hover, :active) {
+    text-decoration: underline;
+  }
+</style>

package/src/components/index.ts

@@ -12,6 +12,8 @@ export { default as UsaSkipNav } from './UsaSkipNav.svelte';
 export { default as ApiDocSubNavMenu } from './ApiDocSubNavMenu.svelte';
 export { default as ApiDocSubNavList } from './ApiDocSubNavList.svelte';
 export { default as ApiDocSubNavMenuItem } from './ApiDocSubNavMenuItem.svelte';
+export { default as PlatformFooter } from './PlatformFooter.svelte';
+export { default as PlatformFooterMenu } from './PlatformFooterMenu.svelte';
 
 // Icon Components
 export * from './icons/index.js';

package/src/layouts/GlobalAppLayout.astro

@@ -8,7 +8,8 @@ import MobileBottomNav from '../components/MobileBottomNav.svelte';
 import MobileSideMenu from '../components/MobileSideMenu.svelte';
 import Logo from '../components/Logo.svelte';
 import { siteName } from '../constants';
-import { getAppUrls } from '../utils/getAppUrls';
+import { getUrlFromBase } from '../helpers/url.js';
+import { getSecret } from 'astro:env/server';
 
 const {
   componentOptions = {},
@@ -24,7 +25,17 @@ const {
   hideDiscover = true,
 } = Astro.props;
 
-const { api, chat, console, discover } = getAppUrls();
+// Use getSecret directly for better environment variable handling
+const chatUrl = getSecret('CHAT_URL') || getSecret('PUBLIC_CHAT_URL');
+const consoleUrl = getSecret('CONSOLE_URL') || getSecret('PUBLIC_CONSOLE_URL');
+const apiUrl = getSecret('API_URL') || getSecret('PUBLIC_API_URL');
+const discoverUrl =
+  getSecret('DISCOVER_URL') || getSecret('PUBLIC_DISCOVER_URL');
+
+const chat = chatUrl || '#';
+const console = consoleUrl || '#';
+const api = apiUrl || getUrlFromBase('/api/documentation');
+const discover = discoverUrl || '#';
 ---
 
 <BaseLayout title={pageTitle} {gtmID} {description} {openGraphImage}>

package/src/utils/getAppUrls.ts

@@ -66,7 +66,7 @@ function processUrl(url: string | undefined, fallback: string): string {
  *
  * @param envArg - Optional environment object to use instead of `import.meta.env`.
  *                 Useful for testing or when you want to override environment variables.
- *                 If not provided, uses Vite's `import.meta.env`.
+ *                 If not provided, uses `process.env` (server) or `import.meta.env` (client).
  *
  * @returns An object containing processed URLs/paths for each application section:
  *   - `chat`: Chat application URL or path
@@ -102,31 +102,51 @@ function processUrl(url: string | undefined, fallback: string): string {
  * ```
  *
  * @remarks
+ * - Uses `process.env` in server context, `import.meta.env` in client context
+ * - Supports both `CHAT_URL` and `PUBLIC_CHAT_URL` naming conventions
  * - URLs are processed through `processUrl()` which handles both absolute and relative URLs
- * - Relative URLs are processed through `getUrlFromBase()` to create full URLs
  * - Missing environment variables result in fallback values (`#` for most, `/api/documentation` for API)
  * - Warnings are logged in development when environment variables are missing
- * - The function is designed to work with Vite's `import.meta.env` system
+ * - The function is designed to work with both Vite's `import.meta.env` and Node.js `process.env`
+ * - Note: Astro layouts (like GlobalAppLayout.astro) use `getSecret()` directly for better performance
  *
  * @see {@link processUrl} - URL processing logic
  * @see {@link getUrlFromBase} - Base URL resolution
  */
 export function getAppUrls(envArg?: Record<string, string | undefined>) {
-  const env = envArg || import.meta.env;
-  const fallback = '#';
+  // If envArg is provided, use it directly (for testing)
+  if (envArg) {
+    const chatUrl = envArg.CHAT_URL || envArg.PUBLIC_CHAT_URL;
+    const consoleUrl = envArg.CONSOLE_URL || envArg.PUBLIC_CONSOLE_URL;
+    const apiUrl = envArg.API_URL || envArg.PUBLIC_API_URL;
+    const discoverUrl = envArg.DISCOVER_URL || envArg.PUBLIC_DISCOVER_URL;
 
-  const chatUrl = env.PUBLIC_CHAT_URL;
-  const consoleUrl = env.PUBLIC_CONSOLE_URL;
-  const apiUrl = env.PUBLIC_API_URL;
-  const discoverUrl = env.PUBLIC_DISCOVER_URL;
+    warnIfMissing('chat', chatUrl);
+    warnIfMissing('console', consoleUrl);
+    warnIfMissing('api', apiUrl);
+
+    return {
+      chat: processUrl(chatUrl, '#'),
+      console: processUrl(consoleUrl, '#'),
+      api: processUrl(apiUrl, getUrlFromBase('/api/documentation')),
+      discover: processUrl(discoverUrl, '#'),
+    };
+  }
+
+  // Use process.env in server context, import.meta.env in client context
+  const env = typeof window === 'undefined' ? process.env : import.meta.env;
+  const chatUrl = env.CHAT_URL || env.PUBLIC_CHAT_URL;
+  const consoleUrl = env.CONSOLE_URL || env.PUBLIC_CONSOLE_URL;
+  const apiUrl = env.API_URL || env.PUBLIC_API_URL;
+  const discoverUrl = env.DISCOVER_URL || env.PUBLIC_DISCOVER_URL;
 
   warnIfMissing('chat', chatUrl);
   warnIfMissing('console', consoleUrl);
   warnIfMissing('api', apiUrl);
 
   return {
-    chat: processUrl(chatUrl, fallback),
-    console: processUrl(consoleUrl, fallback),
+    chat: processUrl(chatUrl, '#'),
+    console: processUrl(consoleUrl, '#'),
     api: processUrl(apiUrl, getUrlFromBase('/api/documentation')),
     discover: processUrl(discoverUrl, '#'),
   };