@gsa-tts/graymatter-ui 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@turbo/gen": "^2.4.0",
     "@types/node": "^22.13.0",
     "@uswds/compile": "1.2.2",
     "@vitest/coverage-istanbul": "^3.0.7",
@@ -56,13 +55,13 @@
     "vitest": "^3.0.7",
     "vite": "^6.3.5",
     "@gsa-tts/graymatter-eslint": "0.0.1",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1"
+    "@gsa-tts/graymatter-typescript-config": "0.0.1",
+    "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
     "@uswds/uswds": "3.12.0",
-    "astro": "^5.11.0",
+    "astro": "^5.12.8",
     "slugify": "^1.6.6",
     "@gsa-tts/graymatter-style-tokens": "0.3.0"
   },

package/src/component-options/componentOptions.ts

@@ -2,38 +2,52 @@ interface WebsiteComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
-  agencyHeader?: {
+  header?: {
     theme?: 'inverse' | 'default';
   };
 }
 
-interface ApiComponentOptions {
-  usaBanner?: {
-    theme?: 'inverse' | 'default';
-  };
-}
-
-interface ConsoleComponentOptions {
+interface AppComponentOptions {
   usaBanner?: {
     theme?: 'inverse' | 'default';
   };
 }
 
 export interface ComponentOptions {
+  api?: AppComponentOptions;
+  apiSubpage?: WebsiteComponentOptions;
+  chatSubpage?: WebsiteComponentOptions;
+  console?: AppComponentOptions;
+  consoleSubpage?: WebsiteComponentOptions;
+  partnershipsSubpage?: WebsiteComponentOptions;
   website?: WebsiteComponentOptions;
-  api?: ApiComponentOptions;
-  console?: ConsoleComponentOptions;
 }
 
 export const componentOptions: ComponentOptions = {
-  website: {
+  api: {
+    usaBanner: { theme: 'default' },
+  },
+  apiSubpage: {
     usaBanner: { theme: 'inverse' },
-    agencyHeader: { theme: 'inverse' },
+    header: { theme: 'inverse' },
   },
-  api: {
+  chatSubpage: {
     usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
   },
   console: {
     usaBanner: { theme: 'default' },
   },
+  consoleSubpage: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
+  partnershipsSubpage: {
+    usaBanner: { theme: 'default' },
+    header: { theme: 'default' },
+  },
+  website: {
+    usaBanner: { theme: 'inverse' },
+    header: { theme: 'inverse' },
+  },
 };

package/src/components/Button.svelte

@@ -1,13 +1,33 @@
 <script lang="ts">
+  /**
+   * Button Component
+   *
+   * Props:
+   * - variant: 'primary' | 'secondary' | 'unstyled' (default: 'primary')
+   * - theme: 'default' | 'inverted' (default: 'default')
+   * - shape: 'round' | 'square' (default: 'round')
+   * - size: 'small' | 'medium' | 'large' (default: 'medium')
+   * - href?: string (optional - renders as <a> if provided)
+   * - disabled?: boolean (default: false)
+   * - type?: 'button' | 'submit' | 'reset' (default: 'button')
+   *
+   * Examples:
+   * - Round primary button: <Button>Click me</Button>
+   * - Square secondary button: <Button variant="secondary" shape="square">Square</Button>
+   * - Small button (any shape): <Button size="small">Small Button</Button>
+   * - Small square button: <Button variant="secondary" shape="square" size="small">Small Square</Button>
+   * - Inverted square button: <Button theme="inverted" shape="square">Inverted Square</Button>
+   */
   interface Props {
-    variant?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'unstyled';
     theme?: 'default' | 'inverted';
+    shape?: 'round' | 'square';
     href?: string;
     disabled?: boolean;
     size: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
-    children?: string | null;
+    children?: import('svelte').Snippet | null;
     class?: string;
     [key: `data-${string}`]: string;
     [key: `aria-${string}`]: string;
@@ -16,7 +36,8 @@
   let {
     variant = 'primary',
     theme = 'default',
-    href = null,
+    shape = 'round',
+    href = undefined,
     disabled = false,
     onclick,
     children = null,
@@ -41,6 +62,7 @@
       variant === 'primary' ? 'usa-button--primary' : '',
       variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
       variant === 'unstyled' ? 'ai-button--unstyled' : '',
+      shape === 'square' ? 'ai-button--square' : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -60,6 +82,7 @@
 {/if}
 
 <style>
+  /*! purgecss start ignore */
   :root,
   :host {
     /* global button */
@@ -106,6 +129,37 @@
     --ai-button-border-outline-inverted-hover: var(
       --ai-button-border-outline-inverted-rest
     );
+
+    /* square button specific tokens */
+    --ai-button-radius-square: var(--ai-size-4);
+    --ai-button-padding-x-square: var(--ai-size-12);
+    --ai-button-padding-y-square: var(--ai-size-6);
+    --ai-button-height-square: var(--ai-size-40);
+    --ai-button-width-square: 100%;
+
+    /* small square button tokens */
+    --ai-button-padding-x-square-small: var(--ai-size-8);
+    --ai-button-padding-y-square-small: var(--ai-size-4);
+    --ai-button-height-square-small: var(--ai-size-24);
+
+    /* square button color tokens */
+    --ai-button-background-square-primary-rest: var(--ai-color-black);
+    --ai-button-background-square-primary-hover: var(--ai-color-neutral-900);
+    --ai-button-background-square-primary-disabled: var(--ai-color-neutral-200);
+    --ai-button-text-square-primary-rest: var(--ai-color-white);
+    --ai-button-text-square-primary-hover: var(--ai-color-white);
+    --ai-button-text-square-primary-disabled: var(--ai-color-neutral-800);
+
+    --ai-button-background-square-secondary-rest: var(--ai-color-white);
+    --ai-button-background-square-secondary-hover: var(--ai-color-neutral-200);
+    --ai-button-background-square-secondary-disabled: var(
+      --ai-color-neutral-500
+    );
+    --ai-button-text-square-secondary-rest: var(--ai-color-black);
+    --ai-button-text-square-secondary-hover: var(--ai-color-black);
+    --ai-button-text-square-secondary-disabled: var(--ai-color-neutral-900);
+    --ai-button-border-square-secondary-rest: var(--ai-color-black);
+    --ai-button-border-square-secondary-hover: var(--ai-color-black);
   }
 
   .ai-button {
@@ -116,6 +170,7 @@
     padding-inline: var(--ai-button-padding-x);
     padding-block: var(--ai-button-padding-y);
     margin: 0;
+    width: fit-content;
   }
 
   .ai-button:is(:hover, :focus) {
@@ -169,6 +224,108 @@
     border: var(--ai-button-border-inverted-hover);
   }
 
+  /* Square button styles */
+  .ai-button--square {
+    border-radius: var(--ai-button-radius-square);
+    padding-inline: var(--ai-button-padding-x-square);
+    padding-block: var(--ai-button-padding-y-square);
+    height: var(--ai-button-height-square);
+    width: var(--ai-button-width-square);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.0625rem solid var(--ai-color-neutral-300);
+    box-shadow: 0 0.0625rem var(--ai-size-2) 0 rgba(0, 0, 0, 0.1);
+    transition: all var(--ai-transition-ease-fast);
+  }
+
+  /* Small square button specific adjustments */
+  .ai-button--small.ai-button--square {
+    padding-inline: var(--ai-button-padding-x-square-small);
+    padding-block: var(--ai-button-padding-y-square-small);
+    height: var(--ai-button-height-square-small);
+  }
+
+  .ai-button--square:is(:hover, :focus) {
+    border-color: var(--ai-color-neutral-400);
+    box-shadow: 0 var(--ai-size-2) var(--ai-size-4) 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .ai-button--square:focus {
+    outline-offset: var(--ai-size-2);
+  }
+
+  /* Square button variants */
+  .ai-button--square.ai-button--primary {
+    background-color: var(--ai-button-background-square-primary-rest);
+    color: var(--ai-button-text-square-primary-rest);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--primary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-primary-hover);
+    color: var(--ai-button-text-square-primary-hover);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ai-button--square.ai-button--secondary {
+    background-color: var(--ai-button-background-square-secondary-rest);
+    color: var(--ai-button-text-square-secondary-rest);
+    border-color: var(--ai-button-border-square-secondary-rest);
+  }
+
+  .ai-button--square.ai-button--secondary:is(:hover, :focus) {
+    background-color: var(--ai-button-background-square-secondary-hover);
+    color: var(--ai-button-text-square-secondary-hover);
+    border-color: var(--ai-button-border-square-secondary-hover);
+  }
+
+  .ai-button--square.ai-button--outline {
+    background-color: var(--ai-color-white);
+    color: var(--ai-color-neutral-800);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-50);
+    color: var(--ai-color-black);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  /* Square button inverted themes */
+  .ai-button--square.ai-button--inverted {
+    background-color: var(--ai-button-background-inverted-rest);
+    color: var(--ai-button-text-inverted-rest);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--inverted:is(:hover, :focus) {
+    background-color: var(--ai-button-background-inverted-hover);
+    color: var(--ai-button-text-inverted-hover);
+    border-color: transparent;
+  }
+
+  .ai-button--square.ai-button--outline-inverted {
+    background-color: transparent;
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-300);
+  }
+
+  .ai-button--square.ai-button--outline-inverted:is(:hover, :focus) {
+    background-color: var(--ai-color-neutral-900);
+    color: var(--ai-color-white);
+    border-color: var(--ai-color-neutral-400);
+  }
+
+  .ai-menu-buttons {
+    display: flex;
+    gap: var(--ai-size-16);
+  }
+
+  /* Unstyled button styles */
   .ai-button--unstyled {
     background: none;
     color: inherit;
@@ -189,9 +346,9 @@
     text-decoration: underline;
   }
 
-  .ai-menu-buttons {
-    display: flex;
-    gap: var(--ai-size-16);
+  /* Unstyled square button - just center the text, reuse existing unstyled styles */
+  .ai-button--unstyled.ai-button--square {
+    text-align: center;
   }
 
   /* disabled button styles */
@@ -226,4 +383,5 @@
     color: inherit;
     opacity: 0.75;
   }
+  /*! purgecss end ignore */
 </style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -18,6 +18,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    children,
   } = $props();
 </script>
 
@@ -31,6 +32,7 @@
   {chatUrl}
   {consoleUrl}
   {discoverUrl}
+  {children}
 >
   <slot />
 </DesktopSideNav>

package/src/components/GoogleTagManager.astro

@@ -10,7 +10,7 @@ if (Astro.props.gtmID) {
     gtag('js', new Date());
     gtag('config', '${Astro.props.gtmID}');
   </script>
-  <script id="_fed_an_ua_tag" async type="text/javascript" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>`;
+  <script id="_fed_an_ua_tag" async src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>`;
 }
 ---
 

package/src/components/Head.astro

@@ -1,55 +1,88 @@
 ---
-const { title } = Astro.props;
+import { siteName } from '../constants';
+const { title, description, openGraphImage, gtmID } = Astro.props;
 import { Font } from 'astro:assets';
 import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
+import GoogleTagManager from './GoogleTagManager.astro';
+
+// Default values for Open Graph
+const defaultDescription =
+  'Accelerating trustworthy adoption of AI across the federal government. Three powerful AI tools. Industry-leading models. One integrated platform.';
+const defaultOgImage = getUrlFromBase('/common/assets/images/og-preview.webp');
+
+const pageTitle = `${title} | USAi`;
+const ogTitle = title || siteName;
+const ogDescription = description || defaultDescription;
+const ogImage = openGraphImage || defaultOgImage;
+const siteUrl = Astro.site || Astro.url.origin;
+const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
 <meta name="viewport" content="width=device-width" />
+<title>{pageTitle}</title>
+<script is:inline>
+  if ('performance' in window) {
+    performance.mark('usai:documenthead:start');
+  }
+</script>
+{gtmID && <GoogleTagManager {gtmID} />}
+<script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
+></script>
+<Font cssVariable="--ai-font-family-sans" preload />
+<style>
+  body {
+    font-family: var(--ai-font-family-sans);
+  }
+</style>
+<script>
+  import '../../static/uswds/js/uswds.js';
+</script>
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:title" content={ogTitle} />
+<meta property="og:description" content={ogDescription} />
+<meta property="og:image" content={ogImage} />
+<meta property="og:site_name" content={ogTitle} />
+
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={canonicalUrl} />
+<meta property="twitter:title" content={ogTitle} />
+<meta property="twitter:description" content={ogDescription} />
+<meta property="twitter:image" content={ogImage} />
+
+<!-- Additional meta tags -->
+<meta name="description" content={ogDescription} />
+<link rel="canonical" href={canonicalUrl} />
+
 <link
   rel="icon"
   sizes="any"
-  href=`${getUrlFromBase('/assets/images/favicon-light.ico')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon.ico')}`
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="icon"
   type="image/svg+xml"
-  href=`${getUrlFromBase('/assets/images/favicon-light.svg')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-light.svg')}`
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="icon"
   sizes="any"
-  href=`${getUrlFromBase('/assets/images/favicon-dark.ico')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.ico')}`
   media="(prefers-color-scheme: dark)"
 />
 <link
   rel="icon"
   type="image/svg+xml"
-  href=`${getUrlFromBase('/assets/images/favicon-dark.svg')}`
+  href=`${getUrlFromBase('/common/assets/images/favicon-dark.svg')}`
   media="(prefers-color-scheme: dark)"
 />
-<meta name="generator" content={Astro.generator} />
-<title>{title}</title>
-<script is:inline>
-  if ('performance' in window) {
-    performance.mark('gsa:documenthead:start');
-  }
-</script>
-<script is:inline src=`${getUrlFromBase('uswds/js/uswds-init.min.js')}`
-></script>
-<Font cssVariable="--ai-font-family-sans" preload />
-<style>
-  body {
-    font-family: var(--ai-font-family-sans);
-  }
-</style>
-<script>
-  import '../../static/uswds/js/uswds.js';
-</script>
 <!-- This belongs at the very bottom of the head -->
 <script is:inline>
   if ('performance' in window) {
-    performance.mark('gsa:documenthead:end');
+    performance.mark('usai:documenthead:end');
   }
 </script>

package/src/components/icons/ExclamationIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    class?: string;
+    size?: number;
+  }
+
+  let { class: className = '', size = 32 }: Props = $props();
+</script>
+
+<svg
+  class={className}
+  width={size}
+  height={size}
+  viewBox="0 0 32 33"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 16.5028C3 9.32311 8.8203 3.50281 16 3.50281C23.1797 3.50281 29 9.32311 29 16.5028C29 23.6825 23.1797 29.5028 16 29.5028C8.8203 29.5028 3 23.6825 3 16.5028ZM16 11.5028C16.5523 11.5028 17 11.9505 17 12.5028V17.5028C17 18.0551 16.5523 18.5028 16 18.5028C15.4477 18.5028 15 18.0551 15 17.5028V12.5028C15 11.9505 15.4477 11.5028 16 11.5028ZM16 22.5028C16.5523 22.5028 17 22.0551 17 21.5028C17 20.9505 16.5523 20.5028 16 20.5028C15.4477 20.5028 15 20.9505 15 21.5028C15 22.0551 15.4477 22.5028 16 22.5028Z"
+    fill="currentColor"
+  />
+</svg>

package/src/components/icons/index.ts

@@ -4,3 +4,4 @@ export { default as ConsoleIcon } from './ConsoleIcon.svelte';
 export { default as ApiIcon } from './ApiIcon.svelte';
 export { default as MenuIcon } from './MenuIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
+export { default as ExclamationIcon } from './ExclamationIcon.svelte';

package/src/helpers/url.ts

@@ -1,13 +1,22 @@
 import { normalizeTrailingSlash } from './string-formatters.js';
 
 export const getBaseUrl = () => {
-  const { BASEURL } = process.env;
-
-  if (!BASEURL) {
+  // Check if we're in a browser environment
+  if (typeof window !== 'undefined') {
     return '/';
   }
 
-  return normalizeTrailingSlash(BASEURL);
+  // Node.js environment
+  if (typeof process !== 'undefined' && process.env) {
+    const { BASEURL } = process.env;
+    if (!BASEURL) {
+      return '/';
+    }
+    return normalizeTrailingSlash(BASEURL);
+  }
+
+  // Fallback
+  return '/';
 };
 
 export const getUrlFromBase = (assetPath?: string) => {

package/src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
 import UsaSkipNav from '../components/UsaSkipNav.svelte';
 import { getPageTitle } from '../helpers/meta';
 import GoogleTagManager from '../components/GoogleTagManager.astro';
+const { description, openGraphImage, gtmID } = Astro.props;
 
 const title = getPageTitle(Astro);
 ---
@@ -12,10 +13,7 @@ const title = getPageTitle(Astro);
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <Head title={title} />
-    <slot name="analytics">
-      <GoogleTagManager gtmID={Astro.props.gtmID} />
-    </slot>
+    <Head {title} {gtmID} {openGraphImage} {description} />
   </head>
   <body>
     <slot name="skip-nav">

package/src/layouts/GlobalAppLayout.astro

@@ -19,10 +19,12 @@ const {
   logoLinkUrl,
   logoLinkLabel,
   title: pageTitle,
+  description,
+  openGraphImage,
 } = Astro.props;
 ---
 
-<BaseLayout title={pageTitle} gtmID={gtmID}>
+<BaseLayout title={pageTitle} {gtmID} {description} {openGraphImage}>
   <div class="app">
     <!-- Desktop Navigation -->
     <div class="layout-container">

package/src/styles/base/theme.css

@@ -14,7 +14,12 @@ body {
 }
 
 *:focus {
-  outline-color: var(--ai-color-blue-600) !important;
+  outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+  outline-offset: var(--ai-size-4);
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
 }
 
 a:focus {

package/src/utils/getAppUrls.ts

@@ -1,9 +1,32 @@
+import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
+
 function warnIfMissing(name: string, value: string | undefined) {
   if (!value) {
     console.warn(`[getAppUrls] Environment variable for ${name} is missing!`);
   }
 }
 
+function isAbsoluteUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function processUrl(url: string | undefined, fallback: string): string {
+  if (!url) {
+    return fallback;
+  }
+
+  if (isAbsoluteUrl(url)) {
+    return url;
+  }
+
+  return getUrlFromBase(url);
+}
+
 export function getAppUrls(envArg?: Record<string, string | undefined>) {
   const env = envArg || import.meta.env;
   const fallback = '#';
@@ -18,9 +41,9 @@ export function getAppUrls(envArg?: Record<string, string | undefined>) {
   warnIfMissing('api', apiUrl);
 
   return {
-    chat: chatUrl || fallback,
-    console: consoleUrl || fallback,
-    api: apiUrl || '/api',
-    discover: discoverUrl || '/discover',
+    chat: processUrl(chatUrl, fallback),
+    console: processUrl(consoleUrl, fallback),
+    api: processUrl(apiUrl, getUrlFromBase('/api/documentation')),
+    discover: processUrl(discoverUrl, '#'),
   };
 }