diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-17 15:51:27 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-17 15:51:27 +0200 |
| commit | e2737855a3d3544e7a44ba8384be1e206e96c40f (patch) | |
| tree | 5635887371b871f56303e46b5cda75de7ff0b85c /COMPONENT-TEST.md | |
| parent | d46c976137540831468ba5811184356cf1cdf0c1 (diff) | |
| download | danixxyz-e2737855a3d3544e7a44ba8384be1e206e96c40f.tar.gz danixxyz-e2737855a3d3544e7a44ba8384be1e206e96c40f.zip | |
cleanup of the working tree. Created docs/{policies,reports} folders to keep documentation organized
Diffstat (limited to 'COMPONENT-TEST.md')
| -rw-r--r-- | COMPONENT-TEST.md | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/COMPONENT-TEST.md b/COMPONENT-TEST.md deleted file mode 100644 index 3ffcb9c..0000000 --- a/COMPONENT-TEST.md +++ /dev/null @@ -1,104 +0,0 @@ -# Button & Badge Component Test - -## Buttons - -### Primary Button -```html -<button class="btn btn-primary">Primary Action</button> -<button class="btn btn-primary" disabled>Disabled</button> -``` - -### Secondary Button -```html -<button class="btn btn-secondary">Secondary Action</button> -<button class="btn btn-secondary" disabled>Disabled</button> -``` - -### Outline Button -```html -<a href="#" class="btn btn-outline">Outline Button</a> -``` - -### Sizes -```html -<button class="btn btn-sm">Small Button</button> -<button class="btn">Normal Button</button> -<button class="btn btn-lg">Large Button</button> -``` - -### Icon Button -```html -<button class="btn btn-icon" aria-label="Close"> - <i data-feather="x"></i> -</button> -``` - -### With Icon -```html -<a href="#" class="btn"> - Read More - <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> -</a> -``` - -## Badges - -### Article Type Badges -```html -<span class="badge badge-tech">Tech</span> -<span class="badge badge-life">Life</span> -<span class="badge badge-quote">Quote</span> -<span class="badge badge-link">Link</span> -<span class="badge badge-photo">Photo</span> -``` - -### Pinned Badge -```html -<span class="badge badge-life">📌 PINNED</span> -``` - -## Testing Checklist - -### Visual Testing -- [ ] Buttons render with purple accent background -- [ ] Buttons have white text -- [ ] Buttons have rounded corners -- [ ] Secondary buttons show green/emerald background -- [ ] Outline buttons have border but transparent background -- [ ] Button sizes scale correctly (sm, normal, lg) -- [ ] Icon buttons are circular -- [ ] Badges show with subtle background + colored text -- [ ] All 5 type badges (tech, life, quote, link, photo) display correctly - -### Interactive Testing -- [ ] Buttons lift on hover (translateY -1px) -- [ ] Buttons opacity changes on hover (0.85) -- [ ] Buttons opacity changes on active (0.75) -- [ ] Buttons return to normal opacity on release -- [ ] Focus states show ring around button -- [ ] Disabled buttons are greyed out (0.5 opacity) -- [ ] Disabled buttons don't respond to hover -- [ ] Badges have slight background change on hover - -### Dark/Light Mode Testing -- [ ] Dark mode: Primary button purple on dark bg ✓ -- [ ] Dark mode: Secondary button green on dark bg ✓ -- [ ] Light mode: Primary button darker purple ✓ -- [ ] Light mode: Secondary button green/emerald ✓ -- [ ] Light mode: All text readable on button backgrounds ✓ -- [ ] Light mode: Badge text readable ✓ - -### Responsive Testing -- [ ] Buttons stack vertically on mobile -- [ ] Button text doesn't wrap or overflow -- [ ] Icon buttons stay circular at all sizes -- [ ] Badge text doesn't wrap - -### Accessibility Testing -- [ ] Button hover state clear and visible -- [ ] Focus ring visible (2px ring offset 2px) -- [ ] Disabled buttons clearly appear inactive -- [ ] Icon buttons have aria-label -- [ ] All buttons keyboard accessible (Tab, Enter) -- [ ] Focus order logical -- [ ] High contrast maintained in all states |
