consistency: add visual test page for Input component
- Added comprehensive visual test section to DesignSystemDemoPage - Tests basic states (normal, with value, disabled, disabled with value) - Tests 8 input types (text, email, password, number, search, url, tel, date) - Tests width variations (full, half, fixed) - Tests placeholder variations (with, without, long, short) - Available at /design-system route for visual verification - Action 9.5.1.6 complete
This commit is contained in:
senke
parent
43f710aeda
commit
e39ecb8d8f
2 changed files with 125 additions and 4 deletions
|
|
@ -3416,12 +3416,20 @@ Critical path dependencies:
|
|||
- **Result**: Action redundant - all decorations already removed in previous actions
|
||||
- **Rollback**: Restore decorations
|
||||
|
||||
- [ ] **Action 9.5.1.6**: Test Input component visually
|
||||
- [x] **Action 9.5.1.6**: Test Input component visually
|
||||
- **Scope**: Create test page - Visual test of Input component
|
||||
- **Dependencies**: Action 9.5.1.4 complete
|
||||
- **Dependencies**: Action 9.5.1.4 complete ✅
|
||||
- **Risk**: LOW 🔒
|
||||
- **Validation**: Input renders correctly
|
||||
- **Rollback**: N/A (testing)
|
||||
- **Validation**: ✅ Added comprehensive visual test section to DesignSystemDemoPage:
|
||||
- **Added section**: "Design System Input Component (Visual Test)" to `/design-system` route
|
||||
- **Basic states tested**: Normal, with value, disabled, disabled with value
|
||||
- **Input types tested**: text, email, password, number, search, url, tel, date (8 types)
|
||||
- **Width variations tested**: Full width, half width, fixed width
|
||||
- **Placeholder variations tested**: With placeholder, no placeholder, long placeholder, short placeholder
|
||||
- **Location**: `apps/web/src/pages/DesignSystemDemoPage.tsx` (after Inputs Section)
|
||||
- **Access**: Available at `/design-system` route for visual verification
|
||||
- **Result**: Complete visual test page for Input component covering all states and types
|
||||
- **Rollback**: Remove test section
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Button, Card, Input, ProgressBar } from '@veza/design-system';
|
||||
import { Button as DesignSystemButton } from '@/components/ui/button';
|
||||
import { Input as DesignSystemInput } from '@/components/ui/input';
|
||||
|
||||
/**
|
||||
* Demo page to showcase Kōdō Design System components
|
||||
|
|
@ -154,6 +155,118 @@ export default function DesignSystemDemoPage() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Design System Input Component - Visual Test */}
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
|
||||
Design System Input Component (Visual Test)
|
||||
</h2>
|
||||
<div className="space-y-8">
|
||||
{/* Basic States */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Basic States</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Normal</label>
|
||||
<DesignSystemInput placeholder="Enter text..." />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">With Value</label>
|
||||
<DesignSystemInput defaultValue="Sample text value" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Disabled</label>
|
||||
<DesignSystemInput placeholder="Disabled input" disabled />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Disabled with Value</label>
|
||||
<DesignSystemInput defaultValue="Disabled value" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Types */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Input Types</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Text</label>
|
||||
<DesignSystemInput type="text" placeholder="Text input" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Email</label>
|
||||
<DesignSystemInput type="email" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Password</label>
|
||||
<DesignSystemInput type="password" placeholder="Enter password" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Number</label>
|
||||
<DesignSystemInput type="number" placeholder="Enter number" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Search</label>
|
||||
<DesignSystemInput type="search" placeholder="Search..." />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">URL</label>
|
||||
<DesignSystemInput type="url" placeholder="https://example.com" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Tel</label>
|
||||
<DesignSystemInput type="tel" placeholder="+1 (555) 123-4567" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Date</label>
|
||||
<DesignSystemInput type="date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sizes (if applicable) */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Width Variations</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Full Width</label>
|
||||
<DesignSystemInput placeholder="Full width input" className="w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Half Width</label>
|
||||
<DesignSystemInput placeholder="Half width input" className="w-1/2" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Fixed Width</label>
|
||||
<DesignSystemInput placeholder="Fixed width" className="w-64" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder Variations */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Placeholder Variations</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">With Placeholder</label>
|
||||
<DesignSystemInput placeholder="Enter your name..." />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">No Placeholder</label>
|
||||
<DesignSystemInput />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Long Placeholder</label>
|
||||
<DesignSystemInput placeholder="This is a very long placeholder text that demonstrates how the input handles longer placeholder text" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-kodo-secondary">Short Placeholder</label>
|
||||
<DesignSystemInput placeholder="Name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Progress Bars Section */}
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
|
||||
|
|
|
|||
Loading…
Reference in a new issue