From e2737855a3d3544e7a44ba8384be1e206e96c40f Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 17 Apr 2026 15:51:27 +0200 Subject: cleanup of the working tree. Created docs/{policies,reports} folders to keep documentation organized --- COMPONENT-TEST.md | 104 ------------------------------------------------------ 1 file changed, 104 deletions(-) delete mode 100644 COMPONENT-TEST.md (limited to 'COMPONENT-TEST.md') 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 - - -``` - -### Secondary Button -```html - - -``` - -### Outline Button -```html -Outline Button -``` - -### Sizes -```html - - - -``` - -### Icon Button -```html - -``` - -### With Icon -```html - - Read More - - -``` - -## Badges - -### Article Type Badges -```html -Tech -Life -Quote -Link -Photo -``` - -### Pinned Badge -```html -📌 PINNED -``` - -## 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 -- cgit v1.2.3