complete story 9.4 with qa tests

2026-01-03 00:09:13 +02:00
parent b129372332
commit 1f2357fe5e
4 changed files with 508 additions and 40 deletions
@@ -140,3 +140,113 @@ h3 {
 small, .text-sm {
    font-size: var(--font-size-sm);
 }
+
+/* ==========================================================================
+   Button Styling System (Story 9.4)
+   ========================================================================== */
+
+/* Primary button - Gold background with Navy text */
+.btn-primary {
+    @apply bg-gold text-navy rounded-md px-6 py-3 font-semibold transition-colors;
+    @apply hover:bg-gold-light;
+    @apply focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2;
+}
+
+/* Secondary button - Outlined with Gold border */
+.btn-secondary {
+    @apply bg-transparent border-2 border-gold text-gold rounded-md px-6 py-3 font-semibold transition-colors;
+    @apply hover:bg-gold hover:text-navy;
+    @apply focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2;
+}
+
+/* Danger button - Red background */
+.btn-danger {
+    @apply bg-danger text-white rounded-md px-6 py-3 font-semibold transition-colors;
+    @apply hover:bg-danger/90;
+    @apply focus:outline-none focus:ring-2 focus:ring-danger focus:ring-offset-2;
+}
+
+/* Disabled state - applies to all button variants */
+.btn-disabled,
+.btn-primary:disabled,
+.btn-secondary:disabled,
+.btn-danger:disabled,
+button.btn-primary:disabled,
+button.btn-secondary:disabled,
+button.btn-danger:disabled {
+    @apply !bg-[#CCCCCC] !text-[#666666] !cursor-not-allowed !border-transparent;
+    @apply hover:!bg-[#CCCCCC];
+}
+
+/* Size variants */
+.btn-sm {
+    @apply px-4 py-2 text-sm;
+}
+
+.btn-lg {
+    @apply px-8 py-4 text-lg;
+}
+
+/* Full width for mobile */
+.btn-full {
+    @apply w-full;
+}
+
+/* Loading state */
+.btn-loading {
+    @apply relative pointer-events-none opacity-75;
+}
+
+/* Icon spacing within buttons */
+.btn-icon-left {
+    @apply flex items-center gap-2;
+}
+
+.btn-icon-right {
+    @apply flex items-center gap-2 flex-row-reverse;
+}
+
+/* Button groups - adjust border-radius for grouped buttons */
+.btn-group {
+    @apply flex;
+}
+
+.btn-group > .btn-primary:not(:first-child):not(:last-child),
+.btn-group > .btn-secondary:not(:first-child):not(:last-child),
+.btn-group > .btn-danger:not(:first-child):not(:last-child) {
+    @apply rounded-none;
+}
+
+.btn-group > .btn-primary:first-child,
+.btn-group > .btn-secondary:first-child,
+.btn-group > .btn-danger:first-child {
+    @apply rounded-r-none;
+}
+
+.btn-group > .btn-primary:last-child,
+.btn-group > .btn-secondary:last-child,
+.btn-group > .btn-danger:last-child {
+    @apply rounded-l-none;
+}
+
+/* RTL support for button groups */
+[dir="rtl"] .btn-group > .btn-primary:first-child,
+[dir="rtl"] .btn-group > .btn-secondary:first-child,
+[dir="rtl"] .btn-group > .btn-danger:first-child {
+    @apply rounded-l-none rounded-r-md;
+}
+
+[dir="rtl"] .btn-group > .btn-primary:last-child,
+[dir="rtl"] .btn-group > .btn-secondary:last-child,
+[dir="rtl"] .btn-group > .btn-danger:last-child {
+    @apply rounded-r-none rounded-l-md;
+}
+
+/* RTL support for icon buttons */
+[dir="rtl"] .btn-icon-left {
+    @apply flex-row-reverse;
+}
+
+[dir="rtl"] .btn-icon-right {
+    @apply flex-row;
+}