Add QuoteBlock Component with Storybook Integration
Overview
This PR introduces a new QuoteBlock component that displays inspirational governance quotes with author attribution and decorative geometric elements. The component features three responsive variants (compact, standard, extended), comprehensive error handling, and full Storybook integration with accessibility compliance.
Changes
New QuoteBlock Component (app/components/QuoteBlock.js)
Three responsive variants: compact, standard, and extended layouts
Author attribution: Avatar support with initials fallback on error
Quote styling: Proper typography with hanging quotes using CSS pseudo-elements
Error handling: Graceful fallbacks for missing avatars and failed image loads
Accessibility: WCAG 2.1 AA compliant with proper ARIA labels and semantic HTML
Design system integration: Uses design tokens for consistent spacing and colors
Font loading: Added Inter, Bricolage Grotesque, and Space Grotesk fonts
GitHub Pages support: Proper base path configuration for deployment
Environment detection: Unified configuration for local and production builds
Screenshots
How to Test
Component Functionality
Run npm run storybook:local to start Storybook
Navigate to QuoteBlock stories
Test all three variants (compact, standard, extended)
Verify quote marks display correctly with proper styling
Test error handling with invalid avatar paths
Check responsive behavior across different screen sizes
Storybook Features
Default Story: Verify standard variant with typical content
AllVariants Story: Compare all three variants side-by-side
ErrorState Story: Test avatar error handling and initials fallback
Controls Panel: Modify quote text, author, source, and avatar
Accessibility: Run a11y tests to ensure compliance
Production Build
Run npm run storybook:restore to switch to GitHub config
Run npm run build-storybook to build for production
Verify fonts load correctly and quotes display properly
Test deployment to GitHub Pages
Notes
Technical Implementation
Next.js Image: Optimized avatar loading with proper error handling
CSS Pseudo-elements: Quote marks injected via ::before and ::after
Container Queries: Prepared for future responsive enhancements
Semantic HTML: Proper use of <blockquote>, <cite>, and ARIA attributes
# Add QuoteBlock Component with Storybook Integration
## Overview
This PR introduces a new QuoteBlock component that displays inspirational governance quotes with author attribution and decorative geometric elements. The component features three responsive variants (compact, standard, extended), comprehensive error handling, and full Storybook integration with accessibility compliance.
## Changes
### New QuoteBlock Component (`app/components/QuoteBlock.js`)
- **Three responsive variants**: compact, standard, and extended layouts
- **Author attribution**: Avatar support with initials fallback on error
- **Quote styling**: Proper typography with hanging quotes using CSS pseudo-elements
- **Error handling**: Graceful fallbacks for missing avatars and failed image loads
- **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels and semantic HTML
- **Design system integration**: Uses design tokens for consistent spacing and colors
### QuoteDecor Component (`app/components/QuoteDecor.js`)
- **Decorative ellipses**: SVG-based geometric elements for visual enhancement
- **Responsive scaling**: Adapts to container size with proper aspect ratios
- **Performance optimized**: Lightweight SVG with minimal DOM impact
### Storybook Integration (`stories/QuoteBlock.stories.js`)
- **Three essential stories**: Default, AllVariants comparison, and ErrorState
- **Interactive controls**: All props configurable via Storybook controls
- **Comprehensive documentation**: Usage examples and component API
- **Accessibility testing**: Built-in a11y addon integration
### Storybook Configuration Updates
- **Font loading**: Added Inter, Bricolage Grotesque, and Space Grotesk fonts
- **GitHub Pages support**: Proper base path configuration for deployment
- **Environment detection**: Unified configuration for local and production builds
## Screenshots
<img width="319" alt="Screenshot 2025-08-26 at 3.28.10 PM.png" src="attachments/b6cda3a1-758f-4b1a-920c-b850a3d8e7ae">
<img width="478" alt="Screenshot 2025-08-26 at 3.28.51 PM.png" src="attachments/91c4c3a7-ff7b-4de6-af6b-116eb28a1232">
<img width="506" alt="Screenshot 2025-08-26 at 3.29.20 PM.png" src="attachments/7248e553-aeb7-4fb3-ab8e-e4e75630740c">
<img width="717" alt="Screenshot 2025-08-26 at 3.29.49 PM.png" src="attachments/e6c7889c-5d1a-4609-8050-949fc30aedb2">
## How to Test
### Component Functionality
1. Run `npm run storybook:local` to start Storybook
2. Navigate to QuoteBlock stories
3. Test all three variants (compact, standard, extended)
4. Verify quote marks display correctly with proper styling
5. Test error handling with invalid avatar paths
6. Check responsive behavior across different screen sizes
### Storybook Features
1. **Default Story**: Verify standard variant with typical content
2. **AllVariants Story**: Compare all three variants side-by-side
3. **ErrorState Story**: Test avatar error handling and initials fallback
4. **Controls Panel**: Modify quote text, author, source, and avatar
5. **Accessibility**: Run a11y tests to ensure compliance
### Production Build
1. Run `npm run storybook:restore` to switch to GitHub config
2. Run `npm run build-storybook` to build for production
3. Verify fonts load correctly and quotes display properly
4. Test deployment to GitHub Pages
## Notes
### Technical Implementation
- **Next.js Image**: Optimized avatar loading with proper error handling
- **CSS Pseudo-elements**: Quote marks injected via `::before` and `::after`
- **Container Queries**: Prepared for future responsive enhancements
- **Semantic HTML**: Proper use of `<blockquote>`, `<cite>`, and ARIA attributes
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Add QuoteBlock Component with Storybook Integration
Overview
This PR introduces a new QuoteBlock component that displays inspirational governance quotes with author attribution and decorative geometric elements. The component features three responsive variants (compact, standard, extended), comprehensive error handling, and full Storybook integration with accessibility compliance.
Changes
New QuoteBlock Component (
app/components/QuoteBlock.js)QuoteDecor Component (
app/components/QuoteDecor.js)Storybook Integration (
stories/QuoteBlock.stories.js)Storybook Configuration Updates
Screenshots
How to Test
Component Functionality
npm run storybook:localto start StorybookStorybook Features
Production Build
npm run storybook:restoreto switch to GitHub confignpm run build-storybookto build for productionNotes
Technical Implementation
::beforeand::after<blockquote>,<cite>, and ARIA attributes