@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Button-CTA/__tests__/ButtonCTA.tokens.test.ts

@@ -1,89 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify Button-CTA tokens are properly defined and accessible
- */
-/**
- * Button-CTA Component Tokens Tests
- * 
- * Validates that Button-CTA component tokens are properly defined and accessible.
- * 
- * Stemma System Naming: [Family]-[Type] = Button-CTA
- * Component Type: Standalone (no behavioral variants)
- */
-
-import { ButtonCTATokens, getButtonCTAMinWidth } from '../Button-CTA.tokens';
-
-describe('Button-CTA Component Tokens', () => {
-  describe('minWidth tokens', () => {
-    it('should define minWidth tokens for all size variants', () => {
-      expect(ButtonCTATokens.minWidth.small).toBeDefined();
-      expect(ButtonCTATokens.minWidth.medium).toBeDefined();
-      expect(ButtonCTATokens.minWidth.large).toBeDefined();
-    });
-
-    it('should have correct minWidth values', () => {
-      expect(ButtonCTATokens.minWidth.small).toBe(56);
-      expect(ButtonCTATokens.minWidth.medium).toBe(72);
-      expect(ButtonCTATokens.minWidth.large).toBe(80);
-    });
-
-    it('should align with 8px baseline grid', () => {
-      const baselineGrid = 8;
-      
-      // Small: 7 × 8 = 56
-      expect(ButtonCTATokens.minWidth.small % baselineGrid).toBe(0);
-      expect(ButtonCTATokens.minWidth.small / baselineGrid).toBe(7);
-      
-      // Medium: 9 × 8 = 72
-      expect(ButtonCTATokens.minWidth.medium % baselineGrid).toBe(0);
-      expect(ButtonCTATokens.minWidth.medium / baselineGrid).toBe(9);
-      
-      // Large: 10 × 8 = 80
-      expect(ButtonCTATokens.minWidth.large % baselineGrid).toBe(0);
-      expect(ButtonCTATokens.minWidth.large / baselineGrid).toBe(10);
-    });
-
-    it('should have progressive sizing (small < medium < large)', () => {
-      expect(ButtonCTATokens.minWidth.small).toBeLessThan(ButtonCTATokens.minWidth.medium);
-      expect(ButtonCTATokens.minWidth.medium).toBeLessThan(ButtonCTATokens.minWidth.large);
-    });
-  });
-
-  describe('getButtonCTAMinWidth helper', () => {
-    it('should return correct value for small variant', () => {
-      expect(getButtonCTAMinWidth('small')).toBe(56);
-    });
-
-    it('should return correct value for medium variant', () => {
-      expect(getButtonCTAMinWidth('medium')).toBe(72);
-    });
-
-    it('should return correct value for large variant', () => {
-      expect(getButtonCTAMinWidth('large')).toBe(80);
-    });
-  });
-
-  describe('token immutability', () => {
-    it('should be immutable (const assertion)', () => {
-      // TypeScript const assertion ensures tokens are readonly
-      // This test verifies the structure is correct
-      const tokens = ButtonCTATokens;
-      expect(Object.isFrozen(tokens)).toBe(false); // Not frozen, but const assertion prevents modification at compile time
-      expect(typeof tokens.minWidth).toBe('object');
-    });
-  });
-
-  describe('cross-platform consistency', () => {
-    it('should provide same values for all platforms', () => {
-      // These tokens are platform-agnostic and should be used consistently
-      // across Web, iOS, and Android implementations
-      const expectedValues = {
-        small: 56,
-        medium: 72,
-        large: 80,
-      };
-
-      expect(ButtonCTATokens.minWidth).toEqual(expectedValues);
-    });
-  });
-});

package/src/components/core/Button-CTA/__tests__/setup.test.ts

@@ -1,209 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify test infrastructure setup for Button-CTA component
- * @jest-environment jsdom
- */
-/**
- * Test infrastructure smoke test
- * 
- * Verifies that:
- * - Jest is configured correctly for web components
- * - Custom element registration works
- * - Shadow DOM rendering works
- * - Test utilities function correctly
- * 
- * Stemma System Naming: [Family]-[Type] = Button-CTA
- * Component Type: Standalone (no behavioral variants)
- */
-
-import {
-  registerButtonCTA,
-  createButtonCTA,
-  cleanupButtonCTA,
-  getShadowButton,
-  waitForShadowDOM
-} from './test-utils';
-import { ButtonCTA } from '../platforms/web/ButtonCTA.web';
-
-describe('Button-CTA Test Infrastructure Setup', () => {
-  describe('Custom Element Registration', () => {
-    it('should register Button-CTA custom element', () => {
-      registerButtonCTA();
-      
-      const isRegistered = customElements.get('button-cta') !== undefined;
-      expect(isRegistered).toBe(true);
-    });
-    
-    it('should not throw error when registering multiple times', () => {
-      expect(() => {
-        registerButtonCTA();
-        registerButtonCTA();
-      }).not.toThrow();
-    });
-    
-    it('should create Button-CTA element using document.createElement', () => {
-      registerButtonCTA();
-      
-      const button = document.createElement('button-cta');
-      expect(button).toBeInstanceOf(HTMLElement);
-      expect(button.tagName.toLowerCase()).toBe('button-cta');
-    });
-  });
-  
-  describe('Shadow DOM Rendering', () => {
-    let button: ButtonCTA;
-    
-    afterEach(() => {
-      if (button) {
-        cleanupButtonCTA(button);
-      }
-    });
-    
-    it('should initialize shadow DOM when element is appended to document', async () => {
-      registerButtonCTA();
-      
-      button = document.createElement('button-cta') as ButtonCTA;
-      button.label = 'Test Button';
-      document.body.appendChild(button);
-      
-      await waitForShadowDOM(button);
-      
-      expect(button.shadowRoot).toBeTruthy();
-    });
-    
-    it('should render button element inside shadow DOM', async () => {
-      registerButtonCTA();
-      
-      button = document.createElement('button-cta') as ButtonCTA;
-      button.label = 'Test Button';
-      document.body.appendChild(button);
-      
-      await waitForShadowDOM(button);
-      
-      const shadowButton = getShadowButton(button);
-      expect(shadowButton).toBeTruthy();
-      expect(shadowButton?.tagName.toLowerCase()).toBe('button');
-    });
-    
-    it('should render button label inside shadow DOM', async () => {
-      registerButtonCTA();
-      
-      button = document.createElement('button-cta') as ButtonCTA;
-      button.label = 'Test Label';
-      document.body.appendChild(button);
-      
-      await waitForShadowDOM(button);
-      
-      const shadowButton = getShadowButton(button);
-      expect(shadowButton?.textContent).toContain('Test Label');
-    });
-  });
-  
-  describe('Test Utilities', () => {
-    let button: ButtonCTA;
-    
-    afterEach(() => {
-      if (button) {
-        cleanupButtonCTA(button);
-      }
-    });
-    
-    it('should create button with createButtonCTA helper', async () => {
-      button = await createButtonCTA({ label: 'Helper Test' });
-      
-      expect(button).toBeTruthy();
-      expect(button.shadowRoot).toBeTruthy();
-      expect(button.label).toBe('Helper Test');
-    });
-    
-    it('should create button with all props using helper', async () => {
-      button = await createButtonCTA({
-        label: 'Complete Button',
-        size: 'large',
-        buttonVariant: 'secondary',
-        icon: 'arrow-right',
-        noWrap: true,
-        testID: 'test-button'
-      });
-      
-      expect(button.label).toBe('Complete Button');
-      expect(button.size).toBe('large');
-      expect(button.buttonVariant).toBe('secondary');
-      expect(button.icon).toBe('arrow-right');
-      expect(button.noWrap).toBe(true);
-      expect(button.testID).toBe('test-button');
-    });
-    
-    it('should get shadow button using helper', async () => {
-      button = await createButtonCTA({ label: 'Test' });
-      
-      const shadowButton = getShadowButton(button);
-      expect(shadowButton).toBeTruthy();
-      expect(shadowButton?.tagName.toLowerCase()).toBe('button');
-    });
-    
-    it('should clean up button using helper', async () => {
-      button = await createButtonCTA({ label: 'Test' });
-      
-      expect(document.body.contains(button)).toBe(true);
-      
-      cleanupButtonCTA(button);
-      
-      expect(document.body.contains(button)).toBe(false);
-    });
-  });
-  
-  describe('Jest Configuration', () => {
-    it('should have jsdom environment available', () => {
-      expect(document).toBeDefined();
-      expect(window).toBeDefined();
-      expect(customElements).toBeDefined();
-    });
-    
-    it('should support async/await in tests', async () => {
-      const promise = Promise.resolve('test');
-      const result = await promise;
-      expect(result).toBe('test');
-    });
-    
-    it('should support DOM manipulation', () => {
-      const div = document.createElement('div');
-      div.textContent = 'Test Content';
-      document.body.appendChild(div);
-      
-      expect(document.body.contains(div)).toBe(true);
-      expect(div.textContent).toBe('Test Content');
-      
-      document.body.removeChild(div);
-      expect(document.body.contains(div)).toBe(false);
-    });
-  });
-  
-  describe('Web Components API', () => {
-    it('should support custom elements API', () => {
-      expect(customElements).toBeDefined();
-      expect(typeof customElements.define).toBe('function');
-      expect(typeof customElements.get).toBe('function');
-    });
-    
-    it('should support shadow DOM API', () => {
-      const div = document.createElement('div');
-      const shadow = div.attachShadow({ mode: 'open' });
-      
-      expect(shadow).toBeTruthy();
-      expect(div.shadowRoot).toBe(shadow);
-    });
-    
-    it('should support shadow DOM content manipulation', () => {
-      const div = document.createElement('div');
-      const shadow = div.attachShadow({ mode: 'open' });
-      
-      const span = document.createElement('span');
-      span.textContent = 'Shadow Content';
-      shadow.appendChild(span);
-      
-      expect(shadow.querySelector('span')).toBe(span);
-      expect(shadow.querySelector('span')?.textContent).toBe('Shadow Content');
-    });
-  });
-});

package/src/components/core/Button-CTA/__tests__/test-utils.ts

@@ -1,185 +0,0 @@
-/**
- * Test utilities for Button-CTA component testing
- * 
- * Provides helper functions for:
- * - Custom element registration
- * - Shadow DOM rendering waits
- * - Component cleanup
- * - CSS custom property setup for blend utilities
- * 
- * Stemma System Naming: [Family]-[Type] = Button-CTA
- * Component Type: Standalone (no behavioral variants)
- */
-
-import { ButtonCTA } from '../platforms/web/ButtonCTA.web';
-
-/**
- * Set up required CSS custom properties for Button-CTA blend utilities.
- * 
- * Button-CTA uses blend utilities that read base colors from CSS custom properties.
- * This function sets up the required properties in the test environment.
- * 
- * Required properties:
- * - --color-action-primary: Base primary color for blend calculations (cyan300)
- * - --color-contrast-on-action: Content color on primary background (black500 Standard / white100 WCAG)
- * 
- * Updated to use new semantic token names (Spec 052, Spec 076).
- * Note: Test values use Standard theme primitives. These are arbitrary valid colors
- * for exercising blend math — tests verify token consumption, not specific color output.
- * 
- * @see ButtonCTA._calculateBlendColors() for usage
- */
-export function setupBlendColorProperties(): void {
-  // Set up required CSS custom properties on document root
-  document.documentElement.style.setProperty('--color-action-primary', 'rgba(0, 240, 255, 1)');
-  document.documentElement.style.setProperty('--color-contrast-on-action', 'rgba(0, 0, 0, 1)');
-  document.documentElement.style.setProperty('--color-background', '#FFFFFF');
-}
-
-/**
- * Clean up CSS custom properties set by setupBlendColorProperties
- */
-export function cleanupBlendColorProperties(): void {
-  document.documentElement.style.removeProperty('--color-action-primary');
-  document.documentElement.style.removeProperty('--color-contrast-on-action');
-  document.documentElement.style.removeProperty('--color-background');
-}
-
-/**
- * Register the Button-CTA custom element if not already registered
- * Prevents "already defined" errors in test suites
- * 
- * Also sets up required CSS custom properties for blend utilities.
- */
-export function registerButtonCTA(): void {
-  // Set up CSS custom properties required for blend utilities
-  setupBlendColorProperties();
-  
-  if (!customElements.get('button-cta')) {
-    customElements.define('button-cta', ButtonCTA);
-  }
-}
-
-/**
- * Wait for shadow DOM to be initialized and rendered
- * 
- * @param element - The custom element to wait for
- * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
- * @returns Promise that resolves when shadow DOM is ready
- */
-export async function waitForShadowDOM(
-  element: HTMLElement,
-  timeout: number = 1000
-): Promise<void> {
-  const startTime = Date.now();
-  
-  while (!element.shadowRoot) {
-    if (Date.now() - startTime > timeout) {
-      throw new Error('Timeout waiting for shadow DOM to initialize');
-    }
-    await new Promise(resolve => setTimeout(resolve, 10));
-  }
-  
-  // Additional wait for shadow DOM content to render
-  await new Promise(resolve => setTimeout(resolve, 0));
-}
-
-/**
- * Create a Button-CTA element with shadow DOM ready
- * 
- * @param props - Initial properties for the button
- * @returns Promise resolving to the created button element
- */
-export async function createButtonCTA(props: {
-  label: string;
-  size?: 'small' | 'medium' | 'large';
-  buttonVariant?: 'primary' | 'secondary' | 'tertiary';
-  icon?: string;
-  noWrap?: boolean;
-  testID?: string;
-}): Promise<ButtonCTA> {
-  registerButtonCTA();
-  
-  const button = document.createElement('button-cta') as ButtonCTA;
-  
-  // Set properties
-  button.label = props.label;
-  if (props.size) button.size = props.size;
-  if (props.buttonVariant) button.buttonVariant = props.buttonVariant;
-  if (props.icon) button.icon = props.icon;
-  if (props.noWrap !== undefined) button.noWrap = props.noWrap;
-  if (props.testID) button.testID = props.testID;
-  
-  // Append to document to trigger rendering
-  document.body.appendChild(button);
-  
-  // Wait for shadow DOM to be ready
-  await waitForShadowDOM(button);
-  
-  return button;
-}
-
-/**
- * Clean up a Button-CTA element from the DOM
- * 
- * @param button - The button element to clean up
- */
-export function cleanupButtonCTA(button: ButtonCTA): void {
-  if (button.parentNode) {
-    button.parentNode.removeChild(button);
-  }
-}
-
-/**
- * Get the shadow button element from a Button-CTA
- * 
- * @param button - The Button-CTA custom element
- * @returns The button element inside shadow DOM, or null if not found
- */
-export function getShadowButton(button: ButtonCTA): HTMLButtonElement | null {
-  return button.shadowRoot?.querySelector('button') || null;
-}
-
-/**
- * Get the icon element from a Button-CTA
- * 
- * @param button - The Button-CTA custom element
- * @returns The icon element inside shadow DOM, or null if not found
- */
-export function getIconElement(button: ButtonCTA): HTMLElement | null {
-  return button.shadowRoot?.querySelector('.button-cta__icon') || null;
-}
-
-/**
- * Get the label element from a Button-CTA
- * 
- * @param button - The Button-CTA custom element
- * @returns The label element inside shadow DOM, or null if not found
- */
-export function getLabelElement(button: ButtonCTA): HTMLElement | null {
-  return button.shadowRoot?.querySelector('.button-cta__label, .button-cta__label--no-wrap') || null;
-}
-
-/**
- * Simulate a click on the button
- * 
- * @param button - The Button-CTA custom element
- */
-export function clickButton(button: ButtonCTA): void {
-  const shadowButton = getShadowButton(button);
-  if (shadowButton) {
-    shadowButton.click();
-  }
-}
-
-/**
- * Check if button has a specific CSS class
- * 
- * @param button - The Button-CTA custom element
- * @param className - The class name to check for
- * @returns True if the button has the class, false otherwise
- */
-export function hasClass(button: ButtonCTA, className: string): boolean {
-  const shadowButton = getShadowButton(button);
-  return shadowButton?.classList.contains(className) || false;
-}

package/src/components/core/Button-CTA/examples/BasicUsage.html

@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <!--
-    VALIDATION FILE - NOT DOCUMENTATION
-    
-    This HTML file validates that Button-CTA examples work correctly.
-    It is NOT the source of truth for component documentation.
-    
-    For component usage and examples, see: ../README.md
-    
-    Stemma System Naming: [Family]-[Type] = Button-CTA
-    Component Type: Standalone (no behavioral variants)
-    
-    Purpose: Automated validation that examples remain functional
-    Usage: Run validation script or open in browser for manual testing
-  -->
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Button-CTA Validation - Basic Usage</title>
-  <style>
-    body {
-      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      padding: 24px;
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .example-section {
-      margin-bottom: 32px;
-      padding: 16px;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-    }
-    
-    .example-section h2 {
-      margin-top: 0;
-      font-size: 18px;
-      font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-weight: 600;
-      color: #333;
-    }
-    
-    .example-section p {
-      color: #666;
-      margin-bottom: 16px;
-    }
-    
-    .button-container {
-      display: flex;
-      gap: 16px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    
-    .output {
-      margin-top: 12px;
-      padding: 8px;
-      background: #f5f5f5;
-      border-radius: 4px;
-      font-family: monospace;
-      font-size: 14px;
-      min-height: 24px;
-    }
-  </style>
-</head>
-<body>
-  <h1 style="font-family: Rajdhani, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600;">Button-CTA - Basic Usage Examples</h1>
-  
-  <div style="background: #e6fff5; padding: 16px; border-radius: 8px; border-left: 4px solid #00FF88; margin-bottom: 24px;">
-    <strong style="font-family: Rajdhani, sans-serif;">✨ Updated Design System:</strong> This page demonstrates the new color palette (green for success, pink for error, orange for warning) and Rajdhani typography for headings and buttons.
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 1: Default Button</h2>
-    <p>The simplest usage with only the required label prop. Uses default medium size and primary style.</p>
-    <div class="button-container">
-      <button-cta id="default-btn" label="Click me"></button-cta>
-    </div>
-    <div class="output" id="default-output">Click the button to see output...</div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 2: Custom Label</h2>
-    <p>Button with a custom action-oriented label.</p>
-    <div class="button-container">
-      <button-cta id="custom-label-btn" label="Save Changes"></button-cta>
-    </div>
-    <div class="output" id="custom-label-output">Click the button to see output...</div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 3: With Event Handler</h2>
-    <p>Button with a press event handler that performs an action.</p>
-    <div class="button-container">
-      <button-cta id="handler-btn" label="Submit Form"></button-cta>
-    </div>
-    <div class="output" id="handler-output">Click the button to see output...</div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 4: Unavailable Actions</h2>
-    <p>DesignerPunk does not support disabled states. If an action is unavailable, the button should not be rendered. For in-flight async operations, use the loading state instead.</p>
-  </div>
-  
-  <script type="module">
-    // Import the Button-CTA web component
-    import { ButtonCTA } from '../platforms/web/ButtonCTA.web.js';
-    
-    // Example 1: Default button
-    const defaultBtn = document.getElementById('default-btn');
-    const defaultOutput = document.getElementById('default-output');
-    defaultBtn.addEventListener('press', () => {
-      defaultOutput.textContent = `Default button clicked at ${new Date().toLocaleTimeString()}`;
-    });
-    
-    // Example 2: Custom label button
-    const customLabelBtn = document.getElementById('custom-label-btn');
-    const customLabelOutput = document.getElementById('custom-label-output');
-    customLabelBtn.addEventListener('press', () => {
-      customLabelOutput.textContent = `Save Changes clicked at ${new Date().toLocaleTimeString()}`;
-    });
-    
-    // Example 3: Button with handler
-    const handlerBtn = document.getElementById('handler-btn');
-    const handlerOutput = document.getElementById('handler-output');
-    handlerBtn.addEventListener('press', () => {
-      handlerOutput.textContent = `Form submitted at ${new Date().toLocaleTimeString()}`;
-      // In a real app, you would validate and submit form data here
-    });
-  </script>
-</body>
-</html>