Quote Block #12

2025-08-26T21:30:00Z

an.di commented

2025-08-26 21:30:00 +00:00

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

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

Screenshot 2025-08-26 at 3.28.10 PM.png

90 KiB

Screenshot 2025-08-26 at 3.28.51 PM.png

147 KiB

Screenshot 2025-08-26 at 3.29.20 PM.png

153 KiB

Screenshot 2025-08-26 at 3.29.49 PM.png

191 KiB

an.di added 8 commits 2025-08-26 21:30:00 +00:00

Quote Block default breakpoint added 44a26cb8ea

Quote Block md breakpoint ccee34f5c8

Quote Block lg breakpoint f1dbfbfdac