first commit
All checks were successful
CodeAnt AI Review - Stage 1 / codeant-review (push) Successful in 58s
All checks were successful
CodeAnt AI Review - Stage 1 / codeant-review (push) Successful in 58s
This commit is contained in:
WDI-Ideas
@@ -0,0 +1,381 @@
|
||||
# Independent Primary CTA Button System
|
||||
|
||||
## Overview
|
||||
|
||||
The KLC Primary CTA Button system has been updated to provide **complete independence** between button instances. Each Primary CTA Button can now have unique styling without affecting any other buttons on the website, while preserving all sophisticated animations and functionality.
|
||||
|
||||
## 🎯 Key Benefits
|
||||
|
||||
### ✅ **Complete Independence**
|
||||
- Each button instance is completely separate
|
||||
- Changes to one button will NEVER affect others
|
||||
- No global CSS overrides that impact all buttons
|
||||
|
||||
### ✅ **Animation Preservation**
|
||||
- All sophisticated slide animations maintained
|
||||
- Text and icon transitions work perfectly
|
||||
- 300ms ease-in-out timing preserved
|
||||
|
||||
### ✅ **Component Protection**
|
||||
- Main `/components/PrimaryCTAButton.tsx` never modified
|
||||
- Core functionality remains intact
|
||||
- Sophisticated animation structure protected
|
||||
|
||||
### ✅ **Unlimited Flexibility**
|
||||
- Support for any color combination
|
||||
- Custom colors via CSS classes or variant props
|
||||
- Pre-built variants for common use cases
|
||||
|
||||
## 🛠️ Implementation Methods
|
||||
|
||||
### Method 1: Variant Components (Recommended)
|
||||
|
||||
Use pre-built variant components for common color schemes:
|
||||
|
||||
```tsx
|
||||
import { PrimaryCTAButton } from './components/PrimaryCTAButton';
|
||||
import { PrimaryCTAButtonYellow } from './components/PrimaryCTAButtonYellow';
|
||||
import { PrimaryCTAButtonVariant } from './components/PrimaryCTAButtonVariant';
|
||||
|
||||
// Default blue variant - NEW DEFAULT with brand blue and black text
|
||||
<PrimaryCTAButton
|
||||
text="Get Started"
|
||||
onClick={handleGetStarted}
|
||||
ariaLabel="Get started with KLC services"
|
||||
/>
|
||||
|
||||
// Yellow variant - Former default styling
|
||||
<PrimaryCTAButtonYellow
|
||||
text="Learn More"
|
||||
onClick={handleLearnMore}
|
||||
ariaLabel="Learn more about our programs"
|
||||
/>
|
||||
|
||||
// Custom variant with any colors
|
||||
<PrimaryCTAButtonVariant
|
||||
variant="custom"
|
||||
customBackgroundColor="#28A745"
|
||||
customTextColor="#FFFFFF"
|
||||
customHoverBackgroundColor="#1E7E34"
|
||||
text="Custom Action"
|
||||
onClick={handleCustomAction}
|
||||
/>
|
||||
```
|
||||
|
||||
### Method 2: Unique CSS Classes
|
||||
|
||||
Add unique CSS class modifiers to any Primary CTA Button:
|
||||
|
||||
```tsx
|
||||
import { PrimaryCTAButton } from './components/PrimaryCTAButton';
|
||||
|
||||
// Default blue button (no class needed)
|
||||
<PrimaryCTAButton
|
||||
text="Blue Action"
|
||||
onClick={handleBlueAction}
|
||||
/>
|
||||
|
||||
// Yellow button with unique CSS class
|
||||
<PrimaryCTAButton
|
||||
text="Yellow Action"
|
||||
onClick={handleYellowAction}
|
||||
className="cta-custom-yellow"
|
||||
/>
|
||||
|
||||
// Green button with unique CSS class
|
||||
<PrimaryCTAButton
|
||||
text="Green Action"
|
||||
onClick={handleGreenAction}
|
||||
className="cta-custom-green"
|
||||
/>
|
||||
|
||||
// Red button with unique CSS class
|
||||
<PrimaryCTAButton
|
||||
text="Red Action"
|
||||
onClick={handleRedAction}
|
||||
className="cta-custom-red"
|
||||
/>
|
||||
```
|
||||
|
||||
## 🎨 Available CSS Class Modifiers
|
||||
|
||||
### Pre-defined Classes
|
||||
|
||||
**Default (no class needed):** Primary CTA Button
|
||||
- Background: `#04045B` (Brand Blue) - **NEW DEFAULT**
|
||||
- Text: `#26231A` (Brand Black)
|
||||
- Hover Background: `#030359` (Darker Blue)
|
||||
|
||||
**Yellow Variant:** `.cta-custom-yellow`
|
||||
- Background: `#F8C301` (Yellow) - **Former Default**
|
||||
- Text: `#FFFFFF` (White)
|
||||
- Hover Background: `#E6AF01` (Darker Yellow)
|
||||
|
||||
**Green Variant:** `.cta-custom-green`
|
||||
- Background: `#28A745` (Green)
|
||||
- Text: `#FFFFFF` (White)
|
||||
- Hover Background: `#1E7E34` (Darker Green)
|
||||
|
||||
### Creating Custom Classes
|
||||
|
||||
Add new color combinations in `/styles/globals.css`:
|
||||
|
||||
```css
|
||||
/* Custom Red Button */
|
||||
.primary-cta-button.cta-custom-red .bg-\[#F8C301\] {
|
||||
background-color: #DC3545 !important; /* Red background */
|
||||
}
|
||||
|
||||
.primary-cta-button.cta-custom-red div[class*="bg-[#F8C301]"] {
|
||||
background-color: #DC3545 !important;
|
||||
}
|
||||
|
||||
.primary-cta-button.cta-custom-red .text-layer,
|
||||
.primary-cta-button.cta-custom-red .text-element,
|
||||
.primary-cta-button.cta-custom-red .text-layer *,
|
||||
.primary-cta-button.cta-custom-red .text-element * {
|
||||
color: #FFFFFF !important; /* White text */
|
||||
}
|
||||
|
||||
/* Red hover state */
|
||||
.primary-cta-button.cta-custom-red:hover .bg-\[#F8C301\] {
|
||||
background-color: #C82333 !important; /* Darker red on hover */
|
||||
}
|
||||
|
||||
.primary-cta-button.cta-custom-red:hover div[class*="bg-[#F8C301]"] {
|
||||
background-color: #C82333 !important;
|
||||
}
|
||||
```
|
||||
|
||||
## 📋 Component Reference
|
||||
|
||||
### PrimaryCTAButtonBlue
|
||||
|
||||
**Purpose:** Blue variant for brand-consistent primary actions
|
||||
**Colors:** Blue background (#04045B), Black text (#26231A)
|
||||
|
||||
```tsx
|
||||
interface PrimaryCTAButtonBlueProps extends PrimaryCTAButtonProps {
|
||||
// Inherits all PrimaryCTAButton props
|
||||
}
|
||||
```
|
||||
|
||||
### PrimaryCTAButtonYellow
|
||||
|
||||
**Purpose:** Original yellow variant (default styling)
|
||||
**Colors:** Yellow background (#F8C301), White text (#FFFFFF)
|
||||
|
||||
```tsx
|
||||
interface PrimaryCTAButtonYellowProps extends PrimaryCTAButtonProps {
|
||||
// Inherits all PrimaryCTAButton props
|
||||
}
|
||||
```
|
||||
|
||||
### PrimaryCTAButtonVariant
|
||||
|
||||
**Purpose:** Flexible component with variant and custom color support
|
||||
|
||||
```tsx
|
||||
interface PrimaryCTAButtonVariantProps extends PrimaryCTAButtonProps {
|
||||
variant?: 'yellow' | 'blue' | 'custom';
|
||||
customBackgroundColor?: string;
|
||||
customTextColor?: string;
|
||||
customHoverBackgroundColor?: string;
|
||||
}
|
||||
|
||||
// Usage examples
|
||||
<PrimaryCTAButtonVariant variant="blue" text="Blue Button" />
|
||||
<PrimaryCTAButtonVariant
|
||||
variant="custom"
|
||||
customBackgroundColor="#FF6B6B"
|
||||
customTextColor="#FFFFFF"
|
||||
text="Custom Button"
|
||||
/>
|
||||
```
|
||||
|
||||
## 🔧 Advanced Usage Examples
|
||||
|
||||
### Multiple Independent Buttons on Same Page
|
||||
|
||||
```tsx
|
||||
function HomePage() {
|
||||
return (
|
||||
<div>
|
||||
{/* Hero section - Blue button */}
|
||||
<section className="hero">
|
||||
<PrimaryCTAButtonBlue
|
||||
text="Get Started Today"
|
||||
onClick={handleGetStarted}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Services section - Yellow button */}
|
||||
<section className="services">
|
||||
<PrimaryCTAButtonYellow
|
||||
text="Explore Services"
|
||||
onClick={handleExploreServices}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Contact section - Custom green button */}
|
||||
<section className="contact">
|
||||
<PrimaryCTAButtonVariant
|
||||
variant="custom"
|
||||
customBackgroundColor="#28A745"
|
||||
customTextColor="#FFFFFF"
|
||||
text="Contact Us"
|
||||
onClick={handleContact}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Footer - Custom purple button */}
|
||||
<footer>
|
||||
<PrimaryCTAButton
|
||||
text="Subscribe"
|
||||
onClick={handleSubscribe}
|
||||
className="cta-custom-purple"
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Dynamic Button Colors
|
||||
|
||||
```tsx
|
||||
function DynamicButton({ buttonType }: { buttonType: 'primary' | 'secondary' | 'danger' }) {
|
||||
const getVariantProps = () => {
|
||||
switch (buttonType) {
|
||||
case 'primary':
|
||||
return {
|
||||
variant: 'blue' as const,
|
||||
text: 'Primary Action'
|
||||
};
|
||||
case 'secondary':
|
||||
return {
|
||||
variant: 'yellow' as const,
|
||||
text: 'Secondary Action'
|
||||
};
|
||||
case 'danger':
|
||||
return {
|
||||
variant: 'custom' as const,
|
||||
customBackgroundColor: '#DC3545',
|
||||
customTextColor: '#FFFFFF',
|
||||
text: 'Danger Action'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PrimaryCTAButtonVariant
|
||||
{...getVariantProps()}
|
||||
onClick={handleDynamicAction}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🚨 Important Guidelines
|
||||
|
||||
### ✅ DO
|
||||
- Use variant components for common color schemes
|
||||
- Create unique CSS classes for custom colors
|
||||
- Test hover states for proper contrast
|
||||
- Maintain accessibility with proper ARIA labels
|
||||
- Follow brand guidelines for color choices
|
||||
|
||||
### ❌ DON'T
|
||||
- Modify `/components/PrimaryCTAButton.tsx` directly
|
||||
- Use global CSS that affects all buttons
|
||||
- Break the animation structure
|
||||
- Forget to test accessibility
|
||||
- Use colors that don't meet contrast requirements
|
||||
|
||||
## 🎨 Color Guidelines
|
||||
|
||||
### Brand-Approved Colors
|
||||
|
||||
**Primary Blue:** `#04045B`
|
||||
- Use for main call-to-action buttons
|
||||
- Pair with black text (`#26231A`) for contrast
|
||||
|
||||
**Accent Yellow:** `#F8C301`
|
||||
- Original brand color
|
||||
- Pair with white text (`#FFFFFF`)
|
||||
|
||||
**Secondary Colors:** Use sparingly
|
||||
- Green: `#28A745` for success actions
|
||||
- Red: `#DC3545` for warning/danger actions
|
||||
- Purple: `#6F42C1` for special campaigns
|
||||
|
||||
### Accessibility Requirements
|
||||
|
||||
- Ensure minimum 4.5:1 contrast ratio
|
||||
- Test with screen readers
|
||||
- Provide meaningful ARIA labels
|
||||
- Support keyboard navigation
|
||||
|
||||
## 🔄 Migration Guide
|
||||
|
||||
### From Global CSS Overrides
|
||||
|
||||
**Old approach:**
|
||||
```css
|
||||
/* This affected ALL buttons globally */
|
||||
.primary-cta-button .bg-[#F8C301] {
|
||||
background-color: #04045B !important;
|
||||
}
|
||||
```
|
||||
|
||||
**New approach:**
|
||||
```tsx
|
||||
// Use specific variant components
|
||||
<PrimaryCTAButtonBlue text="Get Started" onClick={handleClick} />
|
||||
|
||||
// Or unique CSS classes
|
||||
<PrimaryCTAButton text="Custom" onClick={handleClick} className="cta-custom-blue" />
|
||||
```
|
||||
|
||||
### From Direct Component Modification
|
||||
|
||||
**Old approach:**
|
||||
```tsx
|
||||
// Modifying main component (❌ PROHIBITED)
|
||||
// Never do this!
|
||||
```
|
||||
|
||||
**New approach:**
|
||||
```tsx
|
||||
// Use independent styling methods
|
||||
<PrimaryCTAButtonVariant
|
||||
variant="custom"
|
||||
customBackgroundColor="#your-color"
|
||||
text="Your Text"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
```
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
When implementing independent Primary CTA buttons:
|
||||
|
||||
- [ ] Animations work correctly
|
||||
- [ ] Hover states display properly
|
||||
- [ ] Text contrast meets accessibility standards
|
||||
- [ ] Multiple buttons on same page don't interfere
|
||||
- [ ] Responsive behavior is maintained
|
||||
- [ ] Keyboard navigation works
|
||||
- [ ] Screen reader compatibility
|
||||
- [ ] Focus indicators are visible
|
||||
|
||||
## 📞 Support
|
||||
|
||||
For questions about the independent Primary CTA Button system:
|
||||
|
||||
1. Check this documentation first
|
||||
2. Review `/components/README-PrimaryCTAButton-Variants.md`
|
||||
3. Examine existing implementations in the codebase
|
||||
4. Follow component protection guidelines strictly
|
||||
|
||||
Remember: The main `/components/PrimaryCTAButton.tsx` file must NEVER be modified for styling changes. Always use the independent styling methods documented here.
|
||||
Reference in New Issue
Block a user