blob: 3ffcb9ca88a37dc38e045ab16740ea5434833675 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
# 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
|
