summaryrefslogtreecommitdiffstats
path: root/COMPONENT-TEST.md
diff options
context:
space:
mode:
authorDanilo M. <danix@danix.xyz>2026-04-17 15:51:27 +0200
committerDanilo M. <danix@danix.xyz>2026-04-17 15:51:27 +0200
commite2737855a3d3544e7a44ba8384be1e206e96c40f (patch)
tree5635887371b871f56303e46b5cda75de7ff0b85c /COMPONENT-TEST.md
parentd46c976137540831468ba5811184356cf1cdf0c1 (diff)
downloaddanixxyz-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.md104
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