@lumaui/angular 0.1.0

package/src/lib/card/card.component.spec.ts

@@ -0,0 +1,379 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+import { Component } from '@angular/core';
+
+// ============================================================
+// TEST HOST COMPONENTS
+// ============================================================
+
+@Component({
+  template: `
+    <luma-card>
+      <div class="test-content">Projected content</div>
+    </luma-card>
+  `,
+  imports: [CardComponent],
+})
+class TestHostComponent {}
+
+// ============================================================
+// TOKEN DEFINITIONS
+// ============================================================
+
+const CARD_TOKENS = {
+  background: 'oklch(0.99 0 0)',
+  gradientFrom: 'oklch(0.92 0.005 0 / 0.6)',
+  gradientTo: 'oklch(0.96 0.003 0 / 0.6)',
+  padding: '1.5rem',
+} as const;
+
+const DARK_CARD_TOKENS = {
+  background: 'oklch(0.17 0 0)',
+  gradientFrom: 'oklch(0.25 0.01 0 / 0.6)',
+  gradientTo: 'oklch(0.2 0.008 0 / 0.6)',
+} as const;
+
+// ============================================================
+// TOKEN SETUP/CLEANUP UTILITIES
+// ============================================================
+
+function setupCardTokens(): void {
+  const root = document.documentElement;
+  root.style.setProperty('--luma-card-background', CARD_TOKENS.background);
+  root.style.setProperty('--luma-card-gradient-from', CARD_TOKENS.gradientFrom);
+  root.style.setProperty('--luma-card-gradient-to', CARD_TOKENS.gradientTo);
+  root.style.setProperty('--luma-card-padding', CARD_TOKENS.padding);
+}
+
+function cleanupCardTokens(): void {
+  const root = document.documentElement;
+  root.style.removeProperty('--luma-card-background');
+  root.style.removeProperty('--luma-card-gradient-from');
+  root.style.removeProperty('--luma-card-gradient-to');
+  root.style.removeProperty('--luma-card-padding');
+  root.classList.remove('dark');
+}
+
+function applyDarkTheme(): void {
+  const root = document.documentElement;
+  root.classList.add('dark');
+  root.style.setProperty('--luma-card-background', DARK_CARD_TOKENS.background);
+  root.style.setProperty(
+    '--luma-card-gradient-from',
+    DARK_CARD_TOKENS.gradientFrom,
+  );
+  root.style.setProperty(
+    '--luma-card-gradient-to',
+    DARK_CARD_TOKENS.gradientTo,
+  );
+}
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should apply wrapper classes with gradient border technique', () => {
+    fixture.detectChanges();
+
+    const wrapperClasses = component.wrapperClasses();
+
+    // Gradient border technique classes
+    expect(wrapperClasses).toContain('relative');
+    expect(wrapperClasses).toContain('lm-rounded-lg');
+    expect(wrapperClasses).toContain('p-[1px]');
+    expect(wrapperClasses).toContain('bg-gradient-to-b');
+    expect(wrapperClasses).toContain('lm-from-card-gradient-from');
+    expect(wrapperClasses).toContain('lm-to-card-gradient-to');
+  });
+
+  it('should apply content classes with background and padding', () => {
+    fixture.detectChanges();
+
+    const contentClasses = component.contentClasses();
+
+    // Inner content classes
+    expect(contentClasses).toContain('rounded-[17px]');
+    expect(contentClasses).toContain('lm-bg-card-background');
+    expect(contentClasses).toContain('lm-p-card');
+    expect(contentClasses).toContain('lm-text-primary');
+  });
+
+  it('should render wrapper and content divs in template', () => {
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const wrapperDiv = compiled.querySelector('div:first-child');
+    const contentDiv = compiled.querySelector('div:first-child > div');
+
+    expect(wrapperDiv).toBeTruthy();
+    expect(contentDiv).toBeTruthy();
+  });
+
+  it('should project content correctly via ng-content', async () => {
+    const hostFixture = TestBed.createComponent(TestHostComponent);
+    await hostFixture.whenStable();
+    hostFixture.detectChanges();
+
+    const compiled = hostFixture.nativeElement as HTMLElement;
+    const projectedContent = compiled.querySelector('.test-content');
+
+    expect(projectedContent).toBeTruthy();
+    expect(projectedContent?.textContent).toBe('Projected content');
+  });
+
+  it('should use OnPush change detection', () => {
+    // Verify component is configured with OnPush
+    // OnPush means the component only checks for changes when inputs change
+    // or events are triggered, improving performance
+    expect(component).toBeTruthy();
+
+    // The component is stateless with only computed signals,
+    // which work perfectly with OnPush change detection
+    const wrapperClasses = component.wrapperClasses();
+    const contentClasses = component.contentClasses();
+
+    expect(wrapperClasses).toBeTruthy();
+    expect(contentClasses).toBeTruthy();
+  });
+
+  it('should have computed signal for wrapperClasses', () => {
+    // Verify wrapperClasses is a computed signal
+    expect(typeof component.wrapperClasses).toBe('function');
+
+    // Should return string when called
+    const classes = component.wrapperClasses();
+    expect(typeof classes).toBe('string');
+  });
+
+  it('should have computed signal for contentClasses', () => {
+    // Verify contentClasses is a computed signal
+    expect(typeof component.contentClasses).toBe('function');
+
+    // Should return string when called
+    const classes = component.contentClasses();
+    expect(typeof classes).toBe('string');
+  });
+
+  it('should maintain consistent class generation', () => {
+    fixture.detectChanges();
+
+    // Multiple calls should return the same classes
+    const wrapperClasses1 = component.wrapperClasses();
+    const wrapperClasses2 = component.wrapperClasses();
+    const contentClasses1 = component.contentClasses();
+    const contentClasses2 = component.contentClasses();
+
+    expect(wrapperClasses1).toBe(wrapperClasses2);
+    expect(contentClasses1).toBe(contentClasses2);
+  });
+
+  // ============================================================
+  // DESIGN TOKEN INTEGRATION TESTS
+  // ============================================================
+
+  describe('Design Token Integration', () => {
+    beforeEach(() => {
+      setupCardTokens();
+    });
+
+    afterEach(() => {
+      cleanupCardTokens();
+    });
+
+    // ----------------------------------------------------------
+    // CSS Variable Definition Tests
+    // ----------------------------------------------------------
+
+    describe('CSS Variable Definition', () => {
+      it('should define --luma-card-background css variable', () => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-background')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.background);
+      });
+
+      it('should define --luma-card-gradient-from css variable', () => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-from')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.gradientFrom);
+      });
+
+      it('should define --luma-card-gradient-to css variable', () => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-to')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.gradientTo);
+      });
+
+      it('should define --luma-card-padding css variable', () => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-padding')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.padding);
+      });
+    });
+
+    // ----------------------------------------------------------
+    // Token Consumption Tests
+    // ----------------------------------------------------------
+    // CSS variables are inherited from document.documentElement.
+    // We verify that tokens are accessible and component uses the correct classes.
+
+    describe('Token Consumption', () => {
+      it('should have access to --luma-card-background token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-background')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.background);
+      });
+
+      it('should have access to --luma-card-gradient-from token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-from')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.gradientFrom);
+      });
+
+      it('should have access to --luma-card-gradient-to token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-to')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.gradientTo);
+      });
+
+      it('should have access to --luma-card-padding token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-padding')
+          .trim();
+        expect(value).toBe(CARD_TOKENS.padding);
+      });
+    });
+
+    // ----------------------------------------------------------
+    // Token Override Tests
+    // ----------------------------------------------------------
+
+    describe('Token Override', () => {
+      it('should respect custom background token override', () => {
+        const customBackground = '#ffffff';
+        document.documentElement.style.setProperty(
+          '--luma-card-background',
+          customBackground,
+        );
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-background')
+          .trim();
+        expect(value).toBe(customBackground);
+      });
+
+      it('should respect custom padding token override', () => {
+        const customPadding = '2rem';
+        document.documentElement.style.setProperty(
+          '--luma-card-padding',
+          customPadding,
+        );
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-padding')
+          .trim();
+        expect(value).toBe(customPadding);
+      });
+
+      it('should respect custom gradient-from token override', () => {
+        const customGradient = 'oklch(0.85 0.01 0 / 0.8)';
+        document.documentElement.style.setProperty(
+          '--luma-card-gradient-from',
+          customGradient,
+        );
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-from')
+          .trim();
+        expect(value).toBe(customGradient);
+      });
+
+      it('should respect custom gradient-to token override', () => {
+        const customGradient = 'oklch(0.90 0.005 0 / 0.8)';
+        document.documentElement.style.setProperty(
+          '--luma-card-gradient-to',
+          customGradient,
+        );
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-to')
+          .trim();
+        expect(value).toBe(customGradient);
+      });
+    });
+
+    // ----------------------------------------------------------
+    // Dark Theme Tests
+    // ----------------------------------------------------------
+
+    describe('Dark Theme', () => {
+      beforeEach(() => {
+        applyDarkTheme();
+      });
+
+      it('should have access to dark theme background token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-background')
+          .trim();
+        expect(value).toBe(DARK_CARD_TOKENS.background);
+      });
+
+      it('should have access to dark theme gradient-from token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-from')
+          .trim();
+        expect(value).toBe(DARK_CARD_TOKENS.gradientFrom);
+      });
+
+      it('should have access to dark theme gradient-to token', () => {
+        fixture.detectChanges();
+
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue('--luma-card-gradient-to')
+          .trim();
+        expect(value).toBe(DARK_CARD_TOKENS.gradientTo);
+      });
+
+      it('should have dark class on document element', () => {
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+      });
+    });
+  });
+});

package/src/lib/card/card.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import {
+  cardVariants,
+  cardContentVariants,
+  type CardVariant,
+} from '@lumaui/core';
+
+@Component({
+  selector: 'luma-card',
+  templateUrl: './card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CardComponent {
+  /**
+   * Card visual style variant
+   * - default: Gradient border wrapper style (default)
+   * - shadow: Elevated card with shadow for primary content
+   * - nested: Subtle background for sections within cards
+   * - preview: For documentation examples
+   */
+  lmVariant = input<CardVariant>('default');
+
+  // Computed class strings based on variant
+  wrapperClasses = computed(() => cardVariants({ variant: this.lmVariant() }));
+  contentClasses = computed(() =>
+    cardContentVariants({ variant: this.lmVariant() }),
+  );
+}