@gsa-tts/graymatter-ui 1.3.0 → 2.0.0

package/src/components/Button.webcomponent.svelte

@@ -1,58 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-button',
-    props: {
-      variant: { reflect: true, type: 'String', attribute: 'variant' },
-      theme: { reflect: true, type: 'String', attribute: 'theme' },
-      href: { reflect: true, type: 'String', attribute: 'href' },
-      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
-      size: { reflect: true, type: 'String', attribute: 'size' },
-      type: { reflect: true, type: 'String', attribute: 'type' },
-    },
-  }}
-/>
-
-<script lang="ts">
-  import Button from './Button.svelte';
-
-  // Props for the web component
-  interface Props {
-    variant?: 'primary' | 'secondary' | 'unstyled';
-    theme?: 'default' | 'inverted';
-    href?: string;
-    disabled?: boolean;
-    size?: 'small' | 'medium' | 'large';
-    type?: 'button' | 'submit' | 'reset';
-    onclick?: (event: MouseEvent) => void;
-    class?: string;
-    children?: import('svelte').Snippet;
-    [key: `data-${string}`]: string;
-    [key: `aria-${string}`]: string;
-  }
-
-  let {
-    variant = 'primary',
-    theme = 'default',
-    href = undefined,
-    disabled = false,
-    size = 'medium',
-    type = 'button',
-    onclick,
-    class: className = '',
-    children,
-    ...props
-  }: Props = $props();
-</script>
-
-<Button
-  {variant}
-  {theme}
-  {href}
-  {disabled}
-  {size}
-  {type}
-  {onclick}
-  {children}
-  class={className}
-  {...props}
-></Button>

package/src/components/DesktopHeader.webcomponent.svelte

@@ -1,21 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-desktop-header',
-    props: {
-      customHeaderText: {
-        reflect: true,
-        type: 'String',
-        attribute: 'custom-header-text',
-      },
-    },
-  }}
-/>
-
-<script lang="ts">
-  import DesktopHeader from './DesktopHeader.svelte';
-
-  // Props for the web component
-  let { customHeaderText = '' } = $props();
-</script>
-
-<DesktopHeader {customHeaderText} />

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -1,42 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-desktop-side-nav',
-  }}
-/>
-
-<script lang="ts">
-  import DesktopSideNav from './DesktopSideNav.svelte';
-
-  // Props for the web component
-  let {
-    ssrSelectedItem,
-    controlledSelectedItem,
-    onNavToggle,
-    onNavItemClick,
-    showAppIcons = true,
-    hideDiscover = true,
-    profileMenuData,
-    apiUrl,
-    chatUrl,
-    consoleUrl,
-    discoverUrl,
-    supplementalMenuData,
-    children,
-  } = $props();
-</script>
-
-<DesktopSideNav
-  {ssrSelectedItem}
-  {controlledSelectedItem}
-  {onNavToggle}
-  {onNavItemClick}
-  {showAppIcons}
-  {hideDiscover}
-  {profileMenuData}
-  {apiUrl}
-  {chatUrl}
-  {consoleUrl}
-  {discoverUrl}
-  {supplementalMenuData}
-  {children}
-/>

package/src/components/Logo.webcomponent.svelte

@@ -1,29 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-logo',
-    props: {
-      isInverted: { reflect: true, type: 'Boolean', attribute: 'is-inverted' },
-      width: { reflect: true, type: 'Number', attribute: 'width' },
-      height: { reflect: true, type: 'Number', attribute: 'height' },
-      showServiceMark: {
-        reflect: true,
-        type: 'Boolean',
-        attribute: 'show-service-mark',
-      },
-    },
-  }}
-/>
-
-<script lang="ts">
-  import Logo from './Logo.svelte';
-
-  let {
-    isInverted = false,
-    width = undefined,
-    height = undefined,
-    showServiceMark = false,
-    ...props
-  } = $props();
-</script>
-
-<Logo {isInverted} {width} {height} {showServiceMark} {...props} />

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -1,32 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-mobile-bottom-nav',
-  }}
-/>
-
-<script lang="ts">
-  import MobileBottomNav from './MobileBottomNav.svelte';
-
-  // Props for the web component
-  let {
-    onNavItemClick,
-    showAppIcons = true,
-    hideDiscover = true,
-    apiUrl,
-    chatUrl,
-    consoleUrl,
-    discoverUrl,
-    controlledSelectedItem,
-  } = $props();
-</script>
-
-<MobileBottomNav
-  {onNavItemClick}
-  {showAppIcons}
-  {hideDiscover}
-  {apiUrl}
-  {chatUrl}
-  {consoleUrl}
-  {discoverUrl}
-  {controlledSelectedItem}
-/>

package/src/components/MobileSideMenu.webcomponent.svelte

@@ -1,13 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-mobile-side-menu',
-  }}
-/>
-
-<script lang="ts">
-  import MobileSideMenu from './MobileSideMenu.svelte';
-
-  let { logoLinkUrl, logoLinkLabel, children } = $props();
-</script>
-
-<MobileSideMenu {logoLinkUrl} {logoLinkLabel} {children} />

package/src/components/MobileTopNav.webcomponent.svelte

@@ -1,20 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'graymatter-mobile-top-nav',
-  }}
-/>
-
-<script lang="ts">
-  import MobileTopNav from './MobileTopNav.svelte';
-
-  // Props for the web component
-  let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
-    $props();
-</script>
-
-<MobileTopNav
-  {profileMenuData}
-  {logoLinkUrl}
-  {logoLinkLabel}
-  {supplementalMenuData}
-/>

package/src/index.ts

@@ -1,19 +0,0 @@
-import Button from './components/Button.webcomponent.svelte';
-import DesktopHeader from './components/DesktopHeader.webcomponent.svelte';
-import DesktopSideNav from './components/DesktopSideNav.webcomponent.svelte';
-import Logo from './components/Logo.webcomponent.svelte';
-import MobileBottomNav from './components/MobileBottomNav.webcomponent.svelte';
-import MobileSideMenu from './components/MobileSideMenu.webcomponent.svelte';
-import MobileTopNav from './components/MobileTopNav.webcomponent.svelte';
-
-export * from './utils/navigationControl';
-
-export {
-  Button,
-  DesktopHeader,
-  DesktopSideNav,
-  Logo,
-  MobileBottomNav,
-  MobileSideMenu,
-  MobileTopNav,
-};

package/src/layouts/BaseLayout.astro

@@ -1,37 +0,0 @@
----
-import '../styles/base/global.css';
-import Head from './Head.astro';
-import UsaSkipNav from '../components/UsaSkipNav.svelte';
-const { title, description, openGraphImage, gtmID } = Astro.props;
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <Head {title} {gtmID} {openGraphImage} {description} />
-  </head>
-  <body>
-    <slot name="skip-nav">
-      <UsaSkipNav mainContentId="#main-content" />
-    </slot>
-    <slot />
-  </body>
-</html>
-
-<script>
-  // Enhanced mobile focus handling - centralized for all layouts
-  if (typeof window !== 'undefined') {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Tab') {
-        document.body.classList.add('keyboard-user');
-        document.body.classList.remove('touch-user');
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-
-    // Initial state - assume touch user until Tab is pressed
-    document.body.classList.add('touch-user');
-  }
-</script>

package/src/layouts/DocsLayout.astro

@@ -1,342 +0,0 @@
----
-import GlobalAppLayout from './GlobalAppLayout.astro';
-import ApiDocSubNavMenu from '../components/ApiDocSubNavMenu.svelte';
-import NavigationInitializer from '../components/NavigationInitializer.svelte';
-import { getCollection } from 'astro:content';
-import { render } from 'astro:content';
-import { generateApiDocumentationNavData } from '../utils/generateApiNavData.js';
-
-const gtmID = import.meta.env.PUBLIC_GTM_ID;
-const {
-  navigationItem = 'api',
-  title,
-  description,
-  openGraphImage,
-  showAppIcons = false,
-  disableCodeCopyButtons = false,
-  profileMenuData = null,
-  supplementalMenuData = undefined,
-  hideDiscover = true,
-  contentCustomization = undefined,
-  logoLinkUrl,
-  logoLinkLabel,
-} = Astro.props;
-
-// Handle ALL logic internally
-// Get collection
-const rawPosts = await getCollection('apiDocumentation');
-
-// Sort by sortOrder
-const sortedPosts = [...rawPosts].sort(
-  (a, b) => a.data.sortOrder - b.data.sortOrder
-);
-
-// Render posts
-const postItems = await Promise.all(
-  sortedPosts.map(async post => {
-    const { Content } = await render(post);
-    return {
-      ...post,
-      ContentComponent: Content,
-    };
-  })
-);
-
-// Generate navigation data
-const apiDocsMetadata = sortedPosts.map(doc => ({
-  id: doc.id,
-  slug: doc.id,
-  title: doc.data.title,
-  description: doc.data.description,
-  sortOrder: doc.data.sortOrder,
-  content: doc.body || '',
-}));
-
-const subNavData = generateApiDocumentationNavData(apiDocsMetadata);
----
-
-<GlobalAppLayout
-  ssrSelectedItem={navigationItem}
-  gtmID={gtmID}
-  {showAppIcons}
-  {profileMenuData}
-  {logoLinkUrl}
-  {logoLinkLabel}
-  title={title}
-  {description}
-  {openGraphImage}
-  {hideDiscover}
-  {supplementalMenuData}
->
-  <!-- Initialize navigation state and auto-expand submenu for section pages -->
-  <NavigationInitializer
-    item={navigationItem}
-    autoExpand={true}
-    client:only="svelte"
-  />
-
-  <!-- Documentation Sub Navigation -->
-  {
-    subNavData && (
-      <ApiDocSubNavMenu
-        data={subNavData}
-        selectedId={null}
-        slot="sub-nav"
-        client:load
-      />
-    )
-  }
-
-  <!-- Main content area -->
-  <div class="docs-content">
-    <article class="article-body">
-      <h1 class="page-title">API Documentation</h1>
-
-      <!-- Render postItems -->
-      {
-        postItems &&
-          postItems.map((post: any) => (
-            <div>
-              <h2 class="title" id={post.id}>
-                {post.data.title}
-              </h2>
-              <post.ContentComponent />
-            </div>
-          ))
-      }
-    </article>
-  </div>
-</GlobalAppLayout>
-
-<!-- Add copy button to all code blocks -->
-{
-  !disableCodeCopyButtons && (
-    <script>
-      import {setupCopyButtons} from '../utils/copyButtonScript.js';
-      setupCopyButtons();
-    </script>
-  )
-}
-<!-- Client-side content replacement -->
-<script is:inline define:vars={{ contentCustomization }}>
-  if (!contentCustomization) {
-    // no customization provided
-  } else {
-    const customization = contentCustomization;
-    function escapeHtml(input) {
-      return String(input)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-    }
-    function linkify(input) {
-      // Handle array input - convert to paragraphs
-      if (Array.isArray(input)) {
-        return input
-          .map(paragraph => {
-            const processed = linkifySingle(String(paragraph));
-            return `<p>${processed}</p>`;
-          })
-          .join('');
-      }
-
-      // Handle string input
-      return linkifySingle(String(input));
-    }
-
-    function linkifySingle(input) {
-      // Preserve markdown links [label](url) using placeholders
-      const placeholders = [];
-      const withPlaceholders = input.replace(
-        /\[([^\]]+)\]\(((https?:\/\/|www\.)[^\s)]+)\)/gi,
-        (m, label, href) => {
-          const safeLabel = escapeHtml(label);
-          const normalizedHref = href.startsWith('http')
-            ? href
-            : `https://${href}`;
-          const safeHref = escapeHtml(normalizedHref);
-          const html = `<a href="${safeHref}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`;
-          const token = `__LINK_PLACEHOLDER_${placeholders.length}__`;
-          placeholders.push(html);
-          return token;
-        }
-      );
-
-      // Escape remaining content
-      const escaped = escapeHtml(withPlaceholders);
-
-      // Linkify emails
-      const withEmails = escaped.replace(
-        /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi,
-        email => {
-          return `<a href="mailto:${email}">${email}</a>`;
-        }
-      );
-      // Linkify bare URLs (http/https and www.)
-      const urlRegex = /\b((https?:\/\/)[^\s)]+|www\.[^\s)]+)\b/gi;
-      const withUrls = withEmails.replace(urlRegex, raw => {
-        const href = raw.startsWith('http') ? raw : `https://${raw}`;
-        return `<a href="${href}" target="_blank" rel="noopener noreferrer">${raw}</a>`;
-      });
-
-      // Restore placeholders
-      return withUrls.replace(
-        /__LINK_PLACEHOLDER_(\d+)__/g,
-        (m, idx) => placeholders[Number(idx)]
-      );
-    }
-
-    function replaceContent() {
-      // For endpoints
-      if (customization.endpointsMessage) {
-        const heading = document.getElementById('endpoints');
-        if (heading) {
-          const section = heading.closest('div');
-          if (section) {
-            const paragraphs = section.querySelectorAll('p');
-            paragraphs.forEach(p => {
-              if (
-                p.textContent?.includes(
-                  'API endpoints will be available when you login'
-                )
-              ) {
-                p.innerHTML = linkify(customization.endpointsMessage);
-              }
-            });
-          }
-        }
-      }
-
-      // For getting-started
-      if (customization.authMessage) {
-        const heading = document.getElementById('getting-started');
-        if (heading) {
-          const section = heading.closest('div');
-          if (section) {
-            const paragraphs = section.querySelectorAll('p');
-            paragraphs.forEach(p => {
-              const text = p.textContent || '';
-              if (text.includes('All API requests require an API key')) {
-                const authPattern =
-                  /All API requests require an API key\. Upon authentication,.*?available\./s;
-                if (authPattern.test(text)) {
-                  p.innerHTML = linkify(customization.authMessage);
-                }
-              }
-            });
-          }
-        }
-      }
-    }
-
-    // Run synchronously before paint
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', replaceContent, {
-        once: true,
-      });
-    } else {
-      replaceContent();
-    }
-    setTimeout(replaceContent, 0);
-  }
-</script>
-
-<style>
-  body {
-    color: var(--ai-color-steel-900);
-    line-height: var(--ai-font-lineheight-prose);
-  }
-
-  :is(h1, h2, h3, h4, h5, h6) {
-    color: var(--ai-color-black);
-  }
-
-  .docs-content {
-    padding: 0;
-  }
-
-  .article-body {
-    max-width: 84ch;
-  }
-
-  :global(.ai-copy-btn) {
-    width: var(--ai-size-32);
-    height: var(--ai-size-32);
-    position: absolute;
-    top: var(--ai-size-8);
-    right: var(--ai-size-8);
-    background: none;
-    border-radius: var(--ai-size-4);
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    box-shadow: 0 var(--ai-size-2) var(--ai-size-8) rgba(0, 0, 0, 0.08);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition:
-      background var(--ai-duration-fast),
-      border var(--ai-duration-fast);
-    z-index: var(--ai-layer-2);
-    overflow: hidden;
-  }
-  :global(.ai-copy-btn:hover),
-  :global(.ai-copy-btn:focus) {
-    background: var(--ai-color-steel-800);
-  }
-  :global(.ai-copy-btn svg) {
-    display: block;
-    position: relative;
-  }
-  :global(.ai-code-block-wrapper) {
-    position: relative;
-    display: block;
-  }
-  :global(pre) {
-    font-family: var(--ai-font-family-monospace);
-    font-size: var(--ai-size-13);
-    font-weight: var(--ai-font-weight-normal);
-  }
-
-  /* Table styling - only for documentation pages */
-  :global(.docs-content table) {
-    width: 100%;
-    border-collapse: collapse;
-    margin: var(--ai-size-24) 0;
-  }
-
-  :global(.docs-content table th),
-  :global(.docs-content table td) {
-    padding: var(--ai-size-12) var(--ai-size-16);
-    text-align: left;
-    border-bottom: 1px solid var(--ai-color-neutral-200);
-  }
-
-  :global(.docs-content table th) {
-    background-color: var(--ai-color-neutral-50);
-    font-weight: var(--ai-font-weight-semibold);
-    color: var(--ai-color-black);
-  }
-
-  :global(.docs-content table tbody tr:hover) {
-    background-color: var(--ai-color-neutral-25);
-  }
-
-  :global(.docs-content table tbody tr:last-child td) {
-    border-bottom: none;
-  }
-
-  @media (--ai-size-breakpoint-tablet) {
-    .docs-content {
-      padding: 2rem 0;
-    }
-  }
-
-  @media (--ai-size-breakpoint-desktop) {
-    .docs-content {
-      padding: 2rem;
-    }
-  }
-</style>