@gsa-tts/graymatter-ui 0.5.1 → 0.6.0

package/package.json

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

package/src/components/Button.svelte

@@ -10,6 +10,7 @@
    * - href?: string (optional - renders as <a> if provided)
    * - disabled?: boolean (default: false)
    * - type?: 'button' | 'submit' | 'reset' (default: 'button')
+   * - hasBoxShadow?: boolean (default: true) - Whether to show box shadow on square buttons
    *
    * Examples:
    * - Round primary button: <Button>Click me</Button>
@@ -17,6 +18,7 @@
    * - 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>
+   * - Button without shadow: <Button shape="square" hasBoxShadow={false}>No Shadow</Button>
    */
   interface Props {
     variant?: 'primary' | 'secondary' | 'unstyled';
@@ -27,6 +29,7 @@
     size?: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';
     onclick?: (event: MouseEvent) => void;
+    hasBoxShadow?: boolean;
     class?: string;
     children?: import('svelte').Snippet;
     [key: `data-${string}`]: string;
@@ -42,6 +45,7 @@
     onclick,
     size = 'medium',
     type = 'button',
+    hasBoxShadow = true,
     class: className = '',
     children,
     // eslint-disable-next-line svelte/valid-compile
@@ -63,6 +67,7 @@
       variant === 'secondary' ? 'usa-button--outline ai-button--outline' : '',
       variant === 'unstyled' ? 'ai-button--unstyled' : '',
       shape === 'square' ? 'ai-button--square' : '',
+      !hasBoxShadow ? 'ai-button--no-shadow' : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -387,5 +392,14 @@
     color: inherit;
     opacity: 0.75;
   }
+
+  /* No shadow modifier */
+  .ai-button--no-shadow {
+    box-shadow: none !important;
+  }
+
+  .ai-button--no-shadow:is(:hover, :focus) {
+    box-shadow: none !important;
+  }
   /*! purgecss end ignore */
 </style>

package/src/components/Modal.svelte

@@ -0,0 +1,374 @@
+<script lang="ts">
+  /**
+   * Modal Component
+   *
+   * A flexible modal component that can be used for dialogs, confirmations, and custom overlays.
+   *
+   * Props:
+   * - open: boolean - Controls whether the modal is visible
+   * - onClose?: () => void - Callback when modal should close (backdrop click or ESC key)
+   * - closeOnBackdropClick?: boolean - Whether clicking backdrop closes modal (default: true)
+   * - closeOnEscape?: boolean - Whether ESC key closes modal (default: true)
+   * - size?: 'small' | 'medium' | 'large' - Modal width (default: 'medium')
+   * - showCloseButton?: boolean - Whether to show X close button (default: true)
+   * - centered?: boolean - Center content text (default: true)
+   * - icon?: Snippet - Optional icon to display at top
+   * - title?: string - Optional title text
+   * - content?: string[] - Array of paragraph texts to display
+   * - buttons?: Array<ButtonConfig> - Optional buttons to display
+   * - children?: Snippet - Custom content (overrides title/content/buttons if provided)
+   * - class?: string - Additional CSS classes for the modal
+   *
+   * Example (Simple):
+   * ```svelte
+   * <Modal
+   *   open={isOpen}
+   *   title="Delete Item"
+   *   content={["This action cannot be undone.", "Are you sure?"]}
+   *   buttons={[
+   *     { text: 'Delete', variant: 'primary', onclick: handleDelete },
+   *     { text: 'Cancel', variant: 'secondary', onclick: () => isOpen = false }
+   *   ]}
+   * />
+   * ```
+   *
+   * Example (Custom):
+   * ```svelte
+   * <Modal open={isOpen} onClose={() => isOpen = false}>
+   *   <h2>Custom Content</h2>
+   *   <p>Your custom HTML here</p>
+   * </Modal>
+   * ```
+   */
+  import { CloseIcon } from './icons/index.js';
+  import Button from './Button.svelte';
+
+  interface ButtonConfig {
+    text: string;
+    variant?: 'primary' | 'secondary' | 'unstyled';
+    onclick: (event: MouseEvent) => void;
+    class?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    open: boolean;
+    onClose?: () => void;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    showCloseButton?: boolean;
+    centered?: boolean;
+    icon?: import('svelte').Snippet;
+    title?: string;
+    content?: string[];
+    buttons?: ButtonConfig[];
+    children?: import('svelte').Snippet;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(),
+    onClose,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    size = 'medium',
+    showCloseButton = true,
+    centered = true,
+    icon,
+    title,
+    content,
+    buttons,
+    children,
+    class: className = '',
+  }: Props = $props();
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      open = false;
+      onClose?.();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (closeOnEscape && event.key === 'Escape') {
+      open = false;
+      onClose?.();
+    }
+  }
+
+  function handleCloseClick() {
+    open = false;
+    onClose?.();
+  }
+
+  // Add/remove body scroll lock when modal is open
+  $effect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div
+    class="ai-modal-backdrop"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      class="ai-modal ai-modal--{size} {className}"
+      class:ai-modal--centered={centered}
+      role="dialog"
+      aria-modal="true"
+    >
+      {#if showCloseButton}
+        <button
+          class="ai-modal__close"
+          onclick={handleCloseClick}
+          aria-label="Close modal"
+          type="button"
+        >
+          <CloseIcon />
+        </button>
+      {/if}
+      <div class="ai-modal__content">
+        {#if children}
+          {@render children()}
+        {:else}
+          <div class="ai-modal__structured-content">
+            {#if icon}
+              <div class="ai-modal__icon-container">
+                {@render icon()}
+              </div>
+            {/if}
+
+            {#if title}
+              <h2 class="ai-modal__title">
+                {title}
+              </h2>
+            {/if}
+
+            {#if content && content.length > 0}
+              <div class="ai-modal__text">
+                {#each content as paragraph}
+                  <p class="ai-modal__paragraph">
+                    {paragraph}
+                  </p>
+                {/each}
+              </div>
+            {/if}
+
+            {#if buttons && buttons.length > 0}
+              <div class="ai-modal__actions">
+                {#each buttons as button}
+                  <Button
+                    variant={button.variant || 'primary'}
+                    shape="square"
+                    onclick={button.onclick}
+                    disabled={button.disabled}
+                    hasBoxShadow={false}
+                    class="ai-modal__button {button.class || ''}"
+                  >
+                    {button.text}
+                  </Button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /*! purgecss start ignore */
+  :root,
+  :host {
+    --ai-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+    --ai-modal-bg: var(--ai-color-white);
+    --ai-modal-border-radius: 1.0625rem;
+    --ai-modal-border: 0.0625rem solid var(--ai-color-steel-200);
+    --ai-modal-padding: 2rem;
+    --ai-modal-gap: 1.5rem;
+    --ai-modal-content-width: 22.4375rem;
+    --ai-modal-width: 26.4375rem; /* 22.4375rem content + 2rem padding * 2 */
+    --ai-modal-max-width-small: 25rem;
+    --ai-modal-max-width-large: 50rem;
+    --ai-modal-shadow: 0 0.1875rem 1.25rem 0.0625rem rgba(50, 54, 61, 0.15);
+    --ai-modal-close-size: var(--ai-size-32, 2rem);
+    --ai-modal-close-top: var(--ai-size-16, 1rem);
+    --ai-modal-close-right: var(--ai-size-16, 1rem);
+
+    /* Typography tokens */
+    --ai-modal-title-size: var(--ai-size-20, 1.25rem);
+    --ai-modal-title-weight: var(--ai-font-weight-semibold, 600);
+    --ai-modal-text-size: 1rem;
+    --ai-modal-text-line-height: 1.3;
+  }
+
+  .ai-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--ai-modal-backdrop-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-16);
+    z-index: 9999;
+    animation: fadeIn 0.2s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .ai-modal {
+    position: relative;
+    display: inline-flex;
+    padding: var(--ai-modal-padding);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-modal-gap);
+    background-color: var(--ai-modal-bg);
+    border-radius: var(--ai-modal-border-radius);
+    border: var(--ai-modal-border);
+    box-shadow: var(--ai-modal-shadow);
+    max-height: calc(100vh - var(--ai-size-32, 2rem));
+    overflow-y: auto;
+    animation: slideUp 0.3s ease-out;
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(var(--ai-size-32));
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .ai-modal--small {
+    max-width: var(--ai-modal-max-width-small);
+    width: 100%;
+  }
+
+  .ai-modal--medium {
+    width: var(--ai-modal-width);
+  }
+
+  .ai-modal--large {
+    max-width: var(--ai-modal-max-width-large);
+    width: 100%;
+  }
+
+  .ai-modal__close {
+    position: absolute;
+    top: var(--ai-modal-close-top);
+    right: var(--ai-modal-close-right);
+    width: var(--ai-modal-close-size);
+    height: var(--ai-modal-close-size);
+    padding: var(--ai-size-6);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ai-size-4);
+    transition: background-color 0.2s ease;
+    color: var(--ai-color-neutral-600);
+  }
+
+  .ai-modal__close:hover {
+    background-color: var(--ai-color-neutral-100);
+    color: var(--ai-color-black);
+  }
+
+  .ai-modal__close:focus {
+    outline: 0.125rem solid var(--ai-color-black);
+    outline-offset: 0.125rem;
+  }
+
+  .ai-modal__content {
+    width: 100%;
+  }
+
+  .ai-modal--centered .ai-modal__content {
+    text-align: center;
+  }
+
+  /* Structured content layout */
+  .ai-modal__structured-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-modal-gap);
+  }
+
+  .ai-modal--centered .ai-modal__structured-content {
+    align-items: center;
+    text-align: center;
+  }
+
+  /* Icon container - just for layout, no styling */
+  .ai-modal__icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* Title */
+  .ai-modal__title {
+    font-size: var(--ai-modal-title-size);
+    font-weight: var(--ai-modal-title-weight);
+    margin: 0;
+    color: var(--ai-color-black, #000);
+    line-height: 1.3;
+  }
+
+  /* Text content */
+  .ai-modal__text {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--ai-modal-gap) / 2);
+    width: 100%;
+  }
+
+  .ai-modal__paragraph {
+    font-size: var(--ai-modal-text-size);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--ai-modal-text-line-height);
+    margin: 0;
+    color: var(--ai-color-black);
+  }
+
+  /* Actions */
+  .ai-modal__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ai-size-12, 0.75rem);
+    width: 100%;
+    margin-top: calc(var(--ai-modal-gap) / 2);
+  }
+
+  .ai-modal__button {
+    width: 100%;
+  }
+  /*! purgecss end ignore */
+</style>

package/src/components/index.ts

@@ -14,6 +14,7 @@ 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';
+export { default as Modal } from './Modal.svelte';
 
 // Icon Components
 export * from './icons/index.js';