[Component Name] Demo
Sizes
@for (size of sizes; track size) {
{{ size }} size
}
Variants
@for (variant of variants; track variant) {
{{ variant }}
}
Interactive
Click me
Clicked: {{ clickCount }} times
`,
styleUrl: './[component-name]-demo.component.scss'
})
export class [ComponentName]DemoComponent {
sizes = ['sm', 'md', 'lg'] as const;
variants = ['primary', 'secondary', 'success', 'danger'] as const;
clickCount = 0;
handleDemoClick(event: MouseEvent): void {
this.clickCount++;
console.log('Component clicked', event);
}
}
```
### Component Requirements
- **Design Tokens**: Use ONLY verified semantic tokens throughout
- **Variants**: Include common UI system variants (colors, styles)
- **Sizes**: sm, md, lg sizing options
- **States**: hover, focus, active, disabled
- **Accessibility**: ARIA support, keyboard navigation
---
## Testing Requirements
### Unit Test Template
```typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { [ComponentName]Component } from './[component-name].component';
describe('[ComponentName]Component', () => {
let component: [ComponentName]Component;
let fixture: ComponentFixture<[ComponentName]Component>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [[ComponentName]Component]
}).compileComponents();
fixture = TestBed.createComponent([ComponentName]Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should apply size classes correctly', () => {
component.size = 'lg';
fixture.detectChanges();
const element = fixture.nativeElement.querySelector('.ui-[component-name]');
expect(element).toHaveClass('ui-[component-name]--lg');
});
it('should handle disabled state', () => {
component.disabled = true;
fixture.detectChanges();
const element = fixture.nativeElement.querySelector('.ui-[component-name]');
expect(element).toHaveClass('ui-[component-name]--disabled');
expect(element.getAttribute('aria-disabled')).toBe('true');
});
it('should emit click events when not disabled', () => {
spyOn(component.clicked, 'emit');
const element = fixture.nativeElement.querySelector('.ui-[component-name]');
element.click();
expect(component.clicked.emit).toHaveBeenCalled();
});
it('should not emit click events when disabled', () => {
component.disabled = true;
spyOn(component.clicked, 'emit');
const element = fixture.nativeElement.querySelector('.ui-[component-name]');
element.click();
expect(component.clicked.emit).not.toHaveBeenCalled();
});
it('should support keyboard navigation', () => {
spyOn(component, 'handleClick');
const element = fixture.nativeElement.querySelector('.ui-[component-name]');
const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
element.dispatchEvent(enterEvent);
expect(component.handleClick).toHaveBeenCalled();
});
});
```
---
## Component Quality Checklist
### ⚠️ PRE-FLIGHT CHECK ⚠️
- [ ] **CONFIRMED: Creating NEW component, not modifying existing**
- [ ] **VERIFIED: No existing component files will be altered**
- [ ] **CHECKED: Only adding to integration files, not modifying**
### Functionality
- [ ] All size variants work correctly (sm, md, lg)
- [ ] All color variants apply properly
- [ ] Disabled state prevents interaction
- [ ] Loading state shows indicator
- [ ] Events emit correctly
- [ ] Content projection works
### Styling ⚠️ CRITICAL VALIDATION ⚠️
- [ ] **Uses ONLY verified existing semantic tokens**
- [ ] **NO HARDCODED VALUES** (px, rem, hex colors)
- [ ] **NO INVENTED TOKEN NAMES**
- [ ] Responsive on all breakpoints
- [ ] Follows BEM naming convention
- [ ] Proper state transitions
- [ ] Map tokens used with map-get()
### Accessibility
- [ ] Proper ARIA attributes
- [ ] Keyboard navigable
- [ ] Focus indicators visible
- [ ] Screen reader friendly
- [ ] Meets WCAG 2.1 AA standards
- [ ] Color contrast sufficient
### Code Quality
- [ ] TypeScript strictly typed
- [ ] OnPush change detection
- [ ] Standalone component
- [ ] Proper imports/exports
- [ ] Demo shows all features
- [ ] Unit tests pass
### Integration
- [ ] Added to public API (additive only)
- [ ] Demo route configured (additive only)
- [ ] Menu item added to dashboard (additive only)
- [ ] Build passes without errors
- [ ] Follows project conventions
- [ ] **Existing components still work**
---
## 🚨 FINAL TOKEN VALIDATION 🚨
### Before Implementation:
1. **VERIFY** every token used exists in the reference above
2. **ASK FOR HELP** if you need a token that doesn't exist
3. **TEST** build process to catch any invalid tokens
4. **NEVER GUESS** or invent token names
### If you need a token that doesn't exist:
- **STOP** implementation
- **ASK** "This component needs [specific token type] but I don't see one available. Should I [alternative approach] or do you have guidance?"
- **WAIT** for direction rather than inventing tokens
This template provides a comprehensive guide for creating consistent, high-quality NEW components that integrate seamlessly with the existing design system without affecting any existing code, **and most importantly, without using non-existent tokens that would cause build failures**.