DRAFT - DO NOT MERGE - TEST PR ONLY #3551
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✨ New Features: - Product comparison with up to 4 products - Side drawer for quick comparison management - Dedicated comparison page with responsive design - Floating comparison badge for easy access - localStorage persistence across sessions 🏗️ Implementation: - ComparisonProvider context for global state management - useComparison hook for easy integration - CompareButton component with icon and button variants - ComparisonDrawer for quick product management - ComparisonBadge floating indicator - ProductComparison page with detailed comparison table 🔧 Integration Points: - Added compare buttons to ProductTile components - Integrated comparison into ProductView (product detail page) - Enabled comparison on product list pages - Added /compare route for full comparison experience 🧪 Testing & Quality: - Comprehensive unit tests for hook and components - Accessibility features (ARIA labels, keyboard navigation) - Internationalization support with react-intl - Error handling and user feedback via toasts 📱 User Experience: - Responsive design (table on desktop, cards on mobile) - Smooth animations and transitions - Toast notifications for user feedback - Maximum 4 products limit with duplicate prevention 📚 Documentation: - Complete feature documentation in PRODUCT_COMPARISON.md - Code examples and usage patterns - API documentation for all components and hooks This feature enables users to compare products side-by-side with a seamless, accessible, and responsive experience following PWA Kit best practices.
|
Thanks for the contribution! Before we can merge this, we need @szirpe to sign the Salesforce Inc. Contributor License Agreement. |
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
szirpesf
changed the title
rszirpe
reviewed
Dec 30, 2025
| duration: 2000 | ||
| }) | ||
| } | ||
| } catch (error) { |
rszirpe
reviewed
Dec 30, 2025
| expect(screen.getByText(/removed from comparison/i)).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('prevents adding when maximum products reached', async () => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a complete product comparison feature that allows users to compare up to 4 products side-by-side, with persistent state across browser sessions.
Features Added
Core Functionality
New Components
/compareIntegration Points
Technical Details
Files Added
PRODUCT_COMPARISON.md- Complete feature documentationapp/components/compare-button/- Button component with testsapp/components/comparison-badge/- Floating badge componentapp/components/comparison-drawer/- Side drawer componentapp/contexts/comparison-provider.jsx- Context providerapp/hooks/use-comparison.js- Hook with testsapp/pages/product-comparison/- Comparison pageUser Experience
Accessibility
Testing
Documentation
Complete documentation in
PRODUCT_COMPARISON.mdincluding: