generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,86 @@
+# Story 9.5: Component Styling - Forms
+
+## Epic Reference
+**Epic 9:** Design & Branding Implementation
+
+## User Story
+As a **user**,
+I want **consistent, accessible form styling**,
+So that **data entry is intuitive and error states are clear**.
+
+## Acceptance Criteria
+
+### Input Fields
+- [ ] Border: Charcoal Gray
+- [ ] Focus: Gold border
+- [ ] Border-radius: 6px
+- [ ] Padding: 12px 16px
+
+### Textareas
+- [ ] Same styling as inputs
+- [ ] Minimum height: 120px
+
+### Select Dropdowns
+- [ ] Custom styled (not native)
+- [ ] Consistent with inputs
+
+### Checkboxes & Radios
+- [ ] Custom styled with gold accent
+- [ ] Clear checked state
+
+### Labels
+- [ ] SemiBold weight
+- [ ] Required indicator (*)
+
+### Error States
+- [ ] Red border
+- [ ] Error message below field
+
+### RTL Support
+- [ ] All fields align correctly in RTL
+
+## Technical Notes
+
+```css
+/* Form field styling */
+.input-field {
+  @apply w-full border border-charcoal/30 rounded-md px-4 py-3
+         focus:border-gold focus:ring-2 focus:ring-gold/20
+         transition-colors outline-none;
+}
+
+.input-error {
+  @apply border-danger focus:border-danger focus:ring-danger/20;
+}
+
+.form-label {
+  @apply block text-sm font-semibold text-charcoal mb-2;
+}
+
+.form-label-required::after {
+  content: ' *';
+  @apply text-danger;
+}
+
+.error-message {
+  @apply text-sm text-danger mt-1;
+}
+
+/* Custom checkbox */
+.checkbox-custom {
+  @apply w-5 h-5 rounded border-charcoal/30 text-gold
+         focus:ring-gold focus:ring-offset-0;
+}
+```
+
+## Definition of Done
+- [ ] Input styling consistent
+- [ ] Textarea styling consistent
+- [ ] Select styling works
+- [ ] Checkbox/radio styled
+- [ ] Error states clear
+- [ ] RTL alignment correct
+- [ ] Tests pass
+
+## Estimation
+**Complexity:** Medium | **Effort:** 3-4 hours